@conciso/design-system 0.0.0-bootstrap.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Conciso GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,15 @@
+NOTICE
+
+Dieses Repository steht unter der MIT-Lizenz (siehe LICENSE), mit folgenden
+Ausnahmen:
+
+- Logos und Wortmarken unter assets/brand/: Eigentum der Conciso GmbH, nicht
+  unter der MIT-Lizenz dieses Repositories. Siehe assets/brand/LICENSE.
+- Schriften (Montserrat, Libre Baskerville) unter fonts/: SIL Open Font
+  License 1.1. Siehe fonts/Montserrat-OFL.txt und
+  fonts/LibreBaskerville-OFL.txt.
+- Icons unter icons/source/ui-*.svg (generische UI-Icons, nicht die
+  Bereichs-Glyphen co-*/ki-*/es-*/wo-*): überwiegend aus Heroicons
+  (https://heroicons.com) übernommen oder abgeleitet, teils angepasst.
+  Copyright (c) Tailwind Labs, Inc., MIT-Lizenz, siehe
+  icons/LICENSE-heroicons.

package/README.md

@@ -0,0 +1,134 @@
+# Conciso Design System
+
+Das Design System von Conciso: **Design Tokens + CSS-Komponenten + Light/Dark-Mode**, framework-agnostisch und auf **WCAG 2.1 Stufe AA** ausgelegt (also alle Kriterien der Stufen A und AA; AAA wo ohne Nachteil erreichbar, aber nicht als Bedingung). Keine Build-Pflicht für die Nutzung — die Komponenten sind CSS-Klassen, die auf semantisches HTML angewendet werden, plus optionales Vanilla-JS für interaktive Muster (Theme-Toggle, Topnav-Dropdowns).
+
+> **Status:** Inhaltlich stabil. Distribution (npm-Paket), Token-Export und Repo-Hygiene werden gerade ergänzt — siehe die GitHub-Releases dieses Repos und den eingefrorenen Stand im [CHANGELOG](CHANGELOG.md).
+
+## Für wen?
+
+- **Entwickler:innen**, die Conciso-Oberflächen bauen (Website, CMS-Templates, künftig Framework-Apps).
+- **Designer:innen**, die Komponenten, Tokens und Konventionen nachschlagen.
+
+## Dokumentation ansehen
+
+Die vollständige, navigierbare Doku-Site liegt im Repo:
+
+```bash
+# Repo klonen, dann die Doku-Site im Browser öffnen
+open docs/index.html        # macOS
+# oder einen kleinen Static-Server im Repo-Root starten und /docs/ öffnen:
+npx serve .
+```
+
+Sie enthält 35 Sektionen in sechs Gruppen: **Marke** (Markenrad, Brand Areas, Logo, Bildsprache), **Grundlagen** (Farben, Typografie, Spacing, Responsive, Elevation, Design Tokens, Icons, Barrierefreiheit), **Komponenten** mit Code-Snippets und Do/Don'ts, **Seitenmuster** (Wissensbeitrag, Veranstaltung, Seminar und die zugehörigen Übersichten), **Beispielseiten** als komplette Seiten und **Referenzen**.
+
+## Nutzung im eigenen Projekt
+
+Ausführlich in [docs/GETTING-STARTED.md](docs/GETTING-STARTED.md). Kurzfassung:
+
+**Variante A — CSS direkt einbinden** (funktioniert heute, kein Build):
+
+```html
+<!-- Self-Host-Fonts (DSGVO: keine Google-CDN-Anfrage) -->
+<link rel="stylesheet" href="css/fonts.css">
+
+<!-- Design System: REIHENFOLGE EINHALTEN -->
+<link rel="stylesheet" href="css/tokens.css">
+<link rel="stylesheet" href="css/dark-mode.css">
+<link rel="stylesheet" href="css/base.css">
+<link rel="stylesheet" href="css/components.css">
+```
+
+Die Schriften (Montserrat + Libre Baskerville) liegen self-hosted unter `fonts/` und werden über `css/fonts.css` eingebunden — keine externe CDN-Anfrage. Das gebündelte `dist/conciso-ds.css` enthält die `@font-face`-Regeln bereits.
+
+**Variante B — als npm-Paket von npmjs.org** (der empfohlene Weg):
+
+```bash
+npm install @conciso/design-system
+```
+```js
+import '@conciso/design-system/dist/conciso-ds.css';
+// Tokens (optional, für JS/Framework):
+import { tokens } from '@conciso/design-system/tokens';
+// Icons (optional, maschinenlesbar — komplette <svg>-Bodies, currentColor):
+import { icons } from '@conciso/design-system/icons';
+// Brand-Logo (Wortmarke, drei Varianten):
+import logo from '@conciso/design-system/assets/brand/logo-conciso.svg';
+```
+
+Keine `.npmrc` nötig — das Paket liegt auf der öffentlichen npm-Registry, `npm install`
+funktioniert ohne weitere Einrichtung. Siehe [ADR-0011](docs/adr/0011-veroeffentlichung-auf-npmjs.md).
+Gilt ab dem ersten echten Release nach dem Merge dieser Änderung; bis dahin liegt auf
+npmjs nur eine Bootstrap-Platzhalterversion (siehe ADR-0011).
+
+Die Wortmarke liegt als SVG unter [`assets/brand/`](assets/brand/README.md) (Default, Light, Dark). Größen, Schutzraum und Verwendung stehen in der Doku unter **Marke → Logo**.
+
+> Das Paket steht unter der [MIT-Lizenz](LICENSE) (Ausnahmen — Brand-Assets, Schriften,
+> Icons — siehe [NOTICE](NOTICE)).
+>
+> **Alternative — GitHub Packages** (weiterhin verfügbar, unverändert, z. B. für
+> Consumer innerhalb der GitHub-Organisation `conciso`): eine `.npmrc`, die den
+> `@conciso`-Scope umleitet, plus ein Token mit Scope `read:packages` auch fürs Lesen
+> (in GitHub Actions genügt `secrets.GITHUB_TOKEN`):
+> ```ini
+> @conciso:registry=https://npm.pkg.github.com
+> //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+> ```
+> GitHub Packages verlangt diese Auth wegen der **Registry**, nicht wegen der Lizenz.
+> Details in [Getting Started](docs/GETTING-STARTED.md#1-einbinden), Begründung in
+> [ADR-0004](docs/adr/0004-verteilung-und-versionierung.md). Ohne npm bleibt Variante A
+> (Vendoren von `dist/conciso-ds.css` + `fonts/`) der schlankeste Weg.
+>
+> Die **Doku** (Storybook, die Komponenten-Referenz der Angular-Lib) ist öffentlich
+> einsehbar unter <https://conciso.github.io/conciso-design-system/> — ohne Auth, aber
+> `noindex` (nicht für Suchmaschinen bestimmt). Details und Abwägung in
+> [ADR-0009](docs/adr/0009-storybook-oeffentlich-auf-github-pages.md).
+
+**Angular:** Für Angular gibt es Komponenten statt nur CSS-Klassen —
+`@conciso/design-system-angular` aus denselben beiden Registries, im Lockstep auf
+derselben Version. Siehe [README der Lib](angular-lib/projects/design-system-angular/README.md).
+
+**Dark Mode:** `data-theme="dark"` am `<html>` setzen. Siehe [Getting Started](docs/GETTING-STARTED.md#3-dark-mode) für das Anti-Flash-Snippet.
+
+**Erstes Element:**
+
+```html
+<button class="btn btn-filled btn-co">Kontakt</button>
+<p style="font:var(--ty-body-md);color:var(--tx-primary)">Fließtext.</p>
+```
+
+## Verzeichnisse
+
+| Pfad | Inhalt |
+|---|---|
+| `css/` | `tokens.css` · `dark-mode.css` · `base.css` · `components.css` (Ladereihenfolge!) — der konsumierbare Kern |
+| `dist/` | `conciso-ds.css` (gebündelt, generiert) |
+| `tokens/` | `tokens.json` · `tokens.scss` · `tokens.js` (Token-Export, generiert) |
+| `icons/` | `icons.json` · `icons.js` · `README.md` (Icon-Export, generiert) + `source/*.svg` (Quelle) |
+| `fonts/` | Self-Host-Fonts (woff2) + OFL-Lizenztexte; eingebunden über `css/fonts.css` |
+| `scripts/` | `build-tokens.mjs` · `build-icons.mjs` · `bundle-css.mjs` (`npm run build`) · `check-dark-states.mjs` · `check-contrast.mjs` |
+| `docs/` | Doku-/Showcase-Site: `index.html` · `main.js` · `assets/images/` · `GETTING-STARTED.md` |
+
+> Der konsumierbare Teil (`css/`, `dist/`, `tokens/`, `icons/`) liegt im Root, die Doku-Site in `docs/`. Das npm-Paket enthält nur den Kern (kein `docs/`, keine Bilder). Icon-Details und Mapping: [`icons/README.md`](icons/README.md).
+
+## Mitwirken / Erweitern
+
+Konventionen und der Workflow zum Hinzufügen von Tokens/Komponenten stehen in **[CONTRIBUTING.md](CONTRIBUTING.md)** — bitte vor Änderungen lesen. Das ist der Kern für eine konsistente, nachhaltige Pflege.
+
+### Prüfungen
+
+```bash
+npm run build             # Tokens, Icons, gebündeltes CSS (dist/ ist eingecheckt)
+npm run check:dark-states # Zustands-Regeln, die im Dark dunkel-auf-dunkel laufen
+npm run check:contrast    # Kontrast der gerenderten Doku in Light UND Dark
+```
+
+`check:contrast` rendert `docs/index.html` in beiden Modi in Chromium und prüft Text (4,5:1 bzw. 3:1 bei Großtext), getönte Bauteil-Füllungen und Bedienelement-Grenzen (3:1). Es misst die **fertige Kette** und findet damit auch inline gesetzte Farben, die kein Token-Check sieht. Der Stand ist **0 Verstöße**; jede Abweichung meldet das Skript mit Pfad, Farbe und Sollwert (`--list` zeigt jeden Fund einzeln). Es braucht einen Browser; die Playwright-Abhängigkeit dafür hängt am `storybook-angular`-Workspace und kommt mit dem `npm install` **im Repo-Wurzelverzeichnis** mit (npm-Workspaces, das Skript findet sie auch hoisted); lokal genügt ein installiertes Chrome. In der Pipeline läuft es in `storybook-angular.yml`.
+
+## Versionierung
+
+[SemVer](https://semver.org/lang/de/). Die Version steht **nicht** im Repo, sondern im jeweiligen Git-Tag `vX.Y.Z`; Änderungen dazu stehen im zugehörigen GitHub-Release. Releases entstehen automatisch aus Conventional Commits auf `main` ([ADR-0010](docs/adr/0010-release-ausloesung-und-versionsquelle.md)) und werden nach npmjs.org **und** GitHub Packages veröffentlicht ([ADR-0011](docs/adr/0011-veroeffentlichung-auf-npmjs.md)). Der handgeschriebene [CHANGELOG](CHANGELOG.md) ist mit Version 2.0.0 eingefroren. `@conciso/design-system` und `@conciso/design-system-angular` tragen dabei im **Lockstep** immer dieselbe Version, damit die peerDependency der Angular-Lib auf die CSS-Schicht eng gepinnt auflöst ([ADR-0004](docs/adr/0004-verteilung-und-versionierung.md)).
+
+## Lizenz & Kontakt
+
+MIT, siehe [LICENSE](LICENSE). Ausnahmen (Brand-Assets unter `assets/brand/`, Schriften, Icons) siehe [NOTICE](NOTICE). Fragen und Beiträge über GitHub Issues im Repo. Maintainer: _Design-System-Team (bitte eintragen)_.

package/assets/brand/LICENSE

@@ -0,0 +1,11 @@
+Conciso-Logos und -Wortmarken
+
+Copyright (c) 2026 Conciso GmbH. Alle Rechte vorbehalten.
+
+Die Logos und Wortmarken der Marke Conciso in diesem Verzeichnis sind keine
+Software im Sinne der MIT-Lizenz dieses Repositories (siehe LICENSE im
+Repository-Root). Sie bleiben Eigentum der Conciso GmbH und dürfen
+ausschließlich zur Darstellung der Marke Conciso verwendet werden, etwa in
+Anwendungen, die mit diesem Design System gebaut werden. Jede andere Nutzung,
+Veränderung oder Weitergabe bedarf der ausdrücklichen Genehmigung der
+Conciso GmbH.

package/assets/brand/README.md

@@ -0,0 +1,45 @@
+# Brand-Assets
+
+Die Conciso-Wortmarke in drei Varianten. Verbindlich für Größen, Schutzraum und
+Verwendung ist die Doku-Sektion **Marke → Logo** (`docs/index.html`, `#sec-logo`);
+dieses Dokument beschreibt nur die Dateien und den Einbau.
+
+**Lizenz:** Anders als der Rest des Repositories (MIT, siehe [`LICENSE`](../../LICENSE))
+stehen diese Dateien nicht unter MIT. Sie bleiben Eigentum der Conciso GmbH,
+siehe [`LICENSE`](LICENSE) in diesem Verzeichnis.
+
+| Datei | Einsatz |
+|---|---|
+| `logo-conciso.svg` | Default. Wortmarke in `--tx-brand`, Punkt in `--co-500`. Helle Hintergründe |
+| `logo-conciso-light.svg` | Vollständig weiß. Dunkle Hintergründe, Footer, Dark Mode |
+| `logo-conciso-dark.svg` | Monochrom in `--tx-brand`, ohne Punkt. Druck, Stempel, einfarbig |
+
+## Einbau
+
+Immer als SVG per `<img>`, nie als PNG oder JPG. Der Wechsel zwischen Light und
+Dark läuft über die portablen Klassen `.logo-themed-default` und
+`.logo-themed-light` aus `css/components.css`, rein per CSS und ohne JavaScript:
+
+```html
+<span class="ep-logo">
+  <img class="logo-themed-default" src="assets/brand/logo-conciso.svg" alt="Conciso">
+  <img class="logo-themed-light" src="assets/brand/logo-conciso-light.svg" alt="" aria-hidden="true">
+</span>
+```
+
+Die Höhe ist das Leitmaß, die Breite ergibt sich proportional. `.ep-logo img`
+setzt bereits `height:24px;width:auto`.
+
+Als Paket-Abhängigkeit liegen die Dateien unter
+`@conciso/design-system/assets/brand/logo-conciso.svg`.
+
+## Warum hier `width` und `height` am SVG stehen bleiben
+
+`CONTRIBUTING.md` § 10 schreibt für `icons/source/` vor, `width` und `height`
+weglassen. Das gilt dort, weil Icons inline eingebettet werden und die Attribute
+die Größensteuerung per CSS behindern.
+
+Logos werden per `<img>` eingebunden. Dort liefern genau diese Attribute dem
+Browser das intrinsische Seitenverhältnis (2400 zu 314, also etwa 7,6 zu 1) und
+verhindern Layout-Shift beim Laden. Die Attribute sind hier also Absicht und
+keine Nachlässigkeit, bitte nicht gegen die Icon-Regel „aufräumen“.

package/assets/brand/logo-conciso-dark.svg

@@ -0,0 +1,4 @@
+<svg width="2400" height="314" viewBox="0 0 2400 314" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2345.69 200.172C2330.17 200.172 2317.23 205.408 2306.89 215.857C2296.55 226.315 2291.38 239.86 2291.38 256.491C2291.38 272.654 2296.55 286.199 2306.89 297.124C2317.23 308.051 2330.17 313.522 2345.69 313.522C2361.67 313.522 2374.72 308.177 2384.83 297.479C2394.94 286.786 2400 273.133 2400 256.491C2400 239.86 2394.94 226.315 2384.83 215.857C2374.72 205.408 2361.67 200.172 2345.69 200.172Z" fill="#333E48"/>
+<path d="M153.206 312.283C210.82 312.283 244.96 291.58 275.687 258.367L233.863 215.666C210.392 237.232 189.481 251.035 155.341 251.035C104.129 251.035 68.7082 207.9 68.7082 156.141V155.28C68.7082 103.519 104.983 61.2493 155.341 61.2493C185.214 61.2493 208.685 74.1894 231.729 95.3244L273.553 46.5843C245.812 18.9793 212.098 0 155.767 0C64.0148 0 0 70.3073 0 156.141V157.004C0 243.702 65.2951 312.283 153.206 312.283ZM497.183 312.283C589.363 312.283 656.363 241.975 656.363 156.141V155.28C656.363 69.4442 590.215 0 498.035 0C405.857 0 338.855 70.3073 338.855 156.141V157.004C338.855 242.84 405.003 312.283 497.183 312.283ZM498.035 251.035C445.118 251.035 407.564 207.9 407.564 156.141V155.28C407.564 103.519 444.264 61.2493 497.183 61.2493C550.101 61.2493 587.655 104.382 587.655 156.141V157.004C587.655 208.765 550.954 251.035 498.035 251.035ZM740.435 307.107H805.302V115.165L949.972 307.107H1005.88V5.17756H941.01V191.08L801.035 5.17756H740.435V307.107ZM1243.88 312.283C1301.49 312.283 1335.63 291.58 1366.36 258.367L1324.54 215.666C1301.06 237.232 1280.15 251.035 1246.01 251.035C1194.8 251.035 1159.38 207.9 1159.38 156.141V155.28C1159.38 103.519 1195.66 61.2493 1246.01 61.2493C1275.89 61.2493 1299.36 74.1894 1322.4 95.3244L1364.22 46.5843C1336.49 18.9793 1302.77 0 1246.44 0C1154.69 0 1090.67 70.3073 1090.67 156.141V157.004C1090.67 243.702 1155.97 312.283 1243.88 312.283ZM1455.75 307.107H1521.47V5.17756H1455.75V307.107ZM1737.17 311.421C1801.61 311.421 1846.85 277.777 1846.85 217.821V216.96C1846.85 164.338 1812.7 142.34 1752.09 126.381C1700.46 113.01 1687.66 106.538 1687.66 86.6971V85.8355C1687.66 71.1705 1700.88 59.5244 1726.06 59.5244C1751.25 59.5244 1777.28 70.7382 1803.74 89.2852L1837.87 39.2526C1807.58 14.6649 1770.45 0.863179 1726.92 0.863179C1665.89 0.863179 1622.37 37.0954 1622.37 91.8732V92.7363C1622.37 152.692 1661.21 169.514 1721.38 185.04C1771.3 197.98 1781.55 206.608 1781.55 223.43V224.291C1781.55 241.975 1765.33 252.76 1738.45 252.76C1704.3 252.76 1676.14 238.526 1649.25 216.097L1610.42 263.112C1646.27 295.46 1691.93 311.421 1737.17 311.421ZM2073.01 312.283C2165.19 312.283 2232.19 241.975 2232.19 156.141V155.28C2232.19 69.4442 2166.05 0 2073.86 0C1981.69 0 1914.69 70.3073 1914.69 156.141V157.004C1914.69 242.84 1980.83 312.283 2073.01 312.283ZM2073.86 251.035C2020.95 251.035 1983.4 207.9 1983.4 156.141V155.28C1983.4 103.519 2020.1 61.2493 2073.01 61.2493C2125.93 61.2493 2163.48 104.382 2163.48 156.141V157.004C2163.48 208.765 2126.78 251.035 2073.86 251.035Z" fill="#333E48"/>
+</svg>

package/assets/brand/logo-conciso-light.svg

@@ -0,0 +1,4 @@
+<svg width="2400" height="314" viewBox="0 0 2400 314" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2345.69 200.172C2330.17 200.172 2317.23 205.408 2306.89 215.857C2296.55 226.315 2291.38 239.86 2291.38 256.491C2291.38 272.654 2296.55 286.199 2306.89 297.124C2317.23 308.051 2330.17 313.522 2345.69 313.522C2361.67 313.522 2374.72 308.177 2384.83 297.479C2394.94 286.786 2400 273.133 2400 256.491C2400 239.86 2394.94 226.315 2384.83 215.857C2374.72 205.408 2361.67 200.172 2345.69 200.172Z" fill="white"/>
+<path d="M153.206 312.283C210.82 312.283 244.96 291.58 275.687 258.367L233.863 215.666C210.392 237.232 189.481 251.035 155.341 251.035C104.129 251.035 68.7082 207.9 68.7082 156.141V155.28C68.7082 103.519 104.983 61.2493 155.341 61.2493C185.214 61.2493 208.685 74.1894 231.729 95.3244L273.553 46.5844C245.812 18.9793 212.098 0 155.767 0C64.0148 0 0 70.3073 0 156.141V157.004C0 243.702 65.2951 312.283 153.206 312.283ZM497.183 312.283C589.363 312.283 656.363 241.975 656.363 156.141V155.28C656.363 69.4442 590.215 0 498.035 0C405.857 0 338.855 70.3073 338.855 156.141V157.004C338.855 242.84 405.003 312.283 497.183 312.283ZM498.035 251.035C445.118 251.035 407.564 207.9 407.564 156.141V155.28C407.564 103.519 444.264 61.2493 497.183 61.2493C550.101 61.2493 587.655 104.382 587.655 156.141V157.004C587.655 208.765 550.954 251.035 498.035 251.035ZM740.435 307.107H805.302V115.165L949.972 307.107H1005.88V5.17756H941.01V191.08L801.035 5.17756H740.435V307.107ZM1243.88 312.283C1301.49 312.283 1335.63 291.58 1366.36 258.367L1324.54 215.666C1301.06 237.232 1280.15 251.035 1246.01 251.035C1194.8 251.035 1159.38 207.9 1159.38 156.141V155.28C1159.38 103.519 1195.66 61.2493 1246.01 61.2493C1275.89 61.2493 1299.36 74.1894 1322.4 95.3244L1364.22 46.5844C1336.49 18.9793 1302.77 0 1246.44 0C1154.69 0 1090.67 70.3073 1090.67 156.141V157.004C1090.67 243.702 1155.97 312.283 1243.88 312.283ZM1455.75 307.107H1521.47V5.17756H1455.75V307.107ZM1737.17 311.421C1801.61 311.421 1846.85 277.777 1846.85 217.821V216.96C1846.85 164.338 1812.7 142.34 1752.09 126.381C1700.46 113.01 1687.66 106.538 1687.66 86.6971V85.8355C1687.66 71.1705 1700.88 59.5244 1726.06 59.5244C1751.25 59.5244 1777.28 70.7382 1803.74 89.2851L1837.87 39.2526C1807.58 14.6649 1770.45 0.863179 1726.92 0.863179C1665.89 0.863179 1622.37 37.0955 1622.37 91.8732V92.7363C1622.37 152.692 1661.21 169.514 1721.38 185.04C1771.3 197.98 1781.55 206.608 1781.55 223.43V224.291C1781.55 241.975 1765.33 252.76 1738.45 252.76C1704.3 252.76 1676.14 238.526 1649.25 216.097L1610.42 263.112C1646.27 295.46 1691.93 311.421 1737.17 311.421ZM2073.01 312.283C2165.19 312.283 2232.19 241.975 2232.19 156.141V155.28C2232.19 69.4442 2166.05 0 2073.86 0C1981.69 0 1914.69 70.3073 1914.69 156.141V157.004C1914.69 242.84 1980.83 312.283 2073.01 312.283ZM2073.86 251.035C2020.95 251.035 1983.4 207.9 1983.4 156.141V155.28C1983.4 103.519 2020.1 61.2493 2073.01 61.2493C2125.93 61.2493 2163.48 104.382 2163.48 156.141V157.004C2163.48 208.765 2126.78 251.035 2073.86 251.035Z" fill="white"/>
+</svg>

package/assets/brand/logo-conciso.svg

@@ -0,0 +1,4 @@
+<svg width="2400" height="314" viewBox="0 0 2400 314" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M2345.69,200.173C2330.17,200.173 2317.23,205.408 2306.89,215.857C2296.55,226.315 2291.38,239.861 2291.38,256.492C2291.38,272.654 2296.55,286.199 2306.89,297.125C2317.23,308.052 2330.17,313.522 2345.69,313.522C2361.67,313.522 2374.72,308.178 2384.83,297.48C2394.94,286.787 2400,273.133 2400,256.492C2400,239.861 2394.94,226.315 2384.83,215.857C2374.72,205.408 2361.67,200.173 2345.69,200.173Z" style="fill:rgb(0,190,190);fill-rule:nonzero;"/>
+    <path d="M153.206,312.283C210.82,312.283 244.96,291.58 275.687,258.367L233.863,215.666C210.392,237.232 189.481,251.035 155.341,251.035C104.129,251.035 68.708,207.9 68.708,156.141L68.708,155.28C68.708,103.519 104.983,61.249 155.341,61.249C185.214,61.249 208.685,74.189 231.729,95.324L273.553,46.584C245.812,18.979 212.098,0 155.767,0C64.015,0 0,70.307 0,156.141L0,157.004C0,243.702 65.295,312.283 153.206,312.283ZM497.183,312.283C589.363,312.283 656.363,241.975 656.363,156.141L656.363,155.28C656.363,69.444 590.215,0 498.035,0C405.857,0 338.855,70.307 338.855,156.141L338.855,157.004C338.855,242.84 405.003,312.283 497.183,312.283ZM498.035,251.035C445.118,251.035 407.564,207.9 407.564,156.141L407.564,155.28C407.564,103.519 444.264,61.249 497.183,61.249C550.101,61.249 587.655,104.382 587.655,156.141L587.655,157.004C587.655,208.765 550.954,251.035 498.035,251.035ZM740.435,307.107L805.302,307.107L805.302,115.165L949.972,307.107L1005.88,307.107L1005.88,5.178L941.01,5.178L941.01,191.08L801.035,5.178L740.435,5.178L740.435,307.107ZM1243.88,312.283C1301.49,312.283 1335.63,291.58 1366.36,258.367L1324.54,215.666C1301.06,237.232 1280.15,251.035 1246.01,251.035C1194.8,251.035 1159.38,207.9 1159.38,156.141L1159.38,155.28C1159.38,103.519 1195.66,61.249 1246.01,61.249C1275.89,61.249 1299.36,74.189 1322.4,95.324L1364.22,46.584C1336.49,18.979 1302.77,0 1246.44,0C1154.69,0 1090.67,70.307 1090.67,156.141L1090.67,157.004C1090.67,243.702 1155.97,312.283 1243.88,312.283ZM1455.75,307.107L1521.47,307.107L1521.47,5.178L1455.75,5.178L1455.75,307.107ZM1737.17,311.421C1801.61,311.421 1846.85,277.777 1846.85,217.821L1846.85,216.96C1846.85,164.338 1812.7,142.34 1752.09,126.381C1700.46,113.01 1687.66,106.538 1687.66,86.697L1687.66,85.836C1687.66,71.171 1700.88,59.524 1726.06,59.524C1751.25,59.524 1777.28,70.738 1803.74,89.285L1837.87,39.253C1807.58,14.665 1770.45,0.863 1726.92,0.863C1665.89,0.863 1622.37,37.095 1622.37,91.873L1622.37,92.736C1622.37,152.692 1661.21,169.514 1721.38,185.04C1771.3,197.98 1781.55,206.608 1781.55,223.43L1781.55,224.291C1781.55,241.975 1765.33,252.76 1738.45,252.76C1704.3,252.76 1676.14,238.526 1649.25,216.097L1610.42,263.112C1646.27,295.46 1691.93,311.421 1737.17,311.421ZM2073.01,312.283C2165.19,312.283 2232.19,241.975 2232.19,156.141L2232.19,155.28C2232.19,69.444 2166.05,0 2073.86,0C1981.69,0 1914.69,70.307 1914.69,156.141L1914.69,157.004C1914.69,242.84 1980.83,312.283 2073.01,312.283ZM2073.86,251.035C2020.95,251.035 1983.4,207.9 1983.4,156.141L1983.4,155.28C1983.4,103.519 2020.1,61.249 2073.01,61.249C2125.93,61.249 2163.48,104.382 2163.48,156.141L2163.48,157.004C2163.48,208.765 2126.78,251.035 2073.86,251.035Z" style="fill:rgb(51,62,72);fill-rule:nonzero;"/>
+</svg>

package/css/base.css

@@ -0,0 +1,303 @@
+/* ── Base: Reset · Layout · Global ── */
+
+/* ════════════════════════════════════════════
+   SYSTEM HIGH CONTRAST (Windows / OS level)
+   @media (forced-colors: active)
+   ════════════════════════════════════════════ */
+@media (forced-colors: active) {
+  /* box-shadow is suppressed by OS – replace focus rings with outline */
+  :focus-visible {
+    outline: 3px solid Highlight !important;
+    outline-offset: 2px !important;
+    box-shadow: none !important;
+  }
+  /* Custom button backgrounds need explicit forced-color mapping */
+  .btn-filled {
+    forced-color-adjust: none;
+    background: ButtonText;
+    color: ButtonFace;
+    border: 2px solid ButtonText;
+  }
+  .btn-tonal,
+  .btn-elevated,
+  .btn-text,
+  .btn-outlined {
+    color: ButtonText;
+    border-color: ButtonText;
+    background: ButtonFace;
+    box-shadow: none;
+  }
+  /* Restore borders that forced-colors removes */
+  .chip { border: 2px solid ButtonText }
+  .card,
+  .card-elevated,
+  /* .stoerer liegt über einem Foto und verlässt sich im Light auf --bd-strong plus --e1.
+     Im Kontrastmodus fällt der Schatten weg, der 1px-Rand allein trägt die Kachel dann nicht
+     mehr gegen das Bild ab — gleiche 2px wie bei den übrigen Kartenflächen. */
+  .stoerer { border: 2px solid CanvasText }
+  .badge { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText }
+  /* Active states */
+  .nav-item.active { border-left-color: Highlight; color: Highlight }
+  .atab.active { border-bottom-color: Highlight; color: Highlight }
+  .tbtn.active { forced-color-adjust: none; background: Highlight; color: HighlightText }
+  /* Links in footer */
+  .footer-link,
+  .footer-btm-link { color: LinkText }
+  /* Skip link */
+  .skip-link { background: Highlight; color: HighlightText; border: 2px solid ButtonText }
+  /* Sidebar toggle */
+  .sidebar-toggle { border: 1px solid ButtonText; color: ButtonText }
+  /* Form inputs */
+  .field input,
+  .field select,
+  .field textarea { border: 2px solid ButtonText; color: CanvasText; background: Canvas }
+  /* Code blocks */
+  .code-block { border: 1px solid CanvasText }
+}
+
+/* ── Reset ── */
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+body{font-family:var(--font);font-size:1rem;line-height:1.7;color:var(--tx-primary);background:var(--bg-page);transition:background var(--m-std),color var(--m-std)}
+
+/* ── Skip link ── */
+/* Fläche co-700, nicht co-500: weiß auf #00BEBE trägt nur 2,31:1 und verfehlt AA für Normaltext.
+   In Ruhe ist der Link geclippt, beim Fokus springt er sichtbar herein, also genau dann, wenn
+   Tastaturnutzende ihn brauchen. co-700 (#007575) trägt weiß mit 5,52:1 und ist zugleich die
+   Füllfarbe, die .btn-filled.btn-co verwendet. Gilt in beiden Modi, co-* flippt nicht. */
+.skip-link{position:absolute;top:-100px;left:var(--s4);background:var(--co-700);color:#fff;padding:var(--s2) var(--s4);border-radius:var(--r-md);font-weight:600;font-size:0.875rem;z-index:9999;transition:top var(--m-fast);border:none;cursor:pointer;font-family:var(--font)}
+.skip-link:focus{top:var(--s4)}
+
+/* ── Layout ── */
+.ds-page{display:flex;min-height:100vh}
+.ds-sidebar{width:252px;flex-shrink:0;background:var(--bg-surface);border-right:var(--bd);padding:var(--s8) 0;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;transition:width var(--m-std)}
+.ds-content{flex:1;padding:var(--s10) var(--s6);max-width:1280px;transition:margin-left var(--m-std)}
+/* Vorschau-Modus (≤ 1024px): Doku-Sidebar ausblenden und horizontalen Content-Abstand
+   auf 0, damit die Beispielseiten exakt die Fensterbreite einnehmen. Sonst quetscht die
+   feste 252px-Sidebar die .ep-page in eine Restspalte, während ihre @media-Queries die
+   volle Fensterbreite lesen — Container-Breite und Breakpoint passen dann nicht zusammen
+   und die Mobile/Tablet-Vorschau wird unbrauchbar. So stimmen .ep-page-Breite und Breakpoint
+   überein → DevTools-Geräte-Modus und Fenster-Verkleinern zeigen die Seite faithful.
+   Die Beispielseiten-Tabs liegen im Content (nicht in der Sidebar), bleiben also erreichbar. */
+@media (max-width: 1024px) {
+  .ds-sidebar{display:none}
+  .ds-content{padding-inline:0}
+}
+
+/* ── Sidebar ── */
+.nav-logo{padding:0 var(--s6) var(--s6);border-bottom:var(--bd);margin-bottom:var(--s5);display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
+/* --co-ink, nicht co-500: die Signalfarbe trägt auf Weiß nur 2,31:1. Das Ink-Token flippt mit dem
+   Theme (Light co-700, Dark co-200), ein festes co-700 wäre im Dark 2,36:1 auf der Sidebar. */
+.nav-logo-text{font:500 0.75rem/1rem var(--font);letter-spacing:.02em;text-transform:uppercase;color:var(--co-ink);white-space:nowrap;overflow:hidden;transition:opacity var(--m-std),width var(--m-std)}
+
+/* ── Sidebar toggle button ── */
+.sidebar-toggle{background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--r-xs);color:var(--tx-secondary);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--m-fast),color var(--m-fast)}
+.sidebar-toggle:hover{background:var(--bg-overlay);color:var(--tx-primary)}
+.sidebar-toggle:focus-visible{outline:none;box-shadow:var(--focus-aa)}
+.sidebar-toggle svg{transition:transform var(--m-std)}
+
+/* ── Sidebar collapsed state ── */
+.ds-sidebar.collapsed{width:56px}
+.ds-sidebar.collapsed .nav-logo{padding:0 0 var(--s6);justify-content:center}
+.ds-sidebar.collapsed .nav-logo-text{opacity:0;width:0;overflow:hidden}
+.ds-sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg)}
+.ds-sidebar.collapsed .nav-section,.ds-sidebar.collapsed .nav-subnav{display:none}
+.ds-sidebar.collapsed .nav-item{justify-content:center;padding:var(--s2) 0;font-size:0;gap:0}
+.ds-sidebar.collapsed .nav-icon{width:20px;height:20px;opacity:.6}
+.ds-sidebar.collapsed .nav-item:hover .nav-icon{opacity:1}
+.ds-sidebar.collapsed .nav-item.active .nav-icon{opacity:1}
+/* .nav-section ist ein <h2> (Screenreader-Outline der Nav-Gruppen) — UA-Heading-Margins zurücksetzen */
+.nav-section{margin:0;padding:var(--s3) var(--s6) var(--s1);font:500 0.75rem/1rem var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--tx-muted)}
+/* Nav-Gruppen als Liste (Screenreader: „Liste, N Einträge“); Default-Einrückung/Bullets entfernen */
+.nav-list{list-style:none;margin:0;padding:0}
+/* Größerer Abstand vor jeder folgenden Gruppen-Überschrift (visuelle Trennung der Bereiche);
+   die erste Gruppe braucht ihn nicht, sie ist bereits durch das Logo/den Rahmen getrennt. */
+.nav-list + .nav-section{margin-top:var(--s4)}
+.nav-item{display:flex;align-items:center;gap:var(--s2);padding:7px var(--s6);font:500 0.875rem/1.25rem var(--font);color:var(--tx-secondary);cursor:pointer;border-left:3px solid transparent;transition:background var(--m-fast),color var(--m-fast),border-color var(--m-fast);background:none;border-top:none;border-right:none;border-bottom:none;width:100%;text-align:left}
+.nav-item:hover{background:var(--bg-overlay);color:var(--tx-primary)}
+.nav-item:focus-visible{outline:none;box-shadow:var(--focus-aa)}
+/* Aktiver Eintrag: Text co-700 (co-500 #00BEBE auf co-50 war nur 2,07:1 → co-700 = 4,95:1, WCAG 1.4.3).
+   Akzentbalken co-600 (3,28:1 auf Weiß, WCAG 1.4.11). Zustand zusätzlich über font-weight (nicht nur Farbe → 1.4.1). */
+.nav-item.active{color:var(--co-700);background:var(--co-50);border-left-color:var(--co-600);font-weight:600}
+.nav-icon{width:18px;height:18px;flex-shrink:0;opacity:.7;fill:none;stroke:currentColor;stroke-width:1.5}
+.nav-item.active .nav-icon{opacity:1}
+.area-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
+
+/* ── Sections ── */
+.ds-section{display:none}
+.ds-section.visible{display:block}
+.sec-title{font:400 2rem/2.5rem var(--font-display);color:var(--tx-primary);margin-bottom:var(--s2)}
+.sec-sub{font:400 1rem/1.5rem var(--font);color:var(--tx-secondary);margin-bottom:var(--s8)}
+.group-title{font:400 1.5rem/2rem var(--font-display);color:var(--tx-primary);margin:var(--s10) 0 var(--s4);padding-top:var(--s6);border-top:var(--bd)}
+.lbl{font:500 0.75rem/1rem var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--tx-muted);display:block;margin-bottom:var(--s2)}
+.row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-start}
+.token{font-family:var(--font-mono);font-size:0.75rem;color:var(--co-700);background:var(--co-50);padding:2px 7px;border-radius:var(--r-xs)}
+
+/* ── Theme switcher ── */
+.theme-bar{position:fixed;top:var(--s3);right:var(--s4);display:flex;gap:var(--s2);z-index:200;background:var(--bg-surface);border:var(--bd-strong);border-radius:var(--r-full);padding:4px;box-shadow:var(--e2)}
+.tbtn{display:inline-flex;align-items:center;gap:6px;padding:5px var(--s3);border-radius:var(--r-full);border:none;cursor:pointer;font:500 0.75rem/1rem var(--font);background:transparent;color:var(--tx-secondary);transition:background var(--m-fast),color var(--m-fast)}
+.tbtn svg{width:14px;height:14px;flex:none}
+.tbtn:focus-visible{outline:none;box-shadow:var(--focus-aa)}
+/* Aktiv-Fläche co-700 statt co-500: weiß auf #007575 = 5,5:1 (AA) — co-500 #00BEBE war nur 2,3:1 (Fail bei 12px/500) */
+.tbtn.active{background:var(--co-700);color:#fff}
+
+/* ── Color palettes ── */
+.pal-group{margin-bottom:var(--s8)}
+.pal-label{font:500 0.875rem/1.25rem var(--font);color:var(--tx-secondary);margin-bottom:var(--s3);display:flex;align-items:center;gap:var(--s2)}
+/* Die Reihe ist eine Karte: Haarlinie plus Rundung, Inhalt geklippt. Ohne den Rahmen verliert sie
+   im Light ihre Kante, weil die hellen Stufen (50, 100) und der weiße Beschriftungs-Streifen beide
+   fast die Farbe der Seite haben (#E0F7F7 gegen Weiß sind 1,12:1). Im Dark trennt sich der Streifen
+   von der Seite ohnehin, dort ist der Rahmen nur konsequent. Die Rundung liegt an der Karte, damit
+   sie oben UND unten greift; das Klippen betrifft nur die Ecken, nicht den Streifen. */
+.pal-row{display:flex;gap:2px;border:1px solid var(--bd-c);border-radius:var(--r-md);overflow:hidden}
+/* Farbfeld oben, Beschriftung auf einem neutralen Streifen darunter. Vorher saß die Beschriftung
+   AUF der Farbe, und dort lässt sich der Kontrast nicht garantieren: bei sieben von hundert Stufen
+   liegt die Leuchtdichte so in der Mitte, dass weder weiße noch dunkle Schrift 4,5:1 erreicht
+   (auf ki-700 schafft selbst reines Schwarz nur 4,82:1). Auf dem neutralen Streifen sind es überall
+   6,28:1, in beiden Modi, und das Farbfeld bleibt unverdeckt. Der abzulesende Hexwert ist
+   Information, keine Dekoration, deshalb hat er einen Grund, auf dem er trägt. */
+.swatch{position:relative;flex:1;min-height:104px;display:flex;flex-direction:column;justify-content:flex-end;padding:0;overflow:hidden}
+/* Keine Deckkraft-Absenkung auf der Beschriftung: opacity .75 kostete jedes Label rund ein
+   Viertel Kontrast, und auf dem Swatch steht der Hexwert, den man ablesen soll. Die Farbe wird
+   je Swatch gesetzt (helle Fläche → dunkler Text und umgekehrt), das reicht als Abstufung. */
+/* Der Streifen braucht Luft nach oben, sonst klebt die Beschriftung am Farbfeld. nowrap, weil ein
+   Umbruch ("800 T") das Farbfeld dieser einen Spalte nach oben schöbe und die Reihe eine Stufe
+   bekäme. */
+/* Linie zwischen Farbfeld und Beschriftung: im Light grenzt der weiße Streifen sonst nicht gegen
+   die hellen Stufen ab. Sie sitzt auf der ersten Zeile des Streifens, also nur einmal je Spalte. */
+.swatch span{font-size:0.75rem;font-family:var(--font-mono);font-weight:600;line-height:1.5;background:var(--bg-surface);color:var(--tx-secondary);padding:5px 6px 0;white-space:nowrap}
+.swatch > span:first-of-type{border-top:1px solid var(--bd-c);padding-top:4px}
+/* Eingeblendeter Hex-Code (nur Tonal-Paletten): kräftiger als das Stufen-Label, damit als Referenz ablesbar */
+.swatch .swatch-hex{text-transform:uppercase;letter-spacing:.01em;padding:0 6px 5px}
+/* Unter 1024 px wird eine Spalte zu schmal für den Hexwert. Er entfällt dann; der Wert steht
+   weiterhin im title-Attribut und wird per Klick kopiert (docs/main.js). Die Stufe bleibt. */
+@media (max-width:1024px){ .swatch .swatch-hex{display:none} }
+/* Klick-zum-Kopieren: Cursor + Fokus. Fokus-Ring als inset box-shadow (zwei Töne → auf hellen
+   UND dunklen Swatches sichtbar), da .pal-row overflow:hidden einen äußeren Ring abschneiden würde. */
+.swatch.is-copyable,.clip-card.is-copyable{cursor:pointer}
+.swatch.is-copyable:focus-visible,.swatch.is-copyable.is-copied{outline:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.95),inset 0 0 0 4px rgba(17,17,17,.9);z-index:1}
+.clip-card.is-copyable:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+/* Bestätigung: Häkchen-Overlay (fit auch auf schmalen Swatches; SR-Ansage übernimmt der aria-live-Bereich) */
+.swatch.is-copied::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(17,17,17,.82);color:#fff;font:700 1rem/1 var(--font);border-radius:inherit}
+.clip-card.is-copied{position:relative}
+.clip-card.is-copied::after{content:"✓ Kopiert";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(17,17,17,.82);color:#fff;font:600 0.875rem/1 var(--font)}
+.ai-warning{margin-top:var(--s3);padding:var(--s3) var(--s4);background:var(--ki-50);border-radius:var(--r-md);font-size:0.75rem;color:var(--ki-800);border:1px solid var(--ki-200)}
+.pal-note{margin-top:var(--s3);padding:var(--s3) var(--s4);background:var(--c-warning-bg);border-radius:var(--r-md);font-size:0.75rem;color:#5a3e00;border:1px solid #e8d080}
+.pal-thresholds{margin-top:var(--s2);padding:var(--s2) var(--s4);background:#EDF4FF;border-radius:var(--r-md);font-size:0.75rem;color:#1a3a6b;border:1px solid #b8d0f0;font-family:var(--font-mono)}
+.pal-thresholds .thr-badge{display:inline-block;padding:1px 6px;border-radius:3px;font-weight:700;margin-right:2px;font-size:0.75rem}
+.thr-aa-l{background:#dbeeff;color:#1a3a6b}
+.thr-aa{background:#c3f0e8;color:#0a4a38}
+.thr-aaa{background:#e8d0ff;color:#3a1070}
+
+/* ── Area specimen text (default: dark brand shade for light bg) ── */
+[data-area="co"] .area-specimen-text{color:var(--co-700)}
+[data-area="ki"] .area-specimen-text{color:var(--ki-800)}
+[data-area="es"] .area-specimen-text{color:var(--es-700)}
+[data-area="wo"] .area-specimen-text{color:var(--wo-700)}
+
+/* ── Area cards ── */
+.areas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6);margin-bottom:var(--s8)}
+@media(max-width:768px){.areas-grid{grid-template-columns:1fr}}
+.area-card{border-radius:var(--r-lg);border:var(--bd-strong);overflow:hidden;display:flex;flex-direction:column}
+.area-header{padding:var(--s5) var(--s6);color:#fff}
+.area-header h2{font:400 1rem/1.5rem var(--font-display);margin-bottom:4px}
+.area-header p{font:400 0.75rem/1rem var(--font)}
+.area-body{padding:var(--s4) var(--s6);background:var(--bg-surface);flex:1}
+.area-swatch-row{display:flex;gap:3px;margin-bottom:var(--s3)}
+.area-swatch{width:28px;height:28px;border-radius:var(--r-xs)}
+.area-meta{font:400 0.75rem/1rem var(--font);color:var(--tx-secondary)}
+.area-meta code{font-size:0.75rem;font-family:var(--font-mono)}
+
+/* Utility: hartes Verstecken (überschreibt Inline-display) */
+.is-hidden{display:none!important}
+
+/* ── Layout Grid (12 Spalten · Gutter: var(--s6)=24px · Container: 1280px) ── */
+.layout-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s6)}
+.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
+.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
+.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
+.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
+/* Kollabiert auf 1 Spalte. Wichtig: auch die col-*-Spannweiten zurücksetzen — sonst spannen
+   die Kinder weiter span 7/span 5/… und erzeugen bei nur einer 1fr-Spalte implizite Auto-Spalten,
+   wodurch unterschiedlich gespannte Geschwister (z. B. col-7 Text vs. col-5 Bild) verschieden
+   breit werden. Mit grid-column:auto ist jedes Kind exakt volle Breite. */
+@media(max-width:768px){
+  .layout-grid{grid-template-columns:1fr}
+  .layout-grid>[class*="col-"]{grid-column:auto}
+}
+/* Team-Kacheln („Wer wir sind“): statt einspaltig untereinander als 2×2-Raster, damit die
+   vier Köpfe auf dem Phone kompakt bleiben. Override der col-3-Spannweite (3 → 1 Track). */
+@media(max-width:768px){
+  .layout-grid[data-team-tiles]{grid-template-columns:1fr 1fr}
+  .layout-grid[data-team-tiles] > [data-team-tile]{grid-column:auto}
+}
+/* Team-Roster („Die Menschen“, Über uns): ~70 Personen sollen mobil nicht einspaltig als
+   endlose Liste laufen. Tablet (521–768px) → 3 Spalten (ab ~520px gibt das ≥ ~146px je Spalte,
+   genug Platz). Phone (≤ 520px) → 2 Spalten, sonst zu gedrängt. minmax(0,1fr) verhindert
+   Grid-Blowout durch lange Namen (Text wrappt). Engerer Gap (--s4). col-3-Spannweite → 1 Track.
+   520px-Bruch konsistent mit dem Hero-CTA-Breakpoint. */
+@media(max-width:768px){
+  .layout-grid[data-team-roster]{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
+  .layout-grid[data-team-roster] > .col-3{grid-column:auto}
+}
+@media(max-width:520px){
+  .layout-grid[data-team-roster]{grid-template-columns:repeat(2,minmax(0,1fr))}
+}
+/* Benefits-Grid (4 Kategorien) und Event-Meta-Strip (4 Key-Facts: Datum/Ort/Format/Eintritt):
+   Tablet (521–768px) → 2×2 statt der einspaltigen layout-grid-Kollabierung; Smartphone (≤ 520px)
+   → 1×4 einspaltig. Desktop (> 768px) bleibt 4-spaltig. Die col-3-Spannweite setzt bereits die
+   globale Regel oben zurück. 520px-Bruch konsistent mit Roster/Hero-CTAs. */
+@media(max-width:768px){
+  .layout-grid[data-benefits],.layout-grid[data-event-meta]{grid-template-columns:1fr 1fr}
+}
+@media(max-width:520px){
+  .layout-grid[data-benefits],.layout-grid[data-event-meta]{grid-template-columns:1fr}
+}
+/* Editorial-Split (Bild + Text nebeneinander): stapelt auf Mobile einspaltig, das Bild läuft
+   full-width. Der inline Text-Cap (max-width:520px, gedacht für die Zeilenlänge NEBEN dem Bild)
+   erzeugt dann eine Asymmetrie — Text schmaler als das Bild darüber. Unter dem Bild aufheben,
+   damit der Fließtext bündig zur Bildbreite läuft. !important, weil der Cap inline gesetzt ist;
+   greift nur auf .ep-section-sub INNERHALB eines layout-grid (Splits), nicht auf Sektions-Leads. */
+@media(max-width:768px){
+  .layout-grid .ep-section-sub{max-width:none!important}
+}
+
+/* ── Utility: visuell versteckt, aber für Screenreader lesbar ── */
+.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+
+/* ── Type Scale Utilities (15 Tokens) ── */
+.type-display-lg{font:400 3.5625rem/4rem var(--font-display)}
+.type-display-md{font:400 2.8125rem/3.25rem var(--font-display)}
+.type-display-sm{font:400 2.25rem/2.75rem var(--font-display)}
+.type-headline-lg{font:400 2rem/2.5rem var(--font-display)}
+.type-headline-md{font:400 1.75rem/2.25rem var(--font-display)}
+.type-headline-sm{font:400 1.5rem/2rem var(--font-display)}
+.type-title-lg{font:500 1.375rem/1.75rem var(--font)}
+.type-title-md{font:500 1rem/1.5rem var(--font)}
+.type-title-sm{font:500 0.875rem/1.25rem var(--font)}
+.type-body-lg{font:400 1rem/1.5rem var(--font)}
+.type-body-md{font:400 0.875rem/1.25rem var(--font)}
+.type-body-sm{font:400 0.75rem/1rem var(--font)}
+.type-label-lg{font:500 0.875rem/1.25rem var(--font)}
+.type-label-md{font:500 0.75rem/1rem var(--font)}
+.type-label-sm{font:500 0.75rem/1rem var(--font);text-transform:uppercase;letter-spacing:.08em}
+
+/* ── Sub-navigation ── */
+.nav-subnav{display:none;padding-bottom:var(--s2)}
+.nav-subnav.visible{display:block}
+.nav-sub-item{display:block;padding:5px var(--s6) 5px 36px;font:var(--ty-body-xs);color:var(--tx-secondary);text-decoration:none;transition:background var(--m-fast),color var(--m-fast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.nav-sub-item::before{content:"–";opacity:.4;margin-right:6px;font-size:0.75rem}
+.nav-sub-item:hover{color:var(--tx-primary);background:var(--bg-overlay)}
+.nav-sub-item:focus-visible{outline:none;box-shadow:var(--focus-aa)}
+
+/* ── Scroll margin for jump targets ── */
+.group-title{scroll-margin-top:var(--s8)}
+
+/* ── Back-to-top button ── */
+/* co-600 statt co-500: weißes Caret braucht ≥3:1 (1.4.11) — co-600 = 3,29:1 (Icon), und der Button vs.
+   Seite ≥3:1 sowohl auf weiß (Light, 3,29) als auch auf bg-page (Dark, 3,32); co-500 verfehlt es im Light,
+   co-700 im Dark. visibility (mit-transitioniert) nimmt den versteckten Button aus der Tab-Reihenfolge —
+   sonst ist ein unsichtbares Fokusziel per Tab erreichbar. */
+.back-to-top{position:fixed;bottom:var(--s8);right:var(--s6);width:44px;height:44px;border-radius:var(--r-full);background:var(--co-600);color:#fff;border:none;cursor:pointer;box-shadow:var(--e3);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--m-std),visibility var(--m-std),box-shadow var(--m-fast);z-index:150}
+.back-to-top.visible{opacity:1;visibility:visible;pointer-events:auto}
+.back-to-top:hover{box-shadow:var(--e4)}
+.back-to-top:focus-visible{outline:none;box-shadow:var(--focus-ring)}