@conciso/design-system-mcp 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conciso/design-system-mcp",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "MCP-Server für Consumer des Conciso Design System, beantwortet docs-list, docs-show und docs-show-story über stdio aus einem mitgelieferten Storybook-Snapshot, ohne Netzzugriff.",
   "license": "MIT",
   "type": "module",

package/snapshot/manifests/components.json

@@ -46,6 +46,16 @@
       },
       "stories": {
         "$ref": "../services/core/story-docs/komponenten-buttons-button.json#/components/komponenten-buttons-button"
+      },
+      "docs": {
+        "komponenten-buttons-button--verwendung": {
+          "id": "komponenten-buttons-button--verwendung",
+          "name": "Verwendung",
+          "mdx": {
+            "$ref": "../services/addon-docs/mdx/komponenten-buttons-button.json#/components/komponenten-buttons-button/docs/komponenten-buttons-button--verwendung"
+          },
+          "summary": "# Verwendung Buttons sind die primäre Aktions-Komponente des Systems: fünf Stilvarianten (..."
+        }
       }
     },
     "komponenten-chips-badges-pills-chip": {

package/snapshot/manifests/docs.json

@@ -89,14 +89,6 @@
       },
       "summary": "# Barrierefreiheit Kontrastverhältnisse aller Brand-Farben, Tastaturnavigation, ARIA Patte..."
     },
-    "komponenten-buttons--verwendung": {
-      "id": "komponenten-buttons--verwendung",
-      "name": "Verwendung",
-      "mdx": {
-        "$ref": "../services/addon-docs/mdx/komponenten-buttons--verwendung.json#/components/komponenten-buttons--verwendung/docs/komponenten-buttons--verwendung"
-      },
-      "summary": "# Verwendung Buttons sind die primäre Aktions-Komponente des Systems: fünf Stilvarianten (..."
-    },
     "komponenten-chips-badges-pills--verwendung": {
       "id": "komponenten-chips-badges-pills--verwendung",
       "name": "Verwendung",

package/snapshot/services/addon-docs/mdx/komponenten-buttons-button.json

@@ -0,0 +1,18 @@
+{
+  "components": {
+    "komponenten-buttons-button": {
+      "id": "komponenten-buttons-button",
+      "name": "komponenten-buttons-button",
+      "docs": {
+        "komponenten-buttons-button--verwendung": {
+          "id": "komponenten-buttons-button--verwendung",
+          "name": "Verwendung",
+          "path": "./src/docs/komponenten/buttons-verwendung.mdx",
+          "title": "Komponenten/Buttons/Button",
+          "content": "import { Meta, Unstyled } from '@storybook/addon-docs/blocks';\nimport * as ButtonStories from '../../lib/button/button.stories';\n\n<Meta of={ButtonStories} name=\"Verwendung\" />\n\n# Verwendung\n\nButtons sind die primäre Aktions-Komponente des Systems: fünf Stilvarianten (Filled · Tonal · Elevated · Outlined · Text), drei Größen (Standard · Small · Large), der Ton-Modifier `.btn-err` für destruktive Aktionen und der Inversions-Modifier `.btn-on-band` für Buttons auf farbigen Bereichs-Bändern. Jede Variante steht in allen vier Brand Areas zur Verfügung (Bereichsreihenfolge co · ki · es · wo), das Mindestmaß für ein Touch-Target ist 44 Pixel.\n\n## Wann welche Variante\n\nDie Hierarchie ist verbindlich: Filled vor Tonal oder Outlined vor Text. Pro Kontext höchstens ein Filled-Button, sonst ist die Hauptaktion nicht mehr eindeutig erkennbar. Elevated steht außerhalb dieser Kette und markiert eine freistehende, vom Hintergrund abgehobene Aktion.\n\nSo löst sich die Hierarchie in typischen Kontexten auf: ein Dialog mit Text- neben Filled-Button, ein Formular mit Outlined- neben Filled-Button und eine Feature-Karte mit Text- neben Tonal-Button.\n\n<Unstyled>\n  <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s4)' }}>\n    <div\n      style={{\n        border: 'var(--bd-strong)',\n        borderRadius: 'var(--r-lg)',\n        padding: 'var(--s5)',\n        background: 'var(--bg-surface)',\n      }}\n    >\n      <div style={{ font: '500 16px/24px var(--font)', color: 'var(--tx-primary)', marginBottom: 'var(--s2)' }}>\n        Aktion bestätigen\n      </div>\n      <div style={{ font: '400 14px/20px var(--font)', color: 'var(--tx-secondary)', marginBottom: 'var(--s5)' }}>\n        Möchtest du die Änderungen wirklich speichern?\n      </div>\n      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 'var(--s2)', marginBottom: 'var(--s3)' }}>\n        <button className=\"btn btn-text btn-sm btn-co\">Abbrechen</button>\n        <button className=\"btn btn-filled btn-sm btn-co\">Speichern</button>\n      </div>\n      <div style={{ font: '400 12px/16px var(--font)', color: 'var(--tx-secondary)', textAlign: 'right' }}>\n        Text → Abbrechen &nbsp;·&nbsp; Filled → Hauptaktion\n      </div>\n    </div>\n    <div\n      style={{\n        border: 'var(--bd-strong)',\n        borderRadius: 'var(--r-lg)',\n        padding: 'var(--s5)',\n        background: 'var(--bg-surface)',\n      }}\n    >\n      <div style={{ font: '500 16px/24px var(--font)', color: 'var(--tx-primary)', marginBottom: 'var(--s4)' }}>\n        Formular einreichen\n      </div>\n      <div\n        style={{\n          height: '32px',\n          background: 'var(--bg-overlay)',\n          borderRadius: 'var(--r-sm)',\n          border: 'var(--bd-strong)',\n          marginBottom: 'var(--s5)',\n        }}\n      ></div>\n      <div style={{ display: 'flex', gap: 'var(--s2)', marginBottom: 'var(--s3)' }}>\n        <button className=\"btn btn-outlined btn-sm btn-co\">Vorschau</button>\n        <button className=\"btn btn-filled btn-sm btn-co\">Absenden</button>\n      </div>\n      <div style={{ font: '400 12px/16px var(--font)', color: 'var(--tx-secondary)' }}>\n        Outlined → Alternativaktion &nbsp;·&nbsp; Filled → Primäraktion\n      </div>\n    </div>\n    <div\n      style={{\n        border: 'var(--bd-strong)',\n        borderRadius: 'var(--r-lg)',\n        padding: 'var(--s5)',\n        background: 'var(--bg-surface)',\n      }}\n    >\n      <div style={{ font: '500 16px/24px var(--font)', color: 'var(--tx-primary)', marginBottom: 'var(--s2)' }}>\n        Feature entdecken\n      </div>\n      <div style={{ font: '400 14px/20px var(--font)', color: 'var(--tx-secondary)', marginBottom: 'var(--s5)' }}>\n        Drei Bereiche, ein Ziel, Gelassenheit durch klare Struktur.\n      </div>\n      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--s2)', marginBottom: 'var(--s3)' }}>\n        <button className=\"btn btn-text btn-sm btn-co\">Mehr erfahren</button>\n        <button className=\"btn btn-tonal btn-sm btn-co\">Jetzt starten</button>\n      </div>\n      <div style={{ font: '400 12px/16px var(--font)', color: 'var(--tx-secondary)' }}>\n        Text → Nebenaktion &nbsp;·&nbsp; Tonal → unterstützende Aktion\n      </div>\n    </div>\n  </div>\n</Unstyled>\n\n| Variante | Rolle in der Hierarchie | Einsatz | Beispiele |\n|---|---|---|---|\n| Filled | 1. Primäre Hauptaktion | Max. 1 bis 2 pro Kontext | Speichern, Absenden, Starten |\n| Tonal | 2. Sekundäre Bestätigung | Neben Filled oder eigenständig | Weiter, Übernehmen |\n| Outlined | 2. Gleichwertige Alternative | Ohne Primärfokus | Vorschau, Exportieren |\n| Text | 3. Nebenaktion | Niedrigste Priorität, link-ähnliche Funktion | Abbrechen, Mehr erfahren |\n| Elevated | Außerhalb der Hierarchie | Freistehende Aktion, visuell vom Hintergrund getrennt | Schwebende Elemente, FAB |\n\n## Destruktive Aktionen\n\n`.btn-err` (Angular: `tone=\"err\"`) markiert eine Aktion, die sich nicht rückgängig machen lässt: Löschen, Verwerfen, Entfernen. Der Modifier **ersetzt** die Bereichsfarbe, er wird statt `.btn-co` gesetzt, nicht zusätzlich. Gedacht für Filled, Outlined und Text.\n\n<Unstyled>\n  <div style={{ display: 'flex', gap: 'var(--s4)', flexWrap: 'wrap', alignItems: 'center', marginBottom: 'var(--s5)' }}>\n    <button className=\"btn btn-filled btn-err\">Löschen</button>\n    <button className=\"btn btn-outlined btn-err\">Verwerfen</button>\n    <button className=\"btn btn-text btn-err\">Entfernen</button>\n  </div>\n</Unstyled>\n\nWelcher Button gefüllt ist, entscheidet der Kontext:\n\n| Kontext | Beispiel | Hauptaktion (Filled) | Nebenaktion |\n|---|---|---|---|\n| Selbst ausgelöst | Klick auf „Löschen“, danach eine Rückfrage | „Löschen“ mit `.btn-err` | „Abbrechen“ als Text |\n| Unterbrechung | Ungespeicherte Änderungen beim Verlassen | „Weiter bearbeiten“ in der Bereichsfarbe | „Verwerfen“ als Outlined mit `.btn-err` |\n\nBei einer Unterbrechung wollte die Person etwas anderes, das Verwerfen ist Nebenwirkung. Deshalb bekommt dort der sichere Weg das Gewicht. Die Farbe ist nie der einzige Hinweis, das Label nennt immer die Folge.\n\n## Barrierefreiheit\n\n| Aspekt | Regel |\n|---|---|\n| Icon-only | Buttons ohne sichtbaren Text benötigen `aria-label`, der SVG-Inhalt allein reicht für Screenreader nicht aus |\n| Disabled | `aria-disabled=\"true\"` statt HTML `disabled`, wenn der Button im Fokus-Flow bleiben soll, `disabled` entfernt das Element aus der Tastaturreihenfolge |\n| Touch-Target | Mindestgröße 44 mal 44 Pixel für alle Button-Varianten (WCAG 2.5.5), `btn-sm` bei Bedarf mit zusätzlichem Padding kompensieren |\n| Focus-Ring | Nie `outline: none` ohne sichtbaren Ersatz, der Design-System-Focus-Ring (`--focus-aa`) muss für alle Buttons erhalten bleiben |\n| Filled auf Bereichs-Section | Filled-Buttons auf hellen Bereichs-Hintergründen (`--co-50`, `--ki-50`, `--wo-50`, `--es-50`) brauchen eine ausreichend dunkle Variante mit weißer Schrift, sonst fehlt der UI-Komponenten-Kontrast (WCAG 1.4.11, mindestens 3 zu 1) zwischen Button-Fläche und Section |\n\nDrei der vier Bereiche sind über die Modifier-Klasse bereits korrekt abgedeckt: `.btn-co` auf `--co-700`, `.btn-ki` auf `--ki-800`, `.btn-es` auf `--es-700`. Die Default-Farbe von `.btn-wo` (`--wo-700`) ist im Allgemeinen passend, verfehlt aber auf `--wo-50`-Sub-Streifen den Kontrast. Dort die Bereichs-Klasse mit einem minimalen Inline-Override kombinieren:\n\n```html\n<button class=\"btn btn-filled btn-wo\" style=\"--c500:var(--wo-600)\">\n```\n\n`--c50` erbt korrekt von `.btn-wo`, ein `color`-Override entfällt, weil der Default aus `.btn-filled` (Weiß) bereits greift.\n\n## Dos & Don'ts\n\n**Tun**\n\n- Pro Kontext maximal ein Filled Button, klare Priorisierung der Hauptaktion für die Nutzerin.\n- Verb-Labels: konkret und handlungsorientiert, „Starten“, „Speichern“, „Anfragen“, „Absenden“.\n- Hierarchie konsequent einhalten: Filled vor Tonal oder Outlined vor Text.\n- Bereichsklasse passend zum Seitenkontext: `.btn-co`, `.btn-ki`, `.btn-es`, `.btn-wo`.\n- Touch-Target mindestens 44 Pixel einhalten, auch im Small-Modus ausreichend groß für sichere Bedienung.\n- `.btn-err` nur für Aktionen, die sich nicht rückgängig machen lassen, höchstens einer pro Ansicht, mit einem Label, das die Folge nennt: „Löschen“, „Verwerfen“.\n\n**Nicht tun**\n\n- Mehrere Filled Buttons nebeneinander, das lässt keine klare Primäraktion erkennen.\n- Substantive oder lange Phrasen als Labels, „Antragsformular einreichen“ statt lieber „Absenden“.\n- Disabled-State ohne sichtbare Begründung, Helper-Text oder Tooltip nutzen, um zu erklären warum.\n- Bereichsfarbe willkürlich tauschen, Corporate-Kontext immer `.btn-co`, nie `.btn-ki`.\n- Filled-Button mit `--area-500` auf hellem Bereichs-Hintergrund (`--area-50`), stattdessen die dunklere Bereichs-Variante nutzen (siehe Barrierefreiheits-Tabelle oben).\n- `.btn-err` als Blickfang oder für umkehrbare Aktionen („Abmelden“, „Filter zurücksetzen“), und nie neben einer Bereichsklasse am selben Button.\n\n## Verwandte Seiten\n\n- Buttons (`Komponenten/Buttons/Button`), alle Stilvarianten, Größen und Zustände als Stories.\n",
+          "summary": "# Verwendung Buttons sind die primäre Aktions-Komponente des Systems: fünf Stilvarianten (..."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/addon-docs/mdx/marke-bildsprache--/303/274bersicht.json

@@ -9,7 +9,7 @@
           "name": "Übersicht",
           "path": "./src/docs/marke/bildsprache.mdx",
           "title": "Marke/Bildsprache",
-          "content": "import { Meta, Unstyled } from '@storybook/addon-docs/blocks';\nimport icons from '../../../../icons/icons.json';\n\n<Meta title=\"Marke/Bildsprache\" name=\"Übersicht\" />\n\n# Bildsprache\n\nFotografie · Illustration · vier Brand Areas, abgeleitet aus dem Markenrad.\n\nBilder kommunizieren schneller als Worte. Die Bildsprache von Conciso übersetzt den Kernwert **Gelassenheit** in visuelle Reize: ruhige Kompositionen, klare Motive und echte Energie statt inszenierter Hochglanz-Ästhetik.\n\n## Grundprinzipien aus dem Markenrad\n\nJeder der drei Markenpfeiler übersetzt sich direkt in visuelle Entscheidungen, von der Wahl des Motivs bis zur Bildbearbeitung.\n\n| Markenpfeiler | Eigenschaften | Bildsprache-Übersetzung |\n|---|---|---|\n| Ruhig | Verlässlich · Selbstsicher · Kompetent | Ausgewogene Komposition, großzügiger Weißraum, natürliches, diffuses Licht ohne harte Schatten, keine überfüllten Bildausschnitte |\n| Klar | Aufmerksam · Präzise · Pragmatisch | Scharfer Motivfokus, aufgeräumte Hintergründe, ein dominantes Motiv pro Bild, kein dekoratives Beiwerk ohne Zweck |\n| Energiegeladen | Kraftvoll · Agil · Leidenschaftlich | Echte Momente statt Pose, Menschen in echter Konzentration oder Zusammenarbeit, Bewegung und Dynamik, ohne Unruhe zu erzeugen |\n\n## Fotografie\n\nJede Brand Area hat einen eigenen Bildkontext, die gemeinsamen Stilprinzipien (siehe unten) gelten übergreifend. Reihenfolge co · ki · es · wo.\n\n**Corporate · Vertrauen & Kompetenz.** Menschen im Gespräch, beim Beratungsgespräch oder in ruhiger Konzentration, neutrale, helle Büroumgebungen, Handshakes und partnerschaftliche Gesten, Blickkontakt und Offenheit. Stichworte: Gespräch, Partnerschaft, Büroatmosphäre.\n\n**Angewandte KI · Mensch & Technologie.** Nahaufnahmen von Screens und Interfaces, Menschen, die mit KI-Tools interagieren, abstrakte Datenmuster als visuelle Akzente, immer mit menschlichem Fokus: Technologie ist Werkzeug, nicht Hauptdarsteller. Stichworte: Interfaces, Interaktion, Muster & Daten.\n\n**Effektive Software · Fokus & Präzision.** Nahaufnahmen von Code und Interfaces, Entwickler in tiefer Konzentration, saubere, aufgeräumte Screens, Terminal, IDE und Architekturdiagramme als visuelle Metaphern. Stichworte: Code, Interfaces, Konzentration.\n\n**Wirksame Organisationen · Kollaboration & Wirkung.** Diverse Teams in echter Zusammenarbeit, Workshops, Retrospektiven, Whiteboard-Momente, echte Emotionen wie Lachen und Konzentration, keine uniformen Gruppenfotos ohne Leben. Stichworte: Teams, Workshop, Echte Momente.\n\n**Ergänzung aus `conciso-claude-powerpoint-instructions.md` § 7.2** (dort geführt, in der Doku-Sektion nicht vollständig): Effektive Software zusätzlich mit dem Stichwort *geometrische Strukturen*, Wirksame Organisationen zusätzlich mit *organische Strukturen* und *Wandel*.\n\nStorybook bindet bewusst keine Personenfotos ein: Der folgende Block zeigt je Brand Area nur den Bildslot und seine Bereichsfarbe, nicht das Motiv.\n\nexport const imagerySlots = [\n  { area: 'co', iconKey: 'co-building', name: 'Corporate', keywords: 'Gespräch, Partnerschaft, Büroatmosphäre' },\n  { area: 'ki', iconKey: 'ki-bot', name: 'Angewandte KI', keywords: 'Interfaces, Interaktion, Muster & Daten' },\n  { area: 'es', iconKey: 'es-window-check', name: 'Effektive Software', keywords: 'Code, Interfaces, Konzentration' },\n  { area: 'wo', iconKey: 'wo-network', name: 'Wirksame Organisationen', keywords: 'Teams, Workshop, Echte Momente' },\n];\n\nexport const ImagerySlot = ({ area, iconKey, name, keywords }) => {\n  const icon = icons[iconKey];\n  const svgAttrs =\n    icon.style === 'solid'\n      ? { fill: 'currentColor' }\n      : { fill: 'none', stroke: 'currentColor', strokeWidth: icon.strokeWidth || '1' };\n  return (\n    <div className=\"card\" data-area={area}>\n      <div className=\"card-media\">\n        <svg\n          viewBox={icon.viewBox}\n          width={64}\n          height={64}\n          aria-hidden=\"true\"\n          {...svgAttrs}\n          dangerouslySetInnerHTML={{ __html: icon.body }}\n        />\n      </div>\n      <div className=\"card-body\">\n        <span className=\"card-eyebrow\">{name}</span>\n        <p className=\"card-text\">{keywords}</p>\n      </div>\n    </div>\n  );\n};\n\n<Unstyled>\n  <div\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',\n      gap: 'var(--s5)',\n    }}\n  >\n    {imagerySlots.map((slot) => (\n      <ImagerySlot key={slot.area} {...slot} />\n    ))}\n  </div>\n</Unstyled>\n\nDie Kacheln oben zeigen Slot, Seitenverhältnis (16:9) und Bereichsfarbe je Brand Area; konkrete Beispielfotos zeigt weiterhin die Doku-Site (`docs/index.html#gt-imagery-beispiele`).\n\n## Stilprinzipien Fotografie\n\n- **Licht & Ton.** Natürliches, weiches Licht, helle, leicht entsättigte Töne, kein Filmdrama, kein HDR, Helligkeit leicht anheben, Kontrast etwas reduzieren.\n- **Komposition.** Drittel-Regel und goldener Schnitt, Freiflächen für Text-Overlays einplanen, ein dominantes Motiv, ruhige Umgebung, kein Informations-Overload im Bild.\n- **Menschen.** Authentische Personen aus echten Arbeitskontexten, diverse Repräsentation, Blickkontakt oder echte Konzentration, keine Stockphoto-Posen.\n\n## Illustration\n\nIllustrationen werden ergänzend eingesetzt, für abstrakte Konzepte, die sich nicht fotografisch abbilden lassen: KI-Prozesse, Systemarchitektur, Organisationsmodelle.\n\n- **Linienstil.** Klare, gleichmäßige Linien, keine Füllflächen ohne Bedeutung, Strichstärke konsistent.\n- **Geometrisch.** Vereinfachte Formen statt realistischer Darstellung, keine Gradients innerhalb von Figuren.\n- **Systemfarben.** Ausschließlich Design-System-Tokens (`--co-500`, `--ki-500` und so weiter), keine Freihandfarben.\n- **Weißraum.** Leere Fläche ist gestalterisches Element, nicht jeder Pixel muss belegt sein, Illustration atmen lassen.\n\n## Verwendung\n\nKontext entscheidet über das richtige Bildformat: Hero-Bereiche brauchen Freiräume für Text, Teaser-Cards arbeiten mit Ausschnitten, Illustrationen kommen dort zum Einsatz, wo Fotos zu konkret wären.\n\n| Kontext | Empfehlung |\n|---|---|\n| Hero-Bereich | Querformat, heller, ruhiger Hintergrund im Bild, untere Bildhälfte frei für Text-Overlay, Foto darf nicht mit der Headline konkurrieren |\n| Card / Teaser | 16:9 oder 3:2, Motiv mittig, kein Text im Bild selbst, Brand-Area-Farbe als Eyebrow über dem Bild, nicht als Tint im Bild |\n| Wissensartikel | Illustration für abstrakte Prozesse, Foto für Praxisbeispiele, Bildunterschrift immer vorhanden, Bilder nie als einziger Informationsträger |\n| Testimonial | Porträt im quadratischen oder runden Ausschnitt, Blick zur Kamera oder leicht seitlich, neutraler, heller Hintergrund, kein Hintergrund-Clutter |\n\n### Barrierefreiheit\n\n| Aspekt | Regel |\n|---|---|\n| Alt-Text | Jedes inhaltstragende Bild benötigt einen beschreibenden `alt`-Text: er beschreibt, was zu sehen ist, nicht was das Bild bedeutet. Dekorative Bilder erhalten `alt=\"\"` |\n| Text-Overlay | Text auf Foto-Hintergründen mindestens 4,5:1 (WCAG 1.4.3), gerechnet gegen die hellste Stelle unter dem Text, nicht gegen den Bilddurchschnitt: Fotos haben ausgebrannte Bereiche, dort entscheidet sich die Lesbarkeit. Weiße Schrift braucht dafür einen Scrim von mindestens `rgba(0,0,0,.60)`, `.45` reicht nicht (trägt über einer weißen Bildstelle nur rund 3:1). Bei einem Verlauf gilt der Wert an der Stelle, an der der Text sitzt, nicht am dichten Ende. `text-shadow` hilft optisch, zählt für WCAG nicht |\n| Auslaufstrecke des Scrims | Genauso wichtig wie der Deckkraft-Wert ist die Strecke, über die er aufgebaut wird: ein Verlauf fällt dort auf, wo seine Steilheit springt, nicht wo er dicht ist. Faustwert: rund 0,007 Deckkraft pro Pixel. Für 0,6 Deckkraft am obersten Textelement sind das etwa 90 px Auslauf darüber. Reicht die Höhe nicht, wächst die Polsterung, nicht die Steilheit |\n| Nicht allein | Informationen nie ausschließlich im Bild transportieren, der gleiche Inhalt muss als Text verfügbar sein (WCAG 1.1.1) |\n| Bewegung | Animierte Illustrationen oder Hintergrund-Videos mit `prefers-reduced-motion` pausieren |\n\n### Dos & Don'ts\n\n✓ Tun\n\n- Authentische Menschen aus echten Arbeitskontexten wählen, kein gestelltes Stockphoto-Lächeln.\n- Helles, leicht entsättigtes Farbklima beibehalten, Gelassenheit überträgt sich auf die Bildstimmung.\n- Freiraum für Text-Overlays im Bild einplanen, besonders bei Hero-Fotos.\n- Illustrationen ausschließlich mit Design-System-Tokens, Farb-Konsistenz auch im SVG.\n- Brand-Area-Farbe als Kontext-Element um das Bild herum einsetzen, nicht als Farbfilter im Bild.\n\n✕ Nicht tun\n\n- Generische Stockfotos (lachende Gruppe am Tisch, Handshake vor weißem Hintergrund): wirken unecht und austauschbar.\n- Übersättigte oder hochkontrastige Bearbeitungen widersprechen dem Markenwert Gelassenheit.\n- Bereichsfarbe als Tint-Filter über das Foto legen, wirkt aufdringlich und überdeckt die natürliche Bildstimmung.\n- Realistische oder fotografische Illustrationsstile, das bricht den klaren, geometrischen Linienstil.\n- Bilder ohne `alt`-Text oder mit generischem „Foto“: Screenreader-Nutzende erhalten keinen Mehrwert.\n",
+          "content": "import { Meta, Unstyled } from '@storybook/addon-docs/blocks';\nimport icons from '../../../../icons/icons.json';\n\n<Meta title=\"Marke/Bildsprache\" name=\"Übersicht\" />\n\n# Bildsprache\n\nFotografie · Illustration · vier Brand Areas, abgeleitet aus dem Markenrad.\n\nBilder kommunizieren schneller als Worte. Die Bildsprache von Conciso übersetzt den Kernwert **Gelassenheit** in visuelle Reize: ruhige Kompositionen, klare Motive und echte Energie statt inszenierter Hochglanz-Ästhetik.\n\n## Grundprinzipien aus dem Markenrad\n\nJeder der drei Markenpfeiler übersetzt sich direkt in visuelle Entscheidungen, von der Wahl des Motivs bis zur Bildbearbeitung.\n\n| Markenpfeiler | Eigenschaften | Bildsprache-Übersetzung |\n|---|---|---|\n| Ruhig | Verlässlich · Selbstsicher · Kompetent | Ausgewogene Komposition, großzügiger Weißraum, natürliches, diffuses Licht ohne harte Schatten, keine überfüllten Bildausschnitte |\n| Klar | Aufmerksam · Präzise · Pragmatisch | Scharfer Motivfokus, aufgeräumte Hintergründe, ein dominantes Motiv pro Bild, kein dekoratives Beiwerk ohne Zweck |\n| Energiegeladen | Kraftvoll · Agil · Leidenschaftlich | Echte Momente statt Pose, Menschen in echter Konzentration oder Zusammenarbeit, Bewegung und Dynamik, ohne Unruhe zu erzeugen |\n\n## Fotografie\n\nJede Brand Area hat einen eigenen Bildkontext, die gemeinsamen Stilprinzipien (siehe unten) gelten übergreifend. Reihenfolge co · ki · es · wo.\n\n**Corporate · Vertrauen & Kompetenz.** Menschen im Gespräch, beim Beratungsgespräch oder in ruhiger Konzentration, neutrale, helle Büroumgebungen, Handshakes und partnerschaftliche Gesten, Blickkontakt und Offenheit. Stichworte: Gespräch, Partnerschaft, Büroatmosphäre.\n\n**Angewandte KI · Mensch & Technologie.** Nahaufnahmen von Screens und Interfaces, Menschen, die mit KI-Tools interagieren, abstrakte Datenmuster als visuelle Akzente, immer mit menschlichem Fokus: Technologie ist Werkzeug, nicht Hauptdarsteller. Stichworte: Interfaces, Interaktion, Muster & Daten.\n\n**Effektive Software · Fokus & Präzision.** Nahaufnahmen von Code und Interfaces, Entwickler in tiefer Konzentration, saubere, aufgeräumte Screens, Terminal, IDE und Architekturdiagramme als visuelle Metaphern. Stichworte: Code, Interfaces, Konzentration.\n\n**Wirksame Organisationen · Kollaboration & Wirkung.** Diverse Teams in echter Zusammenarbeit, Workshops, Retrospektiven, Whiteboard-Momente, echte Emotionen wie Lachen und Konzentration, keine uniformen Gruppenfotos ohne Leben. Stichworte: Teams, Workshop, Echte Momente.\n\n**Ergänzung aus `docs/marke/conciso-claude-powerpoint-instructions.md` § 7.2** (dort geführt, in der Doku-Sektion nicht vollständig): Effektive Software zusätzlich mit dem Stichwort *geometrische Strukturen*, Wirksame Organisationen zusätzlich mit *organische Strukturen* und *Wandel*.\n\nStorybook bindet bewusst keine Personenfotos ein: Der folgende Block zeigt je Brand Area nur den Bildslot und seine Bereichsfarbe, nicht das Motiv.\n\nexport const imagerySlots = [\n  { area: 'co', iconKey: 'co-building', name: 'Corporate', keywords: 'Gespräch, Partnerschaft, Büroatmosphäre' },\n  { area: 'ki', iconKey: 'ki-bot', name: 'Angewandte KI', keywords: 'Interfaces, Interaktion, Muster & Daten' },\n  { area: 'es', iconKey: 'es-window-check', name: 'Effektive Software', keywords: 'Code, Interfaces, Konzentration' },\n  { area: 'wo', iconKey: 'wo-network', name: 'Wirksame Organisationen', keywords: 'Teams, Workshop, Echte Momente' },\n];\n\nexport const ImagerySlot = ({ area, iconKey, name, keywords }) => {\n  const icon = icons[iconKey];\n  const svgAttrs =\n    icon.style === 'solid'\n      ? { fill: 'currentColor' }\n      : { fill: 'none', stroke: 'currentColor', strokeWidth: icon.strokeWidth || '1' };\n  return (\n    <div className=\"card\" data-area={area}>\n      <div className=\"card-media\">\n        <svg\n          viewBox={icon.viewBox}\n          width={64}\n          height={64}\n          aria-hidden=\"true\"\n          {...svgAttrs}\n          dangerouslySetInnerHTML={{ __html: icon.body }}\n        />\n      </div>\n      <div className=\"card-body\">\n        <span className=\"card-eyebrow\">{name}</span>\n        <p className=\"card-text\">{keywords}</p>\n      </div>\n    </div>\n  );\n};\n\n<Unstyled>\n  <div\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',\n      gap: 'var(--s5)',\n    }}\n  >\n    {imagerySlots.map((slot) => (\n      <ImagerySlot key={slot.area} {...slot} />\n    ))}\n  </div>\n</Unstyled>\n\nDie Kacheln oben zeigen Slot, Seitenverhältnis (16:9) und Bereichsfarbe je Brand Area; konkrete Beispielfotos zeigt weiterhin die Doku-Site (`docs/index.html#gt-imagery-beispiele`).\n\n## Stilprinzipien Fotografie\n\n- **Licht & Ton.** Natürliches, weiches Licht, helle, leicht entsättigte Töne, kein Filmdrama, kein HDR, Helligkeit leicht anheben, Kontrast etwas reduzieren.\n- **Komposition.** Drittel-Regel und goldener Schnitt, Freiflächen für Text-Overlays einplanen, ein dominantes Motiv, ruhige Umgebung, kein Informations-Overload im Bild.\n- **Menschen.** Authentische Personen aus echten Arbeitskontexten, diverse Repräsentation, Blickkontakt oder echte Konzentration, keine Stockphoto-Posen.\n\n## Illustration\n\nIllustrationen werden ergänzend eingesetzt, für abstrakte Konzepte, die sich nicht fotografisch abbilden lassen: KI-Prozesse, Systemarchitektur, Organisationsmodelle.\n\n- **Linienstil.** Klare, gleichmäßige Linien, keine Füllflächen ohne Bedeutung, Strichstärke konsistent.\n- **Geometrisch.** Vereinfachte Formen statt realistischer Darstellung, keine Gradients innerhalb von Figuren.\n- **Systemfarben.** Ausschließlich Design-System-Tokens (`--co-500`, `--ki-500` und so weiter), keine Freihandfarben.\n- **Weißraum.** Leere Fläche ist gestalterisches Element, nicht jeder Pixel muss belegt sein, Illustration atmen lassen.\n\n## Verwendung\n\nKontext entscheidet über das richtige Bildformat: Hero-Bereiche brauchen Freiräume für Text, Teaser-Cards arbeiten mit Ausschnitten, Illustrationen kommen dort zum Einsatz, wo Fotos zu konkret wären.\n\n| Kontext | Empfehlung |\n|---|---|\n| Hero-Bereich | Querformat, heller, ruhiger Hintergrund im Bild, untere Bildhälfte frei für Text-Overlay, Foto darf nicht mit der Headline konkurrieren |\n| Card / Teaser | 16:9 oder 3:2, Motiv mittig, kein Text im Bild selbst, Brand-Area-Farbe als Eyebrow über dem Bild, nicht als Tint im Bild |\n| Wissensartikel | Illustration für abstrakte Prozesse, Foto für Praxisbeispiele, Bildunterschrift immer vorhanden, Bilder nie als einziger Informationsträger |\n| Testimonial | Porträt im quadratischen oder runden Ausschnitt, Blick zur Kamera oder leicht seitlich, neutraler, heller Hintergrund, kein Hintergrund-Clutter |\n\n### Barrierefreiheit\n\n| Aspekt | Regel |\n|---|---|\n| Alt-Text | Jedes inhaltstragende Bild benötigt einen beschreibenden `alt`-Text: er beschreibt, was zu sehen ist, nicht was das Bild bedeutet. Dekorative Bilder erhalten `alt=\"\"` |\n| Text-Overlay | Text auf Foto-Hintergründen mindestens 4,5:1 (WCAG 1.4.3), gerechnet gegen die hellste Stelle unter dem Text, nicht gegen den Bilddurchschnitt: Fotos haben ausgebrannte Bereiche, dort entscheidet sich die Lesbarkeit. Weiße Schrift braucht dafür einen Scrim von mindestens `rgba(0,0,0,.60)`, `.45` reicht nicht (trägt über einer weißen Bildstelle nur rund 3:1). Bei einem Verlauf gilt der Wert an der Stelle, an der der Text sitzt, nicht am dichten Ende. `text-shadow` hilft optisch, zählt für WCAG nicht |\n| Auslaufstrecke des Scrims | Genauso wichtig wie der Deckkraft-Wert ist die Strecke, über die er aufgebaut wird: ein Verlauf fällt dort auf, wo seine Steilheit springt, nicht wo er dicht ist. Faustwert: rund 0,007 Deckkraft pro Pixel. Für 0,6 Deckkraft am obersten Textelement sind das etwa 90 px Auslauf darüber. Reicht die Höhe nicht, wächst die Polsterung, nicht die Steilheit |\n| Nicht allein | Informationen nie ausschließlich im Bild transportieren, der gleiche Inhalt muss als Text verfügbar sein (WCAG 1.1.1) |\n| Bewegung | Animierte Illustrationen oder Hintergrund-Videos mit `prefers-reduced-motion` pausieren |\n\n### Dos & Don'ts\n\n✓ Tun\n\n- Authentische Menschen aus echten Arbeitskontexten wählen, kein gestelltes Stockphoto-Lächeln.\n- Helles, leicht entsättigtes Farbklima beibehalten, Gelassenheit überträgt sich auf die Bildstimmung.\n- Freiraum für Text-Overlays im Bild einplanen, besonders bei Hero-Fotos.\n- Illustrationen ausschließlich mit Design-System-Tokens, Farb-Konsistenz auch im SVG.\n- Brand-Area-Farbe als Kontext-Element um das Bild herum einsetzen, nicht als Farbfilter im Bild.\n\n✕ Nicht tun\n\n- Generische Stockfotos (lachende Gruppe am Tisch, Handshake vor weißem Hintergrund): wirken unecht und austauschbar.\n- Übersättigte oder hochkontrastige Bearbeitungen widersprechen dem Markenwert Gelassenheit.\n- Bereichsfarbe als Tint-Filter über das Foto legen, wirkt aufdringlich und überdeckt die natürliche Bildstimmung.\n- Realistische oder fotografische Illustrationsstile, das bricht den klaren, geometrischen Linienstil.\n- Bilder ohne `alt`-Text oder mit generischem „Foto“: Screenreader-Nutzende erhalten keinen Mehrwert.\n",
           "summary": "# Bildsprache Fotografie · Illustration · vier Brand Areas, abgeleitet aus dem Markenrad. ..."
         }
       }

package/snapshot/services/addon-docs/mdx/marke-markenrad--/303/274bersicht.json

@@ -9,7 +9,7 @@
           "name": "Übersicht",
           "path": "./src/docs/marke/markenrad.mdx",
           "title": "Marke/Markenrad",
-          "content": "import { Meta, Unstyled } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Marke/Markenrad\" name=\"Übersicht\" />\n\n# Markenrad\n\nDer Kernwert **Gelassenheit** entfaltet sich in drei Markenpfeilern (Ruhig, Klar, Energiegeladen) mit je drei charakterisierenden Eigenschaften. Das Unternehmen erzeugt Gelassenheit, auf ruhige, klare und energiegeladene Weise.\n\nDiese Seite ist die Begründungsschicht für die übrige Marke-Dokumentation (Brand Areas, Logo, Bildsprache): Wer eine dortige Regel hinterfragt, findet die Begründung hier.\n\n{/* Geometrie bewusst aus docs/index.html dupliziert: die Doku-Site ist eine statische\n    Einzeldatei ohne Build, es gibt keinen gemeinsamen Import-Pfad für dieses SVG. Farben\n    und Schriftgrößen kommen aus den .bw-*-Klassen in css/components.css und\n    css/dark-mode.css, deshalb stimmt das Rad in Light und Dark automatisch mit der\n    Doku-Site überein. */}\n\n<Unstyled>\n  <div className=\"bw-wrap\">\n    <svg viewBox=\"0 0 520 520\" className=\"bw-svg\" role=\"img\" aria-labelledby=\"bw-title bw-desc\">\n      <title id=\"bw-title\">Markenrad: Ruhige Energie</title>\n      <desc id=\"bw-desc\">Kreisdiagramm mit Kernwert Gelassenheit im Zentrum. Pfeiler Ruhig mit den Eigenschaften Verlässlich, Selbstsicher, Kompetent. Pfeiler Klar mit Aufmerksam, Präzise, Pragmatisch. Pfeiler Energiegeladen mit Kraftvoll, Agil, Leidenschaftlich.</desc>\n\n      <path className=\"bw-outer\" d=\"M 73.8 367.5 A 215 215 0 0 1 260 45 L 260 100 A 160 160 0 0 0 121.4 340 Z\" />\n      <path className=\"bw-outer\" d=\"M 260 45 A 215 215 0 0 1 446.2 367.5 L 398.6 340 A 160 160 0 0 0 260 100 Z\" />\n      <path className=\"bw-outer\" d=\"M 446.2 367.5 A 215 215 0 0 1 73.8 367.5 L 121.4 340 A 160 160 0 0 0 398.6 340 Z\" />\n\n      <path className=\"bw-middle\" d=\"M 121.4 340 A 160 160 0 0 1 260 100 L 260 175 A 85 85 0 0 0 186.4 302.5 Z\" />\n      <path className=\"bw-middle\" d=\"M 260 100 A 160 160 0 0 1 398.6 340 L 333.6 302.5 A 85 85 0 0 0 260 175 Z\" />\n      <path className=\"bw-middle\" d=\"M 398.6 340 A 160 160 0 0 1 121.4 340 L 186.4 302.5 A 85 85 0 0 0 333.6 302.5 Z\" />\n\n      <circle className=\"bw-inner\" cx=\"260\" cy=\"260\" r=\"85\" />\n\n      <line className=\"bw-divider\" x1=\"260\" y1=\"260\" x2=\"260\" y2=\"45\" />\n      <line className=\"bw-divider\" x1=\"260\" y1=\"260\" x2=\"446.2\" y2=\"367.5\" />\n      <line className=\"bw-divider\" x1=\"260\" y1=\"260\" x2=\"73.8\" y2=\"367.5\" />\n\n      <circle className=\"bw-ring-outline\" cx=\"260\" cy=\"260\" r=\"215\" />\n\n      <text className=\"bw-label-core\" x=\"260\" y=\"260\" textAnchor=\"middle\" dominantBaseline=\"middle\">GELASSENHEIT</text>\n\n      <text className=\"bw-label-segment\" x=\"154\" y=\"199\" textAnchor=\"middle\" dominantBaseline=\"middle\">RUHIG</text>\n      <text className=\"bw-label-segment\" x=\"366\" y=\"199\" textAnchor=\"middle\" dominantBaseline=\"middle\">KLAR</text>\n      <text className=\"bw-label-segment\" x=\"260\" y=\"382\" textAnchor=\"middle\" dominantBaseline=\"middle\">ENERGIEGELADEN</text>\n\n      <text className=\"bw-label-attr\" x=\"75.8\" y=\"292.5\" textAnchor=\"middle\" dominantBaseline=\"middle\">VERLÄSSLICH</text>\n      <text className=\"bw-label-attr\" x=\"98\" y=\"166.5\" textAnchor=\"middle\" dominantBaseline=\"middle\">SELBSTSICHER</text>\n      <text className=\"bw-label-attr\" x=\"196\" y=\"84\" textAnchor=\"middle\" dominantBaseline=\"middle\">KOMPETENT</text>\n\n      <text className=\"bw-label-attr\" x=\"324\" y=\"84\" textAnchor=\"middle\" dominantBaseline=\"middle\">AUFMERKSAM</text>\n      <text className=\"bw-label-attr\" x=\"422\" y=\"166.5\" textAnchor=\"middle\" dominantBaseline=\"middle\">PRÄZISE</text>\n      <text className=\"bw-label-attr\" x=\"444\" y=\"292.5\" textAnchor=\"middle\" dominantBaseline=\"middle\">PRAGMATISCH</text>\n\n      <text className=\"bw-label-attr\" x=\"380\" y=\"403\" textAnchor=\"middle\" dominantBaseline=\"middle\">KRAFTVOLL</text>\n      <text className=\"bw-label-attr\" x=\"260\" y=\"447\" textAnchor=\"middle\" dominantBaseline=\"middle\">AGIL</text>\n      <text className=\"bw-label-attr\" x=\"140\" y=\"403\" textAnchor=\"middle\" dominantBaseline=\"middle\">LEIDENSCHAFTLICH</text>\n    </svg>\n  </div>\n</Unstyled>\n\n## Drei Markenpfeiler\n\n| Pfeiler | Eigenschaften | Sprachliche Wirkung |\n|---|---|---|\n| Ruhig | Verlässlich · Selbstsicher · Kompetent | nicht aufgeregt, keine Verkaufs-Rhetorik, keine Übertreibungen |\n| Klar | Aufmerksam · Präzise · Pragmatisch | konkret statt blumig, kurze Sätze, eindeutige Verben |\n| Energiegeladen | Kraftvoll · Agil · Leidenschaftlich | aktive Verben, Tempo wo angemessen, Überzeugung statt Floskel |\n\nWirkt ein Text wie auf einer Beratungs-Mainstream-Seite („visionäre Lösungen für die digitale Transformation“), ist er nicht im Conciso-Ton.\n\nDie neun Eigenschaften (verlässlich, selbstsicher, kompetent, aufmerksam, präzise, pragmatisch, kraftvoll, agil, leidenschaftlich) sollen in Karten-Texten und längerer Copy spürbar werden, gern visuell hervorgehoben (`<strong>`).\n\n## Sprache & Schreibweise\n\nPrimärsprache ist **Deutsch**: alle Customer-Pages, Marketing-Texte, UI-Labels, Komponenten-Beispieltexte und Design-System-Dokumentation. Englische Fachbegriffe (zum Beispiel Token-Namen, Komponenten-Klassen, Code-Beispiele) bleiben unverändert, im Fließtext wird der englische Begriff übersetzt oder erläutert. Lokalisierung in andere Sprachen ist nicht vorgesehen.\n\n### Anführungszeichen\n\nDeutsche Typografie-Konvention „99 … 66“: öffnend unten, schließend oben.\n\n| Zeichen | Unicode | Position |\n|---|---|---|\n| „ | U+201E | Öffnend, unten (sieht aus wie 99) |\n| “ | U+201C | Schließend, oben (sieht aus wie 66) |\n\nNicht verwenden: ASCII-`\"` (U+0022, gerade), `”` (U+201D, „99 oben“) oder die englische Konvention `“…”`. `npm run check:quotes` prüft das Gate, auch für nicht committete Dateien.\n\n### Keine Gedankenstriche\n\nEm-Dashes (U+2014) und En-Dashes (U+2013) in eigenen Copy-Texten vermeiden. Sie wirken im deutschen Lesefluss englisch-zitathaft und schwächen den ruhigen Markenton.\n\n| Statt | Lieber |\n|---|---|\n| Wir machen Software &#8212; und zwar gute. | Wir machen Software, und zwar gute. |\n| Drei Bereiche &#8211; ein Anspruch. | Drei Bereiche, ein Anspruch. |\n| Schau Dir an, wie wir arbeiten &#8212; oder buch direkt ein Erstgespräch. | Schau Dir an, wie wir arbeiten, oder buch direkt ein Erstgespräch. |\n\nErsatz: Komma, Doppelpunkt, Punkt oder Klammern. Der mittige Punkt `·` (U+00B7) bleibt als Trenner in Meta-Listen erlaubt („Bereich · Lesezeit“).\n\n### Schreibregeln aus der Mikrocopy\n\nAus `mikrocopy-conventions.md`, schärfer als die allgemeine Tonalität:\n\n- **Aktiv statt Passiv.** „Wir entwickeln Systeme, die halten“ statt „Es werden Systeme entwickelt, die halten“.\n- **Konkrete Verben statt Adjektiv-Nebel.** „Wir hören erst zu, dann bauen wir“ statt „Aufmerksamer, partnerschaftlicher Ansatz“.\n- **Kein Marketing-Sprech.** Vermeiden: „state-of-the-art“, „cutting-edge“, „next level“, „digital transformation“, „synergetische Lösungen“, Buzzwords ohne Substanz.\n- **Zahlen sprechen.** „120+ Projekte, 10 Jahre, 70+ Menschen“ statt „Langjährige Erfahrung mit zahlreichen Kunden“.\n\n## Tonalität: Du statt Sie\n\nAuf der gesamten Webseite spricht Conciso Leserinnen und Leser mit **Du** an. Diese Entscheidung ist keine Stilfrage, sondern fällt direkt aus dem Markenrad: Wer Gelassenheit erzeugen will, kann nicht in der Distanz des „Sie“ sprechen. Das Du ist der konsequenteste Weg, die drei Pfeiler in einem Wort zusammenzubringen, und bleibt höflich, weil die Tonalität ruhig, klar und ehrlich ist, nicht kumpelhaft.\n\n| Pfeiler | wird zu |\n|---|---|\n| Ruhig | Vertrauen ohne Distanz. Das Du nimmt das Förmliche heraus, ohne die Verlässlichkeit zu verlieren. |\n| Klar | Direktheit ohne Floskeln. Wir sagen, was Sache ist, kürzer, präziser, ohne Konjunktiv-Wolken. |\n| Energiegeladen | Persönlichkeit ohne Lautstärke. Das Du holt die Leser:innen ins Gespräch, nicht ins Auditorium. |\n\n**Anrede** (aus `mikrocopy-conventions.md`, schärfer als der allgemeine Grundsatz):\n\n- Du-Form durchgängig, kleingeschrieben im Fließtext: „Du schilderst Deine Situation.“\n- Großschreibung in der höflichen Anrede, in CTAs und Formularfeldern: „Wie können wir Dir helfen?“, „Dein Anliegen“.\n- Kein Mischen von Du- und Sie-Anreden auf einer Seite.\n- Das Du wird konsequent großgeschrieben (Du, Dir, Dein, Deinem): eine Stilentscheidung, kein Tippfehler.\n\n### Ausnahme: Wann das Sie gilt\n\nDas Du ist die Regel für alle öffentlichen und redaktionellen Texte. In der direkten Kommunikation zwischen Dienstleister und Kunde kann die Hierarchie ein Sie verlangen. Dann geht Angemessenheit vor Marke: im Zweifel lieber das Sie wählen, als die Anrede zu erzwingen. Das Du folgt, sobald das Gegenüber es anbietet oder selbst nutzt.\n\n- **E-Mail an Kund:innen.** Herrscht Unsicherheit über die passende Anrede, tendiert Conciso zum Sie. Ein zu früh gesetztes Du kann distanzlos wirken, gerade im schriftlichen Erstkontakt.\n- **Veranstaltungen mit Leadership-Fokus.** Bei Veranstaltungen, zu denen vorrangig Leadership- und Entscheider:innen-Positionen erwartet werden, erfolgt die Ansprache im Sie, in der Einladung wie vor Ort.\n\n## Was nicht geht\n\nAus `mikrocopy-conventions.md`:\n\n- Mischung Du / Sie auf einer Seite.\n- „Erfolgreich!“ als Bestätigungstext (Floskel).\n- Generische Button-Texte („Senden“, „OK“, „Weiter“).\n- Übertreibungen ohne Substanz.\n- Anglizismen, wo deutsche Worte präziser sind („Termin buchen“ statt „Slot booken“).\n",
+          "content": "import { Meta, Unstyled } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Marke/Markenrad\" name=\"Übersicht\" />\n\n# Markenrad\n\nDer Kernwert **Gelassenheit** entfaltet sich in drei Markenpfeilern (Ruhig, Klar, Energiegeladen) mit je drei charakterisierenden Eigenschaften. Das Unternehmen erzeugt Gelassenheit, auf ruhige, klare und energiegeladene Weise.\n\nDiese Seite ist die Begründungsschicht für die übrige Marke-Dokumentation (Brand Areas, Logo, Bildsprache): Wer eine dortige Regel hinterfragt, findet die Begründung hier.\n\n{/* Geometrie bewusst aus docs/index.html dupliziert: die Doku-Site ist eine statische\n    Einzeldatei ohne Build, es gibt keinen gemeinsamen Import-Pfad für dieses SVG. Farben\n    und Schriftgrößen kommen aus den .bw-*-Klassen in css/components.css und\n    css/dark-mode.css, deshalb stimmt das Rad in Light und Dark automatisch mit der\n    Doku-Site überein. */}\n\n<Unstyled>\n  <div className=\"bw-wrap\">\n    <svg viewBox=\"0 0 520 520\" className=\"bw-svg\" role=\"img\" aria-labelledby=\"bw-title bw-desc\">\n      <title id=\"bw-title\">Markenrad: Ruhige Energie</title>\n      <desc id=\"bw-desc\">Kreisdiagramm mit Kernwert Gelassenheit im Zentrum. Pfeiler Ruhig mit den Eigenschaften Verlässlich, Selbstsicher, Kompetent. Pfeiler Klar mit Aufmerksam, Präzise, Pragmatisch. Pfeiler Energiegeladen mit Kraftvoll, Agil, Leidenschaftlich.</desc>\n\n      <path className=\"bw-outer\" d=\"M 73.8 367.5 A 215 215 0 0 1 260 45 L 260 100 A 160 160 0 0 0 121.4 340 Z\" />\n      <path className=\"bw-outer\" d=\"M 260 45 A 215 215 0 0 1 446.2 367.5 L 398.6 340 A 160 160 0 0 0 260 100 Z\" />\n      <path className=\"bw-outer\" d=\"M 446.2 367.5 A 215 215 0 0 1 73.8 367.5 L 121.4 340 A 160 160 0 0 0 398.6 340 Z\" />\n\n      <path className=\"bw-middle\" d=\"M 121.4 340 A 160 160 0 0 1 260 100 L 260 175 A 85 85 0 0 0 186.4 302.5 Z\" />\n      <path className=\"bw-middle\" d=\"M 260 100 A 160 160 0 0 1 398.6 340 L 333.6 302.5 A 85 85 0 0 0 260 175 Z\" />\n      <path className=\"bw-middle\" d=\"M 398.6 340 A 160 160 0 0 1 121.4 340 L 186.4 302.5 A 85 85 0 0 0 333.6 302.5 Z\" />\n\n      <circle className=\"bw-inner\" cx=\"260\" cy=\"260\" r=\"85\" />\n\n      <line className=\"bw-divider\" x1=\"260\" y1=\"260\" x2=\"260\" y2=\"45\" />\n      <line className=\"bw-divider\" x1=\"260\" y1=\"260\" x2=\"446.2\" y2=\"367.5\" />\n      <line className=\"bw-divider\" x1=\"260\" y1=\"260\" x2=\"73.8\" y2=\"367.5\" />\n\n      <circle className=\"bw-ring-outline\" cx=\"260\" cy=\"260\" r=\"215\" />\n\n      <text className=\"bw-label-core\" x=\"260\" y=\"260\" textAnchor=\"middle\" dominantBaseline=\"middle\">GELASSENHEIT</text>\n\n      <text className=\"bw-label-segment\" x=\"154\" y=\"199\" textAnchor=\"middle\" dominantBaseline=\"middle\">RUHIG</text>\n      <text className=\"bw-label-segment\" x=\"366\" y=\"199\" textAnchor=\"middle\" dominantBaseline=\"middle\">KLAR</text>\n      <text className=\"bw-label-segment\" x=\"260\" y=\"382\" textAnchor=\"middle\" dominantBaseline=\"middle\">ENERGIEGELADEN</text>\n\n      <text className=\"bw-label-attr\" x=\"75.8\" y=\"292.5\" textAnchor=\"middle\" dominantBaseline=\"middle\">VERLÄSSLICH</text>\n      <text className=\"bw-label-attr\" x=\"98\" y=\"166.5\" textAnchor=\"middle\" dominantBaseline=\"middle\">SELBSTSICHER</text>\n      <text className=\"bw-label-attr\" x=\"196\" y=\"84\" textAnchor=\"middle\" dominantBaseline=\"middle\">KOMPETENT</text>\n\n      <text className=\"bw-label-attr\" x=\"324\" y=\"84\" textAnchor=\"middle\" dominantBaseline=\"middle\">AUFMERKSAM</text>\n      <text className=\"bw-label-attr\" x=\"422\" y=\"166.5\" textAnchor=\"middle\" dominantBaseline=\"middle\">PRÄZISE</text>\n      <text className=\"bw-label-attr\" x=\"444\" y=\"292.5\" textAnchor=\"middle\" dominantBaseline=\"middle\">PRAGMATISCH</text>\n\n      <text className=\"bw-label-attr\" x=\"380\" y=\"403\" textAnchor=\"middle\" dominantBaseline=\"middle\">KRAFTVOLL</text>\n      <text className=\"bw-label-attr\" x=\"260\" y=\"447\" textAnchor=\"middle\" dominantBaseline=\"middle\">AGIL</text>\n      <text className=\"bw-label-attr\" x=\"140\" y=\"403\" textAnchor=\"middle\" dominantBaseline=\"middle\">LEIDENSCHAFTLICH</text>\n    </svg>\n  </div>\n</Unstyled>\n\n## Drei Markenpfeiler\n\n| Pfeiler | Eigenschaften | Sprachliche Wirkung |\n|---|---|---|\n| Ruhig | Verlässlich · Selbstsicher · Kompetent | nicht aufgeregt, keine Verkaufs-Rhetorik, keine Übertreibungen |\n| Klar | Aufmerksam · Präzise · Pragmatisch | konkret statt blumig, kurze Sätze, eindeutige Verben |\n| Energiegeladen | Kraftvoll · Agil · Leidenschaftlich | aktive Verben, Tempo wo angemessen, Überzeugung statt Floskel |\n\nWirkt ein Text wie auf einer Beratungs-Mainstream-Seite („visionäre Lösungen für die digitale Transformation“), ist er nicht im Conciso-Ton.\n\nDie neun Eigenschaften (verlässlich, selbstsicher, kompetent, aufmerksam, präzise, pragmatisch, kraftvoll, agil, leidenschaftlich) sollen in Karten-Texten und längerer Copy spürbar werden, gern visuell hervorgehoben (`<strong>`).\n\n## Sprache & Schreibweise\n\nPrimärsprache ist **Deutsch**: alle Customer-Pages, Marketing-Texte, UI-Labels, Komponenten-Beispieltexte und Design-System-Dokumentation. Englische Fachbegriffe (zum Beispiel Token-Namen, Komponenten-Klassen, Code-Beispiele) bleiben unverändert, im Fließtext wird der englische Begriff übersetzt oder erläutert. Lokalisierung in andere Sprachen ist nicht vorgesehen.\n\n### Anführungszeichen\n\nDeutsche Typografie-Konvention „99 … 66“: öffnend unten, schließend oben.\n\n| Zeichen | Unicode | Position |\n|---|---|---|\n| „ | U+201E | Öffnend, unten (sieht aus wie 99) |\n| “ | U+201C | Schließend, oben (sieht aus wie 66) |\n\nNicht verwenden: ASCII-`\"` (U+0022, gerade), `”` (U+201D, „99 oben“) oder die englische Konvention `“…”`. `npm run check:quotes` prüft das Gate, auch für nicht committete Dateien.\n\n### Keine Gedankenstriche\n\nEm-Dashes (U+2014) und En-Dashes (U+2013) in eigenen Copy-Texten vermeiden. Sie wirken im deutschen Lesefluss englisch-zitathaft und schwächen den ruhigen Markenton.\n\n| Statt | Lieber |\n|---|---|\n| Wir machen Software &#8212; und zwar gute. | Wir machen Software, und zwar gute. |\n| Drei Bereiche &#8211; ein Anspruch. | Drei Bereiche, ein Anspruch. |\n| Schau Dir an, wie wir arbeiten &#8212; oder buch direkt ein Erstgespräch. | Schau Dir an, wie wir arbeiten, oder buch direkt ein Erstgespräch. |\n\nErsatz: Komma, Doppelpunkt, Punkt oder Klammern. Der mittige Punkt `·` (U+00B7) bleibt als Trenner in Meta-Listen erlaubt („Bereich · Lesezeit“).\n\n### Schreibregeln aus der Mikrocopy\n\nAus `docs/marke/mikrocopy-conventions.md`, schärfer als die allgemeine Tonalität:\n\n- **Aktiv statt Passiv.** „Wir entwickeln Systeme, die halten“ statt „Es werden Systeme entwickelt, die halten“.\n- **Konkrete Verben statt Adjektiv-Nebel.** „Wir hören erst zu, dann bauen wir“ statt „Aufmerksamer, partnerschaftlicher Ansatz“.\n- **Kein Marketing-Sprech.** Vermeiden: „state-of-the-art“, „cutting-edge“, „next level“, „digital transformation“, „synergetische Lösungen“, Buzzwords ohne Substanz.\n- **Zahlen sprechen.** „120+ Projekte, 10 Jahre, 70+ Menschen“ statt „Langjährige Erfahrung mit zahlreichen Kunden“.\n\n## Tonalität: Du statt Sie\n\nAuf der gesamten Webseite spricht Conciso Leserinnen und Leser mit **Du** an. Diese Entscheidung ist keine Stilfrage, sondern fällt direkt aus dem Markenrad: Wer Gelassenheit erzeugen will, kann nicht in der Distanz des „Sie“ sprechen. Das Du ist der konsequenteste Weg, die drei Pfeiler in einem Wort zusammenzubringen, und bleibt höflich, weil die Tonalität ruhig, klar und ehrlich ist, nicht kumpelhaft.\n\n| Pfeiler | wird zu |\n|---|---|\n| Ruhig | Vertrauen ohne Distanz. Das Du nimmt das Förmliche heraus, ohne die Verlässlichkeit zu verlieren. |\n| Klar | Direktheit ohne Floskeln. Wir sagen, was Sache ist, kürzer, präziser, ohne Konjunktiv-Wolken. |\n| Energiegeladen | Persönlichkeit ohne Lautstärke. Das Du holt die Leser:innen ins Gespräch, nicht ins Auditorium. |\n\n**Anrede** (aus `docs/marke/mikrocopy-conventions.md`, schärfer als der allgemeine Grundsatz):\n\n- Du-Form durchgängig, kleingeschrieben im Fließtext: „Du schilderst Deine Situation.“\n- Großschreibung in der höflichen Anrede, in CTAs und Formularfeldern: „Wie können wir Dir helfen?“, „Dein Anliegen“.\n- Kein Mischen von Du- und Sie-Anreden auf einer Seite.\n- Das Du wird konsequent großgeschrieben (Du, Dir, Dein, Deinem): eine Stilentscheidung, kein Tippfehler.\n\n### Ausnahme: Wann das Sie gilt\n\nDas Du ist die Regel für alle öffentlichen und redaktionellen Texte. In der direkten Kommunikation zwischen Dienstleister und Kunde kann die Hierarchie ein Sie verlangen. Dann geht Angemessenheit vor Marke: im Zweifel lieber das Sie wählen, als die Anrede zu erzwingen. Das Du folgt, sobald das Gegenüber es anbietet oder selbst nutzt.\n\n- **E-Mail an Kund:innen.** Herrscht Unsicherheit über die passende Anrede, tendiert Conciso zum Sie. Ein zu früh gesetztes Du kann distanzlos wirken, gerade im schriftlichen Erstkontakt.\n- **Veranstaltungen mit Leadership-Fokus.** Bei Veranstaltungen, zu denen vorrangig Leadership- und Entscheider:innen-Positionen erwartet werden, erfolgt die Ansprache im Sie, in der Einladung wie vor Ort.\n\n## Was nicht geht\n\nAus `docs/marke/mikrocopy-conventions.md`:\n\n- Mischung Du / Sie auf einer Seite.\n- „Erfolgreich!“ als Bestätigungstext (Floskel).\n- Generische Button-Texte („Senden“, „OK“, „Weiter“).\n- Übertreibungen ohne Substanz.\n- Anglizismen, wo deutsche Worte präziser sind („Termin buchen“ statt „Slot booken“).\n",
           "summary": "# Markenrad Der Kernwert **Gelassenheit** entfaltet sich in drei Markenpfeilern (Ruhig, Kl..."
         }
       }

package/snapshot/services/core/story-docs/komponenten-inputs-forms-radio.json

@@ -15,6 +15,11 @@
           "name": "Deaktiviert",
           "snippet": "import { Component } from '@angular/core';\nimport { RadioGroupComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [RadioGroupComponent],\n  template: `\n    <cds-radio-group\n        [legend]=\"'Bevorzugter Kontaktweg'\"\n        [options]=\"['E-Mail', 'Telefon', 'Beides']\"\n        [value]=\"'E-Mail'\"\n        [required]=\"false\"\n        [disabled]=\"true\"\n        [area]=\"'co'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
         },
+        "komponenten-inputs-forms-radio--pflichtfeld": {
+          "id": "komponenten-inputs-forms-radio--pflichtfeld",
+          "name": "Pflichtfeld",
+          "snippet": "import { Component } from '@angular/core';\nimport { RadioGroupComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [RadioGroupComponent],\n  template: `\n    <cds-radio-group\n        [legend]=\"'Bevorzugter Kontaktweg'\"\n        [options]=\"['E-Mail', 'Telefon', 'Beides']\"\n        [value]=\"'E-Mail'\"\n        [required]=\"true\"\n        [disabled]=\"false\"\n        [area]=\"'co'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
         "komponenten-inputs-forms-radio--tastatur": {
           "id": "komponenten-inputs-forms-radio--tastatur",
           "name": "Tastatur",

package/snapshot/services/addon-docs/mdx/komponenten-buttons--verwendung.json

@@ -1,18 +0,0 @@
-{
-  "components": {
-    "komponenten-buttons--verwendung": {
-      "id": "komponenten-buttons--verwendung",
-      "name": "komponenten-buttons--verwendung",
-      "docs": {
-        "komponenten-buttons--verwendung": {
-          "id": "komponenten-buttons--verwendung",
-          "name": "Verwendung",
-          "path": "./src/docs/komponenten/buttons-verwendung.mdx",
-          "title": "Komponenten/Buttons",
-          "content": "import { Meta, Unstyled } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Komponenten/Buttons\" name=\"Verwendung\" tags={['angular']} />\n\n# Verwendung\n\nButtons sind die primäre Aktions-Komponente des Systems: fünf Stilvarianten (Filled · Tonal · Elevated · Outlined · Text), drei Größen (Standard · Small · Large), der Ton-Modifier `.btn-err` für destruktive Aktionen und der Inversions-Modifier `.btn-on-band` für Buttons auf farbigen Bereichs-Bändern. Jede Variante steht in allen vier Brand Areas zur Verfügung (Bereichsreihenfolge co · ki · es · wo), das Mindestmaß für ein Touch-Target ist 44 Pixel.\n\n## Wann welche Variante\n\nDie Hierarchie ist verbindlich: Filled vor Tonal oder Outlined vor Text. Pro Kontext höchstens ein Filled-Button, sonst ist die Hauptaktion nicht mehr eindeutig erkennbar. Elevated steht außerhalb dieser Kette und markiert eine freistehende, vom Hintergrund abgehobene Aktion.\n\nSo löst sich die Hierarchie in typischen Kontexten auf: ein Dialog mit Text- neben Filled-Button, ein Formular mit Outlined- neben Filled-Button und eine Feature-Karte mit Text- neben Tonal-Button.\n\n<Unstyled>\n  <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s4)' }}>\n    <div\n      style={{\n        border: 'var(--bd-strong)',\n        borderRadius: 'var(--r-lg)',\n        padding: 'var(--s5)',\n        background: 'var(--bg-surface)',\n      }}\n    >\n      <div style={{ font: '500 16px/24px var(--font)', color: 'var(--tx-primary)', marginBottom: 'var(--s2)' }}>\n        Aktion bestätigen\n      </div>\n      <div style={{ font: '400 14px/20px var(--font)', color: 'var(--tx-secondary)', marginBottom: 'var(--s5)' }}>\n        Möchtest du die Änderungen wirklich speichern?\n      </div>\n      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 'var(--s2)', marginBottom: 'var(--s3)' }}>\n        <button className=\"btn btn-text btn-sm btn-co\">Abbrechen</button>\n        <button className=\"btn btn-filled btn-sm btn-co\">Speichern</button>\n      </div>\n      <div style={{ font: '400 12px/16px var(--font)', color: 'var(--tx-secondary)', textAlign: 'right' }}>\n        Text → Abbrechen &nbsp;·&nbsp; Filled → Hauptaktion\n      </div>\n    </div>\n    <div\n      style={{\n        border: 'var(--bd-strong)',\n        borderRadius: 'var(--r-lg)',\n        padding: 'var(--s5)',\n        background: 'var(--bg-surface)',\n      }}\n    >\n      <div style={{ font: '500 16px/24px var(--font)', color: 'var(--tx-primary)', marginBottom: 'var(--s4)' }}>\n        Formular einreichen\n      </div>\n      <div\n        style={{\n          height: '32px',\n          background: 'var(--bg-overlay)',\n          borderRadius: 'var(--r-sm)',\n          border: 'var(--bd-strong)',\n          marginBottom: 'var(--s5)',\n        }}\n      ></div>\n      <div style={{ display: 'flex', gap: 'var(--s2)', marginBottom: 'var(--s3)' }}>\n        <button className=\"btn btn-outlined btn-sm btn-co\">Vorschau</button>\n        <button className=\"btn btn-filled btn-sm btn-co\">Absenden</button>\n      </div>\n      <div style={{ font: '400 12px/16px var(--font)', color: 'var(--tx-secondary)' }}>\n        Outlined → Alternativaktion &nbsp;·&nbsp; Filled → Primäraktion\n      </div>\n    </div>\n    <div\n      style={{\n        border: 'var(--bd-strong)',\n        borderRadius: 'var(--r-lg)',\n        padding: 'var(--s5)',\n        background: 'var(--bg-surface)',\n      }}\n    >\n      <div style={{ font: '500 16px/24px var(--font)', color: 'var(--tx-primary)', marginBottom: 'var(--s2)' }}>\n        Feature entdecken\n      </div>\n      <div style={{ font: '400 14px/20px var(--font)', color: 'var(--tx-secondary)', marginBottom: 'var(--s5)' }}>\n        Drei Bereiche, ein Ziel, Gelassenheit durch klare Struktur.\n      </div>\n      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--s2)', marginBottom: 'var(--s3)' }}>\n        <button className=\"btn btn-text btn-sm btn-co\">Mehr erfahren</button>\n        <button className=\"btn btn-tonal btn-sm btn-co\">Jetzt starten</button>\n      </div>\n      <div style={{ font: '400 12px/16px var(--font)', color: 'var(--tx-secondary)' }}>\n        Text → Nebenaktion &nbsp;·&nbsp; Tonal → unterstützende Aktion\n      </div>\n    </div>\n  </div>\n</Unstyled>\n\n| Variante | Rolle in der Hierarchie | Einsatz | Beispiele |\n|---|---|---|---|\n| Filled | 1. Primäre Hauptaktion | Max. 1 bis 2 pro Kontext | Speichern, Absenden, Starten |\n| Tonal | 2. Sekundäre Bestätigung | Neben Filled oder eigenständig | Weiter, Übernehmen |\n| Outlined | 2. Gleichwertige Alternative | Ohne Primärfokus | Vorschau, Exportieren |\n| Text | 3. Nebenaktion | Niedrigste Priorität, link-ähnliche Funktion | Abbrechen, Mehr erfahren |\n| Elevated | Außerhalb der Hierarchie | Freistehende Aktion, visuell vom Hintergrund getrennt | Schwebende Elemente, FAB |\n\n## Destruktive Aktionen\n\n`.btn-err` (Angular: `tone=\"err\"`) markiert eine Aktion, die sich nicht rückgängig machen lässt: Löschen, Verwerfen, Entfernen. Der Modifier **ersetzt** die Bereichsfarbe, er wird statt `.btn-co` gesetzt, nicht zusätzlich. Gedacht für Filled, Outlined und Text.\n\n<Unstyled>\n  <div style={{ display: 'flex', gap: 'var(--s4)', flexWrap: 'wrap', alignItems: 'center', marginBottom: 'var(--s5)' }}>\n    <button className=\"btn btn-filled btn-err\">Löschen</button>\n    <button className=\"btn btn-outlined btn-err\">Verwerfen</button>\n    <button className=\"btn btn-text btn-err\">Entfernen</button>\n  </div>\n</Unstyled>\n\nWelcher Button gefüllt ist, entscheidet der Kontext:\n\n| Kontext | Beispiel | Hauptaktion (Filled) | Nebenaktion |\n|---|---|---|---|\n| Selbst ausgelöst | Klick auf „Löschen“, danach eine Rückfrage | „Löschen“ mit `.btn-err` | „Abbrechen“ als Text |\n| Unterbrechung | Ungespeicherte Änderungen beim Verlassen | „Weiter bearbeiten“ in der Bereichsfarbe | „Verwerfen“ als Outlined mit `.btn-err` |\n\nBei einer Unterbrechung wollte die Person etwas anderes, das Verwerfen ist Nebenwirkung. Deshalb bekommt dort der sichere Weg das Gewicht. Die Farbe ist nie der einzige Hinweis, das Label nennt immer die Folge.\n\n## Barrierefreiheit\n\n| Aspekt | Regel |\n|---|---|\n| Icon-only | Buttons ohne sichtbaren Text benötigen `aria-label`, der SVG-Inhalt allein reicht für Screenreader nicht aus |\n| Disabled | `aria-disabled=\"true\"` statt HTML `disabled`, wenn der Button im Fokus-Flow bleiben soll, `disabled` entfernt das Element aus der Tastaturreihenfolge |\n| Touch-Target | Mindestgröße 44 mal 44 Pixel für alle Button-Varianten (WCAG 2.5.5), `btn-sm` bei Bedarf mit zusätzlichem Padding kompensieren |\n| Focus-Ring | Nie `outline: none` ohne sichtbaren Ersatz, der Design-System-Focus-Ring (`--focus-aa`) muss für alle Buttons erhalten bleiben |\n| Filled auf Bereichs-Section | Filled-Buttons auf hellen Bereichs-Hintergründen (`--co-50`, `--ki-50`, `--wo-50`, `--es-50`) brauchen eine ausreichend dunkle Variante mit weißer Schrift, sonst fehlt der UI-Komponenten-Kontrast (WCAG 1.4.11, mindestens 3 zu 1) zwischen Button-Fläche und Section |\n\nDrei der vier Bereiche sind über die Modifier-Klasse bereits korrekt abgedeckt: `.btn-co` auf `--co-700`, `.btn-ki` auf `--ki-800`, `.btn-es` auf `--es-700`. Die Default-Farbe von `.btn-wo` (`--wo-700`) ist im Allgemeinen passend, verfehlt aber auf `--wo-50`-Sub-Streifen den Kontrast. Dort die Bereichs-Klasse mit einem minimalen Inline-Override kombinieren:\n\n```html\n<button class=\"btn btn-filled btn-wo\" style=\"--c500:var(--wo-600)\">\n```\n\n`--c50` erbt korrekt von `.btn-wo`, ein `color`-Override entfällt, weil der Default aus `.btn-filled` (Weiß) bereits greift.\n\n## Dos & Don'ts\n\n**Tun**\n\n- Pro Kontext maximal ein Filled Button, klare Priorisierung der Hauptaktion für die Nutzerin.\n- Verb-Labels: konkret und handlungsorientiert, „Starten“, „Speichern“, „Anfragen“, „Absenden“.\n- Hierarchie konsequent einhalten: Filled vor Tonal oder Outlined vor Text.\n- Bereichsklasse passend zum Seitenkontext: `.btn-co`, `.btn-ki`, `.btn-es`, `.btn-wo`.\n- Touch-Target mindestens 44 Pixel einhalten, auch im Small-Modus ausreichend groß für sichere Bedienung.\n- `.btn-err` nur für Aktionen, die sich nicht rückgängig machen lassen, höchstens einer pro Ansicht, mit einem Label, das die Folge nennt: „Löschen“, „Verwerfen“.\n\n**Nicht tun**\n\n- Mehrere Filled Buttons nebeneinander, das lässt keine klare Primäraktion erkennen.\n- Substantive oder lange Phrasen als Labels, „Antragsformular einreichen“ statt lieber „Absenden“.\n- Disabled-State ohne sichtbare Begründung, Helper-Text oder Tooltip nutzen, um zu erklären warum.\n- Bereichsfarbe willkürlich tauschen, Corporate-Kontext immer `.btn-co`, nie `.btn-ki`.\n- Filled-Button mit `--area-500` auf hellem Bereichs-Hintergrund (`--area-50`), stattdessen die dunklere Bereichs-Variante nutzen (siehe Barrierefreiheits-Tabelle oben).\n- `.btn-err` als Blickfang oder für umkehrbare Aktionen („Abmelden“, „Filter zurücksetzen“), und nie neben einer Bereichsklasse am selben Button.\n\n## Verwandte Seiten\n\n- Buttons (`Komponenten/Buttons/Button`), alle Stilvarianten, Größen und Zustände als Stories.\n",
-          "summary": "# Verwendung Buttons sind die primäre Aktions-Komponente des Systems: fünf Stilvarianten (..."
-        }
-      }
-    }
-  }
-}