diff --git a/CLAUDE.md b/CLAUDE.md
index f9aaee4..0bb3f98 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -61,10 +61,15 @@ Environments: `src/environments/environment.ts` (`useMocks:false`), `environment
   policy-editor-page}`; darunter `policy-editor-page/policy-builder/` (**Kern-Feature**, Wizard mit
   `components/`, `metadata/`, `validators/`, `helpers/`).
 - `ui/` — wiederverwendbares Design-System auf Angular Material (`con-x-*`-Komponenten).
-- `services/` — u.a. `services/policies/policy.service.ts` (HTTP-CRUD) und
-  `services/policies/policy-mapper/policy-odrl.mapper.ts` (Domänenmodell → ODRL/EDC).
+- `services/` — u.a. `services/policies/policy.service.ts` (HTTP-CRUD),
+  `services/policies/policy-mapper/policy-odrl.mapper.ts` (Domänenmodell → ODRL/EDC) und
+  `services/http/` (`http-error.interceptor.ts` loggt fehlgeschlagene Requests,
+  `http-error.helper.ts` wählt den i18n-Key nach Statuscode).
 - `shared/` — `types/` (Modelle), `pipes/`, `adapters/`.
 - `mocks/` — MirageJS-Server + Mock-Daten.
+- `src/fonts/` — selbst gehostete Schriften (Montserrat, Material Icons), eingebunden über
+  `src/styles/_fonts.scss`. **Keine** Google-Fonts-Links in `index.html` (Herkunft & Lizenzen:
+  `src/fonts/README.md`).
 
 Routing ist **lazy** (`app.routes.ts`). **Pfad-Aliase** statt Relativimporte:
 `@pages/* @ui/* @services/* @shared/* @mocks/* @env @features/policies/builder/*`.
@@ -127,6 +132,37 @@ Zielniveau **WCAG 2.2 AA** (Grundausstattung). Details & Restrisiken: `docs/acce
 - **Prüfung:** `templateAccessibility`-Regeln laufen in `npm run lint`; ergänzend manuell
   (Tastatur, NVDA, Zoom, axe/Lighthouse).
 
+### Sicherheits-Konventionen
+
+Aus dem OWASP-Top-10-Audit abgeleitet; bitte einhalten, sonst kommen die Befunde zurück.
+
+- **Ein HTTP-Response ist Eingabe.** `http.get<Policy>()` prüft zur Laufzeit nichts — der Typ
+  ist ein Compile-Zeit-Versprechen. Daten aus der API vor der Verwendung validieren:
+  unbekannte Constraint-Typen über `keepKnownConstraints()` / `isKnownConstraintType()`
+  aussortieren (ein Index-Zugriff mit unbekanntem Typ liefert `undefined` und wirft beim
+  Rendern).
+- **Nie ungeprüfte Werte als Transloco-Parameter.** Transloco durchsucht das Ergebnis einer
+  Ersetzung erneut nach Platzhaltern; ein Wert mit `{{…}}` wird ein zweites Mal aufgelöst und
+  kann die Schleife zum Nicht-Terminieren bringen. Werte gegen die Metadaten-Registry prüfen
+  (`USE_CASE_OPTIONS`, `FRAMEWORK_AGREEMENT_VALUE`), sonst `'—'`.
+- **i18n-Keys nie aus Daten zusammensetzen** — immer aus der Registry entnehmen.
+- **`encodeURIComponent` für jeden Wert in einer URL,** auch für Route-Parameter: Angular
+  dekodiert `%2F`/`%2E`, der Browser normalisiert anschließend `..` im Pfad.
+- **`policyId` ist ein Identifier** (wird zum JSON-LD-`@id`) — Zeichensatz-Validierung in
+  `constraint-validators.ts` beibehalten.
+- **HTTP-Fehler nie verwerfen:** `error: (err: unknown) => …` mit
+  `httpErrorMessageKey(err, '<fachlicher Fallback>')`. Nie Request-/Response-Bodies loggen.
+- **Dev-Werkzeug gehört nicht ins Prod-Bundle.** `@if` steuert nur das Rendern; das Bundling
+  entscheiden die `import`-Statements. Neue Mock-/Debug-Komponenten über `fileReplacements`
+  ausschließen — dabei eine **Barrel-Datei** ersetzen, nicht die Komponente selbst
+  (Angular behält die `templateUrl`-Zuordnung am Pfad, sonst bricht der AOT-Build mit
+  `TS2339` ab; Muster: `ui/mock-data-switcher/index.ts`).
+- **Keine externen Laufzeit-Ressourcen** (Fonts, Skripte, Styles von fremden Domains) —
+  sie übertragen die Nutzer-IP und machen Builds vom Netz abhängig.
+- **Produktion baut mit `security.autoCsp` und `subresourceIntegrity`.** Wer an Critical-CSS
+  oder `index.html` schraubt, prüft das Ergebnis **im Browser** gegen den Prod-Build
+  (Stylesheet aktiv? CSP-Violations?), nicht nur im HTML-Quelltext.
+
 ### Architektur-Entscheidungen
 - **Signal-first State** — kein externes State-Management.
 - **Trennung Domänenmodell ↔ externes ODRL/EDC-Format.** Die Übersetzung ist isoliert im
@@ -143,7 +179,8 @@ Zielniveau **WCAG 2.2 AA** (Grundausstattung). Details & Restrisiken: `docs/acce
   startet den Mock-Server selbst (via `start-server-and-test`), wartet auf `:4200`, fährt Cypress
   headless und stoppt danach. Deckt die **Hauptflüsse** gegen den Mock-Modus ab: Policy erstellen,
   ansehen, bearbeiten, löschen, Liste durchsuchen/filtern; inkl. empty-/no-results-States. Specs in
-  `cypress/e2e/*.cy.ts`. (`npm run cy:run` fährt nur Cypress gegen einen bereits laufenden Server.)
+  `cypress/e2e/*.cy.ts` (aktuell **20 Tests** in 6 Specs). (`npm run cy:run` fährt nur Cypress
+  gegen einen bereits laufenden Server.)
   - **Selektor-Konvention:** UI-Elemente werden über `data-cy="…"`-Attribute angesprochen
     (entkoppelt von CSS-Klassen & i18n-Text). Custom-Commands in `cypress/support/commands.ts`:
     `cy.getByCy(sel)` und `cy.visitWithMode(path, 'empty'|'few'|'many')` (setzt
diff --git a/frontend/angular.json b/frontend/angular.json
index fc10b85..a6fd791 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -87,9 +87,17 @@
                 {
                   "replace": "src/app/mocks/mock.service.ts",
                   "with": "src/app/mocks/mock.service.production.ts"
+                },
+                {
+                  "replace": "src/app/ui/mock-data-switcher/index.ts",
+                  "with": "src/app/ui/mock-data-switcher/index.production.ts"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "all",
+              "subresourceIntegrity": true,
+              "security": {
+                "autoCsp": true
+              }
             },
             "mocks": {
               "fileReplacements": [
diff --git a/frontend/cypress/e2e/policy-legal-text.cy.ts b/frontend/cypress/e2e/policy-legal-text.cy.ts
new file mode 100644
index 0000000..81c83f4
--- /dev/null
+++ b/frontend/cypress/e2e/policy-legal-text.cy.ts
@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+
+// Der auf der Detailseite angezeigte Rechtstext wird jedes Mal neu aus den Constraints
+// abgeleitet; rechtlich maßgeblich ist aber der beim Speichern übermittelte und persistierte
+// Text. Weichen beide voneinander ab, warnt die Seite (siehe `hasDivergingLegalText`).
+//
+// Hier wird der Gutfall abgesichert: eine über die UI gespeicherte Policy darf NIE eine
+// Warnung zeigen. Das ist der Regressionsschutz für die Ableitungslogik — ändert sie sich,
+// ohne dass `legalText` neu erzeugt wird, schlägt dieser Test an.
+//
+// Der Schlechtfall (manipulierter legalText bei unveränderten Constraints) lässt sich hier
+// nicht ehrlich nachstellen: MirageJS ersetzt XMLHttpRequest im Browser vollständig, und
+// cy.intercept sieht die Requests deshalb nie. Er ist stattdessen als Unit-Test auf
+// `hasDivergingLegalText` in legal-description.helper.spec.ts abgedeckt.
+
+// zugriff-konsortium-mitglieder: ACCESS mit einer MEMBERSHIP-Bedingung.
+const POLICY_ID = '00000000-0000-0000-0000-000000000002';
+
+describe('Policy – Rechtstext', () => {
+  it('zeigt nach dem Speichern über die UI keine Abweichungs-Warnung', () => {
+    cy.visitWithMode(`/policies/${POLICY_ID}/edit`, 'few');
+    cy.getByCy('submit-policy').click();
+
+    // Detailseite ist erreicht und der Rechtstext gerendert …
+    cy.getByCy('policy-title').should('exist');
+    cy.getByCy('legal-text').should('exist');
+    // … ohne dass gespeicherter und abgeleiteter Text auseinanderlaufen.
+    cy.getByCy('legal-text-diverged').should('not.exist');
+  });
+
+  it('zeigt für eine Policy ohne gespeicherten Rechtstext keine Warnung', () => {
+    // Die Seed-Datensätze tragen keinen legalText — ohne gespeicherten Text gibt es
+    // nichts zu vergleichen, und es darf kein Fehlalarm entstehen.
+    cy.visitWithMode(`/policies/${POLICY_ID}`, 'few');
+
+    cy.getByCy('legal-text').should('exist');
+    cy.getByCy('legal-text-diverged').should('not.exist');
+  });
+});
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fcfb001..75ba640 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,15 +8,15 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
-        "@angular/animations": "^21.2.0",
+        "@angular/animations": "^21.2.19",
         "@angular/cdk": "^21.2.2",
-        "@angular/common": "^21.2.0",
-        "@angular/compiler": "^21.2.0",
-        "@angular/core": "^21.2.0",
-        "@angular/forms": "^21.2.0",
+        "@angular/common": "^21.2.19",
+        "@angular/compiler": "^21.2.19",
+        "@angular/core": "^21.2.19",
+        "@angular/forms": "^21.2.19",
         "@angular/material": "^21.2.2",
-        "@angular/platform-browser": "^21.2.0",
-        "@angular/router": "^21.2.0",
+        "@angular/platform-browser": "^21.2.19",
+        "@angular/router": "^21.2.19",
         "@jsverse/transloco": "^8.3.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0"
@@ -24,7 +24,7 @@
       "devDependencies": {
         "@angular/build": "^21.2.2",
         "@angular/cli": "^21.2.2",
-        "@angular/compiler-cli": "^21.2.0",
+        "@angular/compiler-cli": "^21.2.19",
         "@eslint/js": "^10.0.1",
         "@vitest/coverage-v8": "^4.1.10",
         "angular-eslint": "21.3.0",
@@ -438,9 +438,9 @@
       }
     },
     "node_modules/@angular/animations": {
-      "version": "21.2.18",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-21.2.18.tgz",
-      "integrity": "sha512-zN++Qb4Oz4x/5LYHuW9FItm7aHsV4HBz518GT25QusMvGymh+4io2TWhPYB0C9jx+g5q8GeQLd3c8r42yLrRxw==",
+      "version": "21.2.19",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-21.2.19.tgz",
+      "integrity": "sha512-qC0mviselvpKq2ID9bT+USnCsHKfwZAifkUr5A4h/WCzXvUvpVNWp/RPhGcKeOR+seg3EO5GtIZyblwiRlhzrA==",
       "deprecated": "@angular/animations is deprecated. Use `animate.enter` and `animate.leave` instead. For more information see: https://v22.angular.dev/guide/animations.",
       "license": "MIT",
       "dependencies": {
@@ -450,7 +450,7 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/core": "21.2.18"
+        "@angular/core": "21.2.19"
       }
     },
     "node_modules/@angular/build": {
@@ -605,9 +605,9 @@
       }
     },
     "node_modules/@angular/common": {
-      "version": "21.2.18",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.2.18.tgz",
-      "integrity": "sha512-gZugZ8gX/KkACIZ3/ekoImLu5z8a0Iu9O5b84kh8e+++VUjmkmd19IygBsq/8/fF3vKf0UcIKcx3P6A/gb2DJw==",
+      "version": "21.2.19",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.2.19.tgz",
+      "integrity": "sha512-Rvo/VXI0kUmfQT7+OeAjv526OJlf/WrLnJq1Tz84Jkyv9bs9SOMTCT6m4+boo8gxVNdrcxvGU3Q0o2jZzKceSg==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -616,14 +616,14 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/core": "21.2.18",
+        "@angular/core": "21.2.19",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/compiler": {
-      "version": "21.2.18",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.2.18.tgz",
-      "integrity": "sha512-ccnDuKLuzIa0ayijR+alarsHNWIksuGV/lxGTZ0t6/0+B6J/RXupz6M2IO6ZHHEcg8r7pcrLCUBTyp3FoiRJrg==",
+      "version": "21.2.19",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.2.19.tgz",
+      "integrity": "sha512-vuF5i1t14ftJiHXVVLgDYLWkT99QuajphcUHy1VZaMX3FiqSGXRV62g+R2RMxL0OJ5C1ai8xTHKPx9n1lQFyFg==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -633,9 +633,9 @@
       }
     },
     "node_modules/@angular/compiler-cli": {
-      "version": "21.2.18",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-21.2.18.tgz",
-      "integrity": "sha512-L5zbIp7YfTTB4I4xT33FgEBanzhppNejzZX0HJOEqKDyDL2jXq+flt83lE0XVuRJ6/zrG+UKj0B+y/CK6Ro7Wg==",
+      "version": "21.2.19",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-21.2.19.tgz",
+      "integrity": "sha512-QxWqUvhTWgyYPPkfpupOUIEa3Y5cbzMilaFgRNpkvFy6teARw5Izsd7RxUbj3Tp3xJOi1MtumNmkxLxmv3iv7A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -656,7 +656,7 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "21.2.18",
+        "@angular/compiler": "21.2.19",
         "typescript": ">=5.9 <6.1"
       },
       "peerDependenciesMeta": {
@@ -666,9 +666,9 @@
       }
     },
     "node_modules/@angular/core": {
-      "version": "21.2.18",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.2.18.tgz",
-      "integrity": "sha512-AG4bb6GU0+qp+vVBjc/IhSPjgcRX8QsCb8jzN8dDyhnjsyuuG/LlIiU0l6n65BI9SGKE9m6TfsJ1ObkkAiE5KQ==",
+      "version": "21.2.19",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.2.19.tgz",
+      "integrity": "sha512-PVoXD1kBexOJLkFzKx2zBY/0oZJXGru0eGn2hu0q5n3vkZlYsR1yRolfGenK1gZE48Qibiw/ttg/X/pAIPEZGg==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -677,7 +677,7 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "21.2.18",
+        "@angular/compiler": "21.2.19",
         "rxjs": "^6.5.3 || ^7.4.0",
         "zone.js": "~0.15.0 || ~0.16.0"
       },
@@ -691,9 +691,9 @@
       }
     },
     "node_modules/@angular/forms": {
-      "version": "21.2.18",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.2.18.tgz",
-      "integrity": "sha512-TrRuiNjIzrrNtQgpJVH5gultQrvBlawa+tTzIpxBfIqLpkHrTPZLtYu118EUk6jhWzgRhKYUorInjJe+sSxC+w==",
+      "version": "21.2.19",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.2.19.tgz",
+      "integrity": "sha512-tEw8cz2UU6VSB+ReJN86k87nRdLRXGi+8SZhoRl2dFu2iReIO3S6kJAVTH7Y9kdrokqTPhWG+KNEzWgqhdjXOg==",
       "license": "MIT",
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
@@ -703,9 +703,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "21.2.18",
-        "@angular/core": "21.2.18",
-        "@angular/platform-browser": "21.2.18",
+        "@angular/common": "21.2.19",
+        "@angular/core": "21.2.19",
+        "@angular/platform-browser": "21.2.19",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
@@ -727,9 +727,9 @@
       }
     },
     "node_modules/@angular/platform-browser": {
-      "version": "21.2.18",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.2.18.tgz",
-      "integrity": "sha512-zltF+3HrlgtZbYg8U98LhG0dyGm1aHT3Px8//9wjqi/TUY8UlHsYKByL197QtVWDBjf/dekzXdz5c+iyVtanLQ==",
+      "version": "21.2.19",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.2.19.tgz",
+      "integrity": "sha512-YMguYVhdkV8tr9MvbN+VpMjbdmsYq6g12M9WPvAYM51BkL2iREbWeoXDGmfCw9G0it6+0pMdgrSPFFUFuOqpAQ==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -738,9 +738,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/animations": "21.2.18",
-        "@angular/common": "21.2.18",
-        "@angular/core": "21.2.18"
+        "@angular/animations": "21.2.19",
+        "@angular/common": "21.2.19",
+        "@angular/core": "21.2.19"
       },
       "peerDependenciesMeta": {
         "@angular/animations": {
@@ -749,9 +749,9 @@
       }
     },
     "node_modules/@angular/router": {
-      "version": "21.2.18",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.2.18.tgz",
-      "integrity": "sha512-Xix19uG1YthC8IslhWKSfPdhscVWREBGVJZW2OnRmLef8F7DvhF49S6vOywaBo+Uahe0egkmgWDNpEwxAzsgLw==",
+      "version": "21.2.19",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.2.19.tgz",
+      "integrity": "sha512-cKO/aq1xEMvgS29jFUc/Y3KsgEzHnwOw6sEL+UQZkZTmGD5YrYv8Yvj05GDMEUYbvDxBd5DixVVEbH38lyQKqA==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -760,9 +760,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "21.2.18",
-        "@angular/core": "21.2.18",
-        "@angular/platform-browser": "21.2.18",
+        "@angular/common": "21.2.19",
+        "@angular/core": "21.2.19",
+        "@angular/platform-browser": "21.2.19",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
diff --git a/frontend/package.json b/frontend/package.json
index ed3b035..97bbbb1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,15 +22,15 @@
   "private": true,
   "packageManager": "npm@11.0.0",
   "dependencies": {
-    "@angular/animations": "^21.2.0",
+    "@angular/animations": "^21.2.19",
     "@angular/cdk": "^21.2.2",
-    "@angular/common": "^21.2.0",
-    "@angular/compiler": "^21.2.0",
-    "@angular/core": "^21.2.0",
-    "@angular/forms": "^21.2.0",
+    "@angular/common": "^21.2.19",
+    "@angular/compiler": "^21.2.19",
+    "@angular/core": "^21.2.19",
+    "@angular/forms": "^21.2.19",
     "@angular/material": "^21.2.2",
-    "@angular/platform-browser": "^21.2.0",
-    "@angular/router": "^21.2.0",
+    "@angular/platform-browser": "^21.2.19",
+    "@angular/router": "^21.2.19",
     "@jsverse/transloco": "^8.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
@@ -38,7 +38,7 @@
   "devDependencies": {
     "@angular/build": "^21.2.2",
     "@angular/cli": "^21.2.2",
-    "@angular/compiler-cli": "^21.2.0",
+    "@angular/compiler-cli": "^21.2.19",
     "@eslint/js": "^10.0.1",
     "@vitest/coverage-v8": "^4.1.10",
     "angular-eslint": "21.3.0",
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
index 80c664d..2774d49 100644
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
@@ -1,5 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
 .app-content {
-  min-height: calc(100vh - 64px);
+  flex: 1;
 
   // Programmatic focus target for skip link / route changes — the landmark
   // itself is not an interactive control, so no visible ring is needed.
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 14d08c1..4a375e2 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -6,7 +6,7 @@ import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { filter } from 'rxjs';
 import { environment } from '@env';
 import { HeaderComponent } from '@ui/header/header.component';
-import { MockDataSwitcherComponent } from '@ui/mock-data-switcher/mock-data-switcher.component';
+import { MockDataSwitcherComponent } from '@ui/mock-data-switcher';
 
 @Component({
   selector: 'app-root',
diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts
index 297812d..2691f12 100644
--- a/frontend/src/app/app.config.ts
+++ b/frontend/src/app/app.config.ts
@@ -9,13 +9,14 @@ import {
 import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/de';
 import { provideRouter, TitleStrategy } from '@angular/router';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { MAT_DATE_LOCALE, MAT_DATE_FORMATS, DateAdapter } from '@angular/material/core';
 import { provideTransloco } from '@jsverse/transloco';
 import { TranslocoHttpLoader } from './services/transloco-loader.service';
 import { ConXTitleStrategy } from '@services/a11y/title-strategy.service';
 import { ConXDateAdapter } from '@shared/adapters/con-x-date.adapter';
+import { httpErrorInterceptor } from '@services/http/http-error.interceptor';
 import { MockService } from '@mocks/mock.service';
 import { environment } from '@env';
 
@@ -49,7 +50,7 @@ export const appConfig: ApplicationConfig = {
       environment.useMocks ? inject(MockService).mirageJsServer() : Promise.resolve(),
     ),
     provideRouter(routes),
-    provideHttpClient(),
+    provideHttpClient(withInterceptors([httpErrorInterceptor])),
     provideAnimationsAsync(),
     { provide: TitleStrategy, useClass: ConXTitleStrategy },
     { provide: LOCALE_ID, useValue: 'de-DE' },
diff --git a/frontend/src/app/mocks/data/policies/mocked-policies.ts b/frontend/src/app/mocks/data/policies/mocked-policies.ts
index 36fa824..ef7fb89 100644
--- a/frontend/src/app/mocks/data/policies/mocked-policies.ts
+++ b/frontend/src/app/mocks/data/policies/mocked-policies.ts
@@ -5,9 +5,24 @@ import { BehaviorSubject } from 'rxjs';
 
 export type PolicyMockMode = 'empty' | 'few' | 'many';
 
-const policyMockMode$ = new BehaviorSubject<PolicyMockMode>(
-  (localStorage.getItem('mock-policy-mode') as PolicyMockMode) || 'few',
-);
+const MOCK_MODE_KEY = 'mock-policy-mode';
+const DEFAULT_MOCK_MODE: PolicyMockMode = 'few';
+
+/**
+ * `localStorage` ist nicht immer verfügbar: bei blockiertem Site-Storage (Enterprise-Policy,
+ * Safari-Lockdown) oder in einem eingebetteten `<iframe>` wirft schon der Zugriff einen
+ * `SecurityError`. Das hier läuft beim Auswerten des Moduls — also noch vor
+ * `bootstrapApplication()`, wo der `catch` in `main.ts` nicht mehr greifen würde.
+ */
+function readStoredMockMode(): PolicyMockMode {
+  try {
+    return (localStorage.getItem(MOCK_MODE_KEY) as PolicyMockMode) || DEFAULT_MOCK_MODE;
+  } catch {
+    return DEFAULT_MOCK_MODE;
+  }
+}
+
+const policyMockMode$ = new BehaviorSubject<PolicyMockMode>(readStoredMockMode());
 
 export function getPolicyMockMode$() {
   return policyMockMode$.asObservable();
@@ -18,7 +33,12 @@ export function getCurrentPolicyMockMode(): PolicyMockMode {
 }
 
 export function setPolicyMockMode(mode: PolicyMockMode): void {
-  localStorage.setItem('mock-policy-mode', mode);
+  try {
+    localStorage.setItem(MOCK_MODE_KEY, mode);
+  } catch {
+    // Ohne Persistenz gilt der Modus nur für diese Session — kein Grund, den Switcher
+    // scheitern zu lassen.
+  }
   policyMockMode$.next(mode);
 }
 
@@ -182,6 +202,7 @@ export function createMockedPolicy(data: {
   policyId: string;
   category: PolicyCategory;
   constraints: Constraint[];
+  legalText?: string;
 }): Policy {
   if (policies.length === 0 && getCurrentPolicyMockMode() !== 'empty') {
     initializePolicies();
@@ -194,6 +215,9 @@ export function createMockedPolicy(data: {
     constraints: data.constraints ?? [],
     createdAt: now,
     updatedAt: now,
+    // Der Rechtstext wird vom Client erzeugt und laut Backend-Vertrag unverändert
+    // persistiert und wieder ausgeliefert — der Mock bildet genau das ab.
+    legalText: data.legalText,
   };
   policies = [newPolicy, ...policies];
   return newPolicy;
@@ -205,6 +229,7 @@ export function updateMockedPolicy(
     policyId: string;
     category: PolicyCategory;
     constraints: Constraint[];
+    legalText?: string;
   },
 ): Policy | undefined {
   if (policies.length === 0 && getCurrentPolicyMockMode() !== 'empty') {
@@ -218,6 +243,7 @@ export function updateMockedPolicy(
     policyId: data.policyId,
     category: data.category,
     constraints: data.constraints ?? [],
+    legalText: data.legalText,
     updatedAt: new Date().toISOString(),
   };
   policies[index] = updated;
diff --git a/frontend/src/app/pages/policies/policies-overview-page/policies-overview-page.component.ts b/frontend/src/app/pages/policies/policies-overview-page/policies-overview-page.component.ts
index ba6309b..9c8eef6 100644
--- a/frontend/src/app/pages/policies/policies-overview-page/policies-overview-page.component.ts
+++ b/frontend/src/app/pages/policies/policies-overview-page/policies-overview-page.component.ts
@@ -15,6 +15,7 @@ import { Policy, PolicyCategory } from '@shared/types/policy.model';
 import { ConXPolicyTableComponent } from '@ui/policy-table/con-x-policy-table.component';
 import { ConXEmptyStateComponent } from '@ui/empty-state/con-x-empty-state.component';
 import { ConXButtonComponent } from '@ui/button/con-x-button.component';
+import { httpErrorMessageKey } from '@services/http/http-error.helper';
 
 @Component({
   selector: 'app-policies-overview-page',
@@ -92,8 +93,10 @@ export class PoliciesOverviewPageComponent implements OnInit {
         this.policies.set(data);
         this.loading.set(false);
       },
-      error: () => {
-        this.notification.error(this.transloco.translate('policies.notifications.loadError'));
+      error: (err: unknown) => {
+        this.notification.error(
+          this.transloco.translate(httpErrorMessageKey(err, 'policies.notifications.loadError')),
+        );
         this.loading.set(false);
         this.error.set(true);
       },
diff --git a/frontend/src/app/pages/policies/policy-detail-page/policy-detail-page.component.html b/frontend/src/app/pages/policies/policy-detail-page/policy-detail-page.component.html
index 7ec6d5a..32d506c 100644
--- a/frontend/src/app/pages/policies/policy-detail-page/policy-detail-page.component.html
+++ b/frontend/src/app/pages/policies/policy-detail-page/policy-detail-page.component.html
@@ -79,6 +79,20 @@ <h2 class="pd__section-title">{{ t('policyDetail.sections.permissions') }}</h2>
               </mat-panel-title>
             </mat-expansion-panel-header>
             <div class="pd__legal-text" data-cy="legal-text">
+              @if (legalTextDiverges()) {
+                <div class="pd__legal-warning" role="alert" data-cy="legal-text-diverged">
+                  <mat-icon class="pd__legal-warning-icon" aria-hidden="true">warning</mat-icon>
+                  <div>
+                    <p>{{ t('policyDetail.legalTextDiverged') }}</p>
+                    <details class="pd__legal-stored">
+                      <summary>{{ t('policyDetail.legalTextStored') }}</summary>
+                      <pre class="pd__legal-stored-text" data-cy="legal-text-stored">{{
+                        storedLegalText()
+                      }}</pre>
+                    </details>
+                  </div>
+                </div>
+              }
               <p class="pd__legal-intro">{{ legalDescription().intro }}</p>
               @if (legalDescription().clauses.length) {
                 <ol class="pd__legal-list">
diff --git a/frontend/src/app/pages/policies/policy-detail-page/policy-detail-page.component.scss b/frontend/src/app/pages/policies/policy-detail-page/policy-detail-page.component.scss
index 27e4168..4cb770a 100644
--- a/frontend/src/app/pages/policies/policy-detail-page/policy-detail-page.component.scss
+++ b/frontend/src/app/pages/policies/policy-detail-page/policy-detail-page.component.scss
@@ -1,3 +1,5 @@
+@use 'mixins' as *;
+
 .pd {
   display: flex;
   flex-direction: column;
@@ -194,6 +196,53 @@
     font-size: 0.9375rem;
   }
 
+  &__legal-warning {
+    display: flex;
+    gap: 0.625rem;
+    align-items: flex-start;
+    margin: 0 0 1rem;
+    padding: 0.75rem 0.875rem;
+    border: 1px solid var(--con-x-warning, #f08109);
+    border-left-width: 4px;
+    border-radius: 4px;
+    // --con-x-warning (#f08109) mit 8 % Deckung über Weiß, vorberechnet:
+    // color-mix() wäre hier deutlich mehr CSS und reißt das 4-kB-Komponentenbudget.
+    background: #fef5eb;
+
+    p {
+      margin: 0;
+      font-weight: 600;
+    }
+  }
+
+  &__legal-warning-icon {
+    flex: none;
+    color: var(--con-x-warning, #f08109);
+  }
+
+  &__legal-stored {
+    margin-top: 0.5rem;
+
+    summary {
+      cursor: pointer;
+      font-size: 0.875rem;
+      color: var(--con-x-text-secondary, #555555);
+
+      @include focus-ring(2px);
+    }
+  }
+
+  &__legal-stored-text {
+    margin: 0.5rem 0 0;
+    padding: 0.625rem;
+    border-radius: 4px;
+    background: var(--con-x-bg-page, #fafafa);
+    font-size: 0.8125rem;
+    line-height: 1.6;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
   &__legal-intro {
     margin: 0 0 0.75rem;
   }
diff --git a/frontend/src/app/pages/policies/policy-detail-page/policy-detail-page.component.ts b/frontend/src/app/pages/policies/policy-detail-page/policy-detail-page.component.ts
index a9a4e4f..8a4112c 100644
--- a/frontend/src/app/pages/policies/policy-detail-page/policy-detail-page.component.ts
+++ b/frontend/src/app/pages/policies/policy-detail-page/policy-detail-page.component.ts
@@ -21,7 +21,12 @@ import { ConXCategoryBadgeComponent } from '@ui/category-badge/con-x-category-ba
 import { ConfirmDeleteDialogComponent } from '@ui/confirm-delete-dialog/confirm-delete-dialog.component';
 import { ConstraintCardComponent } from '@features/policies/builder/components/constraint-card/constraint-card.component';
 import { policyToOdrl } from '@services/policies/policy-mapper/policy-odrl.mapper';
-import { buildLegalClauses } from '@features/policies/builder/helpers/legal-description.helper';
+import {
+  buildLegalClauses,
+  hasDivergingLegalText,
+} from '@features/policies/builder/helpers/legal-description.helper';
+import { keepKnownConstraints } from '@features/policies/builder/metadata/constraint-metadata';
+import { httpErrorMessageKey } from '@services/http/http-error.helper';
 
 @Component({
   selector: 'app-policy-detail-page',
@@ -70,6 +75,15 @@ export class PolicyDetailPageComponent implements OnInit {
     return buildLegalClauses(p, this.transloco);
   });
 
+  /** Der gespeicherte, rechtlich maßgebliche Text — nicht die abgeleitete Anzeigefassung. */
+  readonly storedLegalText = computed(() => this.policy()?.legalText ?? null);
+
+  /** Siehe {@link hasDivergingLegalText}: warnt, wenn gespeichert ≠ abgeleitet. */
+  readonly legalTextDiverges = computed(() => {
+    const p = this.policy();
+    return p ? hasDivergingLegalText(p, this.transloco) : false;
+  });
+
   ngOnInit(): void {
     const id = this.route.snapshot.paramMap.get('id');
     if (!id) {
@@ -78,17 +92,36 @@ export class PolicyDetailPageComponent implements OnInit {
     }
     this.policyService.getPolicyById(id).subscribe({
       next: (data) => {
-        this.policy.set(data);
+        this.policy.set(this.withKnownConstraintsOnly(data));
         this.loading.set(false);
       },
-      error: () => {
-        this.notification.error(this.transloco.translate('policyDetail.notifications.loadError'));
+      error: (err: unknown) => {
+        this.notification.error(
+          this.transloco.translate(
+            httpErrorMessageKey(err, 'policyDetail.notifications.loadError'),
+          ),
+        );
         this.loading.set(false);
         this.router.navigate(['/policies']);
       },
     });
   }
 
+  /**
+   * Verwirft Constraints, deren Typ die Metadaten-Registry nicht kennt, und weist den
+   * Nutzer darauf hin. Ohne diesen Filter würde `app-constraint-card` beim Rendern auf
+   * `undefined` zugreifen und die gesamte Detailseite mit einem TypeError abbrechen.
+   */
+  private withKnownConstraintsOnly(policy: Policy): Policy {
+    const constraints = keepKnownConstraints(policy.constraints);
+    if (constraints.length !== policy.constraints.length) {
+      this.notification.warning(
+        this.transloco.translate('policyDetail.notifications.unknownConstraints'),
+      );
+    }
+    return { ...policy, constraints };
+  }
+
   deletePolicy(): void {
     const p = this.policy();
     if (!p) return;
@@ -107,9 +140,11 @@ export class PolicyDetailPageComponent implements OnInit {
             );
             this.router.navigate(['/policies']);
           },
-          error: () =>
+          error: (err: unknown) =>
             this.notification.error(
-              this.transloco.translate('policyDetail.notifications.deleteError'),
+              this.transloco.translate(
+                httpErrorMessageKey(err, 'policyDetail.notifications.deleteError'),
+              ),
             ),
         });
       }
diff --git a/frontend/src/app/pages/policies/policy-editor-page/policy-builder/helpers/legal-description.helper.spec.ts b/frontend/src/app/pages/policies/policy-editor-page/policy-builder/helpers/legal-description.helper.spec.ts
index bd24476..80a316c 100644
--- a/frontend/src/app/pages/policies/policy-editor-page/policy-builder/helpers/legal-description.helper.spec.ts
+++ b/frontend/src/app/pages/policies/policy-editor-page/policy-builder/helpers/legal-description.helper.spec.ts
@@ -1,10 +1,15 @@
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi, type MockedFunction } from 'vitest';
 
 import { TranslocoService } from '@jsverse/transloco';
 import { Constraint } from '@shared/types/constraint.model';
 import { Policy } from '@shared/types/policy.model';
+import { FRAMEWORK_AGREEMENT_VALUE } from '@features/policies/builder/metadata/use-case-options.data';
 
-import { buildLegalClauses, buildLegalDescription } from './legal-description.helper';
+import {
+  buildLegalClauses,
+  buildLegalDescription,
+  hasDivergingLegalText,
+} from './legal-description.helper';
 
 /**
  * Fake-TranslocoService: gibt den i18n-Key deterministisch zurück (bei Parametern als
@@ -85,12 +90,15 @@ describe('buildLegalDescription', () => {
   });
 
   describe('Use-Case-Liste (joinList)', () => {
+    // Nur IDs aus USE_CASE_OPTIONS verwenden: unbekannte IDs werden bewusst zu "—"
+    // zusammengefaltet (siehe "Schutz vor Transloco-Parameter-Injection") und würden
+    // die Trennlogik hier nicht mehr sichtbar machen.
     function useCaseList(useCases: string[]): string {
       const text = buildLegalDescription(
         draft('ACCESS', [{ type: 'USE_CASE', useCases }]),
         makeTransloco(),
       );
-      // Übersetzte Labels sind hier `useCase.<id ohne UC.-Präfix>`.
+      // Übersetzte Labels sind hier der i18n-Key aus der Registry, also `useCase.<id>`.
       const match = /legalDescription\.clause\.useCase\[list=(.+?)\]/.exec(text);
       return match![1];
     }
@@ -100,11 +108,15 @@ describe('buildLegalDescription', () => {
     });
 
     it('zwei Use-Cases → mit "&" verbunden', () => {
-      expect(useCaseList(['UC.geodata', 'UC.quality'])).toBe('useCase.geodata & useCase.quality');
+      expect(useCaseList(['UC.geodata', 'UC.quality-assurance'])).toBe(
+        'useCase.geodata & useCase.quality-assurance',
+      );
     });
 
     it('drei Use-Cases → Komma-getrennt, letztes mit "&"', () => {
-      expect(useCaseList(['UC.a', 'UC.b', 'UC.c'])).toBe('useCase.a, useCase.b & useCase.c');
+      expect(useCaseList(['UC.geodata', 'UC.material-testing', 'UC.bim-coordination'])).toBe(
+        'useCase.geodata, useCase.material-testing & useCase.bim-coordination',
+      );
     });
   });
 
@@ -200,12 +212,12 @@ describe('buildLegalDescription', () => {
       expect(text).toContain('start=—;end=—');
     });
 
-    it('unparsebares Datum → unverändert durchgereicht', () => {
+    it('unparsebares Datum → Platzhalter "—" statt Rohwert', () => {
       const text = buildLegalDescription(
         draft('CONTRACT', [{ type: 'DATE_RANGE', startDate: 'not-a-date', endDate: 'not-a-date' }]),
         makeTransloco(),
       );
-      expect(text).toContain('start=not-a-date;end=not-a-date');
+      expect(text).toContain('start=—;end=—');
     });
   });
 
@@ -217,4 +229,150 @@ describe('buildLegalDescription', () => {
       expect(t.translate).toHaveBeenCalledWith('constraint.MEMBERSHIP.legalText', undefined, 'de');
     });
   });
+
+  /**
+   * Transloco durchsucht das Ergebnis einer Ersetzung ERNEUT nach Platzhaltern:
+   * `DefaultTranspiler.transpile()` läuft in einer `while`-Schleife über den bereits
+   * ersetzten String, und `interpolationMatcher` ist ein Getter, der jedes Mal ein
+   * frisches RegExp mit `lastIndex = 0` liefert. Ein Parameterwert, der selbst
+   * `{{…}}` enthält, wird dadurch ein zweites Mal aufgelöst — im Fall
+   * `{{agreement}}` → `{{agreement}}` ändert sich der String nie und die Schleife
+   * terminiert nicht (eingefrorener Browser-Tab).
+   *
+   * Constraint-Werte stammen nicht nur aus der UI, sondern auch aus
+   * `GET /v1/policies/:id`. Deshalb die Invariante: an `translate()` darf weder als
+   * Key noch als Parameterwert jemals ein Interpolations-Delimiter gelangen.
+   */
+  describe('Schutz vor Transloco-Parameter-Injection', () => {
+    const HOSTILE = '{{agreement}}';
+
+    function argumentsPassedTo(t: TranslocoService): string[] {
+      const calls = (t.translate as unknown as MockedFunction<TranslocoService['translate']>).mock
+        .calls;
+      return calls.flatMap(([key, params]) => [
+        String(key),
+        ...(params ? Object.values(params).map((v) => String(v)) : []),
+      ]);
+    }
+
+    const hostileConstraints: [string, Constraint][] = [
+      ['FRAMEWORK_AGREEMENT.agreement', { type: 'FRAMEWORK_AGREEMENT', agreement: HOSTILE }],
+      ['USE_CASE.useCases', { type: 'USE_CASE', useCases: [HOSTILE] }],
+      ['DATE_RANGE.startDate', { type: 'DATE_RANGE', startDate: HOSTILE, endDate: '2027-01-01' }],
+      ['DATE_RANGE.endDate', { type: 'DATE_RANGE', startDate: '2027-01-01', endDate: HOSTILE }],
+    ];
+
+    for (const [label, constraint] of hostileConstraints) {
+      it(`reicht keinen Interpolations-Delimiter an Transloco weiter: ${label}`, () => {
+        const t = makeTransloco();
+        buildLegalDescription(draft('CONTRACT', [constraint]), t, 'de');
+
+        for (const arg of argumentsPassedTo(t)) {
+          expect(arg).not.toContain('{{');
+          expect(arg).not.toContain('}}');
+        }
+      });
+    }
+
+    it('ersetzt einen unbekannten Rahmenvertrag durch den Platzhalter "—"', () => {
+      const text = buildLegalDescription(
+        draft('CONTRACT', [{ type: 'FRAMEWORK_AGREEMENT', agreement: 'FremderVertrag' }]),
+        makeTransloco(),
+      );
+      expect(text).toContain('agreement=—');
+    });
+
+    it('ersetzt einen unbekannten Use-Case durch den Platzhalter "—"', () => {
+      const text = buildLegalDescription(
+        draft('CONTRACT', [{ type: 'USE_CASE', useCases: ['UC.gibt-es-nicht'] }]),
+        makeTransloco(),
+      );
+      expect(text).toContain('list=—');
+    });
+
+    it('lässt bekannte Werte unverändert', () => {
+      const text = buildLegalDescription(
+        draft('CONTRACT', [
+          { type: 'FRAMEWORK_AGREEMENT', agreement: FRAMEWORK_AGREEMENT_VALUE },
+          { type: 'USE_CASE', useCases: ['UC.quality-assurance', 'UC.geodata'] },
+        ]),
+        makeTransloco(),
+      );
+      expect(text).toContain(`agreement=${FRAMEWORK_AGREEMENT_VALUE}`);
+      expect(text).toContain('list=useCase.quality-assurance & useCase.geodata');
+    });
+  });
+});
+
+describe('buildLegalClauses — unbekannter Constraint-Typ aus der API', () => {
+  const unknownConstraint = { type: 'FOO' } as unknown as Constraint;
+
+  it('übergeht den unbekannten Typ, statt beim Metadaten-Zugriff zu werfen', () => {
+    const { clauses } = buildLegalClauses(
+      draft('CONTRACT', [unknownConstraint, { type: 'MEMBERSHIP', value: 'active' }]),
+      makeTransloco(),
+    );
+
+    expect(clauses).toHaveLength(1);
+    expect(clauses[0].title).toBe('constraint.MEMBERSHIP.label');
+  });
+
+  it('fällt auf den "unrestricted"-Text zurück, wenn nur unbekannte Typen übrig bleiben', () => {
+    const { intro, clauses } = buildLegalClauses(
+      draft('CONTRACT', [unknownConstraint]),
+      makeTransloco(),
+    );
+
+    expect(intro).toBe('legalDescription.unrestricted');
+    expect(clauses).toEqual([]);
+  });
+});
+
+describe('hasDivergingLegalText', () => {
+  const policy: Pick<Policy, 'category' | 'constraints' | 'legalText'> = {
+    category: 'ACCESS',
+    constraints: [{ type: 'MEMBERSHIP', value: 'active' }],
+  };
+
+  /** Genau der Text, den PolicyBuilderComponent.submit() beim Speichern mitschickt. */
+  function derived(): string {
+    return buildLegalDescription(policy, makeTransloco(), 'de');
+  }
+
+  it('meldet keine Abweichung, wenn der gespeicherte Text der abgeleitete ist', () => {
+    expect(hasDivergingLegalText({ ...policy, legalText: derived() }, makeTransloco())).toBe(false);
+  });
+
+  it('meldet eine Abweichung, wenn der gespeicherte Text nicht zu den Constraints passt', () => {
+    expect(
+      hasDivergingLegalText(
+        { ...policy, legalText: 'Die Nutzung der Daten ist uneingeschränkt gestattet.' },
+        makeTransloco(),
+      ),
+    ).toBe(true);
+  });
+
+  it('meldet eine Abweichung, wenn die Constraints nachträglich verändert wurden', () => {
+    // Gespeicherter Text passt zur MEMBERSHIP-Policy, die Constraints sagen inzwischen
+    // etwas anderes — der Fall, den die Detailseite sonst stillschweigend überschreiben würde.
+    expect(
+      hasDivergingLegalText(
+        {
+          category: 'ACCESS',
+          constraints: [{ type: 'FRAMEWORK_AGREEMENT', agreement: FRAMEWORK_AGREEMENT_VALUE }],
+          legalText: derived(),
+        },
+        makeTransloco(),
+      ),
+    ).toBe(true);
+  });
+
+  it('meldet nichts, wenn kein Text gespeichert ist (ältere Datensätze)', () => {
+    expect(hasDivergingLegalText(policy, makeTransloco())).toBe(false);
+    expect(hasDivergingLegalText({ ...policy, legalText: undefined }, makeTransloco())).toBe(false);
+  });
+
+  it('behandelt einen leeren gespeicherten Text als Abweichung', () => {
+    expect(hasDivergingLegalText({ ...policy, legalText: '' }, makeTransloco())).toBe(true);
+  });
 });
diff --git a/frontend/src/app/pages/policies/policy-editor-page/policy-builder/helpers/legal-description.helper.ts b/frontend/src/app/pages/policies/policy-editor-page/policy-builder/helpers/legal-description.helper.ts
index 06a0554..9b75144 100644
--- a/frontend/src/app/pages/policies/policy-editor-page/policy-builder/helpers/legal-description.helper.ts
+++ b/frontend/src/app/pages/policies/policy-editor-page/policy-builder/helpers/legal-description.helper.ts
@@ -1,7 +1,20 @@
 import { TranslocoService } from '@jsverse/transloco';
 import { Constraint } from '@shared/types/constraint.model';
 import { Policy } from '@shared/types/policy.model';
-import { CONSTRAINT_METADATA } from '@features/policies/builder/metadata/constraint-metadata';
+import {
+  CONSTRAINT_METADATA,
+  keepKnownConstraints,
+} from '@features/policies/builder/metadata/constraint-metadata';
+import {
+  FRAMEWORK_AGREEMENT_VALUE,
+  USE_CASE_OPTIONS,
+} from '@features/policies/builder/metadata/use-case-options.data';
+
+/**
+ * Anzeigewert für Constraint-Inhalte, die nicht aus der Metadaten-Registry stammen —
+ * etwa weil das Backend einen unbekannten Use-Case oder Rahmenvertrag geliefert hat.
+ */
+const UNKNOWN_VALUE = '—';
 
 export interface LegalClause {
   /** Anzeigename des Constraints (Metadaten-Label), dient als Überschrift des Unterpunkts. */
@@ -30,7 +43,12 @@ export function buildLegalClauses(
   transloco: TranslocoService,
   lang?: string,
 ): LegalClauses {
-  if (!policy.constraints.length) {
+  // Constraints mit unbekanntem Typ übergehen: sie haben keinen Eintrag in der
+  // Metadaten-Registry, und der Zugriff auf `labelKey`/`legalTextKey` würde werfen.
+  // Für den Rechtstext ist Weglassen richtiger als ein Abbruch der ganzen Darstellung.
+  const constraints = keepKnownConstraints(policy.constraints);
+
+  if (!constraints.length) {
     return {
       intro: transloco.translate('legalDescription.unrestricted', undefined, lang),
       clauses: [],
@@ -45,7 +63,7 @@ export function buildLegalClauses(
     lang,
   );
 
-  const clauses = policy.constraints.map((c) => ({
+  const clauses = constraints.map((c) => ({
     title: transloco.translate(CONSTRAINT_METADATA[c.type].labelKey, undefined, lang),
     text: buildClause(c, transloco, lang),
   }));
@@ -74,16 +92,51 @@ export function buildLegalDescription(
   return `${intro}\n\n${list}`;
 }
 
+/**
+ * Prüft, ob der **gespeicherte** Rechtstext einer Policy noch zu ihren gespeicherten
+ * Constraints passt.
+ *
+ * Rechtlich maßgeblich ist der Text, der beim Speichern übermittelt und persistiert wurde
+ * (`CreatePolicyRequest.legalText`) — angezeigt wird auf der Detailseite dagegen eine bei
+ * jedem Aufruf neu aus den Constraints abgeleitete Fassung. Solange beides über diese UI
+ * entsteht, ist es identisch; bei einem anderen Client, nachträglich geänderten Daten oder
+ * einer angepassten Ableitungslogik läuft es auseinander, ohne dass es jemandem auffällt.
+ *
+ * Verglichen wird gegen die deutsche Fassung, weil `legalText` genau so erzeugt wird
+ * (siehe `PolicyBuilderComponent.submit`) — unabhängig von der aktiven UI-Sprache.
+ *
+ * Ohne gespeicherten Text (ältere Datensätze) gibt es nichts zu vergleichen: `false`.
+ */
+export function hasDivergingLegalText(
+  policy: Pick<Policy, 'category' | 'constraints' | 'legalText'>,
+  transloco: TranslocoService,
+): boolean {
+  if (policy.legalText === undefined || policy.legalText === null) return false;
+  return policy.legalText !== buildLegalDescription(policy, transloco, 'de');
+}
+
+/**
+ * WICHTIG — warum hier gegen Whitelists geprüft wird statt die Werte direkt zu verwenden:
+ *
+ * Transloco durchsucht das Ergebnis einer Platzhalter-Ersetzung ERNEUT nach Platzhaltern
+ * (`DefaultTranspiler.transpile()` iteriert über den bereits ersetzten String, und
+ * `interpolationMatcher` liefert bei jedem Zugriff ein frisches RegExp mit `lastIndex = 0`).
+ * Ein Parameterwert, der selbst `{{…}}` enthält, wird dadurch ein zweites Mal aufgelöst:
+ * `{{legalDescription.unrestricted}}` schiebt einen fremden Satz in den Rechtstext, und
+ * `{{agreement}}` ersetzt sich endlos selbst — die Schleife terminiert nie und der Tab friert ein.
+ *
+ * Constraint-Werte stammen nicht nur aus der UI (dort sind sie durch Dropdown bzw. Konstante
+ * gedeckelt), sondern auch aus `GET /v1/policies/:id`. Ein HTTP-Response ist Eingabe; der
+ * `Constraint`-Typ ist nur ein Compile-Zeit-Versprechen. Deshalb: nur Werte weiterreichen,
+ * die nachweislich aus der Metadaten-Registry stammen.
+ */
 function buildClause(c: Constraint, transloco: TranslocoService, lang?: string): string {
   const meta = CONSTRAINT_METADATA[c.type];
   const base = transloco.translate(meta.legalTextKey, undefined, lang);
 
   switch (c.type) {
     case 'USE_CASE': {
-      const labels = c.useCases.map((id) => {
-        const key = `useCase.${id.replace(/^UC\./, '')}`;
-        return transloco.translate(key, undefined, lang);
-      });
+      const labels = c.useCases.map((id) => useCaseLabel(id, transloco, lang));
       return transloco.translate(
         'legalDescription.clause.useCase',
         { list: joinList(labels) },
@@ -99,7 +152,7 @@ function buildClause(c: Constraint, transloco: TranslocoService, lang?: string):
     case 'FRAMEWORK_AGREEMENT':
       return transloco.translate(
         'legalDescription.clause.frameworkAgreement',
-        { agreement: c.agreement },
+        { agreement: c.agreement === FRAMEWORK_AGREEMENT_VALUE ? c.agreement : UNKNOWN_VALUE },
         lang,
       );
     case 'MEMBERSHIP':
@@ -108,13 +161,24 @@ function buildClause(c: Constraint, transloco: TranslocoService, lang?: string):
   }
 }
 
+/**
+ * Übersetzt eine Use-Case-ID über die Registry. Der i18n-Key wird bewusst NICHT aus der ID
+ * zusammengesetzt, sondern der Registry entnommen — sonst könnte eine ID aus dem Backend
+ * einen beliebigen Key erzeugen (`useCase.<beliebig>`), dessen Auflösung bei fehlendem Key
+ * den Key selbst zurückliefert und ihn so in den Rechtstext schreibt.
+ */
+function useCaseLabel(id: string, transloco: TranslocoService, lang?: string): string {
+  const option = USE_CASE_OPTIONS.find((o) => o.id === id);
+  return option ? transloco.translate(option.labelKey, undefined, lang) : UNKNOWN_VALUE;
+}
+
 function joinList(items: string[]): string {
   if (items.length <= 1) return items.join('');
   return items.slice(0, -1).join(', ') + ' & ' + items[items.length - 1];
 }
 
 function formatDate(iso: string): string {
-  if (!iso) return '—';
+  if (!iso) return UNKNOWN_VALUE;
   // Reine Datumsangaben (YYYY-MM-DD, das Format der DATE_RANGE-Eingabe) direkt formatieren,
   // ohne sie durch `new Date()` in UTC-Mitternacht zu wandeln. Sonst kippt der lokale Tag
   // in Zeitzonen westlich von UTC um einen Tag — beim rechtlich maßgeblichen Text unzulässig.
@@ -124,7 +188,9 @@ function formatDate(iso: string): string {
     return `${day}.${month}.${year}`;
   }
   const d = new Date(iso);
-  if (isNaN(d.getTime())) return iso;
+  // Kein Rohwert-Fallback: ein unparsebarer Wert würde sonst ungeprüft als
+  // Transloco-Parameter in den Rechtstext gelangen (siehe Hinweis an `buildClause`).
+  if (isNaN(d.getTime())) return UNKNOWN_VALUE;
   const day = String(d.getDate()).padStart(2, '0');
   const month = String(d.getMonth() + 1).padStart(2, '0');
   const year = d.getFullYear();
diff --git a/frontend/src/app/pages/policies/policy-editor-page/policy-builder/metadata/constraint-metadata.spec.ts b/frontend/src/app/pages/policies/policy-editor-page/policy-builder/metadata/constraint-metadata.spec.ts
index a89c2ca..a3ca840 100644
--- a/frontend/src/app/pages/policies/policy-editor-page/policy-builder/metadata/constraint-metadata.spec.ts
+++ b/frontend/src/app/pages/policies/policy-editor-page/policy-builder/metadata/constraint-metadata.spec.ts
@@ -1,6 +1,14 @@
 import { describe, expect, it } from 'vitest';
 
-import { buildDefaultConstraint, getAllowedConstraintTypes } from './constraint-metadata';
+import { Constraint } from '@shared/types/constraint.model';
+
+import {
+  ALL_CONSTRAINT_TYPES,
+  buildDefaultConstraint,
+  getAllowedConstraintTypes,
+  isKnownConstraintType,
+  keepKnownConstraints,
+} from './constraint-metadata';
 
 describe('getAllowedConstraintTypes', () => {
   it('erlaubt alle vier Typen (inkl. DATE_RANGE) für ACCESS', () => {
@@ -46,3 +54,40 @@ describe('buildDefaultConstraint', () => {
     });
   });
 });
+
+/**
+ * `CONSTRAINT_METADATA` ist als `Record<ConstraintType, …>` typisiert — das gilt aber nur
+ * zur Compile-Zeit. Constraints kommen auch aus `GET /v1/policies/:id` und sind damit
+ * ungeprüfte Eingabe; ein unbekannter Typ liefert beim Index-Zugriff `undefined`.
+ */
+describe('isKnownConstraintType / keepKnownConstraints', () => {
+  it('erkennt alle registrierten Typen', () => {
+    for (const type of ALL_CONSTRAINT_TYPES) {
+      expect(isKnownConstraintType(type)).toBe(true);
+    }
+  });
+
+  it('weist einen unbekannten Typ ab', () => {
+    expect(isKnownConstraintType('FOO')).toBe(false);
+  });
+
+  it('lässt sich nicht von geerbten Object-Properties täuschen', () => {
+    // Ohne hasOwnProperty würde `'constructor' in CONSTRAINT_METADATA` true liefern.
+    expect(isKnownConstraintType('constructor')).toBe(false);
+    expect(isKnownConstraintType('toString')).toBe(false);
+    expect(isKnownConstraintType('__proto__')).toBe(false);
+  });
+
+  it('filtert unbekannte Constraints heraus und erhält die bekannten', () => {
+    const constraints = [
+      { type: 'MEMBERSHIP', value: 'active' },
+      { type: 'FOO' },
+      { type: 'DATE_RANGE', startDate: '2027-01-01', endDate: '2027-12-31' },
+    ] as unknown as Constraint[];
+
+    expect(keepKnownConstraints(constraints)).toEqual([
+      { type: 'MEMBERSHIP', value: 'active' },
+      { type: 'DATE_RANGE', startDate: '2027-01-01', endDate: '2027-12-31' },
+    ]);
+  });
+});
diff --git a/frontend/src/app/pages/policies/policy-editor-page/policy-builder/metadata/constraint-metadata.ts b/frontend/src/app/pages/policies/policy-editor-page/policy-builder/metadata/constraint-metadata.ts
index a8be3ad..f79e2c8 100644
--- a/frontend/src/app/pages/policies/policy-editor-page/policy-builder/metadata/constraint-metadata.ts
+++ b/frontend/src/app/pages/policies/policy-editor-page/policy-builder/metadata/constraint-metadata.ts
@@ -1,4 +1,4 @@
-import { ConstraintType, Operator } from '@shared/types/constraint.model';
+import { Constraint, ConstraintType, Operator } from '@shared/types/constraint.model';
 import { PolicyCategory } from '@shared/types/policy.model';
 
 export interface ConstraintMetadata {
@@ -61,9 +61,25 @@ export function getAllowedConstraintTypes(category: PolicyCategory): ConstraintT
   return ALL_CONSTRAINT_TYPES.filter((t) => CONSTRAINT_METADATA[t].allowedIn.includes(category));
 }
 
-export function buildDefaultConstraint(
-  type: ConstraintType,
-): import('@shared/types/constraint.model').Constraint {
+/**
+ * Laufzeit-Prüfung, ob die Registry einen Constraint-Typ kennt.
+ *
+ * `Record<ConstraintType, ConstraintMetadata>` verspricht nur zur Compile-Zeit, dass ein
+ * Index-Zugriff Metadaten liefert. Constraints aus `GET /v1/policies/:id` sind ungeprüfte
+ * Eingabe: bei einem unbekannten Typ ist `CONSTRAINT_METADATA[type]` zur Laufzeit `undefined`,
+ * und der folgende Property-Zugriff (`.icon`, `.labelKey`, `.allowedIn`) wirft einen TypeError
+ * mitten im Rendering — die Seite bleibt für jeden Nutzer defekt.
+ */
+export function isKnownConstraintType(type: string): type is ConstraintType {
+  return Object.prototype.hasOwnProperty.call(CONSTRAINT_METADATA, type);
+}
+
+/** Entfernt alle Constraints, deren Typ die Registry nicht kennt. */
+export function keepKnownConstraints(constraints: readonly Constraint[]): Constraint[] {
+  return constraints.filter((c) => isKnownConstraintType(c.type));
+}
+
+export function buildDefaultConstraint(type: ConstraintType): Constraint {
   switch (type) {
     case 'MEMBERSHIP':
       return { type: 'MEMBERSHIP', value: 'active' };
diff --git a/frontend/src/app/pages/policies/policy-editor-page/policy-builder/validators/constraint-validators.spec.ts b/frontend/src/app/pages/policies/policy-editor-page/policy-builder/validators/constraint-validators.spec.ts
index d34e0a0..d048e4c 100644
--- a/frontend/src/app/pages/policies/policy-editor-page/policy-builder/validators/constraint-validators.spec.ts
+++ b/frontend/src/app/pages/policies/policy-editor-page/policy-builder/validators/constraint-validators.spec.ts
@@ -198,3 +198,78 @@ describe('validatePolicyDraft', () => {
     expect(keys).toContain('validation.useCaseRequired');
   });
 });
+
+describe('validatePolicyDraft — unbekannter Constraint-Typ aus der API', () => {
+  const unknownConstraint = { type: 'FOO' } as unknown as Constraint;
+
+  it('meldet einen Validierungsfehler statt zu werfen', () => {
+    const errors = validatePolicyDraft({
+      policyId: 'gueltige-id',
+      category: 'ACCESS',
+      constraints: [unknownConstraint],
+    } as Partial<Policy>);
+
+    expect(errors.map((e) => e.messageKey)).toContain('validation.constraintUnknownType');
+  });
+
+  it('prüft die übrigen Constraints trotzdem weiter', () => {
+    const errors = validatePolicyDraft({
+      policyId: 'gueltige-id',
+      category: 'ACCESS',
+      constraints: [unknownConstraint, { type: 'USE_CASE', useCases: [] }],
+    } as Partial<Policy>);
+
+    const keys = errors.map((e) => e.messageKey);
+    expect(keys).toContain('validation.constraintUnknownType');
+    expect(keys).toContain('validation.useCaseRequired');
+  });
+});
+
+/**
+ * Die policyId landet über `policyToOdrl()` als JSON-LD-`@id` im ODRL-Dokument. `@id` ist
+ * dort ein Identifier, keine Beschriftung: eine freie Zeichenkette könnte eine absolute IRI
+ * oder eine Blank-Node-Referenz erzeugen und damit auf eine fremde PolicyDefinition zeigen.
+ */
+describe('validatePolicyDraft — Zeichensatz der policyId', () => {
+  function withId(policyId: string): Partial<Policy> {
+    return { policyId, category: 'ACCESS', constraints: [] };
+  }
+
+  const accepted = [
+    'zugriff-konsortium-mitglieder',
+    'policy.use-case-quality-assurance',
+    'bim_koordination_2027',
+    'e2e-neue-policy',
+    'A1',
+  ];
+
+  for (const id of accepted) {
+    it(`akzeptiert die fachliche ID "${id}"`, () => {
+      expect(validatePolicyDraft(withId(id))).toEqual([]);
+    });
+  }
+
+  const rejected: [string, string][] = [
+    ['absolute IRI', 'https://w3id.org/catenax/policy/fremde-policy'],
+    ['Blank-Node-Referenz', '_:b0'],
+    ['Leerzeichen', 'policy mit leerzeichen'],
+    ['Pfadtrenner', '../andere-policy'],
+    ['führender Punkt', '.versteckt'],
+    ['spitze Klammern', 'policy<script>'],
+  ];
+
+  for (const [label, id] of rejected) {
+    it(`lehnt ab: ${label}`, () => {
+      expect(validatePolicyDraft(withId(id))).toContainEqual({
+        field: 'policyId',
+        messageKey: 'validation.policyIdInvalidChars',
+      });
+    });
+  }
+
+  it('meldet bei leerer ID weiterhin policyIdRequired, nicht den Zeichensatz-Fehler', () => {
+    const keys = validatePolicyDraft(withId('  ')).map((e) => e.messageKey);
+    expect(keys).toContain('validation.policyIdRequired');
+    expect(keys).not.toContain('validation.policyIdInvalidChars');
+  });
+});
diff --git a/frontend/src/app/pages/policies/policy-editor-page/policy-builder/validators/constraint-validators.ts b/frontend/src/app/pages/policies/policy-editor-page/policy-builder/validators/constraint-validators.ts
index 18a7bd7..b5b0df9 100644
--- a/frontend/src/app/pages/policies/policy-editor-page/policy-builder/validators/constraint-validators.ts
+++ b/frontend/src/app/pages/policies/policy-editor-page/policy-builder/validators/constraint-validators.ts
@@ -1,12 +1,26 @@
 import { Constraint } from '@shared/types/constraint.model';
 import { Policy } from '@shared/types/policy.model';
-import { CONSTRAINT_METADATA } from '@features/policies/builder/metadata/constraint-metadata';
+import {
+  CONSTRAINT_METADATA,
+  isKnownConstraintType,
+} from '@features/policies/builder/metadata/constraint-metadata';
 
 export interface ValidationError {
   field: string;
   messageKey: string;
 }
 
+/**
+ * Zulässiger Zeichensatz der fachlichen Policy-ID: Buchstabe oder Ziffer am Anfang, danach
+ * zusätzlich Punkt, Unterstrich und Bindestrich (z.B. `policy.use-case-quality-assurance`).
+ *
+ * Der Wert wird von `policyToOdrl()` als JSON-LD-`@id` übernommen. `@id` ist dort ein
+ * Identifier, keine Beschriftung — eine freie Zeichenkette könnte eine absolute IRI
+ * (`https://…/fremde-policy`) oder eine Blank-Node-Referenz (`_:b0`) erzeugen und damit
+ * auf eine fremde PolicyDefinition zeigen.
+ */
+const POLICY_ID_PATTERN = /^[a-zA-Z0-9][a-zA-Z0-9._-]*$/;
+
 export function validatePolicyDraft(draft: Partial<Policy>): ValidationError[] {
   const errors: ValidationError[] = [];
 
@@ -15,6 +29,8 @@ export function validatePolicyDraft(draft: Partial<Policy>): ValidationError[] {
     errors.push({ field: 'policyId', messageKey: 'validation.policyIdRequired' });
   } else if (id.length > 200) {
     errors.push({ field: 'policyId', messageKey: 'validation.policyIdTooLong' });
+  } else if (!POLICY_ID_PATTERN.test(id)) {
+    errors.push({ field: 'policyId', messageKey: 'validation.policyIdInvalidChars' });
   }
 
   if (!draft.category) {
@@ -22,6 +38,17 @@ export function validatePolicyDraft(draft: Partial<Policy>): ValidationError[] {
   }
 
   for (const [index, c] of (draft.constraints ?? []).entries()) {
+    // Typ zuerst gegen die Registry prüfen: bei einem unbekannten Typ (möglich, weil
+    // Constraints auch aus der API stammen) liefert der Index-Zugriff `undefined` und
+    // `.allowedIn` würde werfen. Ein unbekannter Typ ist ein Validierungsfehler, kein Absturz.
+    if (!isKnownConstraintType(c.type)) {
+      errors.push({
+        field: `constraint[${index}]`,
+        messageKey: 'validation.constraintUnknownType',
+      });
+      continue;
+    }
+
     // Check category compatibility
     if (draft.category && !CONSTRAINT_METADATA[c.type].allowedIn.includes(draft.category)) {
       errors.push({
diff --git a/frontend/src/app/pages/policies/policy-editor-page/policy-editor-page.component.ts b/frontend/src/app/pages/policies/policy-editor-page/policy-editor-page.component.ts
index ee4a447..4215fb2 100644
--- a/frontend/src/app/pages/policies/policy-editor-page/policy-editor-page.component.ts
+++ b/frontend/src/app/pages/policies/policy-editor-page/policy-editor-page.component.ts
@@ -4,6 +4,8 @@ import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { PolicyService } from '@services/policies/policy.service';
 import { NotificationService } from '@services/notification/notification.service';
 import { Policy } from '@shared/types/policy.model';
+import { keepKnownConstraints } from '@features/policies/builder/metadata/constraint-metadata';
+import { httpErrorMessageKey } from '@services/http/http-error.helper';
 import {
   PolicyBuilderComponent,
   PolicyDraft,
@@ -37,11 +39,24 @@ export class PolicyEditorPageComponent implements OnInit {
       this.loading.set(true);
       this.policyService.getPolicyById(id).subscribe({
         next: (p) => {
-          this.initialPolicy.set(p);
+          // Unbekannte Constraint-Typen entfernen, bevor sie in den Builder gelangen:
+          // sie haben keinen Registry-Eintrag und würden beim Rendern der Editor-Card
+          // bzw. in der Validierung auf `undefined` zugreifen.
+          const constraints = keepKnownConstraints(p.constraints);
+          if (constraints.length !== p.constraints.length) {
+            this.notification.warning(
+              this.transloco.translate('policyEditor.notifications.unknownConstraints'),
+            );
+          }
+          this.initialPolicy.set({ ...p, constraints });
           this.loading.set(false);
         },
-        error: () => {
-          this.notification.error(this.transloco.translate('policyEditor.notifications.loadError'));
+        error: (err: unknown) => {
+          this.notification.error(
+            this.transloco.translate(
+              httpErrorMessageKey(err, 'policyEditor.notifications.loadError'),
+            ),
+          );
           this.loading.set(false);
           this.router.navigate(['/policies']);
         },
@@ -61,10 +76,12 @@ export class PolicyEditorPageComponent implements OnInit {
           );
           this.router.navigate(['/policies', id]);
         },
-        error: () => {
+        error: (err: unknown) => {
           this.submitting.set(false);
           this.notification.error(
-            this.transloco.translate('policyEditor.notifications.updateError'),
+            this.transloco.translate(
+              httpErrorMessageKey(err, 'policyEditor.notifications.updateError'),
+            ),
           );
         },
       });
@@ -77,10 +94,12 @@ export class PolicyEditorPageComponent implements OnInit {
           );
           this.router.navigate(['/policies', created.id]);
         },
-        error: () => {
+        error: (err: unknown) => {
           this.submitting.set(false);
           this.notification.error(
-            this.transloco.translate('policyEditor.notifications.createError'),
+            this.transloco.translate(
+              httpErrorMessageKey(err, 'policyEditor.notifications.createError'),
+            ),
           );
         },
       });
diff --git a/frontend/src/app/services/http/http-error.helper.spec.ts b/frontend/src/app/services/http/http-error.helper.spec.ts
new file mode 100644
index 0000000..1d1b0ee
--- /dev/null
+++ b/frontend/src/app/services/http/http-error.helper.spec.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+
+import { HttpErrorResponse } from '@angular/common/http';
+
+import { HTTP_ERROR_KEYS, httpErrorMessageKey } from './http-error.helper';
+
+const FALLBACK = 'policies.notifications.loadError';
+
+function httpError(status: number): HttpErrorResponse {
+  return new HttpErrorResponse({ status, statusText: 'x', url: '/api/v1/policies' });
+}
+
+describe('httpErrorMessageKey', () => {
+  it('unterscheidet die Ursachen, die eine fachliche Meldung nicht ausdrücken kann', () => {
+    expect(httpErrorMessageKey(httpError(0), FALLBACK)).toBe(HTTP_ERROR_KEYS.offline);
+    expect(httpErrorMessageKey(httpError(401), FALLBACK)).toBe(HTTP_ERROR_KEYS.unauthorized);
+    expect(httpErrorMessageKey(httpError(403), FALLBACK)).toBe(HTTP_ERROR_KEYS.forbidden);
+    expect(httpErrorMessageKey(httpError(409), FALLBACK)).toBe(HTTP_ERROR_KEYS.conflict);
+  });
+
+  it('meldet 5xx generisch als Serverfehler', () => {
+    for (const status of [500, 502, 503, 504]) {
+      expect(httpErrorMessageKey(httpError(status), FALLBACK)).toBe(HTTP_ERROR_KEYS.server);
+    }
+  });
+
+  it('überlässt 404 und sonstige 4xx der fachlichen Meldung des Aufrufers', () => {
+    expect(httpErrorMessageKey(httpError(404), FALLBACK)).toBe(FALLBACK);
+    expect(httpErrorMessageKey(httpError(400), FALLBACK)).toBe(FALLBACK);
+    expect(httpErrorMessageKey(httpError(422), FALLBACK)).toBe(FALLBACK);
+  });
+
+  it('fällt bei Nicht-HTTP-Fehlern auf die fachliche Meldung zurück', () => {
+    expect(httpErrorMessageKey(new TypeError('boom'), FALLBACK)).toBe(FALLBACK);
+    expect(httpErrorMessageKey(undefined, FALLBACK)).toBe(FALLBACK);
+    expect(httpErrorMessageKey('kaputt', FALLBACK)).toBe(FALLBACK);
+  });
+});
diff --git a/frontend/src/app/services/http/http-error.helper.ts b/frontend/src/app/services/http/http-error.helper.ts
new file mode 100644
index 0000000..c8ec55c
--- /dev/null
+++ b/frontend/src/app/services/http/http-error.helper.ts
@@ -0,0 +1,45 @@
+import { HttpErrorResponse } from '@angular/common/http';
+
+/**
+ * i18n-Keys für Fehlerursachen, die eine fachliche Meldung nicht ausdrücken kann.
+ *
+ * „Policy konnte nicht geladen werden" ist die richtige Aussage bei einem 404 oder einem
+ * unerwarteten Fehler — nicht aber, wenn die Anmeldung fehlt, die Berechtigung fehlt oder
+ * der Server gar nicht erreichbar ist. In diesen Fällen ist die Ursache selbst die
+ * hilfreichere Information.
+ */
+export const HTTP_ERROR_KEYS = {
+  offline: 'httpError.offline',
+  unauthorized: 'httpError.unauthorized',
+  forbidden: 'httpError.forbidden',
+  conflict: 'httpError.conflict',
+  server: 'httpError.server',
+} as const;
+
+/**
+ * Wählt den i18n-Key für einen fehlgeschlagenen HTTP-Aufruf.
+ *
+ * Bisher verwarfen alle Fehler-Callbacks ihren Parameter (`error: () => …`) und zeigten
+ * dieselbe Meldung — 401, 403, 404 und 500 waren für Nutzer wie für Support ununterscheidbar.
+ *
+ * `fallbackKey` ist die fachliche Meldung des Aufrufers und bleibt für alles zuständig,
+ * was sie besser beschreibt (insbesondere 404 und sonstige 4xx).
+ */
+export function httpErrorMessageKey(error: unknown, fallbackKey: string): string {
+  if (!(error instanceof HttpErrorResponse)) return fallbackKey;
+
+  switch (error.status) {
+    // Status 0: Verbindungsabbruch, DNS-/TLS-Fehler oder von CORS blockiert — es gab
+    // keine Antwort, eine fachliche Meldung wäre hier irreführend.
+    case 0:
+      return HTTP_ERROR_KEYS.offline;
+    case 401:
+      return HTTP_ERROR_KEYS.unauthorized;
+    case 403:
+      return HTTP_ERROR_KEYS.forbidden;
+    case 409:
+      return HTTP_ERROR_KEYS.conflict;
+    default:
+      return error.status >= 500 ? HTTP_ERROR_KEYS.server : fallbackKey;
+  }
+}
diff --git a/frontend/src/app/services/http/http-error.interceptor.ts b/frontend/src/app/services/http/http-error.interceptor.ts
new file mode 100644
index 0000000..2e90d9a
--- /dev/null
+++ b/frontend/src/app/services/http/http-error.interceptor.ts
@@ -0,0 +1,29 @@
+import { HttpErrorResponse, HttpInterceptorFn } from '@angular/common/http';
+import { tap } from 'rxjs';
+
+/**
+ * Protokolliert fehlgeschlagene HTTP-Aufrufe an genau einer Stelle.
+ *
+ * Vorher verwarfen die Fehler-Callbacks der Seiten ihren `HttpErrorResponse` vollständig
+ * (`error: () => …`): Statuscode, Methode und Ziel gingen verloren, und wiederholt
+ * fehlschlagende Zugriffe hinterließen clientseitig keinerlei Spur.
+ *
+ * Geloggt werden ausschließlich Metadaten — nie der Response-Body und nie der Request-Body.
+ * Beide können fachliche Inhalte enthalten (Policy-IDs, Rechtstexte) und haben in der
+ * Browser-Konsole nichts zu suchen.
+ *
+ * Der Fehler wird unverändert weitergereicht; die Nutzer-Meldung bleibt in der Verantwortung
+ * des Aufrufers (siehe `httpErrorMessageKey`), damit es bei genau einer Meldung bleibt.
+ */
+export const httpErrorInterceptor: HttpInterceptorFn = (req, next) =>
+  next(req).pipe(
+    tap({
+      error: (error: unknown) => {
+        if (error instanceof HttpErrorResponse) {
+          console.error(
+            `[http] ${req.method} ${req.urlWithParams} → ${error.status} ${error.statusText}`,
+          );
+        }
+      },
+    }),
+  );
diff --git a/frontend/src/app/services/policies/policy.service.spec.ts b/frontend/src/app/services/policies/policy.service.spec.ts
new file mode 100644
index 0000000..8703d47
--- /dev/null
+++ b/frontend/src/app/services/policies/policy.service.spec.ts
@@ -0,0 +1,90 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { HttpClient } from '@angular/common/http';
+import { TestBed } from '@angular/core/testing';
+import { Observable, of } from 'rxjs';
+
+import { PolicyService } from './policy.service';
+
+/**
+ * Der Route-Parameter `id` kommt aus `paramMap.get('id')` und ist damit reine Eingabe:
+ * Angulars `DefaultUrlSerializer` dekodiert `%2F` zu `/` und `%2E` zu `.`, nachdem er den
+ * Pfad in Segmente zerlegt hat. `/policies/..%2F..%2Factuator%2Fenv` liefert also
+ * `id = '../../actuator/env'`. Ohne Kodierung baut der Service daraus
+ * `/api/v1/policies/../../actuator/env`, was der Browser vor dem Absenden zu
+ * `/api/actuator/env` normalisiert — der Request verlässt die Policies-Collection.
+ *
+ * Invariante: egal welche ID hereinkommt, der aufgelöste Pfad muss unterhalb von
+ * `<backendUrl>/v1/policies/` bleiben.
+ */
+describe('PolicyService — Pfad-Konstruktion', () => {
+  const TRAVERSAL_ID = '../../actuator/env';
+
+  // Signaturen als Generic statt als Parameterliste: so ist `mock.calls` typisiert,
+  // ohne ungenutzte Parameter zu deklarieren (ESLint `no-unused-vars`).
+  function makeHttp() {
+    return {
+      get: vi.fn<(url: string) => Observable<object>>(() => of({})),
+      post: vi.fn<(url: string, body: unknown) => Observable<object>>(() => of({})),
+      put: vi.fn<(url: string, body: unknown) => Observable<object>>(() => of({})),
+      delete: vi.fn<(url: string) => Observable<undefined>>(() => of(undefined)),
+    };
+  }
+
+  let http: ReturnType<typeof makeHttp>;
+  let service: PolicyService;
+
+  beforeEach(() => {
+    http = makeHttp();
+    TestBed.configureTestingModule({ providers: [{ provide: HttpClient, useValue: http }] });
+    service = TestBed.inject(PolicyService);
+  });
+
+  /** Bildet die Pfad-Normalisierung nach, die der Browser vor dem Absenden vornimmt. */
+  function resolvedPath(url: string): string {
+    return new URL(url, 'https://policy-hub.example').pathname;
+  }
+
+  function collectionPath(): string {
+    return resolvedPath(service['baseUrl']) + '/';
+  }
+
+  it('getPolicyById kodiert die ID und bleibt in der Policies-Collection', () => {
+    service.getPolicyById(TRAVERSAL_ID).subscribe();
+
+    const url = http.get.mock.calls[0][0];
+    expect(url).toContain(encodeURIComponent(TRAVERSAL_ID));
+    expect(resolvedPath(url).startsWith(collectionPath())).toBe(true);
+  });
+
+  it('updatePolicy kodiert die ID und bleibt in der Policies-Collection', () => {
+    service
+      .updatePolicy(TRAVERSAL_ID, {
+        policyId: 'x',
+        category: 'ACCESS',
+        constraints: [],
+        legalText: '',
+      })
+      .subscribe();
+
+    const url = http.put.mock.calls[0][0];
+    expect(url).toContain(encodeURIComponent(TRAVERSAL_ID));
+    expect(resolvedPath(url).startsWith(collectionPath())).toBe(true);
+  });
+
+  it('deletePolicy kodiert die ID und bleibt in der Policies-Collection', () => {
+    service.deletePolicy(TRAVERSAL_ID).subscribe();
+
+    const url = http.delete.mock.calls[0][0];
+    expect(url).toContain(encodeURIComponent(TRAVERSAL_ID));
+    expect(resolvedPath(url).startsWith(collectionPath())).toBe(true);
+  });
+
+  it('lässt eine unauffällige UUID unverändert', () => {
+    const id = '00000000-0000-0000-0000-000000000001';
+    service.getPolicyById(id).subscribe();
+
+    const url = http.get.mock.calls[0][0];
+    expect(url.endsWith(`/v1/policies/${id}`)).toBe(true);
+  });
+});
diff --git a/frontend/src/app/services/policies/policy.service.ts b/frontend/src/app/services/policies/policy.service.ts
index 195a540..aa6eb64 100644
--- a/frontend/src/app/services/policies/policy.service.ts
+++ b/frontend/src/app/services/policies/policy.service.ts
@@ -9,12 +9,23 @@ export class PolicyService {
   private readonly http = inject(HttpClient);
   private readonly baseUrl = `${environment.backendUrl}/v1/policies`;
 
+  /**
+   * IDs stammen aus `paramMap.get('id')` und sind damit Eingabe: Angulars UrlSerializer
+   * dekodiert `%2F`/`%2E`, sodass eine ID `/` und `..` enthalten kann. Ohne Kodierung würde
+   * der Browser den fertigen Pfad normalisieren (`…/policies/../../actuator` → `/api/actuator`)
+   * und der Request die Policies-Collection verlassen — same-origin und mit den Credentials
+   * des Nutzers. Deshalb geht jede ID durch `encodeURIComponent`.
+   */
+  private resourceUrl(id: string): string {
+    return `${this.baseUrl}/${encodeURIComponent(id)}`;
+  }
+
   getAllPolicies(): Observable<Policy[]> {
     return this.http.get<Policy[]>(this.baseUrl);
   }
 
   getPolicyById(id: string): Observable<Policy> {
-    return this.http.get<Policy>(`${this.baseUrl}/${id}`);
+    return this.http.get<Policy>(this.resourceUrl(id));
   }
 
   createPolicy(request: CreatePolicyRequest): Observable<Policy> {
@@ -22,10 +33,10 @@ export class PolicyService {
   }
 
   updatePolicy(id: string, request: UpdatePolicyRequest): Observable<Policy> {
-    return this.http.put<Policy>(`${this.baseUrl}/${id}`, request);
+    return this.http.put<Policy>(this.resourceUrl(id), request);
   }
 
   deletePolicy(id: string): Observable<void> {
-    return this.http.delete<void>(`${this.baseUrl}/${id}`);
+    return this.http.delete<void>(this.resourceUrl(id));
   }
 }
diff --git a/frontend/src/app/shared/types/policy.model.ts b/frontend/src/app/shared/types/policy.model.ts
index ba5a2c4..bf67127 100644
--- a/frontend/src/app/shared/types/policy.model.ts
+++ b/frontend/src/app/shared/types/policy.model.ts
@@ -10,6 +10,16 @@ export interface Policy {
   constraints: Constraint[];
   createdAt: string;
   updatedAt: string;
+  /**
+   * Der beim Speichern übermittelte und unverändert zurückgelieferte Rechtstext
+   * (siehe {@link CreatePolicyRequest.legalText}).
+   *
+   * Optional, weil ältere Datensätze ihn nicht haben. Er ist bewusst Teil des Lesemodells:
+   * Ohne ihn ließe sich nicht erkennen, ob der **gespeicherte** — rechtlich maßgebliche —
+   * Text noch zu den gespeicherten Constraints passt. Die Detailseite leitet ihre Anzeige
+   * aus den Constraints ab; eine Abweichung wäre sonst prinzipiell unsichtbar.
+   */
+  legalText?: string;
 }
 
 export interface CreatePolicyRequest {
diff --git a/frontend/src/app/ui/mock-data-switcher/index.production.ts b/frontend/src/app/ui/mock-data-switcher/index.production.ts
new file mode 100644
index 0000000..1fbe094
--- /dev/null
+++ b/frontend/src/app/ui/mock-data-switcher/index.production.ts
@@ -0,0 +1,2 @@
+/** Produktions-Variante von `index.ts` — liefert den Stub statt des echten Switchers. */
+export { MockDataSwitcherComponent } from './mock-data-switcher.component.production';
diff --git a/frontend/src/app/ui/mock-data-switcher/index.ts b/frontend/src/app/ui/mock-data-switcher/index.ts
new file mode 100644
index 0000000..8974e04
--- /dev/null
+++ b/frontend/src/app/ui/mock-data-switcher/index.ts
@@ -0,0 +1,16 @@
+/**
+ * Indirektion für den Mock-Data-Switcher, damit `fileReplacements` ihn aus dem
+ * Produktions-Build heraushalten kann.
+ *
+ * Ersetzt wird bewusst diese Barrel-Datei und nicht die Komponente selbst: Angulars
+ * `fileReplacements` behält die Zuordnung zwischen einer `templateUrl` und dem Pfad der
+ * Komponentendatei bei. Wird eine Komponente mit externem Template direkt ersetzt, prüft
+ * der AOT-Compiler das Original-Template weiter gegen die Stub-Klasse und der Build bricht
+ * mit `TS2339: Property 'isExpanded' does not exist` ab. Eine Barrel-Datei hat kein Template
+ * und ist deshalb unproblematisch.
+ *
+ * Ohne diese Trennung landen der komplette Mock-Datensatz und der `localStorage`-Zugriff
+ * auf Modul-Ebene im eager `main-*.js`: `@if (useMocks)` steuert nur das Rendern, das
+ * Bundling entscheiden die `import`-Statements.
+ */
+export { MockDataSwitcherComponent } from './mock-data-switcher.component';
diff --git a/frontend/src/app/ui/mock-data-switcher/mock-data-switcher.component.production.ts b/frontend/src/app/ui/mock-data-switcher/mock-data-switcher.component.production.ts
new file mode 100644
index 0000000..c237063
--- /dev/null
+++ b/frontend/src/app/ui/mock-data-switcher/mock-data-switcher.component.production.ts
@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Produktions-Ersatz für {@link MockDataSwitcherComponent} (analog zu
+ * `mock.service.production.ts`), eingesetzt über `fileReplacements`.
+ *
+ * `@if (useMocks)` in `app.component.html` verhindert nur das **Rendern** — was im Bundle
+ * landet, entscheiden die `import`-Statements. `App` importiert die Switcher-Komponente
+ * statisch, diese wiederum `@mocks/mock-data-config` und `@mocks/data/policies/mocked-policies`.
+ * Ohne diesen Stub landen daher der komplette Mock-Datensatz und die deutschen Dev-Labels
+ * im eager `main-*.js` — und der `localStorage`-Zugriff auf Modul-Ebene wird in Produktion
+ * beim Laden des Bundles ausgeführt.
+ *
+ * Der Stub übernimmt Selektor und Standalone-Charakter, rendert aber nichts und zieht keine
+ * Mock-Module nach.
+ */
+@Component({
+  selector: 'app-mock-data-switcher',
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MockDataSwitcherComponent {}
diff --git a/frontend/src/assets/i18n/de.json b/frontend/src/assets/i18n/de.json
index e6f21bf..e5d282a 100644
--- a/frontend/src/assets/i18n/de.json
+++ b/frontend/src/assets/i18n/de.json
@@ -142,8 +142,11 @@
     "notifications": {
       "loadError": "Policy konnte nicht geladen werden.",
       "deleteSuccess": "Policy wurde gelöscht.",
-      "deleteError": "Policy konnte nicht gelöscht werden."
-    }
+      "deleteError": "Policy konnte nicht gelöscht werden.",
+      "unknownConstraints": "Die Policy enthält unbekannte Bedingungstypen. Diese werden nicht angezeigt."
+    },
+    "legalTextDiverged": "Der gespeicherte Rechtstext weicht von den gespeicherten Bedingungen ab. Rechtlich maßgeblich ist der gespeicherte Text — bitte die Policy erneut speichern oder prüfen lassen.",
+    "legalTextStored": "Gespeicherten Rechtstext anzeigen"
   },
   "policyEditor": {
     "notifications": {
@@ -151,7 +154,8 @@
       "createSuccess": "Policy wurde erstellt.",
       "createError": "Policy konnte nicht erstellt werden.",
       "updateSuccess": "Policy wurde aktualisiert.",
-      "updateError": "Policy konnte nicht aktualisiert werden."
+      "updateError": "Policy konnte nicht aktualisiert werden.",
+      "unknownConstraints": "Die Policy enthält unbekannte Bedingungstypen. Diese wurden aus dem Editor entfernt."
     }
   },
   "policyBuilder": {
@@ -271,7 +275,9 @@
     "dateRangeEndRequired": "Enddatum ist erforderlich",
     "dateRangeEndInvalid": "Enddatum ist ungültig",
     "dateRangeEndInPast": "Enddatum muss in der Zukunft liegen",
-    "dateRangeStartAfterEnd": "Das Startdatum muss vor dem Enddatum liegen"
+    "dateRangeStartAfterEnd": "Das Startdatum muss vor dem Enddatum liegen",
+    "constraintUnknownType": "Unbekannter Bedingungstyp — diese Bedingung wird ignoriert.",
+    "policyIdInvalidChars": "Nur Buchstaben, Ziffern, Punkt, Unterstrich und Bindestrich erlaubt (Beginn mit Buchstabe oder Ziffer)"
   },
   "deleteDialog": {
     "title": "Policy löschen",
@@ -283,5 +289,12 @@
   "jsonViewer": {
     "label": "ODRL JSON-LD",
     "noContent": "(kein Inhalt)"
+  },
+  "httpError": {
+    "offline": "Der Server ist nicht erreichbar. Bitte Netzwerkverbindung prüfen und erneut versuchen.",
+    "unauthorized": "Nicht angemeldet. Bitte melden Sie sich erneut an.",
+    "forbidden": "Für diese Aktion fehlt Ihnen die Berechtigung.",
+    "conflict": "Der Datensatz wurde zwischenzeitlich geändert. Bitte neu laden und erneut versuchen.",
+    "server": "Auf dem Server ist ein Fehler aufgetreten. Bitte später erneut versuchen."
   }
 }
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
index 05067ab..f574a39 100644
--- a/frontend/src/assets/i18n/en.json
+++ b/frontend/src/assets/i18n/en.json
@@ -142,8 +142,11 @@
     "notifications": {
       "loadError": "Policy could not be loaded.",
       "deleteSuccess": "Policy deleted.",
-      "deleteError": "Policy could not be deleted."
-    }
+      "deleteError": "Policy could not be deleted.",
+      "unknownConstraints": "This policy contains unknown condition types. They are not displayed."
+    },
+    "legalTextDiverged": "The stored legal text does not match the stored conditions. The stored text is the legally binding one — please save the policy again or have it reviewed.",
+    "legalTextStored": "Show stored legal text"
   },
   "policyEditor": {
     "notifications": {
@@ -151,7 +154,8 @@
       "createSuccess": "Policy created.",
       "createError": "Policy could not be created.",
       "updateSuccess": "Policy updated.",
-      "updateError": "Policy could not be updated."
+      "updateError": "Policy could not be updated.",
+      "unknownConstraints": "This policy contains unknown condition types. They were removed from the editor."
     }
   },
   "policyBuilder": {
@@ -271,7 +275,9 @@
     "dateRangeEndRequired": "End date is required",
     "dateRangeEndInvalid": "End date is invalid",
     "dateRangeEndInPast": "End date must be in the future",
-    "dateRangeStartAfterEnd": "The start date must be before the end date"
+    "dateRangeStartAfterEnd": "The start date must be before the end date",
+    "constraintUnknownType": "Unknown condition type — this condition is ignored.",
+    "policyIdInvalidChars": "Only letters, digits, dot, underscore and hyphen are allowed (must start with a letter or digit)"
   },
   "deleteDialog": {
     "title": "Delete policy",
@@ -283,5 +289,12 @@
   "jsonViewer": {
     "label": "ODRL JSON-LD",
     "noContent": "(no content)"
+  },
+  "httpError": {
+    "offline": "The server cannot be reached. Please check your network connection and try again.",
+    "unauthorized": "Not signed in. Please sign in again.",
+    "forbidden": "You do not have permission to perform this action.",
+    "conflict": "The record was changed in the meantime. Please reload and try again.",
+    "server": "A server error occurred. Please try again later."
   }
 }
diff --git a/frontend/src/fonts/README.md b/frontend/src/fonts/README.md
new file mode 100644
index 0000000..ded6c69
--- /dev/null
+++ b/frontend/src/fonts/README.md
@@ -0,0 +1,35 @@
+# Selbst gehostete Schriften
+
+Diese Dateien werden bewusst mitgeliefert statt zur Laufzeit von `fonts.gstatic.com`
+geladen. Gründe und die Einbindung stehen in [`../styles/_fonts.scss`](../styles/_fonts.scss).
+
+| Datei                               | Familie                                                             | Herkunft                          |
+| ----------------------------------- | ------------------------------------------------------------------- | --------------------------------- |
+| `montserrat-latin.woff2`            | Montserrat, normal (variabel, deckt 300/400/600 ab), Subset `latin` | Google Fonts, Montserrat v31      |
+| `montserrat-latin-ext.woff2`        | Montserrat, normal (variabel), Subset `latin-ext`                   | Google Fonts, Montserrat v31      |
+| `montserrat-italic-latin.woff2`     | Montserrat, kursiv 300, Subset `latin`                              | Google Fonts, Montserrat v31      |
+| `montserrat-italic-latin-ext.woff2` | Montserrat, kursiv 300, Subset `latin-ext`                          | Google Fonts, Montserrat v31      |
+| `material-icons.woff2`              | Material Icons                                                      | Google Fonts, Material Icons v145 |
+
+Die Subsets `cyrillic`, `cyrillic-ext` und `vietnamese` sind nicht enthalten — die
+Anwendung gibt es nur auf Deutsch und Englisch.
+
+## Lizenzen
+
+- **Montserrat** — SIL Open Font License 1.1 (<https://openfontlicense.org/>).
+  Copyright 2011 The Montserrat Project Authors (<https://github.com/JulietaUla/Montserrat>).
+- **Material Icons** — Apache License 2.0 (<https://www.apache.org/licenses/LICENSE-2.0>).
+  Copyright Google LLC.
+
+Beide Lizenzen erlauben das Mitliefern und Weiterverbreiten der Dateien; die
+Urhebervermerke oben erfüllen die jeweilige Attributionspflicht.
+
+## Aktualisieren
+
+Die `@font-face`-Regeln in `../styles/_fonts.scss` sind aus der von Google
+ausgelieferten CSS erzeugt (Gewichte, Styles und `unicode-range` unverändert). Beim
+Aktualisieren dieselbe CSS mit einem Desktop-Browser-User-Agent abrufen, die
+`latin`/`latin-ext`-Blöcke übernehmen und die referenzierten `woff2`-Dateien hier ablegen:
+
+    https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;1,300&display=swap
+    https://fonts.googleapis.com/icon?family=Material+Icons&display=swap
diff --git a/frontend/src/fonts/material-icons.woff2 b/frontend/src/fonts/material-icons.woff2
new file mode 100644
index 0000000..5492a6e
Binary files /dev/null and b/frontend/src/fonts/material-icons.woff2 differ
diff --git a/frontend/src/fonts/montserrat-italic-latin-ext.woff2 b/frontend/src/fonts/montserrat-italic-latin-ext.woff2
new file mode 100644
index 0000000..c71a8d4
Binary files /dev/null and b/frontend/src/fonts/montserrat-italic-latin-ext.woff2 differ
diff --git a/frontend/src/fonts/montserrat-italic-latin.woff2 b/frontend/src/fonts/montserrat-italic-latin.woff2
new file mode 100644
index 0000000..00025ca
Binary files /dev/null and b/frontend/src/fonts/montserrat-italic-latin.woff2 differ
diff --git a/frontend/src/fonts/montserrat-latin-ext.woff2 b/frontend/src/fonts/montserrat-latin-ext.woff2
new file mode 100644
index 0000000..9a03818
Binary files /dev/null and b/frontend/src/fonts/montserrat-latin-ext.woff2 differ
diff --git a/frontend/src/fonts/montserrat-latin.woff2 b/frontend/src/fonts/montserrat-latin.woff2
new file mode 100644
index 0000000..3b2eaa9
Binary files /dev/null and b/frontend/src/fonts/montserrat-latin.woff2 differ
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 10d0cdb..7dafc3f 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -6,16 +6,9 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;1,300&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap"
-      rel="stylesheet"
-    />
+    <!-- Keine externen Font-Links: Schriften werden selbst ausgeliefert, siehe
+         src/styles/_fonts.scss und src/fonts/README.md. Ein Stylesheet von einem
+         fremden CDN würde bei jedem Seitenaufruf die IP des Nutzers dorthin übertragen. -->
   </head>
   <body>
     <app-root></app-root>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 92a88e7..fefae31 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,5 +1,9 @@
 @use './material';
+@use 'fonts';
 @use 'mixins' as *;
+// CDK's `.cdk-visually-hidden` class (used by LiveAnnouncer and others to
+// hide live-region text visually while keeping it available to screen readers).
+@use '@angular/cdk/a11y-prebuilt.css';
 
 // ============================================================
 // Construct-X Design Tokens
diff --git a/frontend/src/styles/_fonts.scss b/frontend/src/styles/_fonts.scss
new file mode 100644
index 0000000..b482182
--- /dev/null
+++ b/frontend/src/styles/_fonts.scss
@@ -0,0 +1,143 @@
+// Selbst gehostete Schriften — bewusst NICHT über fonts.googleapis.com.
+//
+// Angulars Font-Inlining löst das Problem nur halb: es holt zur Build-Zeit das Stylesheet
+// von Google und schreibt es als <style> in die index.html — die `src: url(...)` darin
+// zeigen aber weiterhin auf fonts.gstatic.com. Die Schriftdateien selbst wurden also
+// weiterhin zur Laufzeit von Google geladen, samt IP-Adresse des Nutzers (DSGVO Art. 44 ff.).
+// Zusätzlich brach jeder Produktions-Build ohne Netzzugang ab, weil der Abruf zwingend ist
+// und nicht zwischengespeichert wird.
+//
+// Diese Datei ist aus der Google-CSS erzeugt: Gewichte, Styles und unicode-range sind
+// unverändert übernommen, damit das Rendering identisch bleibt. Weggelassen sind nur die
+// Subsets `cyrillic`, `cyrillic-ext` und `vietnamese` — die App gibt es nur auf de/en.
+//
+// Für Montserrat `normal` liefert Google eine Variable-Font-Datei, die 300/400/600 abdeckt;
+// die drei @font-face-Regeln je Subset zeigen deshalb auf dieselbe Datei (genau wie bei
+// Google). Herkunft und Lizenzen: siehe src/fonts/README.md.
+
+/* montserrat latin-ext italic 300 */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('../fonts/montserrat-italic-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+/* montserrat latin italic 300 */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('../fonts/montserrat-italic-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* montserrat latin-ext normal 300 */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+/* montserrat latin normal 300 */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('../fonts/montserrat-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* montserrat latin-ext normal 400 */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+/* montserrat latin normal 400 */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/montserrat-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* montserrat latin-ext normal 600 */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+/* montserrat latin normal 600 */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/montserrat-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Material Icons — ersetzt das bisher von Google geladene Icon-Stylesheet.
+   Die .material-icons-Klasse kam bisher aus dieser fremden CSS-Datei; ohne sie
+   würden sämtliche Icons als Ligatur-Klartext ("arrow_back") erscheinen. */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/material-icons.woff2') format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}