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

package/snapshot/services/core/docgen/seitenmuster-wissensbeitrag-callout.json

@@ -0,0 +1,64 @@
+{
+  "components": {
+    "seitenmuster-wissensbeitrag-callout": {
+      "id": "seitenmuster-wissensbeitrag-callout",
+      "name": "ArticleCalloutComponent",
+      "path": "./src/lib/article-callout/article-callout.stories.ts",
+      "description": "ArticleCallout (`cds-article-callout`) — Wrapper um `.article-callout*` aus\ncss/components.css (css/components.css:1591–1600): der bereichsgetönte\nAside-Block für Praxis-Beispiele und „In der Realität“-Einschübe im Lauftext\neines Wissensbeitrags. Zwölftes Ticket der Seitenbausteine-Serie\n(„Artikel-Körper“). Ausgezählt: 5 reale Vorkommen, je eines pro Bereich in der\nDoku-Sektion (`docs/index.html:8086–8115`, co/ki/es/wo) plus eines in der realen\nBeispielseite Wissensbeitrag · KI (`docs/index.html:15110–15114`).\n\n**Element-Selektor, ADR-0008-Standardfall.** `.article-callout` sitzt in allen 5\nVorkommen als gewöhnlicher Block-Nachfahre — die 4 Doku-Boxen je in einem\nschlichten `<div>` innerhalb eines `display:flex;flex-direction:column`-Stapels\n(kein Stretch-Bedarf in Spaltenrichtung), die reale Instanz direkt in\n`.article-body`. Keines ist ein Grid-/Flex-Kind mit Streckungsbedarf, keines\nträgt eine `col-*`-Klasse, `.article-callout` kommt in keiner CSS-Regel mit\neinem Geschwister-Kombinator (`+`/`~`) vor, das Tag variiert nicht (immer\n`<aside>`). Keines der drei ADR-0008-Kriterien greift. Die einzige direkte\nKind-Regel von `.article-body` (`.article-body > p`, css/components.css:1566)\nzielt auf `p`, nicht auf `aside` — ein `<cds-article-callout>`-Host zwischen\n`.article-body` und dem `<aside>` bricht deshalb keine Selektorkette.\n\n**Projizierte Absätze bleiben direkte Kinder von `.article-callout`, kein\n`<div>` um `<ng-content>`** (Ticket-Vorgabe: `.article-callout > p` ist ein\nKindselektor, css/components.css:1600). `<ng-content>` selbst fügt kein\nDOM-Element ein — es verschiebt nur die vom Konsumenten geschriebenen\n`<p>`-Elemente an ihre Stelle direkt im `<aside>`, eine Ebene unter dem\n`<cds-article-callout>`-Host, aber ohne zusätzlichen Knoten dazwischen. Geprüft\nim laufenden Storybook (Story „Interaktiv“, Play-Funktion):\n`aside.article-callout > p` liefert sowohl die Eyebrow als auch jeden\nprojizierten Absatz, `:scope > *` zählt keine fremde Zwischenebene.\n\n**`eyebrow` ist Beiwerk (Default `''`), `area` ist Konfiguration mit\nverteidigbarer Vorgabe (`'co'`).** Die Basisregel `.article-callout` selbst\n(ohne `[data-area]`) rendert bereits exakt wie `[data-area=\"co\"]`\n(`background:var(--co-50)`, `border-left-color:var(--co-500)`, beide Werte\nidentisch an beiden Stellen, css/components.css:1591–1592) — `'co'` ist damit\nkeine erfundene Markenfarbe, sondern der reale CSS-Fallback ohne Attribut.\nAnders als bei `cds-pill` (dessen `.pill` ohne `data-area` gar keine Füllfarbe\nhat) gibt es hier keinen sinnvollen „kein Bereich“-Zustand.\n\n**Bekannter CSS-Befund, nicht im Wrapper geflickt (ADR-0001):**\n`.article-callout-eyebrow` (Spezifität 0,1,0) verliert gegen\n`.article-callout > p` (Spezifität 0,1,1, css/components.css:1600), weil die\nEyebrow selbst ein `<p>` UND ein direktes Kind von `.article-callout` ist.\nGemessen in rohem Markup ohne Angular (Playwright/Chromium,\n`getComputedStyle`): die Eyebrow rendert in JEDEM Bereich mit `font-size:16px`\nstatt `12px` und `margin-bottom:0` statt `4px`; die Akzentfarbe geht zusätzlich\nverloren, wenn kein bereichsspezifischer Override existiert (`co` und „kein\n`data-area`“ zeigen `--tx-primary` statt `--co-700`). Diese Komponente\nreproduziert exakt die Klassen und die Struktur des Mockups und zeigt deshalb\ndenselben, vorbestehenden Fehler wie rohes HTML — siehe\n`.scratch/angular-seitenbausteine/issues/22-css-luecke-callout-eyebrow-spezifitaet.md`.\n\n**`aria-labelledby` auf `<aside>`, sobald `eyebrow` gesetzt ist — Zusatz zum\nMockup, keine CSS-Änderung.** `<aside>` hat implizit die Landmark-Rolle\n`complementary`; ein Wissensbeitrag mit mehr als einem Callout hat damit\nmehrere gleichnamige Landmarks ohne zugänglichen Namen. Gemessen mit\naxe-core an rohem Markup ohne Angular (zwei `<aside class=\"article-callout\">`\nohne Auszeichnung): `landmark-unique` schlägt fehl, unabhängig von dieser\nKomponente — das Mockup selbst kennt diese Auszeichnung nicht (siehe\n`.scratch/angular-seitenbausteine/issues/23-doku-luecke-callout-landmark-label.md`).\nDie Eyebrow ist bereits ein prägnanter, vom Redakteur gepflegter Kurztext\ngenau für diesen Zweck (z. B. „In der Praxis“) — sie bekommt deshalb eine\ngenerierte `id`, auf die `aria-labelledby` zeigt, sobald sie existiert. Ohne\nEyebrow bleibt das `<aside>` unbenannt wie im Mockup: ein zugänglicher Name\nließe sich sonst nur aus dem projizierten Absatztext raten, und das wäre eine\nerfundene Bezeichnung, keine reale.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → `data-area` (Hintergrund + Akzentfarbe), siehe Klassendoku.",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {
+              "summary": "co"
+            }
+          }
+        },
+        "eyebrow": {
+          "name": "eyebrow",
+          "description": "Kicker über dem Absatztext (`.article-callout-eyebrow`), leer = keine Eyebrow.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type ArticleCalloutComponentInputs = {\n  /**\n   * Markenbereich → `data-area` (Hintergrund + Akzentfarbe), siehe Klassendoku.\n   *\n   * @default co\n   */\n  area?: CdsArea;\n  /**\n   * Kicker über dem Absatztext (`.article-callout-eyebrow`), leer = keine Eyebrow.\n   *\n   * @default ''\n   */\n  eyebrow?: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "ArticleCalloutComponent",
+        "selector": "cds-article-callout",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "eyebrow"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/seitenmuster-wissensbeitrag-faq.json

@@ -0,0 +1,41 @@
+{
+  "components": {
+    "seitenmuster-wissensbeitrag-faq": {
+      "id": "seitenmuster-wissensbeitrag-faq",
+      "name": "FaqComponent",
+      "path": "./src/lib/faq/faq.stories.ts",
+      "description": "Faq — Wrapper um `.ep-faq` aus css/components.css → „FAQ-Accordion“.\n\nNutzt natives `<details>/<summary>` (kein JS nötig): Auf-/Zuklappen, Tastatur\nund Zugänglichkeit kommen vom Browser. Der Caret (.ep-faq-caret) dreht via\n`details[open]`. Antwort in `.ep-faq-a`.",
+      "jsDocTags": {},
+      "argTypes": {
+        "items": {
+          "name": "items",
+          "description": "Fragen-/Antworten-Liste des Akkordeons.",
+          "type": {
+            "name": "other",
+            "value": "empty-enum",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsFaqItem[]"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type FaqComponentInputs = {\n  /** Fragen-/Antworten-Liste des Akkordeons. */\n  items: CdsFaqItem[];\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "FaqComponent",
+        "selector": "cds-faq",
+        "standalone": true,
+        "inputs": [
+          "items"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/seitenmuster-wissensbeitrag-figure.json

@@ -0,0 +1,73 @@
+{
+  "components": {
+    "seitenmuster-wissensbeitrag-figure": {
+      "id": "seitenmuster-wissensbeitrag-figure",
+      "name": "ArticleFigureComponent",
+      "path": "./src/lib/article-figure/article-figure.stories.ts",
+      "description": "ArticleFigure (`cds-article-figure`) — Wrapper um `.article-figure`/\n`.article-figcaption` aus css/components.css (css/components.css:1573–1575):\ndas redaktionelle Inline-Bild mit optionaler Bildunterschrift im Lauftext eines\nWissensbeitrags. Zwölftes Ticket der Seitenbausteine-Serie („Artikel-Körper“).\nAusgezählt: 3 reale Vorkommen — Doku-Demo mit Caption\n(`docs/index.html:8028–8031`), reales Body-Bild mit Caption in der Beispielseite\nWissensbeitrag · KI (`docs/index.html:15115–15118`, identischer Bild- und\nCaption-Text wie die Doku-Demo) und ein dritter, captionsloser Sonderfall direkt\nunter dem Article Header derselben Beispielseite (`docs/index.html:15040–15042`,\ndazu unten mehr).\n\n**Element-Selektor, ADR-0008-Standardfall.** In allen 3 Vorkommen sitzt\n`.article-figure` als gewöhnlicher Block-Nachfahre (zwei in `.article-body`,\neines direkt in einer eigenen `.ep-section`) — kein Grid-/Flex-Kind, keine\n`col-*`-Klasse vom Konsumenten, kein Tag-Wechsel (immer `<figure>`), kein\nVorkommen von `.article-figure` mit einem Geschwister-Kombinator in\ncss/components.css. Die einzige direkte Kind-Regel von `.article-body`\n(`.article-body > p`, css/components.css:1566) zielt auf `p`, nicht auf\n`figure` — ein `<cds-article-figure>`-Host zwischen `.article-body` und dem\n`<figure>` bricht deshalb keine Selektorkette.\n\n**`loading=\"lazy\"` ist fest verdrahtet, kein Input — bewusst NUR der\nIn-Article-Fall, nicht der dritte Mockup-Beleg.** Ausgezählt tragen 2 der 3\nVorkommen `loading=\"lazy\"` (die beiden Bilder MIT Caption, mittig im\nLauftext, „below the fold“ — genau der in `wissensbeitrag.mdx`, Abschnitt\n„In-Article Figure“, dokumentierte Dos-Punkt). Das dritte Vorkommen\n(`docs/index.html:15040–15042`) trägt stattdessen `loading=\"eager\"\nfetchpriority=\"high\"` UND hat keine Caption — es ist das erste Bild direkt\nunter dem Article Header (Kommentar im Mockup: „Hero-Bild auf Body-Breite …\nidentisches Bild wie Vorschaubild für Wiedererkennung“), sitzt außerhalb von\n`.article-body` und bekommt seine 720-px-Breite über ein\nInline-`style=\"max-width:720px;margin:0 auto\"` am Konsumenten, nicht über die\nKomponente (Randbedingung 6 der Spec: Mockup-Inline-Styles wandern nicht in\nden Wrapper). Die Ticket-API sieht dafür kein `loading`/`fetchpriority`-Input\nvor; dieses Bauteil deckt deshalb den (häufigeren, dokumentierten) In-Body-Fall\nab. Für den Lead-Bild-Sonderfall bleibt `<figure class=\"article-figure\">` roh\nschreibbar oder — sofern die Semantik passt — `cds-hero-image` (Ticket 02) zu\nprüfen.\n\n**`alt` und `caption` sind bewusst getrennte Pflicht-/Beiwerk-Inputs, keine\nPrüfung auf inhaltliche Überschneidung.** `wissensbeitrag.mdx` dokumentiert die\nbeiden Rollen ausdrücklich als unterschiedliche Jobs\n(Dont: „Alt-Text und Caption inhaltlich identisch, Screenreader liest\ndoppelt“) — Vorgabe an den Konsumenten, nicht etwas, das eine Wrapper-Komponente\nzur Laufzeit sinnvoll erzwingen könnte.",
+      "jsDocTags": {},
+      "argTypes": {
+        "alt": {
+          "name": "alt",
+          "description": "Faktische Bildbeschreibung für Screenreader, siehe Klassendoku.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "caption": {
+          "name": "caption",
+          "description": "Redaktionelle Bildunterschrift (`.article-figcaption`), leer = keine Caption.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "src": {
+          "name": "src",
+          "description": "Bildquelle.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type ArticleFigureComponentInputs = {\n  /** Faktische Bildbeschreibung für Screenreader, siehe Klassendoku. */\n  alt: string;\n  /**\n   * Redaktionelle Bildunterschrift (`.article-figcaption`), leer = keine Caption.\n   *\n   * @default ''\n   */\n  caption?: string;\n  /** Bildquelle. */\n  src: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "ArticleFigureComponent",
+        "selector": "cds-article-figure",
+        "standalone": true,
+        "inputs": [
+          "alt",
+          "caption",
+          "src"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/seitenmuster-wissensbeitrag-inhaltsverzeichnis.json

@@ -0,0 +1,75 @@
+{
+  "components": {
+    "seitenmuster-wissensbeitrag-inhaltsverzeichnis": {
+      "id": "seitenmuster-wissensbeitrag-inhaltsverzeichnis",
+      "name": "ArticleTocComponent",
+      "path": "./src/lib/article-toc/article-toc.stories.ts",
+      "description": "ArticleToc (`cds-article-toc`) — Wrapper um `.article-toc*` aus css/components.css\n(css/components.css:1577–1589): das aufklappbare Inhaltsverzeichnis am Anfang eines\nWissensbeitrags. Zwölftes Ticket der Seitenbausteine-Serie („Artikel-Körper“).\nAusgezählt: genau 2 reale Vorkommen, beide mit 5 Einträgen und identischem\nsichtbarem Text „Inhalt“ plus identischem `aria-label`\n(`docs/index.html:7948–7960`, Doku-Sektion mit Platzhalter-Hrefs `#gt-article-toc`;\n`docs/index.html:15049–15061`, reale Beispielseite Wissensbeitrag · KI mit echten\nAbschnittsankern wie `#wb-ki-demo`).\n\n**Element-Selektor, ADR-0008-Standardfall.** `.article-toc` sitzt in beiden\nVorkommen als gewöhnlicher Block-Nachfahre direkt in `.article-body`\n(`docs/index.html:7950`, `15051` je eine Ebene über dem `<details>`) — kein\nGrid-/Flex-Kind, keine Layout-Klasse (`col-*`) vom Konsumenten, kein\nGeschwister-Kombinator (`.article-toc` kommt in keiner CSS-Regel mit `+`/`~`\nvor), kein Tag-Wechsel (immer `<details>`). Keines der drei ADR-0008-Kriterien\ngreift; ein Attributselektor brächte hier nichts. Die einzige direkte\nKind-Regel von `.article-body` (`.article-body > p`, css/components.css:1566)\nzielt auf `p`, nicht auf `details` — ein `<cds-article-toc>`-Host zwischen\n`.article-body` und dem `<details>` bricht deshalb keine Selektorkette.\n\n**Natives `<details>`/`<summary>`, kein nachgebautes Disclosure** (Ticket-Vorgabe,\nAkzeptanzkriterium): Tastaturbedienung (Enter/Space auf `<summary>`) und\nToggle-Zustand kommen vollständig vom Browser, das CSS hängt direkt an `[open]`\n(`.article-toc[open] .article-toc-caret`, css/components.css:1583). `<details\nclass=\"article-toc\">` sitzt deshalb im TEMPLATE, nicht am Host — derselbe Grund\nwie bei `cds-compare`s `<details class=\"ep-compare\">` (`compare.component.ts`):\nein `<cds-article-toc>`-Host ist ein unbekanntes Custom Element und kann native\nDisclosure-Semantik nicht annehmen.\n\n**Zweites Vorkommen des `<details>`-mit-drehendem-Caret-Musters, nicht\nzusammengezogen mit `cds-compare` (ADR-0007 §5).** Beide Bauteile teilen die\nForm (natives `<details>`, SVG-Caret, `[open]`-Rotation über\n`transition:transform`), aber nicht die Aufgabe: `cds-compare` trägt eine\nVergleichstabelle mit `columns`/`rows`/`toggled`-Output, dieses Bauteil trägt\neine reine Link-Liste ohne Output (siehe API-Vorgabe des Tickets, die für dieses\nBauteil bewusst keinen `toggled` vorsieht). Zwei gleiche Stellen sind ein\nZufall, kein Muster — eine gemeinsame Basisklasse für zwei Vorkommen hätte nur\ndas `<details>`+Caret-Skelett gebündelt und dabei entweder Verhalten\nvereinheitlicht (ein erzwungener `toggled`-Output ohne Zweck hier) oder so viel\nparametrisiert, dass nichts gewonnen wäre.\n\n**`aria-label` am `<summary>` ist fest verdrahtet, kein Input.** Ausgezählt:\nbeide realen Vorkommen tragen wortgleich\n`aria-label=\"Inhaltsverzeichnis ein- und ausklappen\"` — der sichtbare Text\n„Inhalt“ (`summary`-Input) allein wäre außerhalb des Beitragskontexts nicht\neindeutig, das `aria-label` schreibt deshalb aus, was das Element tut. Genau\ndieser Wortlaut aus dem Mockup übernommen, kein erfundener zugänglicher Name.\n\n**Keine Nummerierung im Markup.** Die sichtbaren Ziffern vor jedem Eintrag\nkommen aus `counter(toc)` auf `.article-toc-list li::before`\n(css/components.css:1586), nicht aus dem `<ol>`-Default (`list-style:none` setzt\nihn zurück) — die Komponente muss dafür nichts weiter tun als `<ol\nclass=\"article-toc-list\">` zu rendern.",
+      "jsDocTags": {},
+      "argTypes": {
+        "items": {
+          "name": "items",
+          "description": "Abschnitte des Beitrags, in Anzeige-Reihenfolge.",
+          "type": {
+            "name": "other",
+            "value": "empty-enum",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArticleTocItem[]"
+            },
+            "defaultValue": {}
+          }
+        },
+        "open": {
+          "name": "open",
+          "description": "Anfangszustand des `<details>` — reine Vorbelegung, kein Zwei-Wege-Zustand.",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        },
+        "summary": {
+          "name": "summary",
+          "description": "Sichtbarer Text im `<summary>`, z. B. „Inhalt“.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": "Inhalt"
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type ArticleTocComponentInputs = {\n  /** Abschnitte des Beitrags, in Anzeige-Reihenfolge. */\n  items: CdsArticleTocItem[];\n  /**\n   * Anfangszustand des `<details>` — reine Vorbelegung, kein Zwei-Wege-Zustand.\n   *\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Sichtbarer Text im `<summary>`, z. B. „Inhalt“.\n   *\n   * @default Inhalt\n   */\n  summary?: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "ArticleTocComponent",
+        "selector": "cds-article-toc",
+        "standalone": true,
+        "inputs": [
+          "items",
+          "open",
+          "summary"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/seitenmuster-wissensbeitrag-pull-quote.json

@@ -0,0 +1,63 @@
+{
+  "components": {
+    "seitenmuster-wissensbeitrag-pull-quote": {
+      "id": "seitenmuster-wissensbeitrag-pull-quote",
+      "name": "ArticlePullquoteComponent",
+      "path": "./src/lib/article-pullquote/article-pullquote.stories.ts",
+      "description": "ArticlePullquote (`cds-article-pullquote`) — Wrapper um `.article-pullquote` aus\ncss/components.css (css/components.css:1608–1612): die typografische\nHervorhebung eines Satzes aus dem eigenen Lauftext eines Wissensbeitrags.\nZwölftes Ticket der Seitenbausteine-Serie („Artikel-Körper“). Ausgezählt: 2\nreale Vorkommen, wortgleich, beide `data-area=\"ki\"` — Doku-Demo\n(`docs/index.html:8136`) und reale Beispielseite Wissensbeitrag · KI\n(`docs/index.html:15075`).\n\n**Nicht `cds-blockquote` (`BlockquoteComponent`, `.bq`) — Ticket-Vorgabe, im\nJSDoc beider Bauteile wechselseitig abgegrenzt.** Pull-Quote und Blockquote\nteilen die typografische Familie (Serif, bereichsgefärbter Linksakzent in\n`{area}-500`), aber nicht den Zweck, dokumentiert in `wissensbeitrag.mdx`,\nAbschnitt „Pull-Quote gegen Blockquote“:\n\n| | Pull-Quote (dieses Bauteil) | Blockquote (`cds-blockquote`) |\n|---|---|---|\n| Wessen Stimme? | Der Beitrag zitiert sich selbst — ein Schlüsselsatz aus dem eigenen Lauftext | Eine dritte, benannte Person (Kund:in, Forschungsstimme, Branchen-Statement) |\n| Attribution | Keine (`quote` ist der einzige Input) | Pflicht (`name`, `roleLabel`) |\n| Hintergrund/Icon | Keiner — `quotes:none`, kein Quote-Icon, bewusst „offen“ statt umrahmt | Getönte Akzent-Box (`--bq-bg`) mit Quote-Icon (`.bq-icon`) |\n| Tag | `<blockquote class=\"article-pullquote\">` direkt, kein umschließendes `<figure>` | `<figure class=\"bq\">` außen, `<blockquote>` (ohne eigene Klasse) innen für den Zitattext |\n\nEin Self-Quote im eigenen Beitrag (Blockquote-Optik auf einem Satz des\nAutors) wirkt sonst absurd — der Autor zitiert die Person, die den Beitrag\nschreibt. Wer eine externe Stimme mit Namen und Rolle zeigen will, verwendet\n`cds-blockquote`.\n\n**`quote` enthält die deutschen Anführungszeichen bereits als Teil des Texts,\ndie Komponente ergänzt keine.** `.article-pullquote{quotes:none}`\n(css/components.css:1608) — es gibt keine `content:open-quote`/`close-quote`-Regel\nin der CSS-Schicht, weder hier noch bei `.bq blockquote` oder\n`.testimonial blockquote`. Ausgezählt stehen die Anführungszeichen in BEIDEN\nrealen Vorkommen als literale Zeichen im Text\n(„KI scheitert selten an der Technologie. …“), nicht CSS-generiert. Wie bei\n`cds-compare`/`cds-table` ist Copy-Text Sache des Konsumenten (ADR-0007 §2) —\ndie Story liefert deshalb `quote` bereits mit „…“ (CONTRIBUTING.md §6), die\nKomponente rendert den String unverändert, ohne eigene Anführungszeichen zu\nerfinden.\n\n**Element-Selektor, ADR-0008-Standardfall.** `.article-pullquote` sitzt in\nbeiden Vorkommen als gewöhnlicher Block-Nachfahre in `.article-body` — kein\nGrid-/Flex-Kind, keine `col-*`-Klasse vom Konsumenten, kein\nGeschwister-Kombinator in css/components.css, kein Tag-Wechsel (immer\n`<blockquote>`). Die einzige direkte Kind-Regel von `.article-body`\n(`.article-body > p`, css/components.css:1566) zielt auf `p`, nicht auf\n`blockquote` — ein `<cds-article-pullquote>`-Host zwischen `.article-body` und\ndem `<blockquote>` bricht deshalb keine Selektorkette.\n\n**`area` ist Konfiguration mit verteidigbarer Vorgabe (`'co'`), keine\nerfundene Bereichsfarbe.** Die Basisregel `.article-pullquote` selbst (ohne\n`[data-area]`) setzt bereits exakt denselben Wert wie `[data-area=\"co\"]`\n(`border-left-color:var(--co-500)`, css/components.css:1608–1609) — `'co'` ist\ndamit der reale CSS-Fallback ohne Attribut, nicht geraten.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → `data-area` (Linksakzent), siehe Klassendoku.",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {
+              "summary": "co"
+            }
+          }
+        },
+        "quote": {
+          "name": "quote",
+          "description": "Hervorgehobener Satz, inklusive deutscher Anführungszeichen, siehe Klassendoku.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type ArticlePullquoteComponentInputs = {\n  /**\n   * Markenbereich → `data-area` (Linksakzent), siehe Klassendoku.\n   *\n   * @default co\n   */\n  area?: CdsArea;\n  /** Hervorgehobener Satz, inklusive deutscher Anführungszeichen, siehe Klassendoku. */\n  quote: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "ArticlePullquoteComponent",
+        "selector": "cds-article-pullquote",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "quote"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/grundlagen-farben.json

@@ -0,0 +1,19 @@
+{
+  "components": {
+    "grundlagen-farben": {
+      "id": "grundlagen-farben",
+      "name": "Farben",
+      "path": "./src/foundations/colors.stories.ts",
+      "stories": {
+        "grundlagen-farben--paletten": {
+          "id": "grundlagen-farben--paletten",
+          "name": "Paletten"
+        },
+        "grundlagen-farben--semantisch": {
+          "id": "grundlagen-farben--semantisch",
+          "name": "Semantisch"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/grundlagen-typografie.json

@@ -0,0 +1,25 @@
+{
+  "components": {
+    "grundlagen-typografie": {
+      "id": "grundlagen-typografie",
+      "name": "Typografie",
+      "path": "./src/foundations/typography.stories.ts",
+      "stories": {
+        "grundlagen-typografie--skala": {
+          "id": "grundlagen-typografie--skala",
+          "name": "Skala"
+        },
+        "grundlagen-typografie--ligaturen": {
+          "id": "grundlagen-typografie--ligaturen",
+          "name": "Ligaturen",
+          "description": "1:1 aus docs/index.html übernommen (Zeilen 1535–1572, Abschnitt\n„Ligaturen: warum „ff“ verbunden aussieht“): erst der Vergleich mit/ohne\nOpenType-Ligatur über `font-feature-settings: 'liga' 0|1`, dann das\nMuster-Gitter der Standard-Ligaturen in Libre Baskerville."
+        },
+        "grundlagen-typografie--seitenhierarchie": {
+          "id": "grundlagen-typografie--seitenhierarchie",
+          "name": "Seitenhierarchie",
+          "description": "1:1 aus docs/index.html übernommen (col-7-Box aus dem layout-grid in\nZeilen 1605–1632, Abschnitt „Verwendung“, Block „Schematisches Beispiel,\nSeitenhierarchie“): verschachtelte Font-Tokens von Eyebrow über Display\nund Body bis zur Karte mit Title, Body und Label-Button."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-buttons-button.json

@@ -0,0 +1,48 @@
+{
+  "components": {
+    "komponenten-buttons-button": {
+      "id": "komponenten-buttons-button",
+      "name": "ButtonComponent",
+      "path": "./src/lib/button/button.stories.ts",
+      "stories": {
+        "komponenten-buttons-button--interaktiv": {
+          "id": "komponenten-buttons-button--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { ButtonComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ButtonComponent],\n  template: `\n    @if (variant === 'filled-on-band') {\n    <div\n        [style.background]=\"'var(--' + area + (area === 'ki' ? '-800' : '-700') + ')'\"\n        style=\"padding:24px;border-radius:var(--r-md)\">\n        <cds-button\n            [label]=\"label\"\n            [variant]=\"variant\"\n            [area]=\"area\"\n            [size]=\"size\"\n            [full]=\"full\"\n            [disabled]=\"disabled\" />\n    </div>\n    } @else {\n    <cds-button\n        [label]=\"label\"\n        [variant]=\"variant\"\n        [area]=\"area\"\n        [size]=\"size\"\n        [full]=\"full\"\n        [disabled]=\"disabled\" />\n    }`,\n})\nexport class DemoComponent {\n  label = 'Kontakt aufnehmen';\n  variant = 'filled';\n  area = 'co';\n  size = 'md';\n  full = false;\n  disabled = false;\n}"
+        },
+        "komponenten-buttons-button--varianten": {
+          "id": "komponenten-buttons-button--varianten",
+          "name": "Alle Varianten",
+          "snippet": "import { Component } from '@angular/core';\nimport { ButtonComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ButtonComponent],\n  template: `\n    <div style=\"display:flex;gap:16px;flex-wrap:wrap;align-items:center\">\n        <cds-button variant=\"filled\" label=\"Filled\"></cds-button>\n        <cds-button variant=\"tonal\" label=\"Tonal\"></cds-button>\n        <cds-button variant=\"elevated\" label=\"Elevated\"></cds-button>\n        <cds-button variant=\"outlined\" label=\"Outlined\"></cds-button>\n        <cds-button variant=\"text\" label=\"Text\"></cds-button>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-buttons-button--bereichsfarben": {
+          "id": "komponenten-buttons-button--bereichsfarben",
+          "name": "Bereichsfarben",
+          "snippet": "import { Component } from '@angular/core';\nimport { ButtonComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ButtonComponent],\n  template: `\n    <div style=\"display:flex;gap:16px;flex-wrap:wrap;align-items:center\">\n        <cds-button area=\"co\" label=\"Corporate\"></cds-button>\n        <cds-button area=\"ki\" label=\"AI.Applied\"></cds-button>\n        <cds-button area=\"es\" label=\"Eff. Software\"></cds-button>\n        <cds-button area=\"wo\" label=\"Wirks. Orga\"></cds-button>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-buttons-button--groessen": {
+          "id": "komponenten-buttons-button--groessen",
+          "name": "Größen",
+          "snippet": "import { Component } from '@angular/core';\nimport { ButtonComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ButtonComponent],\n  template: `\n    <div style=\"display:flex;gap:16px;flex-wrap:wrap;align-items:center\">\n        <cds-button size=\"sm\" label=\"Small\"></cds-button>\n        <cds-button size=\"md\" label=\"Medium\"></cds-button>\n        <cds-button size=\"lg\" label=\"Large\"></cds-button>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-buttons-button--auf-band": {
+          "id": "komponenten-buttons-button--auf-band",
+          "name": "Auf Bereichs-Band",
+          "snippet": "import { Component } from '@angular/core';\nimport { ButtonComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ButtonComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:12px\">\n        <div\n            style=\"background:var(--co-700);padding:20px;border-radius:var(--r-md)\">\n            <cds-button\n                variant=\"filled-on-band\"\n                area=\"co\"\n                label=\"Termin buchen\">\n            </cds-button>\n        </div>\n        <div\n            style=\"background:var(--ki-800);padding:20px;border-radius:var(--r-md)\">\n            <cds-button\n                variant=\"filled-on-band\"\n                area=\"ki\"\n                label=\"KI-Potenzial analysieren\">\n            </cds-button>\n        </div>\n        <div\n            style=\"background:var(--es-700);padding:20px;border-radius:var(--r-md)\">\n            <cds-button\n                variant=\"filled-on-band\"\n                area=\"es\"\n                label=\"Assessment anfragen\">\n            </cds-button>\n        </div>\n        <div\n            style=\"background:var(--wo-700);padding:20px;border-radius:var(--r-md)\">\n            <cds-button\n                variant=\"filled-on-band\"\n                area=\"wo\"\n                label=\"Erstgespräch anfragen\">\n            </cds-button>\n        </div>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-buttons-button--deaktiviert": {
+          "id": "komponenten-buttons-button--deaktiviert",
+          "name": "Deaktiviert",
+          "snippet": "import { Component } from '@angular/core';\nimport { ButtonComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ButtonComponent],\n  template: `\n    <cds-button\n        [label]=\"'Nicht verfügbar'\"\n        [variant]=\"'filled'\"\n        [area]=\"'co'\"\n        [size]=\"'md'\"\n        [full]=\"false\"\n        [disabled]=\"true\"\n        (clicked)=\"clicked($event)\"\n    />`,\n})\nexport class DemoComponent {\n  clicked(event: unknown) {}\n}",
+          "warning": "Incomplete snippet: `fn()` could not be resolved statically."
+        },
+        "komponenten-buttons-button--klick-verhalten": {
+          "id": "komponenten-buttons-button--klick-verhalten",
+          "name": "Klick-Verhalten",
+          "snippet": "import { Component } from '@angular/core';\nimport { ButtonComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ButtonComponent],\n  template: `\n    <cds-button\n        [label]=\"'Kontakt aufnehmen'\"\n        [variant]=\"'filled'\"\n        [area]=\"'co'\"\n        [size]=\"'md'\"\n        [full]=\"false\"\n        [disabled]=\"false\"\n        (clicked)=\"clicked($event)\"\n    />`,\n})\nexport class DemoComponent {\n  clicked(event: unknown) {}\n}",
+          "warning": "Incomplete snippet: `fn()` could not be resolved statically."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-call-to-action-cta-band.json

@@ -0,0 +1,27 @@
+{
+  "components": {
+    "komponenten-call-to-action-cta-band": {
+      "id": "komponenten-call-to-action-cta-band",
+      "name": "CtaBandComponent",
+      "path": "./src/lib/cta-band/cta-band.stories.ts",
+      "stories": {
+        "komponenten-call-to-action-cta-band--interaktiv": {
+          "id": "komponenten-call-to-action-cta-band--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { CtaBandComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CtaBandComponent],\n  template: `\n    <div\n        cdsCtaBand\n        [heading]=\"heading\"\n        [sub]=\"sub\"\n        [area]=\"area\"\n        [primaryLabel]=\"primaryLabel\"\n        [primaryHref]=\"primaryHref\"\n        (primaryClick)=\"primaryClick($event)\"\n        [style.background]=\"'var(--' + area + (area === 'ki' ? '-800' : '-700') + ')'\"\n        style=\"color:#fff;border-radius:var(--r-lg)\">\n    </div>`,\n})\nexport class DemoComponent {\n  heading = 'Erstgespräch, 30 Minuten, kostenfrei.';\n  sub = 'Du schilderst Dein Vorhaben, wir geben eine erste Einschätzung. Wenn es passt, sprechen wir über konkrete Schritte. Wenn nicht, war es trotzdem nützlich.';\n  area = 'co';\n  primaryLabel = 'Termin buchen';\n  primaryHref = '';\n  primaryClick(event: unknown) {}\n}"
+        },
+        "komponenten-call-to-action-cta-band--pro-bereich": {
+          "id": "komponenten-call-to-action-cta-band--pro-bereich",
+          "name": "Pro Bereich",
+          "snippet": "import { Component } from '@angular/core';\nimport { CtaBandComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CtaBandComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:var(--s6)\">\n        <div\n            cdsCtaBand\n            heading=\"Erstgespräch, 30 Minuten, kostenfrei.\"\n            primaryLabel=\"Termin buchen\"\n            area=\"co\"\n            style=\"background:var(--co-700);color:#fff;border-radius:var(--r-lg)\">\n        </div>\n        <div\n            cdsCtaBand\n            heading=\"Wo steht Ihr KI-Piloten-Portfolio wirklich?\"\n            sub=\"Ein kurzes Gespräch zeigt, welche Anwendungsfälle sich lohnen und welche eher nicht.\"\n            primaryLabel=\"Potenzial einschätzen lassen\"\n            area=\"ki\"\n            style=\"background:var(--ki-800);color:#fff;border-radius:var(--r-lg)\">\n        </div>\n        <div\n            cdsCtaBand\n            heading=\"Lernen wir uns kennen?\"\n            sub=\"Erzähl uns, was Du vorhast.\"\n            primaryLabel=\"Gespräch anfragen\"\n            area=\"es\"\n            style=\"background:var(--es-700);color:#fff;border-radius:var(--r-lg)\">\n        </div>\n        <div\n            cdsCtaBand\n            heading=\"Drei Muster, an denen Veränderung scheitert.\"\n            sub=\"Wir zeigen in einem kurzen Termin, woran es in Ihrer Organisation konkret hakt, und was ein erster wirksamer Schritt wäre.\"\n            primaryLabel=\"Termin vereinbaren\"\n            area=\"wo\"\n            style=\"background:var(--wo-700);color:#fff;border-radius:var(--r-lg)\">\n        </div>\n    </div>`,\n})\nexport class DemoComponent {}",
+          "warning": "Incomplete snippet: `primaryClick` could not be bound, since CtaBandComponent declares no such input."
+        },
+        "komponenten-call-to-action-cta-band--als-links": {
+          "id": "komponenten-call-to-action-cta-band--als-links",
+          "name": "Als Links",
+          "snippet": "import { Component } from '@angular/core';\nimport { CtaBandComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CtaBandComponent],\n  template: `\n    <div\n        cdsCtaBand\n        [heading]=\"heading\"\n        [sub]=\"sub\"\n        [area]=\"area\"\n        [primaryLabel]=\"primaryLabel\"\n        [primaryHref]=\"primaryHref\"\n        (primaryClick)=\"primaryClick($event)\"\n        [style.background]=\"'var(--' + area + (area === 'ki' ? '-800' : '-700') + ')'\"\n        style=\"color:#fff;border-radius:var(--r-lg)\">\n    </div>`,\n})\nexport class DemoComponent {\n  heading = 'Lernen wir uns kennen?';\n  sub = 'Erzähl uns, was Du vorhast, oder komm in Dortmund auf einen Kaffee vorbei.';\n  area = 'co';\n  primaryLabel = 'Gespräch anfragen';\n  primaryHref = '#sec-examples';\n  primaryClick(event: unknown) {}\n}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-call-to-action-downloadcta.json

@@ -0,0 +1,17 @@
+{
+  "components": {
+    "komponenten-call-to-action-downloadcta": {
+      "id": "komponenten-call-to-action-downloadcta",
+      "name": "DownloadCtaComponent",
+      "path": "./src/lib/download-cta/download-cta.stories.ts",
+      "stories": {
+        "komponenten-call-to-action-downloadcta--interaktiv": {
+          "id": "komponenten-call-to-action-downloadcta--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { DownloadCtaComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [DownloadCtaComponent],\n  template: `\n    <cds-download-cta\n        [area]=\"'co'\"\n        [eyebrow]=\"'Conciso Design System'\"\n        [title]=\"'Figma-Bibliothek herunterladen'\"\n        [desc]=\"'Alle Komponenten, Tokens, Icons und Brand Assets, direkt einsatzbereit als Figma-Bibliothek.'\"\n        [meta]=\"'Figma · Version 1.0 · 48 MB'\"\n        [primaryLabel]=\"'Herunterladen'\"\n        [secondaryLabel]=\"'Vorschau ansehen'\"\n        (primaryClick)=\"primaryClick($event)\"\n        (secondaryClick)=\"secondaryClick($event)\"\n    />`,\n})\nexport class DemoComponent {\n  primaryClick(event: unknown) {}\n  secondaryClick(event: unknown) {}\n}",
+          "warning": "Incomplete snippet: `fn()` could not be resolved statically."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-cards-teaser-card.json

@@ -0,0 +1,37 @@
+{
+  "components": {
+    "komponenten-cards-teaser-card": {
+      "id": "komponenten-cards-teaser-card",
+      "name": "CardComponent",
+      "path": "./src/lib/card/card.stories.ts",
+      "stories": {
+        "komponenten-cards-teaser-card--interaktiv": {
+          "id": "komponenten-cards-teaser-card--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { CardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CardComponent],\n  template: `\n    <cds-card\n        [eyebrow]=\"'Insights'\"\n        [title]=\"'Effektive Software für den Mittelstand'\"\n        [text]=\"'Wie schlanke Architektur und klare Prozesse messbar Zeit und Kosten sparen.'\"\n        [area]=\"'es'\"\n        [showMedia]=\"true\"\n        [actionLabel]=\"'Mehr erfahren'\"\n        (actionClick)=\"actionClick($event)\"\n    />`,\n})\nexport class DemoComponent {\n  actionClick(event: unknown) {}\n}"
+        },
+        "komponenten-cards-teaser-card--footer-aktion": {
+          "id": "komponenten-cards-teaser-card--footer-aktion",
+          "name": "Footer-Aktion",
+          "snippet": "import { Component } from '@angular/core';\nimport { CardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CardComponent],\n  template: `\n    <cds-card\n        [eyebrow]=\"'Insights'\"\n        [title]=\"'Effektive Software für den Mittelstand'\"\n        [text]=\"'Wie schlanke Architektur und klare Prozesse messbar Zeit und Kosten sparen.'\"\n        [area]=\"'es'\"\n        [showMedia]=\"true\"\n        [actionLabel]=\"'Mehr erfahren'\"\n        (actionClick)=\"actionClick($event)\"\n    />`,\n})\nexport class DemoComponent {\n  actionClick(event: unknown) {}\n}",
+          "warning": "Incomplete snippet: `fn()` could not be resolved statically."
+        },
+        "komponenten-cards-teaser-card--pro-bereich": {
+          "id": "komponenten-cards-teaser-card--pro-bereich",
+          "name": "Eine Karte je Bereich",
+          "snippet": "import { Component } from '@angular/core';\nimport { CardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CardComponent],\n  template: `\n    <div\n        style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px\">\n        <cds-card\n            area=\"co\"\n            eyebrow=\"Corporate\"\n            title=\"Marke & Haltung\"\n            text=\"Ein konsistenter Auftritt über alle Berührungspunkte hinweg.\">\n        </cds-card>\n        <cds-card\n            area=\"ki\"\n            eyebrow=\"AI.Applied\"\n            title=\"KI, die wirkt\"\n            text=\"Angewandte KI-Lösungen mit echtem Geschäftsnutzen.\">\n        </cds-card>\n        <cds-card\n            area=\"es\"\n            eyebrow=\"Eff. Software\"\n            title=\"Schlanke Systeme\"\n            text=\"Weniger Code, klarere Architektur, schnellere Lieferung.\">\n        </cds-card>\n        <cds-card\n            area=\"wo\"\n            eyebrow=\"Wirks. Orga\"\n            title=\"Starke Teams\"\n            text=\"Organisationen, die lernen und sich wirksam anpassen.\">\n        </cds-card>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-cards-teaser-card--ohne-medien": {
+          "id": "komponenten-cards-teaser-card--ohne-medien",
+          "name": "Ohne Medienfläche",
+          "snippet": "import { Component } from '@angular/core';\nimport { CardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CardComponent],\n  template: `\n    <cds-card\n        [eyebrow]=\"'Hinweis'\"\n        [title]=\"'Effektive Software für den Mittelstand'\"\n        [text]=\"'Wie schlanke Architektur und klare Prozesse messbar Zeit und Kosten sparen.'\"\n        [area]=\"'co'\"\n        [showMedia]=\"false\"\n        [actionLabel]=\"'Mehr erfahren'\"\n        (actionClick)=\"actionClick($event)\"\n    />`,\n})\nexport class DemoComponent {\n  actionClick(event: unknown) {}\n}"
+        },
+        "komponenten-cards-teaser-card--freier-inhalt": {
+          "id": "komponenten-cards-teaser-card--freier-inhalt",
+          "name": "Freier Inhalt (ng-content)",
+          "snippet": "import { Component } from '@angular/core';\nimport { CardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CardComponent],\n  template: `\n    <cds-card\n        area=\"ki\"\n        title=\"Projektstatus\"\n        [text]=\"''\"\n        [actionLabel]=\"''\"\n        [showMedia]=\"false\"\n        style=\"max-width:320px\">\n        <ul\n            style=\"list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2);font:var(--ty-body-md)\">\n            <li style=\"display:flex;justify-content:space-between\">\n                <span>Offen</span>\n                <strong>12</strong>\n            </li>\n            <li style=\"display:flex;justify-content:space-between\">\n                <span>In Arbeit</span>\n                <strong>5</strong>\n            </li>\n            <li style=\"display:flex;justify-content:space-between\">\n                <span>Erledigt</span>\n                <strong>28</strong>\n            </li>\n        </ul>\n    </cds-card>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-cards-teaser-feature-liste.json

@@ -0,0 +1,37 @@
+{
+  "components": {
+    "komponenten-cards-teaser-feature-liste": {
+      "id": "komponenten-cards-teaser-feature-liste",
+      "name": "FeatureComponent",
+      "path": "./src/lib/feature/feature.stories.ts",
+      "stories": {
+        "komponenten-cards-teaser-feature-liste--interaktiv": {
+          "id": "komponenten-cards-teaser-feature-liste--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { FeatureComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FeatureComponent],\n  template: `\n    <div\n        cdsFeature\n        [title]=\"title\"\n        [text]=\"text\"\n        [area]=\"area\"\n        [ctaLabel]=\"ctaLabel\"\n        [ctaHref]=\"ctaHref\"\n        [ctaAriaLabel]=\"ctaAriaLabel\">\n        <svg\n            cdsIcon\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n            focusable=\"false\">\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\" />\n        </svg>\n    </div>`,\n})\nexport class DemoComponent {\n  title = 'Höchste Sicherheit';\n  text = 'Hosting im eigenen Rechenzentrum oder zertifiziert in Deutschland.';\n  ctaLabel = '';\n  ctaHref = '';\n  ctaAriaLabel = '';\n}",
+          "warning": "Incomplete snippet: `area` could not be provided, since the story declares no such arg."
+        },
+        "komponenten-cards-teaser-feature-liste--dreispalter": {
+          "id": "komponenten-cards-teaser-feature-liste--dreispalter",
+          "name": "Dreispalter",
+          "snippet": "import { Component } from '@angular/core';\nimport { FeatureComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FeatureComponent],\n  template: `\n    <div class=\"layout-grid\">\n        <div\n            cdsFeature\n            class=\"col-4\"\n            title=\"Sinnvolle Projekte\"\n            text=\"Kurzer Text.\"\n            area=\"co\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z\" />\n            </svg>\n        </div>\n        <div\n            cdsFeature\n            class=\"col-4\"\n            title=\"Ein Team auf Augenhöhe\"\n            text=\"Ein deutlich längerer Anreißertext, der über mehrere Zeilen umbricht und die Feature-Zeile dadurch von Natur aus höher macht als ihre Nachbarn.\"\n            area=\"co\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z\" />\n            </svg>\n        </div>\n        <div\n            cdsFeature\n            class=\"col-4\"\n            title=\"Raum, um zu wachsen\"\n            text=\"Mittellanger Text zur Kontrolle der dritten Spalte.\"\n            area=\"co\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456Z\" />\n            </svg>\n        </div>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-cards-teaser-feature-liste--mit-cta": {
+          "id": "komponenten-cards-teaser-feature-liste--mit-cta",
+          "name": "Mit CTA",
+          "snippet": "import { Component } from '@angular/core';\nimport { FeatureComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FeatureComponent],\n  template: `\n    <div\n        cdsFeature\n        [title]=\"title\"\n        [text]=\"text\"\n        [area]=\"area\"\n        [ctaLabel]=\"ctaLabel\"\n        [ctaHref]=\"ctaHref\"\n        [ctaAriaLabel]=\"ctaAriaLabel\">\n        <svg\n            cdsIcon\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n            focusable=\"false\">\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5\" />\n        </svg>\n    </div>`,\n})\nexport class DemoComponent {\n  title = 'KI Kickstart Workshops';\n  text = 'In kompakten Workshops von der ersten Idee zum konkreten KI-Anwendungsfall, mit einem klaren nächsten Schritt.';\n  ctaLabel = 'Zur Landingpage';\n  ctaHref = '#sec-examples';\n  ctaAriaLabel = 'Zur Landingpage: KI Kickstart Workshops';\n  area = 'ki';\n}"
+        },
+        "komponenten-cards-teaser-feature-liste--ohne-href": {
+          "id": "komponenten-cards-teaser-feature-liste--ohne-href",
+          "name": "Ohne Href",
+          "snippet": "import { Component } from '@angular/core';\nimport { FeatureComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FeatureComponent],\n  template: `\n    <div\n        cdsFeature\n        [title]=\"title\"\n        [text]=\"text\"\n        [area]=\"area\"\n        [ctaLabel]=\"ctaLabel\"\n        [ctaHref]=\"ctaHref\">\n        <svg\n            cdsIcon\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n            focusable=\"false\">\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5\" />\n        </svg>\n    </div>`,\n})\nexport class DemoComponent {\n  title = 'Neue Kooperationen';\n  text = 'Weitere Partnerschaften sind in Vorbereitung.';\n  ctaLabel = 'Landingpage folgt';\n  ctaHref = '';\n  area = 'wo';\n}"
+        },
+        "komponenten-cards-teaser-feature-liste--pro-bereich": {
+          "id": "komponenten-cards-teaser-feature-liste--pro-bereich",
+          "name": "Pro Bereich",
+          "snippet": "import { Component } from '@angular/core';\nimport { FeatureComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FeatureComponent],\n  template: `\n    <div class=\"layout-grid\">\n        <div\n            cdsFeature\n            class=\"col-6\"\n            title=\"Marke mit Haltung\"\n            text=\"Klare Kommunikation, die vertraut und bewegt.\"\n            area=\"co\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z\" />\n            </svg>\n        </div>\n        <div\n            cdsFeature\n            class=\"col-6\"\n            title=\"KI mit Wirkung\"\n            text=\"Liefert, wenn die Demo vorbei ist.\"\n            area=\"ki\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456Z\" />\n            </svg>\n        </div>\n        <div\n            cdsFeature\n            class=\"col-6\"\n            title=\"Präzise Systeme\"\n            text=\"Lebt, wenn der Hype vorbei ist.\"\n            area=\"es\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\" />\n            </svg>\n        </div>\n        <div\n            cdsFeature\n            class=\"col-6\"\n            title=\"Wandel, der trägt\"\n            text=\"Bleibt, wenn wir gehen.\"\n            area=\"wo\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z\" />\n            </svg>\n        </div>\n    </div>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}