@birdapi/velinstyle 0.8.0 → 0.9.0

package/README.de.md

@@ -1,21 +1,26 @@
 <div align="center">
 
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset=".github/assets/readme-banner-dark.svg">
-  <img src=".github/assets/readme-banner.svg" alt="VelinStyle — barrierefreies CSS und Web Components" width="100%">
-</picture>
-
-<br>
+```
+██╗   ██╗███████╗██╗     ██╗███╗   ██╗███████╗████████╗██╗  ██╗██╗     ███████╗
+██║   ██║██╔════╝██║     ██║████╗  ██║██╔════╝╚══██╔══╝██║  ██║██║     ██╔════╝
+██║   ██║█████╗  ██║     ██║██╔██╗ ██║███████╗   ██║   ███████║██║     █████╗
+╚██╗ ██╔╝██╔══╝  ██║     ██║██║╚██╗██║╚════██║   ██║   ██╔══██║██║     ██╔══╝
+ ╚████╔╝ ███████╗███████╗██║██║ ╚████║███████║   ██║   ██║  ██║███████╗███████╗
+  ╚═══╝  ╚══════╝╚══════╝╚═╝╚═╝  ╚═══╝╚══════╝   ╚═╝   ╚═╝  ╚═╝╚══════╝╚══════╝
+```
 
 [![Lizenz: MIT](https://img.shields.io/badge/Lizenz-MIT-2563eb?style=flat-square)](LICENSE)
-[![Release](https://img.shields.io/badge/Release-v0.8.0-2563eb?style=flat-square)](CHANGELOG.md)
-[![WCAG AA](https://img.shields.io/badge/WCAG-AA-16a34a?style=flat-square)](docs/a11y.html)
-[![CSS min](https://img.shields.io/badge/CSS_min-~46KB-15803d?style=flat-square)]()
-[![JS min](https://img.shields.io/badge/JS_min-~66KB-15803d?style=flat-square)]()
+[![Release](https://img.shields.io/badge/Release-v0.9.0-2563eb?style=flat-square)](https://github.com/SkyliteDesign/velinstyle/releases/tag/v0.9.0)
 [![npm version](https://img.shields.io/npm/v/@birdapi/velinstyle?style=flat-square)](https://www.npmjs.com/package/@birdapi/velinstyle)
-[![GitHub Pages](https://img.shields.io/badge/Docs-GitHub_Pages-2563eb?style=flat-square)](https://skylitedesign.github.io/velinstyle/)
+[![WCAG 2.2 AAA](https://img.shields.io/badge/WCAG_2.2-AAA-16a34a?style=flat-square)](https://velinstyle.info/docs/a11y.html)
+[![GitHub Stars](https://img.shields.io/github/stars/SkyliteDesign/velinstyle?style=flat-square)](https://github.com/SkyliteDesign/velinstyle/stargazers)
+[![PRs Welcome](https://img.shields.io/badge/PRs-willkommen-2563eb?style=flat-square)](CONTRIBUTING.de.md)
 
-[Dokumentation](https://skylitedesign.github.io/velinstyle/) · [npm](https://www.npmjs.com/package/@birdapi/velinstyle) · [Beispiele](samples/) · [Playground](tools/playground/index.html) · [Theme Builder](tools/theme-builder/index.html) · [Issues](https://github.com/SkyliteDesign/velinstyle/issues)
+```bash
+npm i @birdapi/velinstyle
+```
+
+**[Website](https://velinstyle.info)** · **[Doku](https://velinstyle.info/docs/)** · **[Demos](https://velinstyle.info/demos/)** · **[npm](https://www.npmjs.com/package/@birdapi/velinstyle)** · **[Stern auf GitHub](https://github.com/SkyliteDesign/velinstyle)**
 
 **[English](README.md)** · **Deutsch**
 
@@ -23,313 +28,197 @@
 
 ---
 
-## Inhalt
-
-- [Problem & Lösung](#the-problem--the-fix)
-- [Das liefert VelinStyle](#what-you-get)
-- [Architektur](#architecture)
-- [Schnellstart](#quick-start)
-- [Warum VelinStyle?](#why-velinstyle)
-- [Demo-Galerie](#demo-gallery)
-- [CLI-Referenz](#cli-reference)
-- [Ökosystem](#ecosystem)
-- [Mitmachen](#join-in)
-- [Browser-Unterstützung](#browser-support)
-- [Lizenz](#license)
-
----
-
-## The problem & the fix
-
-<table>
-<tr>
-<td width="50%" valign="top">
-
-### Das Problem
-
-Unter Zeitdruck landen **Barrierefreiheit** und **konsistentes Theming** oft erst am Ende—wenn überhaupt. Schwere Bundles, einheitlicher Bootstrap-Look oder Tailwind-Sprawl frustrieren Design und Engineering gleichermassen.
-
-</td>
-<td width="50%" valign="top">
-
-### Die VelinStyle-Antwort
-
-**WCAG-AA-Muster**, **OKLCH-Tokens**, **container-sensitives Layout** und **Web Components** gehören zum System—nicht als Nachrüstung. Lesbares CSS, optionale CLI, kein Preprocessor-Zwang.
-
-</td>
-</tr>
-</table>
+**VelinStyle** ist das **WCAG-2.2-AAA-CSS-Framework** mit nativer JavaScript-Runtime und Web Components — CSS-Utilities, 0.9.0-Module (Search, Motion, Highlight, Attributes, Meta) und Security-Toolchain, **ohne externe UI-Framework-Abhängigkeiten** im Kern.
 
----
+Gedacht für Teams mit **lesbarem HTML**, **AAA-Token-Defaults** (AA über `data-velin-contrast="aa"`) und **CLI-Automatisierung** statt Utility-Chaos.
 
-## What you get
-
-<table>
-<thead>
-<tr><th></th><th>Funktion</th><th>Was du davon hast</th></tr>
-</thead>
-<tbody>
-<tr><td align="center">♿</td><td><strong>WCAG AA by design</strong></td><td>Fokus, ARIA und Tastatur in Komponenten und Overlays</td></tr>
-<tr><td align="center">🎨</td><td><strong>OKLCH + 13 Theme-Presets</strong></td><td>Perzeptuell gleichmässige Farben; Dark Mode per Token-Swap</td></tr>
-<tr><td align="center">📦</td><td><strong>~46 KB CSS + ~66 KB JS (min)</strong></td><td>Schlank im Vergleich zu vielen All-in-One-Stacks</td></tr>
-<tr><td align="center">📐</td><td><strong>Container Queries + Utilities</strong></td><td>Bausteine passen sich <em>ihrem</em> Container an, nicht nur dem Viewport</td></tr>
-<tr><td align="center">🧩</td><td><strong>25 CSS-Module · 29 Web Components</strong></td><td>Modals, Tabs, Drawer, Toasts, Icons—APIs in <a href="docs/css-components.html">CSS</a> &amp; <a href="docs/components.html">WC-Docs</a></td></tr>
-<tr><td align="center">🛠️</td><td><strong>Optionale CLI</strong></td><td><code>init</code>, <code>build</code>, <code>icons</code>, <code>scan</code>, <code>prefix</code>, <code>blueprint</code>, <code>scaffold</code>, <code>layout</code>, <code>tokens build</code></td></tr>
-<tr><td align="center">🌍</td><td><strong>RTL-ready</strong></td><td>Logical Properties und layout-orientierte Defaults · <a href="samples/rtl.html">RTL-Beispiel</a></td></tr>
-</tbody>
-</table>
+> **Dogfooding:** Die gesamte VelinStyle-Website und Dokumentation läuft zu 100 % mit VelinStyle — ohne externe Skripte oder UI-Frameworks.
 
 ---
 
-## Architecture
-
-```mermaid
-flowchart LR
-  tokens[tokens] --> reset[reset]
-  reset --> base[base]
-  base --> a11y[a11y]
-  a11y --> layout[layout]
-  layout --> components[components]
-  components --> utilities[utilities]
-  utilities --> themes[themes]
-```
+## Features auf einen Blick
 
-Einstieg: [`src/velinstyle.css`](src/velinstyle.css) · Build-Ausgabe: `dist/` (`npm run build`)
-
-```css
-@layer tokens, reset, base, a11y, layout, components, utilities, themes;
-```
+- **CSS-Utilities** — `velin-*` Spacing, Farbe, Flex, Motion, Safe-Area; Cascade Layers + OKLCH-Tokens
+- **35+ Komponenten** — semantische BEM-Klassen (`velin-btn`, `velin-card`, `velin-grid`, …)
+- **Motion-Runtime** — Reveal, Stagger, scroll-getriebene Animation, rAF-Scheduler
+- **VelinSearch** — fuzzy Offline-Suche mit Highlighting und Kategorien
+- **Syntax-Highlighting** — lazy In-View für JS, HTML, CSS, JSON und mehr
+- **HTML-Attribute** — 27 deklarative Bridges (`velin-modal`, `velin-reveal`, `velin-scroll-top`, `velin-code`, …)
+- **Qualität** — 36/36 A11y-Component-Contracts, Playwright Cross-Browser-Smoke (`npm run test:e2e`), CLS-Platzhalter (`wc-placeholder.css`)
+- **Security-Tools** — `scan`, PII-Regeln, Sanitize-API, gehärtete Komponenten
+- **CLI** — init, build, scan, scaffold, tokens, docs generate, perf audit, layout audit
+- **Velin-Meta** — `velin-agent.json`, `llms.txt` und Page-Level-Agent-JSON für KI-Assistenten
 
 ---
 
-## Quick start
-
-### <span>①</span> Installation
+## Installation
 
 ```bash
-npm install @birdapi/velinstyle
-```
-
-### <span>②</span> CSS + Komponenten einbinden (ES-Module)
-
-```html
-<link rel="stylesheet" href="node_modules/@birdapi/velinstyle/dist/velinstyle.min.css">
-<script type="module" src="node_modules/@birdapi/velinstyle/dist/velinstyle-components.min.js"></script>
+npm i @birdapi/velinstyle
 ```
 
-<details>
-<summary><strong>CDN-Alternative</strong> (ohne npm install)</summary>
-
-```html
-<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@latest/dist/velinstyle.min.css">
-<script type="module" src="https://unpkg.com/@birdapi/velinstyle@latest/dist/velinstyle-components.min.js"></script>
-```
-
-</details>
+| Pfad | Verwendung |
+| --- | --- |
+| `@birdapi/velinstyle/css` | Vollständiges minifiziertes Stylesheet |
+| `@birdapi/velinstyle/bundle` | Web-Components-ESM-Bundle |
+| `@birdapi/velinstyle/search` | VelinSearch-Modul |
+| `@birdapi/velinstyle/motion` | Motion-Runtime |
+| `@birdapi/velinstyle/attributes` | HTML-Attribut-Bridges |
+| `@birdapi/velinstyle/highlight` | Syntax-Highlighting |
+| `@birdapi/velinstyle/meta` | Agent-Metadaten-API |
 
-### <span>③</span> Erste Oberfläche markupen
+**CDN (Version pinnen):**
 
 ```html
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<div class="velin-container velin-p-6">
-  <p class="velin-lead velin-text-muted">Hallo, VelinStyle.</p>
-  <button type="button" class="velin-btn velin-btn--primary">Primäre Aktion</button>
-</div>
+<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@0.9.0/dist/velinstyle.min.css">
+<script type="module" src="https://unpkg.com/@birdapi/velinstyle@0.9.0/dist/velinstyle-components.min.js"></script>
 ```
 
-> **Repository klonen?** `dist/` liegt nicht im Repo. `npm install` und `npm run build`, dann HTML auf `dist/velinstyle.min.css` und `dist/velinstyle-components.min.js` zeigen. Ohne ES-Module: `velinstyle-components.iife.js` — siehe [Dokumentation](docs/index.html).
+Nach dem Klonen: `npm install && npm run build` — `dist/` wird erzeugt, nicht committet.
 
 ---
 
-## Why VelinStyle?
+## Quickstart
 
-Eine **einheitliche Produktsprache**—Präfix-Klassen (`velin-`), klare **`@layer`-Architektur**, modernes CSS (`@scope`, Nesting, `:has()`)—ohne **Liefergeschwindigkeit** zu opfern.
-
-| | Bootstrap | Tailwind | **VelinStyle** |
-| --- | :---: | :---: | :---: |
-| A11y | ⚠️ Teilweise | — Nicht eingebaut | ✅ **WCAG AA strukturell** |
-| Farben | HEX/RGB | HEX/RGB | ✅ **OKLCH** + tokenisierte Themes |
-| Dark Mode | ⚠️ Build / manuell | `dark:`-Varianten | ✅ **Token-Swap** (`data-velin-theme`) |
-| Layout | Viewport-first | Viewport-Utilities | ✅ **Container Queries** + Media |
-| Interaktion | ⚠️ Legacy-JS-Muster | Eigenes JS | ✅ **Web Components** |
-| Bundle (Richtwert) | ~230 KB CSS+JS | JIT / variabel | ✅ **~46 KB CSS + ~66 KB JS (min)** |
+```html
+<!DOCTYPE html>
+<html lang="de" data-velin-theme="ocean">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@0.9.0/dist/velinstyle.min.css">
+  <script type="module" src="https://unpkg.com/@birdapi/velinstyle@0.9.0/dist/velinstyle-components.min.js"></script>
+</head>
+<body class="velin-p-6">
+  <button type="button" class="velin-btn velin-btn--primary" velin-reveal="slide-up">Loslegen</button>
+  <velin-code-block language="html" line-numbers>&lt;p class="velin-text-muted"&gt;Hallo VelinStyle&lt;/p&gt;</velin-code-block>
+</body>
+</html>
+```
 
 ---
 
-## Demo gallery
-
-| Demo | Seite | Demo | Seite |
-| --- | --- | --- | --- |
-| Landing | [samples/landing.html](samples/landing.html) | Dashboard | [samples/dashboard.html](samples/dashboard.html) |
-| Login | [samples/login.html](samples/login.html) | Registrierung | [samples/signup.html](samples/signup.html) |
-| Pricing | [samples/pricing.html](samples/pricing.html) | E-Commerce | [samples/ecommerce.html](samples/ecommerce.html) |
-| Blog | [samples/blog.html](samples/blog.html) | Portfolio | [samples/portfolio.html](samples/portfolio.html) |
-| Chat | [samples/chat.html](samples/chat.html) | E-Mail | [samples/email.html](samples/email.html) |
-| Kanban | [samples/kanban.html](samples/kanban.html) | Einstellungen | [samples/settings.html](samples/settings.html) |
-| RTL-Layout | [samples/rtl.html](samples/rtl.html) | A11y-Patterns | [samples/a11y-patterns.html](samples/a11y-patterns.html) |
+## Core-Module (0.9.0)
 
-| Tool | Seite |
+| Export | Beschreibung |
 | --- | --- |
-| HTML-Playground | [tools/playground/index.html](tools/playground/index.html) |
-| OKLCH Theme Builder | [tools/theme-builder/index.html](tools/theme-builder/index.html) |
+| `@birdapi/velinstyle/search` | Fuzzy Offline-Suche, Provider, optional Web Worker |
+| `@birdapi/velinstyle/motion` | `initMotion`, Stagger, Smooth Scroll, einheitlich `.velin-in-view` |
+| `@birdapi/velinstyle/attributes` | Registry deklarativer `velin-*` HTML-Attribut-Bridges |
+| `@birdapi/velinstyle/highlight` | `velinSyntax`, lazy Language Packs, OKLCH-Token-Farben |
+| `@birdapi/velinstyle/meta` | `buildAgentBundle`, Page-Meta MIME `application/vnd.velinstyle.meta+json` |
 
 ---
 
-## CLI reference
-
-Alle Befehle: `npx velinstyle <befehl>` · `npx velinstyle --help`
-
-<details>
-<summary><strong>Projekt &amp; Build</strong> — <code>init</code>, <code>build</code>, <code>themes</code>, <code>add</code></summary>
-
-- **`npx velinstyle init`** — erstellt `velinstyle.config.js` (Layer-Auswahl, Theme, Scan-Optionen).
-- **`npx velinstyle build`** — CSS-Bundle aus gewählten Layern (`--output` / `-o`, `--minify`).
-- **`npx velinstyle themes`** — listet 13 Theme-Presets.
-- **`npx velinstyle add &lt;komponente&gt;`** — kopiert eine einzelne Komponenten-CSS-Datei ins Projekt.
-
-</details>
-
-<details>
-<summary><strong>Icons</strong> — Multi-Provider-Sprite-Workflow</summary>
-
-- **`npx velinstyle icons list`** — Lucide, Heroicons, Bootstrap Icons, Material Symbols, Font Awesome, Tabler.
-- **`npx velinstyle icons add lucide --icons menu,search,check`**
-- **`npx velinstyle icons add heroicons --icons arrow-left --variant outline`**
-- **`npx velinstyle icons build`** — Sprite neu bauen (im VelinStyle-Klon: schreibt `icons/svg/` und baut neu).
-
-</details>
+## Web Components
 
-<details>
-<summary><strong>scan</strong> — Security, A11y &amp; CSS-Lint</summary>
+**36 kanonische** Custom Elements (38 Lazy-Loader-Einträge inkl. Legacy `velin-tooltip-wc` und `velin-stepper-wc`) — reines CSS, wenn kein Verhalten nötig ist. `src/base/wc-placeholder.css` verringert Layout-Shift vor dem Upgrade.
 
-- **`npx velinstyle scan [pfad]`** — HTML, CSS, JS; **`--format json`** für CI.
-- **`--severity`** — Mindest-Stufe filtern: `error` | `warning` | `info`.
-- **`--fix`** — nur sichere Auto-Fixes; **`--fix-dry-run`** listet Dateien ohne Schreiben.
-- **`--fix-lang`** — BCP 47 für `lang` auf `<html>` (Standard `de`).
+Beispiele: `velin-modal`, `velin-search`, `velin-code-block`, `velin-drawer`, `velin-stepper`, `velin-tooltip`, `velin-toast`, `velin-persist`.
 
-**Auto-Fixes (Auszug):** `rel="noopener noreferrer"` bei riskantem `target="_blank"`; `lang` auf `<html>`; Skip-Link wenn `id="main"` existiert; rohe `z-index` → `--velin-z-*`.
+- [Komponenten-Dokumentation](https://velinstyle.info/docs/components/buttons.html)
+- [Generierte Web-Component-API](https://velinstyle.info/docs/generated/components/README.md)
 
-**Nicht automatisch:** `javascript:`-URLs, `eval`, rohes `innerHTML`, Inline-Event-Handler — im Code bereinigen.
-
-**Trusted Types / XSS:** Der Scanner ersetzt keine CSP-Policies. Web Components nutzen `escapeHTML()` / `sanitizeURL()`; siehe [docs/security.html](docs/security.html).
-
-</details>
-
-<details>
-<summary><strong>prefix</strong> — Klassen-Codemod &amp; JSON-Maps</summary>
-
-- **`npx velinstyle prefix &lt;ordner&gt;`** — Standard: Dry-Run; **`--write`** schreibt Änderungen.
-- **`--bootstrap-display`** — mappt Bootstrap-`d-*` auf Velin-Display-Klassen.
-- **`velinstyle-prefix-map.json`** im Zielordner oder **`--map datei.json`** — explizite Token → Klassen (überschreibt Katalog und Bootstrap-Aliase). Beispiel: [examples/velinstyle-prefix-map.sample.json](examples/velinstyle-prefix-map.sample.json).
-
-</details>
-
-<details>
-<summary><strong>scaffold</strong> — Prompt → HTML (0.8.0)</summary>
-
-- **`npx velinstyle scaffold list-intents`**
-- **`npx velinstyle scaffold "Navbar mit Suche" -o nav.html`**
-- **`npx velinstyle scaffold "…" --json`** — für Agenten/CI
+---
 
-Siehe [docs/guides/prompt-scaffolding.html](docs/guides/prompt-scaffolding.html).
+## CLI
 
-</details>
+| Befehl | Zweck |
+| --- | --- |
+| `npx velinstyle init` | `velinstyle.config.js` im Projekt anlegen |
+| `npx velinstyle scan` | Security, Accessibility, CSS und PII prüfen |
+| `npx velinstyle search index` | `dist/search-index.json` für Offline-Docs-Suche |
+| `npx velinstyle tokens build` | Design-Tokens-JSON nach CSS kompilieren |
+| `npx velinstyle meta` | `velin-agent.json` und `llms.txt` erzeugen |
 
-<details>
-<summary><strong>layout</strong> — Responsive-Audit (0.8.0)</summary>
+Außerdem: `npx velinstyle docs generate` — Markdown-Referenz unter `docs/generated/`.
 
-- **`npx velinstyle layout audit [pfad]`**
-- **`npx velinstyle layout suggest [pfad]`**
-- **`npx velinstyle layout fix [pfad] --write`**
+---
 
-Siehe [docs/guides/responsive-layout.html](docs/guides/responsive-layout.html).
+## Security
 
-</details>
+VelinStyle bringt **Security-Tooling mit**, nicht als Nachgedanke:
 
-<details>
-<summary><strong>blueprint</strong> — 22 HTML-Snippets</summary>
+- **`velinstyle scan`** — Markup- und A11y-Regeln; PII-Scanner (`--only pii`, `--fix`)
+- **`@birdapi/velinstyle/sanitize`** — URL- und Text-Sanitization
+- **`<velin-secure-field>`** — keine Klartext-Secrets im DOM; gehärtete Search-/Copy-URLs
 
-- **`npx velinstyle blueprint list`**
-- **`npx velinstyle blueprint &lt;name&gt; -o datei.html`**
+[Security-Dokumentation](https://velinstyle.info/docs/extend/security.html)
 
-Ids: `modal`, `form-login`, `layout-dashboard`, `navbar-header`, `hero-section`, `card-grid`, `table-responsive`, `alert-stack`, `breadcrumb-bar`, `footer-simple`, `form-contact`, `pagination-bar`, `search-field`, `sidebar-layout`.
+---
 
-</details>
+## Velin-Meta
 
-<details>
-<summary><strong>tokens build</strong> — Design-Tokens → CSS</summary>
+Maschinenlesbarer Kontext für **Cursor, Copilot und eigene Agenten**:
 
-```bash
-npx velinstyle tokens build --input examples/tokens.sample.json -o tokens.css
-```
+- **Globaler Bundle** — `dist/velin-agent.json` + `dist/llms.txt` via `velinstyle meta`
+- **Page-Level-Meta** — `<script type="application/vnd.velinstyle.meta+json" id="velin-meta">`
+- **CLI** — `velinstyle meta page my.html --write`
 
-</details>
+[Velin-Meta-Guide](https://velinstyle.info/docs/guides/velin-meta.html)
 
 ---
 
-## Ecosystem
+## Doku & Website
 
-<table>
-<tr>
-<td width="50%" valign="top">
+- [velinstyle.info](https://velinstyle.info) — Produktseite und Demos
+- [Guides](https://velinstyle.info/docs/guides/index.html) · [Feature scope](https://velinstyle.info/docs/guides/feature-scope.html)
+- [API-Referenz](https://velinstyle.info/docs/guides/api-reference.html) — aus dem Quellcode generiert
+- [Generiertes Markdown](https://velinstyle.info/docs/generated/index.html) — Komponenten, Tokens, Utilities, CLI, Regeln
 
-**Starter &amp; Pakete**
+---
 
-- [templates/vite-velinstyle](templates/vite-velinstyle) — Vite + 3 Seiten + Theme-Toggle
-- [@velinstyle/react](packages/react) — experimentelle dünne React-Wrapper
+## Changelog
 
-**Dokumentation**
+Alle Releases, Breaking Changes und Migrationsschritte: [CHANGELOG.md](CHANGELOG.md).
 
-- [Erste Schritte](docs/getting-started.html) · [Migration](docs/migration.html)
-- [A11y-Patterns](docs/a11y-patterns/index.html) · [Security](docs/security.html)
+---
 
-</td>
-<td width="50%" valign="top">
+## Vergleich
 
-**Entwicklung (dieses Repo)**
+| | Bootstrap | Tailwind | Shoelace | **VelinStyle** |
+| --- | :---: | :---: | :---: | :---: |
+| HTML-Lesbarkeit | Mittel | Niedrig | Mittel | **Hoch** |
+| Klassen-Vorhersagbarkeit | Mittel | Niedrig | Mittel | **`velin-btn--primary`** |
+| Utility-Wucher | Niedrig | **Hoch** | Niedrig | **Kontrolliert** |
+| Override-Story | Schwer | Config-Datei | Shadow DOM | **CSS-Layer + Tokens** |
+| Barrierefreiheit | Teilweise | DIY | Gute WC | **WCAG 2.2 AAA-Tokens** |
+| Dark Mode | Manuell | `dark:` überall | Theme-Attribut | **Token-Tausch** |
+| App-Chrome | Legacy-JS | BYO | nur WC | **CSS + optionale WCs** |
+| Liefergeschwindigkeit | Schnell | Schnell (mit Build) | Schnell | **CDN, kein Build nötig** |
+| Runtime-Module | — | — | — | **Search, Motion, Meta, …** |
 
-```bash
-npm install
-npm run dev      # Serve auf :3000
-npm run build
-npm test
-npm run test:a11y
-```
+---
 
-**Themes (13):** `brutalist`, `corporate`, `earth`, `forest`, `midnight`, `neon`, `nordic`, `ocean`, `pastel`, `retro`, `sharp`, `soft`, `sunset` — siehe [docs/themes.html](docs/themes.html).
+## Live-Demos
 
-</td>
-</tr>
-</table>
+Vollständige Anwendungsseiten auf [velinstyle.info/demos/](https://velinstyle.info/demos/) — [Crypto](https://velinstyle.info/demos/showcase-crypto.html) · [E-Commerce](https://velinstyle.info/demos/showcase-ecommerce.html) · [Dashboard](https://velinstyle.info/demos/showcase-dashboard.html) · [Alle Demos](https://velinstyle.info/demos/) · [showcase-demos forken](https://github.com/SkyliteDesign/velinstyle/tree/main/showcase-demos)
 
-<!-- Maintainer: .github/social-preview.png (1280×640) unter Settings → Social preview -->
+<p align="center">
+  <a href="https://velinstyle.info/demos/showcase-crypto.html">
+    <img src=".github/assets/readme/hero-demo.webp" alt="VelinStyle Crypto-Dashboard-Demo" width="720">
+  </a>
+</p>
 
 ---
 
-## Join in
-
-Wenn VelinStyle dir Zeit spart oder die Latte für inklusive UI hebt:
-
-1. **Stern dalassen**, damit andere das Projekt finden.
-2. **Issue öffnen** mit Feedback, Grenzfällen oder Ideen.
-3. **Pull Request** nach [CONTRIBUTING.de.md](CONTRIBUTING.de.md).
+## Mitwirken
 
-Maintainer: [RELEASING.md](RELEASING.md) · [SECURITY.md](SECURITY.md)
+PRs sind willkommen.
 
----
-
-## Browser support
+1. Repository forken
+2. `npm install && npm run build`
+3. Änderung umsetzen · `npm test`, `npm run test:a11y` und `npm run test:e2e` ausführen (nach `npm run build`)
+4. Pull Request öffnen
 
-VelinStyle ist **mobile-first**. Nutze einen **aktuellen Evergreen-Browser** (aktuelles Safari unter iOS, Chrome/Firefox unter Android und Desktop). OKLCH, Container Queries, `@layer` und Web Components brauchen moderne Engines. Viewport-`meta` für Mobile nicht vergessen. Ältere In-App-WebViews können Farben oder Layout falsch darstellen.
+Details: [CONTRIBUTING.de.md](CONTRIBUTING.de.md)
 
 ---
 
-## License
+## Lizenz
 
 [MIT](LICENSE) — Copyright © 2026 VelinStyle
 
----
-
 <div align="center">
 
 Mit Sorgfalt fürs Web von [SkyliteDesign](https://github.com/SkyliteDesign)