@conciso/design-system-mcp 0.0.0-bootstrap.0

package/snapshot/manifests/docs.json

@@ -0,0 +1,293 @@
+{
+  "v": 1,
+  "docs": {
+    "marke-markenrad--übersicht": {
+      "id": "marke-markenrad--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/marke-markenrad--übersicht.json#/components/marke-markenrad--übersicht/docs/marke-markenrad--übersicht"
+      },
+      "summary": "# Markenrad Der Kernwert **Gelassenheit** entfaltet sich in drei Markenpfeilern (Ruhig, Kl..."
+    },
+    "marke-brand-areas--übersicht": {
+      "id": "marke-brand-areas--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/marke-brand-areas--übersicht.json#/components/marke-brand-areas--übersicht/docs/marke-brand-areas--übersicht"
+      },
+      "summary": "# Brand Areas Vier Unternehmensbereiche mit eigenem Farbsystem, alle konsistent und stimmi..."
+    },
+    "marke-logo--verwendung": {
+      "id": "marke-logo--verwendung",
+      "name": "Verwendung",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/marke-logo--verwendung.json#/components/marke-logo--verwendung/docs/marke-logo--verwendung"
+      },
+      "summary": "# Verwendung Verwendungsregeln zum Logo: Größen, Schutzraum, Einsatz nach Hintergrund, Bar..."
+    },
+    "marke-bildsprache--übersicht": {
+      "id": "marke-bildsprache--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/marke-bildsprache--übersicht.json#/components/marke-bildsprache--übersicht/docs/marke-bildsprache--übersicht"
+      },
+      "summary": "# Bildsprache Fotografie · Illustration · vier Brand Areas, abgeleitet aus dem Markenrad. ..."
+    },
+    "grundlagen-einrichtung--übersicht": {
+      "id": "grundlagen-einrichtung--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/grundlagen-einrichtung--übersicht.json#/components/grundlagen-einrichtung--übersicht/docs/grundlagen-einrichtung--übersicht"
+      },
+      "summary": "# Einrichtung So bindest du das Conciso Design System in ein Angular-Projekt ein, von der ..."
+    },
+    "grundlagen-spacing-grid--übersicht": {
+      "id": "grundlagen-spacing-grid--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/grundlagen-spacing-grid--übersicht.json#/components/grundlagen-spacing-grid--übersicht/docs/grundlagen-spacing-grid--übersicht"
+      },
+      "summary": "# Spacing & Grid 8pt-System, 12-Spalten-Grid, 24 px Gutter. Quelle: `docs/index.html#sec-s..."
+    },
+    "grundlagen-responsive--übersicht": {
+      "id": "grundlagen-responsive--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/grundlagen-responsive--übersicht.json#/components/grundlagen-responsive--übersicht/docs/grundlagen-responsive--übersicht"
+      },
+      "summary": "# Responsive Verbindliche Breakpoints, fluide Typografie und das dokumentierte Verhalten p..."
+    },
+    "grundlagen-elevation--übersicht": {
+      "id": "grundlagen-elevation--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/grundlagen-elevation--übersicht.json#/components/grundlagen-elevation--übersicht/docs/grundlagen-elevation--übersicht"
+      },
+      "summary": "# Elevation 6 Ebenen, Shadow + Tonal Overlay (Primärfarbe auf Oberfläche). Quelle: `docs/i..."
+    },
+    "grundlagen-design-tokens--übersicht": {
+      "id": "grundlagen-design-tokens--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/grundlagen-design-tokens--übersicht.json#/components/grundlagen-design-tokens--übersicht/docs/grundlagen-design-tokens--übersicht"
+      },
+      "summary": "# Design Tokens Alle Tokens als CSS Custom Properties, Framework-unabhängig. Quelle: `docs..."
+    },
+    "grundlagen-icons--übersicht": {
+      "id": "grundlagen-icons--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/grundlagen-icons--übersicht.json#/components/grundlagen-icons--übersicht/docs/grundlagen-icons--übersicht"
+      },
+      "summary": "# Icons Bereichsspezifische Icons, SVG inline, Farbgebung über die jeweilige Brand Area vi..."
+    },
+    "grundlagen-barrierefreiheit--übersicht": {
+      "id": "grundlagen-barrierefreiheit--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/grundlagen-barrierefreiheit--übersicht.json#/components/grundlagen-barrierefreiheit--übersicht/docs/grundlagen-barrierefreiheit--übersicht"
+      },
+      "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",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-chips-badges-pills--verwendung.json#/components/komponenten-chips-badges-pills--verwendung/docs/komponenten-chips-badges-pills--verwendung"
+      },
+      "summary": "# Verwendung Drei Formen, die leicht verwechselt werden: interaktive Filter-Chips (Toggle)..."
+    },
+    "komponenten-inputs-forms--verwendung": {
+      "id": "komponenten-inputs-forms--verwendung",
+      "name": "Verwendung",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-inputs-forms--verwendung.json#/components/komponenten-inputs-forms--verwendung/docs/komponenten-inputs-forms--verwendung"
+      },
+      "summary": "# Verwendung Feldkomponenten (Text · E-Mail · Select · Textarea · Checkbox · Radio), berei..."
+    },
+    "komponenten-dropdowns--verwendung": {
+      "id": "komponenten-dropdowns--verwendung",
+      "name": "Verwendung",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-dropdowns--verwendung.json#/components/komponenten-dropdowns--verwendung/docs/komponenten-dropdowns--verwendung"
+      },
+      "summary": "# Verwendung Auswahl-Komponenten über das native `` hinaus: Custom Select (gestylte Einzel..."
+    },
+    "komponenten-buchungsformular--übersicht": {
+      "id": "komponenten-buchungsformular--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-buchungsformular--übersicht.json#/components/komponenten-buchungsformular--übersicht/docs/komponenten-buchungsformular--übersicht"
+      },
+      "summary": "# Buchungsformular Verbindliche Buchung eines konkreten Termins, am Beispiel eines Seminar..."
+    },
+    "komponenten-feedback--verwendung": {
+      "id": "komponenten-feedback--verwendung",
+      "name": "Verwendung",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-feedback--verwendung.json#/components/komponenten-feedback--verwendung/docs/komponenten-feedback--verwendung"
+      },
+      "summary": "# Verwendung Drei Snackbar-Varianten (Default, OK, Fehler) für Kontaktformular, Newsletter..."
+    },
+    "komponenten-cards-teaser--verwendung": {
+      "id": "komponenten-cards-teaser--verwendung",
+      "name": "Verwendung",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-cards-teaser--verwendung.json#/components/komponenten-cards-teaser--verwendung/docs/komponenten-cards-teaser--verwendung"
+      },
+      "summary": "# Verwendung Generische Karten (statisch, Link-Karte) und Inhaltskarten (Stat), alle Brand..."
+    },
+    "komponenten-call-to-action--verwendung": {
+      "id": "komponenten-call-to-action--verwendung",
+      "name": "Verwendung",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-call-to-action--verwendung.json#/components/komponenten-call-to-action--verwendung/docs/komponenten-call-to-action--verwendung"
+      },
+      "summary": "# Verwendung Call to Action deckt zwei Pattern-Familien ab: das Page-End-CTA-Band als letz..."
+    },
+    "komponenten-tabelle--übersicht": {
+      "id": "komponenten-tabelle--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-tabelle--übersicht.json#/components/komponenten-tabelle--übersicht/docs/komponenten-tabelle--übersicht"
+      },
+      "summary": "# Tabelle Barrierefreie Datentabellen mit ``, `scope`-Attributen und Tastaturnavigation, i..."
+    },
+    "komponenten-zitate-testimonials--verwendung": {
+      "id": "komponenten-zitate-testimonials--verwendung",
+      "name": "Verwendung",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-zitate-testimonials--verwendung.json#/components/komponenten-zitate-testimonials--verwendung/docs/komponenten-zitate-testimonials--verwendung"
+      },
+      "summary": "# Verwendung Zitate & Testimonials führt vier Formen: Blockquote, Testimonial-Card, Team-S..."
+    },
+    "komponenten-code-block--verwendung": {
+      "id": "komponenten-code-block--verwendung",
+      "name": "Verwendung",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-code-block--verwendung.json#/components/komponenten-code-block--verwendung/docs/komponenten-code-block--verwendung"
+      },
+      "summary": "# Verwendung Code-Block stellt Quellcode und Terminal-Ausgaben für Wissens- und Technikbei..."
+    },
+    "komponenten-slider-carousel--verwendung": {
+      "id": "komponenten-slider-carousel--verwendung",
+      "name": "Verwendung",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-slider-carousel--verwendung.json#/components/komponenten-slider-carousel--verwendung/docs/komponenten-slider-carousel--verwendung"
+      },
+      "summary": "# Verwendung Slider & Carousel führt zwei getrennte Formen: das Bild-Carousel zur Seiten-I..."
+    },
+    "komponenten-sektion--übersicht": {
+      "id": "komponenten-sektion--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-sektion--übersicht.json#/components/komponenten-sektion--übersicht/docs/komponenten-sektion--übersicht"
+      },
+      "summary": "# Sektion Das strukturelle Gerüst, in dem auf den Beispielseiten praktisch jeder andere Ba..."
+    },
+    "komponenten-navigation--verwendung": {
+      "id": "komponenten-navigation--verwendung",
+      "name": "Verwendung",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-navigation--verwendung.json#/components/komponenten-navigation--verwendung/docs/komponenten-navigation--verwendung"
+      },
+      "summary": "# Verwendung Navigation führt drei Elemente: Topnav, Breadcrumb und Back-to-Top-Button. Nu..."
+    },
+    "komponenten-hero--übersicht": {
+      "id": "komponenten-hero--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-hero--übersicht.json#/components/komponenten-hero--übersicht/docs/komponenten-hero--übersicht"
+      },
+      "summary": "# Hero Drei Hero-Varianten für den Seitenkopf: Hero-Image mit Caption-Overlay (21:9, Stand..."
+    },
+    "komponenten-footer--verwendung": {
+      "id": "komponenten-footer--verwendung",
+      "name": "Verwendung",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-footer--verwendung.json#/components/komponenten-footer--verwendung/docs/komponenten-footer--verwendung"
+      },
+      "summary": "# Verwendung Footer ist ein Zwei-Band-Layout: heller Main-Bereich mit Spalten-Grid (Brand ..."
+    },
+    "komponenten-theme-umschalter--verwendung": {
+      "id": "komponenten-theme-umschalter--verwendung",
+      "name": "Verwendung",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/komponenten-theme-umschalter--verwendung.json#/components/komponenten-theme-umschalter--verwendung/docs/komponenten-theme-umschalter--verwendung"
+      },
+      "summary": "# Theme-Umschalter · Verwendung Diese Seite ist die Ausnahme in diesem Spiegel: Die drei B..."
+    },
+    "seitenmuster-wissensbeitrag--übersicht": {
+      "id": "seitenmuster-wissensbeitrag--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/seitenmuster-wissensbeitrag--übersicht.json#/components/seitenmuster-wissensbeitrag--übersicht/docs/seitenmuster-wissensbeitrag--übersicht"
+      },
+      "summary": "# Wissensbeitrag Page-Pattern für redaktionelle Beiträge: zentrierter Header (Breadcrumb, ..."
+    },
+    "seitenmuster-beitragsübersicht--übersicht": {
+      "id": "seitenmuster-beitragsübersicht--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/seitenmuster-beitragsübersicht--übersicht.json#/components/seitenmuster-beitragsübersicht--übersicht/docs/seitenmuster-beitragsübersicht--übersicht"
+      },
+      "summary": "# Beitragsübersicht Page-Pattern für Listing-Seiten mit Bereichs-Filter: zentrierter Heade..."
+    },
+    "seitenmuster-veranstaltung--übersicht": {
+      "id": "seitenmuster-veranstaltung--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/seitenmuster-veranstaltung--übersicht.json#/components/seitenmuster-veranstaltung--übersicht/docs/seitenmuster-veranstaltung--übersicht"
+      },
+      "summary": "# Veranstaltung Page-Pattern für die Detail-Seite einer einzelnen Veranstaltung: Hero-Imag..."
+    },
+    "seitenmuster-veranstaltungsübersicht--übersicht": {
+      "id": "seitenmuster-veranstaltungsübersicht--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/seitenmuster-veranstaltungsübersicht--übersicht.json#/components/seitenmuster-veranstaltungsübersicht--übersicht/docs/seitenmuster-veranstaltungsübersicht--übersicht"
+      },
+      "summary": "# Veranstaltungsübersicht Listing-Seite für Veranstaltungen, parallel zu `Seitenmuster/Bei..."
+    },
+    "seitenmuster-seminar-·-training--übersicht": {
+      "id": "seitenmuster-seminar-·-training--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/seitenmuster-seminar-·-training--übersicht.json#/components/seitenmuster-seminar-·-training--übersicht/docs/seitenmuster-seminar-·-training--übersicht"
+      },
+      "summary": "# Seminar · Training Page-Pattern für die Landingpage eines einzelnen Seminars oder Traini..."
+    },
+    "seitenmuster-angebots-detailseite--übersicht": {
+      "id": "seitenmuster-angebots-detailseite--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/seitenmuster-angebots-detailseite--übersicht.json#/components/seitenmuster-angebots-detailseite--übersicht/docs/seitenmuster-angebots-detailseite--übersicht"
+      },
+      "summary": "# Angebots-Detailseite Page-Pattern für die Landingpage eines einzelnen Angebots unterhalb..."
+    },
+    "beispielseiten-übersicht--übersicht": {
+      "id": "beispielseiten-übersicht--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/beispielseiten-übersicht--übersicht.json#/components/beispielseiten-übersicht--übersicht/docs/beispielseiten-übersicht--übersicht"
+      },
+      "summary": "# Beispielseiten Die Doku-Site zeigt unter „Beispielseiten“ sechs fertige Seiten als Tab-L..."
+    },
+    "referenzen-quellen--übersicht": {
+      "id": "referenzen-quellen--übersicht",
+      "name": "Übersicht",
+      "mdx": {
+        "$ref": "../services/addon-docs/mdx/referenzen-quellen--übersicht.json#/components/referenzen-quellen--übersicht/docs/referenzen-quellen--übersicht"
+      },
+      "summary": "# Quellen Externe Referenzen, die als Grundlage für Entscheidungen in diesem Design System..."
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+{
+  "components": {
+    "beispielseiten-übersicht--übersicht": {
+      "id": "beispielseiten-übersicht--übersicht",
+      "name": "beispielseiten-übersicht--übersicht",
+      "docs": {
+        "beispielseiten-übersicht--übersicht": {
+          "id": "beispielseiten-übersicht--übersicht",
+          "name": "Übersicht",
+          "path": "./src/docs/beispielseiten.mdx",
+          "title": "Beispielseiten/Übersicht",
+          "content": "import { Meta } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Beispielseiten/Übersicht\" name=\"Übersicht\" />\n\n# Beispielseiten\n\nDie Doku-Site zeigt unter „Beispielseiten“ sechs fertige Seiten als Tab-Leiste (Allgemein,\nLeistungen, Wissen, Unternehmen, Veranstaltungen, Kontakt), jede zusammengesetzt aus den\nKomponenten und Seitenmustern, die im Storybook einzeln dokumentiert sind. Sie zeigen die\nBauteile im Zusammenspiel einer echten Seite statt isoliert in einer Story.\n\nDiese Seite baut die sechs Beispielseiten **nicht nach**. Sie sind Kompositionen der\nCSS-Schicht ohne Angular-Entsprechung, sie im Storybook zu duplizieren hieße, die Quelle der\nWahrheit zu verdoppeln. Für die fertigen Seiten selbst gilt `docs/index.html`, Gruppe\nBeispielseiten, als Quelle.\n\n| Tab | Zweck | Bausteine |\n|---|---|---|\n| Allgemein · Startseite | Gemischte Einstiegsseite, die alle vier Brand Areas vereint und in die übrigen Tabs verweist | Topnav, Hero, `Marke/Brand Areas`, Cards & Teaser, Testimonials, Featured-Veranstaltung (siehe `Seitenmuster/Veranstaltungsübersicht`), CTA-Band, Footer |\n| Leistungen | Bereichs- und Angebotsseiten, von der Übersicht der drei Disziplinen (Angewandte KI, Effektive Software, Wirksame Organisationen) bis zur einzelnen Angebots-Detailseite (u. a. AI.Engineering, AI.Automation, AI.Box, Identity mit Keycloak, Keycloak-Erweiterungen, Erste Hilfe bei Meetingflut, Scrum Trainings, Lean Portfolio Management) | `Seitenmuster/Angebots-Detailseite` (Angebots-Box, Preismodelle, Cross-Links), Cards & Teaser |\n| Wissen | Beitragsübersicht und ein Beispiel-Wissensbeitrag im Bereich Angewandte KI | `Seitenmuster/Beitragsübersicht`, `Seitenmuster/Wissensbeitrag` |\n| Unternehmen | Unternehmensseiten von Überblick über Über uns und Arbeitgeber bis zur einzelnen Stellenanzeige (Offene Stellen, Stelle Java/JEE) | Story-Zeitstrahl, Team-Roster, Team-Tile-Grid (alle drei in `Seitenmuster/Wissensbeitrag` dokumentiert), `Seitenmuster/Wissensbeitrag/FAQ`, Cards & Teaser |\n| Veranstaltungen | Veranstaltungsübersicht, eine Veranstaltungs-Detailseite und eine Seminar-Landing | `Seitenmuster/Veranstaltungsübersicht`, `Seitenmuster/Veranstaltung`, `Seitenmuster/Seminar · Training` |\n| Kontakt | Adaptive Anfrageseite, die Bereich und Anliegen aus verlinkten CTAs vorbelegt (`data-k-bereich`/`data-k-anliegen`, siehe Termine-Modul und Angebots-Box) | `Komponenten/Inputs & Forms/Textfeld` und verwandte Felder, `Komponenten/Buttons/Button` |\n\nFür den Aufbau, die Regeln und die Barrierefreiheits-Anforderungen der einzelnen\nSeitentypen gelten die jeweiligen `Seitenmuster/*`-Seiten, für das fertige Ergebnis\n`docs/index.html`.\n",
+          "summary": "# Beispielseiten Die Doku-Site zeigt unter „Beispielseiten“ sechs fertige Seiten als Tab-L..."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/addon-docs/mdx/grundlagen-barrierefreiheit--/303/274bersicht.json

@@ -0,0 +1,18 @@
+{
+  "components": {
+    "grundlagen-barrierefreiheit--übersicht": {
+      "id": "grundlagen-barrierefreiheit--übersicht",
+      "name": "grundlagen-barrierefreiheit--übersicht",
+      "docs": {
+        "grundlagen-barrierefreiheit--übersicht": {
+          "id": "grundlagen-barrierefreiheit--übersicht",
+          "name": "Übersicht",
+          "path": "./src/docs/grundlagen/barrierefreiheit.mdx",
+          "title": "Grundlagen/Barrierefreiheit",
+          "content": "import { Meta, Unstyled } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Grundlagen/Barrierefreiheit\" name=\"Übersicht\" />\n\n# Barrierefreiheit\n\nKontrastverhältnisse aller Brand-Farben, Tastaturnavigation, ARIA Patterns, Touch\nTargets, Reduced Motion. Pflicht sind die Stufen A und AA, AAA nehmen wir mit, wo es ohne\nNachteil geht. Vollständige Kriterien-Übersicht:\n[WCAG 2.2 Quickref (W3C)](https://www.w3.org/WAI/WCAG22/quickref/). Quelle:\n`docs/index.html#sec-a11y`.\n\n## Anspruch\n\nDas System ist auf Konformitätsstufe AA gebaut. Nach WCAG-Definition heißt das: alle\nErfolgskriterien der Stufe A und alle der Stufe AA sind erfüllt. AA liegt also nicht über\nA, sondern schließt es ein. Der Anspruch gilt für jedes Kriterium, nicht nur für Kontrast,\nebenso für Tastaturbedienung, Fokus, Struktur, Beschriftung, Bewegung und Zielgrößen.\n\nStufe AAA ist Zugabe, kein Abnahmekriterium. Wo sie ohne Nachteil für Gestaltung oder\nVerständlichkeit erreichbar ist, nehmen wir sie mit. Wo sie etwas kostet, bleibt AA der\nMaßstab. An einem AAA-Kriterium scheitert keine Änderung.\n\n**Pflicht, A und AA.** Gilt für alles, was das System ausliefert. Zwei Prüfungen laufen\nautomatisch: `npm run check:contrast` rendert die Doku in beiden Modi und muss 0 melden,\n`npm run check:dark-states` findet Zustände, die im Dark Mode unlesbar würden. Alles, was\nsich nicht messen lässt (Tastaturpfad, Screenreader-Ausgabe), gehört in die Prüfung von\nHand.\n\n**Freiwillig darüber.** An vielen Stellen liegt das System über der Pflicht. Die meisten\nTextfarben erreichen 7:1 und mehr (AAA). Touch-Targets liegen bei 44 px, das ist 2.5.5 auf\nAAA, verlangt wären 24 px. Diese Marken zeigen den Überschuss, nicht die Messlatte, sie\ndürfen an einzelnen Stellen fehlen, ohne dass etwas kaputt ist.\n\n**Nicht erfüllt, bewusst.** 2.3.3 Animation from Interactions (AAA) verlangt, dass eine\ndurch Bedienung ausgelöste Bewegung abschaltbar ist. Der Hover-Lift von 2 px auf\nklickbaren Karten und auf dem Störer läuft auch bei `prefers-reduced-motion: reduce`, weil\ner die Klickbarkeit signalisiert. Auto-Bewegung ist davon getrennt, die Carousels\nrespektieren die Einstellung.\n\n## Kontrastverhältnisse · Textfarben auf Weiß\n\nDie Modus-Markierung zeigt, auf welchen Theme-Modus sich ein Wert bezieht: Light für die\nhellen Token-Werte (Page-Background `#FFFFFF`), Dark für die dunklen Pendants\n(Page-Background `#151A1F`).\n\n| Farbe | Wert (Light) | Kontrast auf Weiß | Einsatz | Stufe |\n|---|---|---|---|---|\n| `--tx-primary` | #333E48 | 10,4:1 | Fließtext, Headlines, UI-Labels | AAA |\n| `--tx-secondary` | #4A6565 | 5,8:1 | Lead, Sub-Titel, Captions | AA |\n| `--tx-muted` | #5A7171 | 5,25:1 | Leise Texte: Eyebrow, Counter, Meta-Angaben, Captions. Abgedunkelt von #6E8585 (3,9:1), das AA für Normaltext verfehlte | AA |\n| Corporate 700 | #007575 | 5,5:1 | Links, farbige Überschriften | AA |\n| Angewandte KI 800 | #475705 | 8,1:1 | Texteinsatz (700 mit 4,4:1 nicht ausreichend) | AAA |\n| Angewandte KI 700 | #6B8208 | 4,4:1 | Knapp unter 4,5:1 AA-Schwelle | Fail |\n| Effektive Software 500 | #2F5FD4 | 5,7:1 | Links, farbige Überschriften, Akzentflächen. Button-Background nutzt `--es-700` (`.btn-es`) | AA |\n| Effektive Software 700 | #1B3D9A | 9,7:1 | Fließtext, dunkle Überschriften | AAA |\n| Wirksame Organisationen 600 | #347A22 | 5,3:1 | Buttons mit weißer Schrift (mindestens 600) | AA |\n| Wirksame Organisationen 700 | #285E1A | 7,8:1 | Texteinsatz, Links | AAA |\n| Rosé 500 | #C23060 | 5,3:1 | Links, Buttons, farbige Labels | AA |\n| Rosé 700 | #7E1639 | 10,2:1 | Texteinsatz, dunkle Überschriften | AAA |\n\nAngewandte-KI-700 ist die einzige Zeile, die AA für Normaltext verfehlt (4,4:1 gegen die\n4,5:1-Schwelle), deshalb trägt farbiger KI-Text `--ki-800`, nicht `--ki-700`.\n\nDer folgende Block zeigt zusätzlich zur Tabelle die tatsächliche Farbe jedes Tokens als\nFläche und macht die Lesbarkeit der weißen „Aa“-Beschriftung direkt sichtbar, statt sie nur\nals Zahl zu benennen. Werte 1:1 aus `docs/index.html#gt-a11y-kontrast` übernommen.\n\nexport const withCode = (text) =>\n  text.split('`').map((part, i) =>\n    i % 2 === 1 ? <code key={i} className=\"token\">{part}</code> : part\n  );\n\nexport const ContrastRow = ({ bg, fg, mode, name, ratio, badgeText, badgeClass }) => (\n  <div className=\"contrast-row\">\n    <div className=\"cswatch\" style={{ background: bg, color: fg }}>Aa</div>\n    <div className=\"cinfo\">\n      <div className=\"cname\">\n        <span className=\"a11y-mode\">{mode}</span>\n        {withCode(name)}\n      </div>\n      <div className=\"cratio\">{withCode(ratio)}</div>\n    </div>\n    <span className={`cbadge ${badgeClass}`}>{badgeText}</span>\n  </div>\n);\n\nexport const contrastTextLight = [\n  { bg: '#333E48', fg: '#fff', mode: 'Light', name: \"`--tx-primary` #333E48 auf Weiß\", ratio: \"10,4:1, Fließtext, Headlines, UI-Labels\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#4A6565', fg: '#fff', mode: 'Light', name: \"`--tx-secondary` #4A6565 auf Weiß\", ratio: \"5,8:1, Lead, Sub-Titel, Captions\", badgeText: 'AA ✓', badgeClass: 'c-aa' },\n  { bg: '#5A7171', fg: '#fff', mode: 'Light', name: \"`--tx-muted` #5A7171 auf Weiß\", ratio: \"5,25:1, leise Texte: Eyebrow, Counter, Meta-Angaben, Captions · abgedunkelt von #6E8585 (3,9:1), das AA für Normaltext verfehlte\", badgeText: 'AA ✓', badgeClass: 'c-aa' },\n  { bg: '#007575', fg: '#fff', mode: 'Light', name: \"Corporate 700 #007575 auf Weiß\", ratio: \"5,5:1, Links, farbige Überschriften\", badgeText: 'AA ✓', badgeClass: 'c-aa' },\n  { bg: '#475705', fg: '#fff', mode: 'Light', name: \"Angewandte KI 800 #475705 auf Weiß\", ratio: \"8,1:1, Texteinsatz (700 mit 4,4:1 nicht ausreichend)\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#6B8208', fg: '#fff', mode: 'Light', name: \"Angewandte KI 700 #6B8208 auf Weiß\", ratio: \"4,4:1, knapp unter 4,5:1 AA-Schwelle\", badgeText: 'Fail ✗', badgeClass: 'c-fail-badge' },\n  { bg: '#2F5FD4', fg: '#fff', mode: 'Light', name: \"Effektive Software 500 #2F5FD4 auf Weiß\", ratio: \"5,7:1, Links, farbige Überschriften, Akzentflächen · Button-Background nutzt `--es-700` (`.btn-es`)\", badgeText: 'AA ✓', badgeClass: 'c-aa' },\n  { bg: '#1B3D9A', fg: '#fff', mode: 'Light', name: \"Effektive Software 700 #1B3D9A auf Weiß\", ratio: \"9,7:1, Fließtext, dunkle Überschriften\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#347A22', fg: '#fff', mode: 'Light', name: \"Wirksame Organisationen 600 #347A22 auf Weiß\", ratio: \"5,3:1, Buttons mit weißer Schrift (mind. 600)\", badgeText: 'AA ✓', badgeClass: 'c-aa' },\n  { bg: '#285E1A', fg: '#fff', mode: 'Light', name: \"Wirksame Organisationen 700 #285E1A auf Weiß\", ratio: \"7,8:1, Texteinsatz, Links\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#C23060', fg: '#fff', mode: 'Light', name: \"Rosé 500 #C23060 auf Weiß\", ratio: \"5,3:1, Links, Buttons, farbige Labels\", badgeText: 'AA ✓', badgeClass: 'c-aa' },\n  { bg: '#7E1639', fg: '#fff', mode: 'Light', name: \"Rosé 700 #7E1639 auf Weiß\", ratio: \"10,2:1, Texteinsatz, dunkle Überschriften\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n];\n\n<Unstyled>\n  {contrastTextLight.map((row, i) => (\n    <ContrastRow key={i} {...row} />\n  ))}\n</Unstyled>\n\n## Kontrastverhältnisse · Akzentfarben (nicht für Text)\n\n| Farbe | Wert | Kontrast auf Weiß | Hinweis |\n|---|---|---|---|\n| Corporate 500 | #00BEBE | 2,3:1 | Nur als Hintergrundfläche, dunkler Text #002B2B (6,0:1 auf der Fläche) |\n| Angewandte KI 500 | #B5E61C | 1,4:1 | Ausschließlich als Akzent, Text #475705 auf der Fläche (5,6:1) |\n| Wirksame Organisationen 500 | #44A030 | 3,3:1 | Nur Large Text / UI-Komponenten, weiße Schrift auf 500 verfehlt (3,3:1), mindestens 600 verwenden |\n\nDer Block zeigt, wie kräftig die reine Akzentfläche wirkt und mit welcher (nicht weißen)\nTextfarbe die „Aa“-Beschriftung überhaupt lesbar bleibt, was die Tabelle nur als Fließtext\nnennt. Werte 1:1 aus `docs/index.html#gt-a11y-akzent` übernommen.\n\nexport const contrastAccent = [\n  { bg: '#00BEBE', fg: '#002B2B', mode: 'Light', name: \"Corporate 500 #00BEBE, Akzentfläche\", ratio: \"2,3:1 auf Weiß, nur als Hintergrundfläche · dunkler Text: #002B2B (6,0:1 ✓)\", badgeText: 'Fläche only', badgeClass: 'c-fail-badge' },\n  { bg: '#B5E61C', fg: '#475705', mode: 'Light', name: \"Angewandte KI 500 #B5E61C, Akzentfläche\", ratio: \"1,4:1 auf Weiß, ausschließlich als Akzent · Text: #475705 auf Fläche (5,6:1 ✓)\", badgeText: 'Fläche only', badgeClass: 'c-fail-badge' },\n  { bg: '#44A030', fg: '#0A1F05', mode: 'Light', name: \"Wirksame Organisationen 500 #44A030\", ratio: \"3,3:1 auf Weiß, nur Large Text / UI-Komponenten · weiße Schrift: 3,3:1 ✗ → mind. 600 verwenden\", badgeText: 'AA Large ✓', badgeClass: 'c-aa' },\n];\n\n<Unstyled>\n  {contrastAccent.map((row, i) => (\n    <ContrastRow key={i} {...row} />\n  ))}\n</Unstyled>\n\n## Kontrastverhältnisse · Dark Mode\n\nIm Dark Mode ist die Page-Background `#151A1F` (Token `--bg-page`), gehobene Flächen wie\nKarten sitzen auf `#28323D` (`--bg-surface`). Die Basisfläche trägt 17,5:1 gegen Weiß und\nliegt damit über der Material-Schwelle von 15,8:1, die sicherstellt, dass Fließtext auch\nauf der höchsten Elevationsstufe noch 4,5:1 erreicht.\n\n| Farbe | Wert (Dark) | Kontrast auf `#151A1F` | Einsatz | Stufe |\n|---|---|---|---|---|\n| `--tx-primary` | #DDE9E9 | 14,1:1 | Fließtext, Headlines, UI-Labels. Auf bg-surface 10,5:1 | AAA |\n| `--tx-secondary` | #A6C6C6 | 9,6:1 | Lead, Sub-Titel, Captions, Body in Karten. Auf bg-surface 7,1:1 | AAA |\n| `--tx-muted` | #93B6B6 | 8,0:1 | Gedämpfte Meta-Angaben. Auf bg-surface 6,0:1 (vorher 4,1:1, verfehlte dort AA) | AAA |\n| Corporate 200 | #80DEDE | 11,2:1 | Eyebrows, Card-Eyebrows, Bereichs-Text. Light-Pendant `--co-700` | AAA |\n| Corporate 300 | #4DD0D0 | 9,4:1 | Pillar-Titles, Code-Tokens, Footer-Links. Light-Pendant `--co-700` | AAA |\n| Angewandte KI 200 | #D6F06D | 13,8:1 | KI-Bereichstexte, Tab-Active-State. Light-Pendant `--ki-800` | AAA |\n| Effektive Software 200 | #98B7EE | 8,6:1 | ES-Bereichstexte. Light-Pendant `--es-700` | AAA |\n| Wirksame Organisationen 200 | #A3D48E | 10,3:1 | WO-Bereichstexte. Light-Pendant `--wo-700` | AAA |\n| `--c-success` | #5CE8A0 | 11,3:1 | Erfolgs-Marker in Do/Don't-Listen. Light-Pendant #0E6644 (6,99:1) | AAA |\n| `--c-warning` | #F0C060 | 10,4:1 | Hinweise, Beta-Zustände. Light-Pendant #8A5E0A (5,70:1) | AAA |\n| `--c-error` | #FFA5A5 | 9,3:1 | Fehler-Marker, Inline-Fehlertext, Required-Asterisks. Auf bg-surface 6,9:1. Light-Pendant #B22020 (6,73:1) | AAA |\n\nDer Block zeigt dieselben Farben, wie sie im Dark Mode tatsächlich erscheinen, inklusive\nder bei den Status-Farben vom Muster abweichenden Textfarbe für „Aa“, was die Tabelle nicht\nabbildet. Werte 1:1 aus `docs/index.html#gt-a11y-kontrast-dark` übernommen. Die Zeilen\ntragen ihre Dark-Werte als feste Hex-Angaben (kein CSS-Token, kein `data-theme`-Wrapper):\ngenau wie in `docs/index.html` selbst sind Fläche und „Aa“-Textfarbe pro Zeile hart codiert,\ndeshalb bleibt der Block unabhängig vom aktuell aktiven Storybook-Theme korrekt.\n\nexport const contrastDark = [\n  { bg: '#DDE9E9', fg: '#151A1F', mode: 'Dark', name: \"`--tx-primary` #DDE9E9 auf #151A1F\", ratio: \"14,1:1, Fließtext, Headlines, UI-Labels · auf bg-surface 10,5:1\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#A6C6C6', fg: '#151A1F', mode: 'Dark', name: \"`--tx-secondary` #A6C6C6 auf #151A1F\", ratio: \"9,6:1, Lead, Sub-Titel, Captions, Body in Karten · auf bg-surface 7,1:1\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#93B6B6', fg: '#151A1F', mode: 'Dark', name: \"`--tx-muted` #93B6B6 auf #151A1F\", ratio: \"8,0:1, gedämpfte Meta-Angaben · auf bg-surface 6,0:1 (vorher 4,1:1, verfehlte dort AA)\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#80DEDE', fg: '#151A1F', mode: 'Dark', name: \"Corporate 200 #80DEDE auf #151A1F\", ratio: \"11,2:1, Eyebrows, Card-Eyebrows, Bereichs-Text · Light-Pendant: `--co-700`\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#4DD0D0', fg: '#151A1F', mode: 'Dark', name: \"Corporate 300 #4DD0D0 auf #151A1F\", ratio: \"9,4:1, Pillar-Titles, Code-Tokens, Footer-Links · Light-Pendant: `--co-700`\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#D6F06D', fg: '#151A1F', mode: 'Dark', name: \"Angewandte KI 200 #D6F06D auf #151A1F\", ratio: \"13,8:1, KI-Bereichstexte, Tab-Active-State · Light-Pendant: `--ki-800`\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#98B7EE', fg: '#151A1F', mode: 'Dark', name: \"Effektive Software 200 #98B7EE auf #151A1F\", ratio: \"8,6:1, ES-Bereichstexte · Light-Pendant: `--es-700`\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#A3D48E', fg: '#151A1F', mode: 'Dark', name: \"Wirksame Organisationen 200 #A3D48E auf #151A1F\", ratio: \"10,3:1, WO-Bereichstexte · Light-Pendant: `--wo-700`\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#5CE8A0', fg: '#092417', mode: 'Dark', name: \"`--c-success` #5CE8A0 auf #151A1F\", ratio: \"11,3:1, ✓-Marker in Do/Don't-Listen · Light-Pendant: #0E6644 (6,99:1 ✓)\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#F0C060', fg: '#271E0A', mode: 'Dark', name: \"`--c-warning` #F0C060 auf #151A1F\", ratio: \"10,4:1, Hinweise, Beta-Zustände · Light-Pendant: #8A5E0A (5,70:1 ✓)\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n  { bg: '#FFA5A5', fg: '#3D0F0F', mode: 'Dark', name: \"`--c-error` #FFA5A5 auf #151A1F\", ratio: \"9,3:1, ✕-Marker, Inline-Fehlertext, Required-Asterisks · auf bg-surface 6,9:1 · Light-Pendant: #B22020 (6,73:1 ✓)\", badgeText: 'AAA ✓', badgeClass: 'c-aaa' },\n];\n\n<Unstyled>\n  {contrastDark.map((row, i) => (\n    <ContrastRow key={i} {...row} />\n  ))}\n</Unstyled>\n\n## Tastaturnavigation\n\nJede Funktion ist ohne Maus erreichbar. Vier Kriterien greifen zusammen: 2.1.1 Keyboard\n(alles bedienbar), 2.1.2 No Keyboard Trap (überall wieder heraus), 2.4.3 Focus Order\n(sinnvolle Reihenfolge) und 2.4.7 Focus Visible (man sieht, wo man steht).\n\n- **Reihenfolge kommt aus dem Markup.** Die Tab-Folge ergibt sich aus der\n  DOM-Reihenfolge, nicht aus der CSS-Position (WCAG 2.4.3). Regel: keine positiven\n  `tabindex`-Werte, sie stellen die Kette global um.\n- **Sprungziele mit `tabindex=\"-1\"`.** Ein Anker allein bewegt in manchen Browsern nur den\n  Scroll, nicht den Fokus. Landepunkte wie `#main-content` tragen deshalb\n  `tabindex=\"-1\"`, programmatisch fokussierbar, aber nicht in der Tab-Kette.\n- **Skip-Link zuerst.** Erstes fokussierbares Element der Seite, außerhalb des Viewports\n  geparkt und erst im Fokus sichtbar (WCAG 2.4.1). Überspringt die Navigation und setzt\n  den Fokus auf den Hauptinhalt.\n- **Keine Tastaturfalle.** Jedes Element, das den Fokus einfängt, gibt ihn wieder her\n  (WCAG 2.1.2). Escape schließt Submenüs, Dropdowns und die Suche und setzt den Fokus auf\n  das auslösende Element zurück.\n- **Fokus darf nicht verdeckt sein.** Das fokussierte Element muss sichtbar bleiben, nicht\n  hinter einer klebenden Leiste liegen (2.4.11, neu in WCAG 2.2).\n- **Ein Bauteil, ein Muster.** Gleichartige Bauteile nehmen dieselben Tasten. Alles, was\n  eine Liste von Optionen öffnet (Submenü, Custom Select, Combobox), reagiert auf\n  Pfeil-runter/-hoch, Home/End und Escape.\n\n| Bauteil | Tasten | Verhalten |\n|---|---|---|\n| Skip-Link | Enter | setzt den Fokus auf den Hauptinhalt |\n| Topnav-Submenü | Enter, Space, Pfeil ↓/↑, Home, End, Esc | Caret öffnet, Pfeile wandern durch die Einträge, Esc schließt und gibt den Fokus zurück |\n| Custom Select | Enter, Space, Pfeil ↓/↑, Home, End, Esc, Tab, Buchstabe | öffnet und wählt, ein Buchstabe springt zur passenden Option (Puffer 600 ms), Tab schließt und geht weiter |\n| Combobox & Multi-Select | Pfeil ↓/↑, Home, End, Enter, Esc, Backspace | wie Select, Backspace im leeren Feld entfernt die letzte Auswahl |\n| Bild-Carousel | Pfeil ←/→ | eine Slide zurück oder vor |\n| Logo-Karussell | Pfeil ←/↑/→/↓, Home, End | auf den Pagination-Dots, jede Taste pausiert zusätzlich den Auto-Wechsel |\n| Such-Feld der Beitragsübersicht | `/`, Esc | `/` fokussiert die Suche, Esc leert das Feld |\n\n## Touch Targets\n\nZwei Kriterien regeln die Zielgröße, und sie verlangen nicht dasselbe: 2.5.8 Target Size\n(Minimum) fordert auf AA mindestens 24 × 24 px, 2.5.5 Target Size (Enhanced) auf AAA\nmindestens 44 × 44 px. 2.5.8 ist neu in WCAG 2.2, in 2.1 gibt es auf AA gar keine\nZielgrößen-Anforderung. Das System zielt auf 44 px, liegt damit über der AA-Pflicht und\ntrifft zugleich die Empfehlung der Plattform-Guidelines. Wo 44 px nicht erreichbar sind,\ngilt 24 px als harte Untergrenze.\n\nAbstand zählt mit: 2.5.8 lässt kleinere Ziele zu, wenn genug Freiraum um sie liegt.\nZwischen benachbarten Zielen deshalb mindestens `--s2` (8 px), damit ein Daumen nicht zwei\nAktionen gleichzeitig trifft.\n\n| Bauteil | Maß | Wo gesetzt |\n|---|---|---|\n| Buttons, alle Varianten | `min-height: 44px` | `.btn` |\n| Formularfelder (Input, Textarea, Select) | `min-height: 44px` | `.field input`, `textarea`, `select` |\n| Back-to-Top-Button | 44 × 44 px | `.back-to-top` |\n| Carousel-Pfeile | 44 × 44 px | `.img-slider-btn` |\n| Beispielseiten-Tabs und Aufklapp-Caret | 44 px | `.ep-tab`, `.ep-tab-toggle` |\n| Topnav-Suchfeld | `height: 44px` | `.ep-nav-search-input` |\n| Topnav-Caret, mobil | 44 × 44 px | `.ep-nav-item-toggle` im Mobil-Breakpoint |\n| Snackbar | `min-height: 48px` | `.snack` |\n\nZwei bewusste Abweichungen: Segmented Control (`.seg-option label`) und Area Tabs\n(`.atab`) liegen bei `min-height: 40px`. Beide sind Zeilen in einer dicht gesetzten\nUmschaltgruppe, in der 44 px die Leiste optisch auseinanderziehen würden. Sie erfüllen\n2.5.8 (AA) deutlich, verfehlen 2.5.5 (AAA) um 4 px. Neue Bauteile orientieren sich an\n44 px, nicht an diesen beiden.\n\n**Die 44-px-Ausnahme von der Spacing-Skala:** Die 44 stehen hartcodiert im CSS, weil die\nSpacing-Skala keinen 44-px-Schritt hat. Das ist eine der erlaubten Ausnahmen der\nStrict-Scale-Konvention (siehe `Grundlagen/Spacing & Grid`): Werte, die eine physische\nMindestgröße beschreiben, folgen ihrer eigenen Logik statt dem 8pt-Rhythmus.\n\n## ARIA Patterns\n\n**Focus-Ring.** Sichtbarer Fokusindikator für alle interaktiven Elemente (WCAG 2.4.7).\n\n```css\n--focus-ring: 0 0 0 3px var(--co-50), 0 0 0 5px var(--co-700);\n:focus-visible {\n  outline: none;\n  box-shadow: var(--focus-ring);\n}\n```\n\n**Formulare & Fehler.** Fehlermeldungen programmatisch mit dem Feld verknüpfen (WCAG\n1.3.1, 3.3.1).\n\n```html\n<input aria-invalid=\"true\" aria-describedby=\"err-id\">\n<span id=\"err-id\" role=\"alert\">Pflichtfeld</span>\n```\n\n**Dekorative Icons.** SVGs ohne inhaltliche Bedeutung vor Screenreadern verbergen (WCAG\n1.1.1).\n\n```html\n<svg aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 24 24\">\n  <path d=\"…\"/>\n</svg>\n```\n\n**Icon-only Buttons.** Buttons ohne sichtbares Label brauchen ein zugängliches\nTextalternativ (WCAG 1.1.1).\n\n```html\n<button aria-label=\"Menü öffnen\">\n  <svg aria-hidden=\"true\" focusable=\"false\">…</svg>\n</button>\n```\n\n**Tab Panels.** Tabs als Tablist mit vollständigen ARIA-Relationen (WCAG 4.1.2).\n\n```html\n<div role=\"tablist\">\n  <button role=\"tab\" aria-selected=\"true\" aria-controls=\"panel-1\" id=\"tab-1\">Tab 1</button>\n</div>\n<div role=\"tabpanel\" id=\"panel-1\" aria-labelledby=\"tab-1\" tabindex=\"0\">…</div>\n```\n\n**Live Regions.** Dynamische Inhalte für Screenreader ankündigen (WCAG 4.1.3).\n\n```html\n<!-- Status, höflich, unterbricht nicht -->\n<div role=\"status\" aria-live=\"polite\">Gespeichert.</div>\n\n<!-- Alert, sofort, unterbricht -->\n<div role=\"alert\" aria-live=\"assertive\">Verbindungsfehler.</div>\n```\n\n**Toggle & Filter-Buttons.** Buttons mit zwei Zuständen (gedrückt, nicht gedrückt)\nbrauchen `aria-pressed`, damit Screenreader den Status ansagen (WCAG 4.1.2). Verwendung\nunter anderem bei Filter-Chips.\n\n```html\n<button class=\"chip\" aria-pressed=\"true\" data-area=\"ki\">Angewandte KI</button>\n\n/* Style stützt sich auf das ARIA-Attribut, nicht auf eine separate\n   .sel- oder .active-Klasse */\n.chip[aria-pressed=\"true\"] { … }\n```\n\n**Such-Feld als Landmark.** Such-Bereiche bekommen `role=\"search\"` plus eigenes\n`aria-label`, damit wird das Suchfeld zur Landmark, die Screenreader-Nutzerinnen direkt\nanspringen (WCAG 1.3.1, 2.4.6).\n\n```html\n<div role=\"search\" aria-label=\"Beiträge durchsuchen\">\n  <svg aria-hidden=\"true\" focusable=\"false\">…</svg>\n  <input type=\"search\" aria-label=\"Beiträge nach Stichwort durchsuchen\">\n</div>\n```\n\n**Aktive Navigation.** Der aktive Eintrag in einer Navigation wird via\n`aria-current=\"page\"` markiert, ein sichtbarer Active-State allein reicht für\nScreenreader nicht (WCAG 1.3.1).\n\n```html\n<a class=\"ep-nav-btn\" href=\"/ueber-uns\" aria-current=\"page\">Unternehmen</a>\n\n.ep-nav-btn[aria-current=\"page\"] { color: var(--co-700); }\n```\n\n**Visuell versteckt (`.sr-only`).** Text nur für Screenreader, visuell entfernt. Trägt die\nBedeutung hinter rein grafischen Markern (Häkchen, Minus) in Vergleichstabellen, Glyph\nallein reicht nicht (WCAG 1.1.1, 1.3.1).\n\n```html\n<td>\n  <span class=\"ep-compare-yes\" aria-hidden=\"true\">✓</span>\n  <span class=\"sr-only\">Enthalten</span>\n</td>\n\n.sr-only {\n  position: absolute; width: 1px; height: 1px;\n  margin: -1px; padding: 0; overflow: hidden;\n  clip: rect(0,0,0,0); white-space: nowrap; border: 0;\n}\n```\n\n## Reduzierte Bewegung & High Contrast\n\n**`prefers-reduced-motion`.** Nutzer mit Gleichgewichts- oder Aufmerksamkeitsstörungen\nkönnen Animationen deaktivieren (WCAG 2.3.3 AAA).\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n```\n\n**`forced-colors` (High Contrast).** Windows High Contrast Mode ersetzt Farben durch\nSystemfarben, Grenzen durch Borders statt nur Farbe ausdrücken.\n\n```css\n@media (forced-colors: active) {\n  .btn-filled {\n    border: 2px solid ButtonText;\n    forced-color-adjust: none;\n  }\n  .btn-outlined { border-color: ButtonText; }\n}\n```\n\n**Theme-Umschaltung.** Das Design System kennt genau zwei Modi, Light und Dark.\nUmgeschaltet wird ausschließlich über das Attribut `[data-theme=\"dark\"]` am `<html>`.\nEinen dritten Modus, der der Betriebssystem-Präferenz folgt, gibt es bewusst nicht,\n`prefers-color-scheme` wird im ausgelieferten CSS nicht ausgewertet, Standard ist Light.\n`color-scheme: dark` ist im Dark-Theme fest gesetzt, damit native Controls (Checkbox,\nRadio, Scrollbar, Select-Popup) dark-thematisiert rendern.\n\n**Smooth-Scroll für In-Page-Anker.** Klicks auf In-Page-Anker innerhalb derselben Seite\nanimieren das Scrollen statt hart zu springen. Bei `prefers-reduced-motion: reduce` wird\nder Hard-Jump beibehalten, weil sanftes Scrollen für vestibulär empfindliche Nutzerinnen\nSchwindel auslösen kann (WCAG 2.3.3).\n\n## Video-Embed\n\nVideos (zum Beispiel YouTube) werden als responsiver `<iframe>` eingebunden. Ein\nGroßteil der Barrierefreiheit hängt am Videoinhalt selbst (Untertitel, Transkript) und\nlässt sich nicht allein über das Embed erzwingen.\n\n```html\n<iframe\n  src=\"https://www.youtube-nocookie.com/embed/ID\"\n  title=\"Was ist Keycloak? Erklärt von …\"\n  loading=\"lazy\"\n  referrerpolicy=\"strict-origin-when-cross-origin\"\n  allowfullscreen\n  style=\"width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-lg)\"></iframe>\n```\n\n- **iframe braucht `title`.** Jeder Video-iframe bekommt einen aussagekräftigen `title`\n  (WCAG 4.1.2), Screenreader kündigen den Frame damit benannt an.\n- **Untertitel (WCAG 1.2.2, AA).** Aufgezeichnete Videos brauchen Untertitel. Automatische\n  YouTube-Untertitel allein erfüllen die Anforderung nicht (Qualität, Zeichensetzung).\n  Fremdsprachige Videos bekommen Untertitel in der Seitensprache.\n- **Transkript & Audiodeskription.** Ein Transkript in der Nähe des Videos hilft allen,\n  die es nicht abspielen können, und dient Suchmaschinen. Enthält das Bild Informationen,\n  die im Ton fehlen, ist zusätzlich eine Audiodeskription nötig (WCAG 1.2.3/1.2.5).\n- **Kein Autoplay.** Nie `autoplay=1` setzen, Ton und Bewegung starten erst auf Klick\n  (WCAG 1.4.2, 2.2.2), das respektiert auch `prefers-reduced-motion`.\n- **Responsiv und ohne Rahmen.** `width:100%` plus `aspect-ratio:16/9` hält das Video\n  seitenbreit ohne horizontales Scrollen.\n- **Datenschutz.** Einbindung über `youtube-nocookie.com` und `loading=\"lazy\"` reduziert\n  Tracking und Ladelast. Für die produktive Seite gilt zusätzlich: erst nach Einwilligung\n  laden, da beim Abspielen Cookies gesetzt werden.\n- **Sprache kennzeichnen.** Weicht die Videosprache von der Seitensprache ab, im\n  umgebenden Text ausweisen (zum Beispiel Videosprache Englisch).\n- **Fokus & Tastatur.** Der YouTube-Player ist tastaturbedienbar und beschriftet, der\n  iframe ist fokussierbar, keine positiven `tabindex`-Werte vergeben.\n\nWas das Design-System liefert versus was der Videoinhalt liefern muss: Embed-seitig sind\n`title`, kein Autoplay, responsives 16:9, Datenschutz-Host und Sprach-Hinweis abgedeckt.\nUntertitel, Transkript und Audiodeskription hängen an der Videoquelle und müssen beim\nUpload hinterlegt werden, das kann das Design System nicht erzwingen.\n\n## Gates\n\n- `npm run check:contrast` rendert `docs/index.html` in beiden Modi in Chromium und muss\n  0 Befunde melden (Text gegen 4,5:1 beziehungsweise 3:1 bei Großtext, getönte\n  Bauteil-Füllungen gegen den 1,3:1-Faustwert, Bedienelement-Rahmen gegen 3:1).\n- `npm run check:dark-states` findet Zustände (Hover, Focus, Active), die im Dark Mode\n  dunkel auf dunkel und damit unlesbar würden.\n- Storybook fährt `@storybook/addon-a11y` global scharf: `a11y: { test: 'error' }` in\n  `.storybook/preview.ts`, axe-Verstöße lassen den Test-Runner fehlschlagen.\n- Einzelne Stories mit einem bekannten, im CSS-Kern liegenden Befund dürfen lokal\n  `a11y: { test: 'todo' }` setzen (im Panel weiter sichtbar, aber nicht blockierend). Zum\n  Zeitpunkt dieser Seite sind in `storybook-angular/src/lib` **keine** aktiven\n  `test: 'todo'`-Overrides gesetzt. `storybook-angular/README.md` dokumentiert drei\n  frühere, inzwischen im CSS-Kern behobene Befunde (DownloadCta-Eyebrow, CodeBlock-Copy,\n  Slider-Wertanzeige) als Referenz dafür, wie eine solche Ausnahme aussieht und wann sie\n  wieder scharf geschaltet wird.\n\n## Siehe auch\n\n- `docs/index.html#gt-a11y-touch` (44-px-Ausnahme)\n- CONTRIBUTING.md § 1 Grundprinzipien, § 3 Farbe & Kontrast\n- `storybook-angular/README.md`, Abschnitt „Frühere a11y-Befunde im CSS-Kern (behoben)“\n",
+          "summary": "# Barrierefreiheit Kontrastverhältnisse aller Brand-Farben, Tastaturnavigation, ARIA Patte..."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/addon-docs/mdx/grundlagen-design-tokens--/303/274bersicht.json

@@ -0,0 +1,18 @@
+{
+  "components": {
+    "grundlagen-design-tokens--übersicht": {
+      "id": "grundlagen-design-tokens--übersicht",
+      "name": "grundlagen-design-tokens--übersicht",
+      "docs": {
+        "grundlagen-design-tokens--übersicht": {
+          "id": "grundlagen-design-tokens--übersicht",
+          "name": "Übersicht",
+          "path": "./src/docs/grundlagen/design-tokens.mdx",
+          "title": "Grundlagen/Design Tokens",
+          "content": "import { Meta } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Grundlagen/Design Tokens\" name=\"Übersicht\" />\n\n# Design Tokens\n\nAlle Tokens als CSS Custom Properties, Framework-unabhängig. Quelle:\n`docs/index.html#sec-tokens`.\n\nDie **CSS-Schicht** (`@conciso/design-system`) ist die Quelle der Wahrheit für Aussehen\nund Tokens. Die **Angular-Lib** (`@conciso/design-system-angular`) liefert dünne\nWrapper-Komponenten über der CSS-Schicht und bringt selbst keine Styles mit, ein Consumer\nbindet die CSS-Schicht separat und global ein.\n\n## Präfix-Schema\n\n| Gruppe | Präfixe |\n|---|---|\n| Farbe | `--co-* --ki-* --es-* --wo-* --ro-* --n-*` (Skala `-50` bis `-900`), semantisch `--c-success/-warning/-error` |\n| Flächen/Text | `--bg-* --tx-*` |\n| Typo | `--ty-*`, `--font` / `--font-display` |\n| Maß | `--s1…--s16` (Spacing), `--r-*` (Radius), `--e0…--e5` (Elevation), `--tonal-*` |\n| Sonstiges | `--m-*` (Motion), `--bd` / `--bd-strong` (Border), `--focus-*`, `--icon-stroke-*` |\n\nNeue Tokens folgen demselben Präfix-Schema und gehören in `css/tokens.css` (Light, Source\nof Truth), Dark-Abweichungen in `css/dark-mode.css`.\n\n## Rollen-Zuordnung (CONTRIBUTING § 10 Schritt 1)\n\nVor einem neuen Token prüfen, ob die Rolle schon ein Token hat, eine neue Rolle braucht\neinen neuen Namen, eine bekannte Rolle nicht:\n\n| Rolle | Token |\n|---|---|\n| Farbiger Text | `--XX-ink` |\n| Füllung eines textführenden Bauteils | `--XX-fill` |\n| Dekorative Fläche | `--XX-50` |\n| Sektionsfläche | `--XX-band` |\n| Rahmenfarbe | `--bd-c` / `--bd-strong-c` |\n\n## Brand & Bereiche\n\n```css\n/* Global */\n--tx-brand:     #333E48;\n--font:         'Montserrat', system-ui, sans-serif;\n--font-display: 'Libre Baskerville', Georgia, serif;\n\n/* Corporate */\n--co-500: #00BEBE; --co-700: #007575; --co-50: #E0F7F7; --co-800: #004F4F;\n\n/* Angewandte KI, Akzent 500, Text ab 700 */\n--ki-500: #B5E61C; --ki-700: #6B8208; --ki-50: #F4FCD5; --ki-800: #475705;\n\n/* Effektive Software */\n--es-500: #2F5FD4; --es-700: #1B3D9A; --es-50: #EAF0FB; --es-800: #112568;\n\n/* Wirksame Organisationen */\n--wo-500: #44A030; --wo-700: #285E1A; --wo-50: #EBF5E6; --wo-800: #183A0E;\n```\n\n## Shape (5 Stufen)\n\n```css\n--r-xs:   4px;    /* extraSmall, kleine Icons, Swatches */\n--r-sm:   8px;    /* small, Chips, Text Fields, Menus */\n--r-md:  12px;    /* medium, Cards, FABs */\n--r-lg:  16px;    /* large, große Cards, Sheets */\n--r-xl:  28px;    /* extraLarge, Drawers, Dialoge */\n--r-full: 9999px; /* full, Buttons, Badges, Pills */\n```\n\n## Elevation (6 Ebenen)\n\n```css\n/* Shadow Elevation */\n--e0: none;\n--e1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);\n--e2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);\n--e3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);\n\n/* Tonal Elevation, Primärfarbe auf Surface */\ncolor-mix(in srgb, var(--co-500) 5%,  var(--bg-surface)); /* Level 1 */\ncolor-mix(in srgb, var(--co-500) 8%,  var(--bg-surface)); /* Level 2 */\ncolor-mix(in srgb, var(--co-500) 11%, var(--bg-surface)); /* Level 3 */\n```\n\nDetails zu allen 6 Ebenen und der Interaktiv/Statisch-Regel: `Grundlagen/Elevation`.\n\n## Button-Typen\n\n5 Varianten, aufsteigend nach Betonung:\n\n| Klasse | Darstellung | Betonung |\n|---|---|---|\n| `.btn-filled` | Hintergrund Primärfarbe, Text auf Primärfarbe | höchste |\n| `.btn-tonal` | Hintergrund Primary-Container | mittlere |\n| `.btn-elevated` | Hintergrund Surface + Schatten | leichte |\n| `.btn-outlined` | Rahmen Primärfarbe | niedrige |\n| `.btn-text` | nur Textfarbe Primärfarbe | minimale |\n\n## Spacing & Motion\n\n```css\n--s4: 16px; --s6: 24px; --s8: 32px; --s16: 64px;\n--m-fast: 150ms cubic-bezier(.4,0,.2,1);\n--focus-ring: 0 0 0 3px var(--co-50), 0 0 0 5px var(--co-700);\n```\n\nVollständige Spacing-Skala (`--s1` bis `--s16`) und ihre Ausnahmen: `Grundlagen/Spacing &\nGrid`.\n\n## Dateien\n\n| Datei | Inhalt |\n|---|---|\n| `css/tokens.css` | Light-Werte, kanonische Quelle (Source of Truth) |\n| `css/dark-mode.css` | Dark-Abweichungen, komplett in `@media screen` |\n| `tokens/` | Generierter Export (`tokens.json`, `tokens.scss`, `tokens.js`), nicht manuell editieren |\n\nNach jeder Änderung an `css/tokens.css` oder `css/dark-mode.css`: `npm run build:tokens`\nausführen, das Skript liest beide Dateien und schreibt den Export nach `tokens/` neu.\n\n## Siehe auch\n\n- `docs/index.html#gt-tokens-spacing`\n- CONTRIBUTING.md § 2 Namens-Konventionen, § 10 Eine Komponente / ein Token hinzufügen\n- CONTEXT.md, Abschnitte CSS-Schicht, Angular-Lib, Wrapper-Komponente\n",
+          "summary": "# Design Tokens Alle Tokens als CSS Custom Properties, Framework-unabhängig. Quelle: `docs..."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/addon-docs/mdx/grundlagen-einrichtung--/303/274bersicht.json

@@ -0,0 +1,18 @@
+{
+  "components": {
+    "grundlagen-einrichtung--übersicht": {
+      "id": "grundlagen-einrichtung--übersicht",
+      "name": "grundlagen-einrichtung--übersicht",
+      "docs": {
+        "grundlagen-einrichtung--übersicht": {
+          "id": "grundlagen-einrichtung--übersicht",
+          "name": "Übersicht",
+          "path": "./src/docs/grundlagen/einrichtung.mdx",
+          "title": "Grundlagen/Einrichtung",
+          "content": "import { Meta } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Grundlagen/Einrichtung\" name=\"Übersicht\" />\n\n# Einrichtung\n\nSo bindest du das Conciso Design System in ein Angular-Projekt ein, von der Installation\nbis zur ersten Komponente, und schließt optional eine KI daran an.\n\n## Beide Pakete installieren\n\nAngular-Lib und CSS-Schicht tragen immer dieselbe Versionsnummer und liegen öffentlich auf\nnpmjs.org, du brauchst keinen Account und kein Token:\n\n```bash\nnpm i @conciso/design-system @conciso/design-system-angular\n```\n\n**Alternative: GitHub Packages.** Für Consumer innerhalb der GitHub-Organisation\n`conciso` liegen beide Pakete zusätzlich privat, org-scoped in GitHub Packages. Dafür\neine `.npmrc` im Projekt anlegen, die den `@conciso`-Scope umleitet, plus ein Token mit\nScope `read:packages` auch fürs Lesen (in GitHub Actions genügt `secrets.GITHUB_TOKEN`):\n\n```ini\n@conciso:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}\n```\n\nAusführliche Anleitung (Token-Beschaffung, CI vs. lokaler Rechner): README von\n`@conciso/design-system-angular` auf\n[npmjs.com](https://www.npmjs.com/package/@conciso/design-system-angular).\n\n## CSS und Fonts global einbinden\n\nDie Angular-Lib liefert **kein eigenes CSS**: Die Wrapper-Komponenten setzen nur die\nvorhandenen Klassen der CSS-Schicht zusammen, das Styling kommt aus einem globalen\nCascade, der sich nicht pro Komponente kapseln lässt. Fehlt dieser Schritt, erscheinen die\nKomponenten ungestylt.\n\n**`angular.json`** → `architect.build.options`, Eintrag `assets` ergänzen (`css` und\n`fonts` werden unverändert kopiert, kein CSS-Bundling durch den Angular-Build, deshalb\n`assets` statt `styles`):\n\n```jsonc\n{\n  \"assets\": [\n    // … bestehende Einträge (z. B. \"public\") …\n    {\n      \"glob\": \"**/*\",\n      \"input\": \"node_modules/@conciso/design-system/css\",\n      \"output\": \"conciso/css\"\n    },\n    {\n      \"glob\": \"**/*\",\n      \"input\": \"node_modules/@conciso/design-system/fonts\",\n      \"output\": \"conciso/fonts\"\n    }\n  ]\n}\n```\n\n**`src/index.html`**, CSS in genau dieser Reihenfolge laden (fonts → tokens → dark-mode →\nbase → components; `fonts.css` referenziert die Font-Dateien relativ als `../fonts/*`,\n`conciso/css` und `conciso/fonts` müssen also Geschwisterordner bleiben):\n\n```html\n<link rel=\"stylesheet\" href=\"conciso/css/fonts.css\" />\n<link rel=\"stylesheet\" href=\"conciso/css/tokens.css\" />\n<link rel=\"stylesheet\" href=\"conciso/css/dark-mode.css\" />\n<link rel=\"stylesheet\" href=\"conciso/css/base.css\" />\n<link rel=\"stylesheet\" href=\"conciso/css/components.css\" />\n```\n\n**Kritisches CSS deaktivieren.** Der Angular-Production-Build versucht standardmäßig,\nreferenziertes CSS als kritisches CSS zu inlinen. Das über `assets` eingebundene CSS liegt\nzu diesem Zeitpunkt aber noch nicht im Ausgabeverzeichnis, das führt zu harmlosen, aber\nvermeidbaren Build-Warnungen. In `architect.build.configurations.production` ergänzen:\n\n```jsonc\n{\n  \"optimization\": {\n    \"scripts\": true,\n    \"fonts\": true,\n    \"styles\": { \"minify\": true, \"inlineCritical\": false }\n  }\n}\n```\n\nWeitere Details: README von `@conciso/design-system-angular` auf\n[npmjs.com](https://www.npmjs.com/package/@conciso/design-system-angular).\n\n## Erste Komponente verwenden\n\n```ts\nimport { ButtonComponent } from '@conciso/design-system-angular';\n```\n\n```html\n<cds-button area=\"co\" variant=\"filled\" label=\"Kontakt\" />\n```\n\n`area` (Default `co`), `variant` (Default `filled`) und `label` (Default `Button`) sind die\ndokumentierten Inputs von `ButtonComponent`. Vollständige Liste mit allen Varianten:\n`Komponenten/Buttons/Button` in diesem Storybook, oder per KI-Assistent das Werkzeug\n`docs-show` (siehe unten).\n\n## KI-Assistenten anbinden\n\nDas Design System bringt einen eigenen MCP-Server mit: `@conciso/design-system-mcp`\n(`bin`: `cds-mcp`), Transport stdio, kein Port, nichts im Netz erreichbar. Er liefert\ndieselben Werkzeuge, mit denen auch diese Seite entstanden ist (`docs-list`, `docs-show`,\n`docs-show-story`), als mitgelieferten Snapshot passend zur installierten Version, ohne\nLive-Abruf von einer Website.\n\n```bash\nnpm i -D @conciso/design-system-mcp\n```\n\n**Versionen synchron halten.** Der Server vergleicht beim Start seine eigene Version mit\nder installierten Version der Angular-Lib und **warnt** bei Abweichung (in seinen\n`instructions` und auf stderr), bricht aber nicht ab. Am einfachsten: alle drei Pakete\ngemeinsam auf derselben Version installieren oder aktualisieren, zum Beispiel\n`npm i @conciso/design-system@X @conciso/design-system-angular@X\n@conciso/design-system-mcp@X`.\n\n### Claude Code\n\nEmpfohlen als committete Projektdatei `.mcp.json` im Repo-Root:\n\n```json\n{\n  \"mcpServers\": {\n    \"conciso-ds\": {\n      \"command\": \"npx\",\n      \"args\": [\"cds-mcp\"]\n    }\n  }\n}\n```\n\n### VS Code / GitHub Copilot\n\n`.vscode/mcp.json`, Schlüssel `servers`, mit explizitem `\"type\": \"stdio\"` (laut aktueller\nVS-Code-Doku ein Pflichtfeld für stdio-Server):\n\n```json\n{\n  \"servers\": {\n    \"conciso-ds\": {\n      \"type\": \"stdio\",\n      \"command\": \"npx\",\n      \"args\": [\"cds-mcp\"]\n    }\n  }\n}\n```\n\n### Cursor\n\n`.cursor/mcp.json`, Schlüssel `mcpServers`:\n\n```json\n{\n  \"mcpServers\": {\n    \"conciso-ds\": {\n      \"command\": \"npx\",\n      \"args\": [\"cds-mcp\"]\n    }\n  }\n}\n```\n\nAlle drei Varianten starten denselben Prozess über stdio, ohne laufenden Dienst und ohne\nPort.\n\n## Siehe auch\n\n- `Komponenten/Buttons/Button` in diesem Storybook\n- README von `@conciso/design-system` auf\n  [npmjs.com](https://www.npmjs.com/package/@conciso/design-system)\n- README von `@conciso/design-system-angular` auf\n  [npmjs.com](https://www.npmjs.com/package/@conciso/design-system-angular)\n- README von `@conciso/design-system-mcp` auf\n  [npmjs.com](https://www.npmjs.com/package/@conciso/design-system-mcp)\n",
+          "summary": "# Einrichtung So bindest du das Conciso Design System in ein Angular-Projekt ein, von der ..."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/addon-docs/mdx/grundlagen-elevation--/303/274bersicht.json

@@ -0,0 +1,18 @@
+{
+  "components": {
+    "grundlagen-elevation--übersicht": {
+      "id": "grundlagen-elevation--übersicht",
+      "name": "grundlagen-elevation--übersicht",
+      "docs": {
+        "grundlagen-elevation--übersicht": {
+          "id": "grundlagen-elevation--übersicht",
+          "name": "Übersicht",
+          "path": "./src/docs/grundlagen/elevation.mdx",
+          "title": "Grundlagen/Elevation",
+          "content": "import { Meta, Unstyled } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Grundlagen/Elevation\" name=\"Übersicht\" />\n\n# Elevation\n\n6 Ebenen, Shadow + Tonal Overlay (Primärfarbe auf Oberfläche). Quelle:\n`docs/index.html#sec-elevation`.\n\n## Elevation = Interaktivität (CONTRIBUTING § 4)\n\nStatische Cards und Flächen ruhen flach mit Rahmen (`--e0` + `--bd-strong`). Interaktive\nElemente (Links, klickbare Cards `.ep-card-link`) tragen Schatten (`--e1`) und heben auf\nHover (`--e3`). Begründung: Schatten signalisiert anfassbar, statische Info-Cards mit\nSchatten täuschen Interaktivität vor.\n\nEntscheidend ist die Fläche, nicht der Inhalt. Eine Karte mit Buttons oder Text-Links im\nFooter ist statisch, die Buttons sind die Interaktion, die Fläche führt nirgendwohin. Sie\nruht flach. Schatten bekommt sie erst, wenn sie selbst der klickbare Bereich ist, also\n`<a class=\"card card-elevated\">` oder `<a class=\"ep-card ep-card-link\">`.\n\nDer Riegel steht im CSS: `.card-elevated` ist auf `a.card-elevated` gescoped, eine\n`<article>`- oder `<div>`-Karte kann den Schatten also auch mit gesetzter Klasse nicht\nbekommen. Gleiches gilt für Inline-`box-shadow` auf statischen Blöcken, nicht setzen, auch\nnicht mit Token.\n\n## Shadow Elevation\n\nDie sechs Ebenen im direkten Vergleich, gerendert mit den Werten aus der Tabelle unten.\nLevel 0 bleibt flach mit Rahmen, ab Level 1 trägt jede Kachel den zugehörigen\nSchatten-Token.\n\nexport const ElevationSwatch = ({ style, swatchLabel, body }) => (\n  <div className=\"el-card col-2\" style={style}>\n    <span className=\"el-lbl\">{swatchLabel}</span>\n    {body}\n  </div>\n);\n\nexport const shadowSwatches = [\n  { style: { border: 'var(--bd-strong)' }, swatchLabel: 'Level 0', body: 'Flat · Outlined' },\n  { style: { boxShadow: 'var(--e1)' }, swatchLabel: 'Level 1', body: 'Card · FAB' },\n  { style: { boxShadow: 'var(--e2)' }, swatchLabel: 'Level 2', body: 'Chip · Hover' },\n  { style: { boxShadow: 'var(--e3)' }, swatchLabel: 'Level 3', body: 'Nav Drawer' },\n  { style: { boxShadow: 'var(--e4)' }, swatchLabel: 'Level 4', body: 'Modal · Sheet' },\n  { style: { boxShadow: 'var(--e5)' }, swatchLabel: 'Level 5', body: 'Tooltip · Dialog' },\n];\n\n<Unstyled>\n  <div className=\"layout-grid\" style={{ padding: 'var(--s6) 0' }}>\n    {shadowSwatches.map((swatch) => (\n      <ElevationSwatch key={swatch.swatchLabel} {...swatch} />\n    ))}\n  </div>\n</Unstyled>\n\n| Level | Token | Einsatz |\n|---|---|---|\n| 0 | `--e0` | Flat, Outlined, Seiten-Hintergrund, Tabellen |\n| 1 | `--e1` | Card, FAB, Standard-Cards, Listen-Karten |\n| 2 | `--e2` | Chip, Hover, Dropdown-Anker |\n| 3 | `--e3` | Nav Drawer, Side Sheet, persistente Panels |\n| 4 | `--e4` | Modal, Sheet, Dialoge mit Scrim |\n| 5 | `--e5` | Tooltip, Dialog, Snackbar, Autocomplete-Dropdown |\n\nWerte aus `css/tokens.css`:\n\n```css\n--e0: none;\n--e1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);\n--e2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);\n--e3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);\n--e4: 0 2px 3px rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15);\n--e5: 0 4px 4px rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15);\n```\n\nKombinationsregel: Level 1 bis 2 können Schatten oder Tonal Overlay einsetzen. Level 3 bis\n5 kombinieren beide, der Schatten signalisiert Abstand zur Seite, die Tönung verstärkt die\nvisuelle Zugehörigkeit zur Primärfarbe.\n\n## Tonal Elevation\n\nZusätzlich zur Shadow-Elevation wird eine semitransparente Schicht der Primärfarbe auf\nOberflächen gelegt. Je höher das Level, desto stärker die Tönung, Tiefe durch Farbe statt\nnur Schatten.\n\nDie Kachel-Reihe macht den Unterschied sichtbar: von 0 % (reine `--bg-surface`) bis 14 %\nTonal-Anteil auf Level 5.\n\nexport const tonalSwatches = [\n  { style: { background: 'var(--bg-surface)' }, swatchLabel: '0 % Tonal', body: 'Level 0' },\n  { style: { background: 'color-mix(in srgb, var(--co-500) 5%, var(--bg-surface))' }, swatchLabel: '5 % Tonal', body: 'Level 1' },\n  { style: { background: 'color-mix(in srgb, var(--co-500) 8%, var(--bg-surface))' }, swatchLabel: '8 % Tonal', body: 'Level 2' },\n  { style: { background: 'color-mix(in srgb, var(--co-500) 11%, var(--bg-surface))' }, swatchLabel: '11 % Tonal', body: 'Level 3' },\n  { style: { background: 'color-mix(in srgb, var(--co-500) 12%, var(--bg-surface))' }, swatchLabel: '12 % Tonal', body: 'Level 4' },\n  { style: { background: 'color-mix(in srgb, var(--co-500) 14%, var(--bg-surface))' }, swatchLabel: '14 % Tonal', body: 'Level 5' },\n];\n\n<Unstyled>\n  <div className=\"layout-grid\" style={{ marginBottom: 'var(--s4)' }}>\n    {tonalSwatches.map((swatch) => (\n      <ElevationSwatch key={swatch.swatchLabel} {...swatch} />\n    ))}\n  </div>\n</Unstyled>\n\n| Level | Tonal-Anteil | Token |\n|---|---|---|\n| 0 | 0 % | `--bg-surface` (kein Tonal Overlay) |\n| 1 | 5 % | `--tonal-1` |\n| 2 | 8 % | `--tonal-2` |\n| 3 | 11 % | `--tonal-3` |\n| 4 | 12 % | `--tonal-4` |\n| 5 | 14 % | `--tonal-5` |\n\nWerte aus `css/tokens.css` (Beispiel für die Corporate-Primärfarbe):\n\n```css\n--tonal-1: rgba(0,190,190,.05);\n--tonal-2: rgba(0,190,190,.08);\n--tonal-3: rgba(0,190,190,.11);\n--tonal-4: rgba(0,190,190,.12);\n--tonal-5: rgba(0,190,190,.14);\n```\n\n## Interaktiv versus statisch\n\nZwei Karten mit identischem farbigen Top-Border machen den Unterschied sichtbar: Links ruht\ndie Fläche flach mit Rahmen, rechts trägt sie den Ruhe-Schatten `--e1` und würde auf Hover zu\n`--e3` wechseln.\n\n<Unstyled>\n  <div className=\"layout-grid\" style={{ alignItems: 'start', marginBottom: 'var(--s6)' }}>\n    <div className=\"col-6\">\n      <span className=\"lbl\">✓ Statisch · ruht flach</span>\n      <div\n        style={{\n          border: 'var(--bd-strong)',\n          borderTop: '4px solid var(--ki-500)',\n          borderRadius: 'var(--r-lg)',\n          padding: 'var(--s5)',\n          background: 'var(--bg-surface)',\n        }}\n      >\n        <span className=\"el-lbl\">Rahmen, kein Schatten</span>\n        <div style={{ font: 'var(--ty-body-sm)', color: 'var(--tx-secondary)' }}>\n          Stat-Karte · Testimonial · Info-/Feature-Karte\n        </div>\n      </div>\n    </div>\n    <div className=\"col-6\">\n      <span className=\"lbl\">✓ Interaktiv · ruht auf --e1, hebt auf Hover</span>\n      <div\n        style={{\n          boxShadow: 'var(--e1)',\n          borderTop: '4px solid var(--ki-500)',\n          borderRadius: 'var(--r-lg)',\n          padding: 'var(--s5)',\n          background: 'var(--bg-surface)',\n        }}\n      >\n        <span className=\"el-lbl\">Schatten + Hover-Lift → --e3</span>\n        <div style={{ font: 'var(--ty-body-sm)', color: 'var(--tx-secondary)' }}>\n          Klickbare Karte / Link-Karte\n        </div>\n      </div>\n    </div>\n  </div>\n</Unstyled>\n\n| Typ | Ruhezustand | Hover/Focus | Klassen |\n|---|---|---|---|\n| Statisch | `--e0` + Rahmen (`--bd` bzw. `--bd-strong`) | unverändert | `.card` · `.ep-card` · `.card-stat` · `.testimonial` · `.ds-card` · `.bw-pillar-card` · `.cta-dl` · `.cta-visual` |\n| Interaktiv | `--e1` | `--e3` + `translateY(-2px)`, im Dark zusätzlich `--bg-surface-hover` | `.ep-card-link` |\n| Link-Karte | `--e1` | `--e2` + `translateY(-2px)` | `a.card.card-elevated` (wirkt nur auf `<a>`, statische Karten bleiben flach) |\n\n## Barrierefreiheit\n\n| Aspekt | Regel |\n|---|---|\n| Forced Colors | Windows High Contrast unterdrückt Schatten vollständig, Elevation nie als einziges Unterscheidungsmerkmal einsetzen, immer auch Border oder Hintergrundfarbe nutzen |\n| Nicht allein | Elevation allein kommuniziert keine Bedeutung für Screenreader, strukturelle Hierarchie muss zusätzlich durch Semantik (`<header>`, `<main>`, Überschriften) ausgedrückt werden |\n| Kontrast | Oberflächen-Kontrast zwischen `--bg-page` und `--bg-surface` prüfen, auch ohne Schatten müssen Karten und Panels erkennbar sein |\n| Schwebende Panels im Dark | Menüs und Popover liegen über fremdem Inhalt, den sie nicht kennen. Auf der tiefen Basisfläche trägt ein schwarzer Schatten sie dort nicht mehr, gemessen stand ein Topnav-Menü über einem Hero-Foto nur 1,34:1 gegen die hellste Stelle daneben. Sie bekommen deshalb im Dark den stärkeren Rand `--bd-strong-c`, der unabhängig vom Untergrund liest. |\n\n## Dos & Don'ts\n\n**Tun**\n\n- Level steigt mit z-Index: je weiter vorn ein Element liegt, desto höher sein\n  Elevation-Level\n- Level 1 für Standard-Cards und Listen-Elemente im normalen Seitenkontext\n- Level 3 bis 5 nur für Elemente, die anderen Inhalt überlagern: Drawer, Modal, Tooltip\n- Tonal Overlay ab Level 3 zusätzlich zum Schatten, verstärkt die Zugehörigkeit zur\n  Primärfarbe\n- Level 0 (kein Schatten) für Outlined-Varianten im Tabellen- oder Listen-Kontext\n\n**Nicht tun**\n\n- Schatten als Dekoration ohne semantischen Grund, Elevation kommuniziert immer räumliche\n  Hierarchie\n- Mehrere Level-5-Elemente gleichzeitig sichtbar, zu viel visuelle Konkurrenz auf einer\n  Ebene\n- Level überspringen (zum Beispiel direkt von 0 auf 4), verwirrt die wahrgenommene\n  räumliche Hierarchie\n- Eigene `box-shadow`-Werte statt Tokens, bricht die Konsistenz im Dark Mode\n- Tonal Overlay ohne zugehörigen Schatten auf Level 3 bis 5, die Kombination beider ist die\n  Regel\n\n## Verwendung\n\nSechs schematische Beispiel-Kacheln zeigen je Elevation-Level ein typisches Bauteil, von der\nOutlined Card auf Level 0 bis zum Tooltip auf Level 5.\n\nexport const usageLevels = [\n  { level: 0, cardStyle: { border: 'var(--bd-strong)' }, label: 'Outlined Card', desc: 'Tabelle · Listeneintrag' },\n  { level: 1, cardStyle: { boxShadow: 'var(--e1)' }, label: 'Standard-Card', desc: 'Produktkarte · FAB' },\n  { level: 2, cardStyle: { boxShadow: 'var(--e2)', minHeight: 90 }, label: 'Chip · Hover', chip: true },\n  { level: 3, cardStyle: { boxShadow: 'var(--e3)', minHeight: 90 }, label: 'Nav Drawer', desc: 'Sidebar · Panel' },\n  { level: 4, cardStyle: { boxShadow: 'var(--e4)', minHeight: 90 }, label: 'Modal · Sheet', desc: 'Dialog · Overlay' },\n  { level: 5, cardStyle: { boxShadow: 'var(--e5)', minHeight: 90 }, label: 'Tooltip · Dialog', desc: 'Snackbar · Autocomplete' },\n];\n\nexport const UsageLevelCard = ({ level, cardStyle, label, desc, chip }) => (\n  <div style={{ display: 'flex', flexDirection: 'column' }}>\n    <div\n      style={{\n        font: '500 12px/16px var(--font)',\n        letterSpacing: '.06em',\n        textTransform: 'uppercase',\n        color: 'var(--tx-muted)',\n        marginBottom: 'var(--s2)',\n      }}\n    >\n      Level {level}\n    </div>\n    <div\n      style={{\n        borderRadius: 'var(--r-lg)',\n        padding: 'var(--s4)',\n        background: 'var(--bg-surface)',\n        flex: 1,\n        ...cardStyle,\n      }}\n    >\n      <span className=\"el-lbl\">{label}</span>\n      {chip ? (\n        <div\n          style={{\n            display: 'inline-flex',\n            alignItems: 'center',\n            padding: '4px 10px',\n            borderRadius: 'var(--r-full)',\n            background: 'var(--bg-overlay)',\n            boxShadow: 'var(--e2)',\n            font: '500 12px/16px var(--font)',\n            color: 'var(--tx-primary)',\n          }}\n        >\n          Chip\n        </div>\n      ) : (\n        <div style={{ font: '400 12px/16px var(--font)', color: 'var(--tx-secondary)' }}>{desc}</div>\n      )}\n    </div>\n  </div>\n);\n\n<Unstyled>\n  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 'var(--s4)' }}>\n    {usageLevels.map((item) => (\n      <UsageLevelCard key={item.level} {...item} />\n    ))}\n  </div>\n</Unstyled>\n\n## Siehe auch\n\n- `docs/index.html#gt-elev-verwendung`\n- CONTRIBUTING.md § 4 Elevation = Interaktivität\n",
+          "summary": "# Elevation 6 Ebenen, Shadow + Tonal Overlay (Primärfarbe auf Oberfläche). Quelle: `docs/i..."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/addon-docs/mdx/grundlagen-icons--/303/274bersicht.json

@@ -0,0 +1,18 @@
+{
+  "components": {
+    "grundlagen-icons--übersicht": {
+      "id": "grundlagen-icons--übersicht",
+      "name": "grundlagen-icons--übersicht",
+      "docs": {
+        "grundlagen-icons--übersicht": {
+          "id": "grundlagen-icons--übersicht",
+          "name": "Übersicht",
+          "path": "./src/docs/grundlagen/icons.mdx",
+          "title": "Grundlagen/Icons",
+          "content": "import { Meta, Unstyled } from '@storybook/addon-docs/blocks';\nimport icons from '../../../../icons/icons.json';\n\n<Meta title=\"Grundlagen/Icons\" name=\"Übersicht\" />\n\n# Icons\n\nBereichsspezifische Icons, SVG inline, Farbgebung über die jeweilige Brand Area via\n`currentColor`. Quelle der Wahrheit: `icons/icons.json` (generiert aus\n`icons/source/*.svg`), siehe `icons/README.md`.\n\nZwei Stile koexistieren: Der Großteil der generischen UI-Icons (Pfeile, Hinweise,\nSchließen, Feature-Symbole) ist im Outline-Stil aus [heroicons.com](https://heroicons.com)\n(MIT-Lizenz), ein kleinerer Teil (zum Beispiel Play/Pause, Download) ist Solid. Die fünf\nBereichs-Glyphen (Corporate ×2, Angewandte KI, Effektive Software, Wirksame\nOrganisationen) sind durchgehend Solid (gefüllte Multi-Path-Symbole). Jeder Schlüssel\nliegt in der Registry als genau eine Variante vor — die Größe wird über `width`/`height`\noder CSS gesetzt, die `viewBox` bleibt dabei erhalten. Alle 99 Icons: siehe Galerie unten.\n\n## Größen & Stroke-Width\n\nFür Outline-Icons skaliert die Stroke-Width mit der Icon-Größe, damit die visuelle\nGewichtung konsistent bleibt: Micro-Icons brauchen feine Linien, XLarge-Icons vertragen\nkräftigere Konturen. Die Werte stehen als CSS Custom Properties (`--icon-stroke-micro` bis\n`--icon-stroke-xl`) in `css/tokens.css`.\n\n| Größe | Bezeichnung | Stroke-Width | Verwendung |\n|---|---|---|---|\n| 16 × 16 | Micro | 1 px | Inline-Icons in Text, Tabellenzeilen, kleine UI-Elemente |\n| 24 × 24 | Small | 1,25 px | Standard-UI, Navigation, Buttons, Formulare |\n| 32 × 32 | Medium | 1,5 px | Karten, Listen, Sidebar-Einträge |\n| 48 × 48 | Large | 2 px | Feature-Bereiche, Onboarding, Erklär-Abschnitte |\n| 64 × 64 | XLarge | 2,5 px | Leere Zustände, Illustrationen, Hero-Bereiche |\n\n## Die vier Bereichs-Glyph-Familien\n\nJede Bereichs-Glyphe ist ein SVG mit `fill=\"currentColor\"` — die Farbe ist nicht\neingebrannt, sondern wird vom Consumer über die CSS-Eigenschaft `color` auf dem\nWrapper-Element gesetzt.\n\n| Bereich | Hintergrund | `color` |\n|---|---|---|\n| Corporate | `--co-50` (#E0F7F7) | `--tx-brand` (#333E48) |\n| Angewandte KI | `--ki-50` (#F4FCD5) | `--ki-800` (#475705) |\n| Effektive Software | `--es-50` (#EAF0FB) | `--es-700` (#1B3D9A) |\n| Wirksame Organisationen | `--wo-50` (#EBF5E6) | `--wo-800` (#183A0E) |\n\nSonderfall Logo-Zeichen: Das C-Zeichen ist die Bereichsmarke von Corporate und\nausschließlich in Kombination mit dem Conciso-Logo zu verwenden. Für reguläre\nBereichs-Icons im Thema Unternehmen gilt wie bei den anderen Bereichen: Hintergrundfarbe\n`--co-50`, `color: var(--co-800)`.\n\n## Galerie\n\nexport const AREA_COLOR = {\n  co: 'var(--tx-brand)',\n  ki: 'var(--ki-800)',\n  es: 'var(--es-700)',\n  wo: 'var(--wo-800)',\n};\n\nexport const AREA_BG = {\n  co: 'var(--co-50)',\n  ki: 'var(--ki-50)',\n  es: 'var(--es-50)',\n  wo: 'var(--wo-50)',\n};\n\nexport const areaIcons = Object.entries(icons).filter(([, icon]) => icon.area !== 'ui');\nexport const uiIcons = Object.entries(icons).filter(([, icon]) => icon.area === 'ui');\n\nexport const IconTile = ({ iconKey, icon, background, color, border }) => {\n  const [vbWidth, vbHeight] = icon.viewBox.split(' ').slice(2).map(Number);\n  const svgAttrs =\n    icon.style === 'solid'\n      ? { fill: 'currentColor' }\n      : { fill: 'none', stroke: 'currentColor', strokeWidth: icon.strokeWidth || '1' };\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--s2)' }}>\n      <div\n        className=\"icon-size-swatch\"\n        data-area={icon.area}\n        title={icon.name}\n        style={{\n          background,\n          color,\n          border,\n          borderRadius: 'var(--r-md)',\n          width: 56,\n          height: 56,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <svg\n          viewBox={icon.viewBox}\n          width={vbWidth}\n          height={vbHeight}\n          aria-hidden=\"true\"\n          {...svgAttrs}\n          dangerouslySetInnerHTML={{ __html: icon.body }}\n        />\n      </div>\n      <span className=\"lbl\">{iconKey}</span>\n    </div>\n  );\n};\n\nAlle 99 Icons aus der Registry (`icons/icons.json`), live gerendert. Unter jeder Kachel\nsteht der Schlüssel, den ein Entwickler tatsächlich importiert; der Name aus der Registry\nliegt als Tooltip (`title`-Attribut) auf der Kachel.\n\n### Bereichs-Glyphen\n\nDie fünf Bereichs-Glyphen, je in ihrer Bereichsfarbe (Hintergrund `--XX-50`, `color` aus\nder Tabelle oben — `currentColor` im SVG übernimmt diese Farbe).\n\n<Unstyled>\n  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--s6)' }}>\n    {areaIcons.map(([key, icon]) => (\n      <IconTile\n        key={key}\n        iconKey={key}\n        icon={icon}\n        background={AREA_BG[icon.area]}\n        color={AREA_COLOR[icon.area]}\n      />\n    ))}\n  </div>\n</Unstyled>\n\n### UI-Icons\n\nDie 94 bereichsneutralen UI-Icons auf neutraler Fläche, Farbe `--tx-primary`.\n\n<Unstyled>\n  <div\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'repeat(auto-fill, minmax(88px, 1fr))',\n      gap: 'var(--s5)',\n    }}\n  >\n    {uiIcons.map(([key, icon]) => (\n      <IconTile\n        key={key}\n        iconKey={key}\n        icon={icon}\n        background=\"var(--bg-surface)\"\n        color=\"var(--tx-primary)\"\n        border=\"var(--bd-strong)\"\n      />\n    ))}\n  </div>\n</Unstyled>\n\n## Verwendungsregeln\n\n**Technische Regeln**\n\n| Eigenschaft | Regel |\n|---|---|\n| Quelle | [heroicons.com](https://heroicons.com), Stil Outline. Keine eigenen Icons zeichnen. |\n| Format | SVG inline, kein `<img>`, damit Farbe über CSS steuerbar bleibt |\n| Größen | Ausschließlich 16, 24, 32, 48, 64 px, keine Zwischenwerte |\n| Stroke-Width | Outline-Icons: 1, 1,25, 1,5, 2, 2,5 px, passend zur Größe |\n| Hintergrund-Rect | Im Code entfernen, Hintergrundfarbe kommt vom Parent-Element |\n| Barrierefreiheit | Dekorativ: `aria-hidden=\"true\"`, bedeutungstragend: `role=\"img\"` + `aria-label` |\n| viewBox | Bleibt bei jeder Darstellungsgröße unverändert (ein Wert pro Glyph in der Registry); Größe über `width`/`height` oder CSS setzen |\n\n## Wie ein Icon entsteht (CONTRIBUTING § 10 Schritt 3)\n\n1. Normalisiertes SVG unter `icons/source/{area|ui}-{name}.svg` ablegen. Farben als\n   `currentColor`, Outline-Icons mit inline `stroke-width`, `width`/`height` weglassen (die\n   Größe setzt der Consumer). Key-Präfix `co|ki|es|wo` für Bereichs-Glyphen, sonst `ui`.\n2. `npm run build:icons` ausführen. Das Skript generiert `icons/icons.json`,\n   `icons/icons.js` und `icons/README.md` aus `icons/source/`.\n3. Label und Verwendung optional in `icons/manifest.json` pflegen.\n\nQuelle ist ausschließlich `icons/source/*.svg`, die generierten Dateien\n(`icons/icons.json`, `icons/icons.js`) werden nie von Hand editiert.\n\n## DS-Glyphen\n\nDS-Glyphen sind Design-System-eigene Icons (`ui*`), die aus `@conciso/design-system/icons`\n(generiertes `icons/icons.js`) stammen, nicht aus `@ng-icons`. Die zentrale Icon-Registry\n`icons/cds-icons.ts` in der Angular-Lib ist die einzige Import-Fläche für\nKomponenten-Icons: Komponenten importieren nie direkt aus `@ng-icons/heroicons`. Ein\nHeroicon wird nur dort registriert, wo das Design System (noch) kein eigenes Glyph\ndefiniert; bekommt es später ein DS-Pendant, wird ausschließlich `cds-icons.ts`\numgestellt.\n\n## Dos & Don'ts\n\n**Tun**\n\n- Größe über `width`/`height` oder CSS setzen — die `viewBox` bleibt dabei unverändert\n- Das Hintergrund-`<rect>` vor dem Einbinden entfernen, es dient nur der Designvorschau\n- Bereichsfarbe für Hintergrund und Pfad einhalten, Konsistenz über alle Brand Areas\n- Dekorative Icons mit `aria-hidden=\"true\"` ausblenden, Screenreader überspringen sie\n\n**Nicht tun**\n\n- Icons zwischen Bereichen tauschen, jedes Icon gehört zu genau einer Brand Area\n- Nicht-standardisierte Größen verwenden (zum Beispiel 20 px, 36 px), bricht den visuellen\n  Rhythmus\n- Icons als `<img src>` einbinden, verhindert Farbanpassung und Dark-Mode-Unterstützung\n- Das Hintergrund-Rect im Code belassen, erzeugt ungewollte farbige Fläche im Layout\n\n## Siehe auch\n\n- `docs/index.html#gt-icons-verwendung`\n- CONTRIBUTING.md § 10 Schritt 3\n- CONTEXT.md, Abschnitt DS-Glyphen\n- `icons/README.md`\n",
+          "summary": "# Icons Bereichsspezifische Icons, SVG inline, Farbgebung über die jeweilige Brand Area vi..."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/addon-docs/mdx/grundlagen-responsive--/303/274bersicht.json

@@ -0,0 +1,18 @@
+{
+  "components": {
+    "grundlagen-responsive--übersicht": {
+      "id": "grundlagen-responsive--übersicht",
+      "name": "grundlagen-responsive--übersicht",
+      "docs": {
+        "grundlagen-responsive--übersicht": {
+          "id": "grundlagen-responsive--übersicht",
+          "name": "Übersicht",
+          "path": "./src/docs/grundlagen/responsive.mdx",
+          "title": "Grundlagen/Responsive",
+          "content": "import { Meta } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Grundlagen/Responsive\" name=\"Übersicht\" />\n\n# Responsive\n\nVerbindliche Breakpoints, fluide Typografie und das dokumentierte Verhalten pro\nKomponente. Quelle: `docs/index.html#sec-responsive`.\n\n## Breakpoints\n\nDrei Stufen, definiert über die Viewport-Breite. Der Hauptbruch liegt bei 768 px (Mobile\nzu Desktop-Grid). Ein zweiter, feinerer Bruch bei 520 px steuert Layouts, die auf kleinen\nPhones weiter herunterbrechen müssen. Alle Regeln sind `max-width`-basiert\n(Desktop-first), außer der fix-spaltigen Tablet-Zwischenstufe.\n\n| Stufe | Bereich | Verhalten |\n|---|---|---|\n| Phone | ≤ 520 px | Engste Stufe. Hero-CTAs stapeln full-width, mehrspaltige Sonderraster (Roster, Benefits) brechen auf ihre kleinste Spaltenzahl herunter. |\n| Mobile | ≤ 768 px | Hauptbruch. `.layout-grid` kollabiert auf 1 Spalte, Section-Innenabstand schrumpft, Topnav wird zum Hamburger (technisch ab ≤ 760 px, siehe unten). |\n| Tablet | 769 bis 1024 px | Zwischenstufe nur für fix-spaltige Layouts (explizite `min-width:769px`-Regel). `auto-fit`-Grids regeln diesen Bereich selbst und brauchen keine eigene Regel. |\n| Desktop | > 1024 px | Referenzzustand. Alle Fixwerte (Grid-Spannweiten, Typo-Maxima, Paddings) gelten hier unverändert. |\n\n**Faustregel für neue Layouts:** Ein `auto-fit`/`auto-fill`-Grid (zum Beispiel\n`.ep-cards`, `.card-stat-strip`) braucht keine Tablet-Regel, es füllt Spalten selbst auf.\nEin Layout mit fixer Spaltenzahl (Footer, Benefits, Roster) braucht eine explizite\nTablet-Regel (769 bis 1024 px) zwischen Desktop und Mobile, sonst springt es hart von\nn-spaltig auf einspaltig.\n\n## Warum diese Bruchpunkte\n\nDie vier nicht offensichtlichen Entscheidungen. Ohne diese Begründungen wirken die Werte\nwillkürlich und werden beim Refactoring erfahrungsgemäß geglättet, obwohl sie bewusst so\nliegen.\n\n| Entscheidung | Begründung |\n|---|---|\n| Hero-CTAs stapeln erst bei ≤ 520 px, nicht schon bei 768 px | Auf Phablet und kleinem Tablet (521 bis 768 px) liefen full-width-Buttons breiter als der gekappte Intro-Text und wirkten überdehnt. Dort behalten sie natürliche Breite und dürfen umbrechen. Erst am echten Phone werden sie full-width gestapelt. |\n| `auto-fit`-Grids ohne Tablet-Regel, fix-spaltige Grids mit | `auto-fit` verteilt Spalten anhand einer `minmax()`-Mindestbreite selbst, eine feste Tablet-Regel wäre redundant und würde kollidieren. Fix-spaltige Raster (col-N) haben diese Automatik nicht und brauchen die Zwischenstufe. |\n| Hamburger ab ≤ 760 px, nicht 768 px | Bewusst 8 px unter dem Grid-Bruch, damit der Navigations-Umbau nicht exakt auf derselben Breite wie das Grid-Reflow passiert. Trennt die beiden Umbrüche optisch und vermeidet ein gleichzeitiges Springen von Nav und Inhalt. |\n| Doku-Sidebar aus ab ≤ 1024 px | Reine Mockup-Krücke der Doku-Site, für die echte Site irrelevant. |\n\n## Fluide Typografie\n\nAlle Headline- und Display-Tokens skalieren fluid per `clamp(min, preferred, max)`. Das\nMaximum entspricht dem bisherigen Desktop-Fixwert (Desktop unverändert), das Minimum\ngreift am Phone. Die Zeilenhöhe ist eine unitless Ratio (skaliert mit), nie ein Fixwert\nund nie unter 1. Alle Minima liegen bei mindestens 20 px (Font-Size-Minimum). Body- und\nLabel-Tokens sind bewusst nicht fluid, sie haben feste Größen.\n\n| Token | Min (Phone) | Max (Desktop) | Ratio |\n|---|---|---|---|\n| `--ty-headline-xs` | 20 px | 22 px | 1,35 |\n| `--ty-headline-sm` | 21 px | 24 px | 1,33 |\n| `--ty-headline-md` | 23 px | 28 px | 1,3 |\n| `--ty-display-sm` | 28 px | 36 px | 1,22 |\n| `--ty-display-md` | 30 px | 40 px | 1,2 |\n| `--ty-display-lg` | 28 px | 46 px | 1,15 |\n\nQuelle der Werte: `css/tokens.css`. Wer die Skala ändert, hält `min` ≥ 20 px und behält\ndie unitless Ratio bei (nicht auf px umstellen).\n\n## Komponenten-Verhalten\n\nVollständiges Inventar der responsiven Sonderregeln. Alles, was hier nicht steht, folgt\ndem Standard (`.layout-grid` auf 1 Spalte ab ≤ 768 px).\n\n| Komponente | Bruchpunkt | Verhalten | Quelle |\n|---|---|---|---|\n| `.layout-grid` | ≤ 768 px | Kollabiert auf 1 Spalte, alle `col-N`-Spannweiten werden auf `grid-column:auto` zurückgesetzt (sonst brechen ungleiche Splits verschieden breit um). | base.css |\n| `.ep-section` | ≤ 768 px | Innenabstand horizontal von `--s8` (32 px) auf `--s6` (24 px). Greift nicht auf Sektionen mit inline gesetztem Padding. | components.css |\n| `.ep-hero-ctas` | ≤ 520 px | Buttons stapeln als Spalte, full-width (`width:100%`). Darüber natürliche Breite mit Umbruch. | components.css |\n| Topnav (Hamburger) | ≤ 760 px | JS injiziert den Hamburger-Button, Nav klappt unter dem Logo auf, Submenüs öffnen inline statt als Overlay. | components.css + main.js |\n| Topnav-Submenü (Hover) | `hover + pointer:fine` | Hover-Öffnen nur auf echten Zeigergeräten (nicht Touch). Klick navigiert weiter. Kein reines CSS-`:hover`-Reveal. | components.css + main.js |\n| `.footer-grid` | 769 bis 1024 px, ≤ 768 px | Tablet 3 zu 2 Spalten. Mobile zu 1 Spalte. (Fix-spaltig, daher explizite Tablet-Regel.) | components.css |\n| `[data-team-roster]` | ≤ 768 px, ≤ 520 px | Tablet 3 Spalten. Phone 2 Spalten. `minmax(0,1fr)` gegen Grid-Blowout bei langen Namen. | base.css |\n| `[data-benefits]`, `[data-event-meta]` | ≤ 768 px, ≤ 520 px | Tablet 2×2. Phone 1 Spalte. Desktop 4-spaltig. | base.css |\n| `[data-team-tiles]` | ≤ 768 px | 2×2 statt einspaltig, damit die 4 Köpfe kompakt bleiben. | base.css |\n| `.ep-award-list` | ≤ 768 px | Von zentrierter Flex-Reihe auf 2×2-Grid (`justify-self:start`), behebt versetztes Umbrechen. | components.css |\n| `.team-voice` | ≤ 768 px | Einspaltig, Body wird zum Pull-Quote (Quote-Icon im linken Gutter, Zitat rechts), spart die eigene Icon-Zeile. | components.css |\n| `.article-avatar-xl` | ≤ 768 px | Von fix 160 px auf `min(112px,72%)` mit `aspect-ratio:1`, damit es in den mehrspaltigen Team-Grids nicht überläuft. | components.css |\n| Karten in Grids (`.card-title`, `.card-text`) | ≤ 768 px | Die Gleichhöhen-Sicherung (`min-height:2lh/3lh`) wird auf 0 gesetzt, weil einspaltige Karten keinen Nachbarn zum Abgleichen haben. `line-clamp` bleibt aktiv. | components.css |\n| Editorial-Split-Text (`.ep-section-sub` im Grid) | ≤ 768 px | Der inline 520-px-Cap wird aufgehoben, damit der gestapelte Text bündig zur Bildbreite läuft statt schmaler. | base.css |\n\n## Viewport versus Container (CONTRIBUTING § 7)\n\nBreakpoints auf Viewport (`@media`) gelten für den Seiten-Rhythmus: Sektionsabstände,\nSpaltenzahl. Breakpoints auf Container (`@container`) gelten für alles, was in ein\nElternelement passen muss, nicht in das Browserfenster: Ob ein Overlay in sein\nBezugselement passt, sagt dessen eigene Breite, nicht die Fensterbreite. Ohne\n`@container`-Support greift die Container-Regel nicht, der Default-Zweig muss deshalb der\nfunktionierende Fall sein.\n\n## Siehe auch\n\n- `docs/index.html#gt-responsive-umsetzung`\n- CONTRIBUTING.md § 7 Spacing & Layout\n",
+          "summary": "# Responsive Verbindliche Breakpoints, fluide Typografie und das dokumentierte Verhalten p..."
+        }
+      }
+    }
+  }
+}