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

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

@@ -0,0 +1,36 @@
+{
+  "components": {
+    "komponenten-cards-teaser-featured-karte": {
+      "id": "komponenten-cards-teaser-featured-karte",
+      "name": "FeaturedCardComponent",
+      "path": "./src/lib/featured-card/featured-card.stories.ts",
+      "stories": {
+        "komponenten-cards-teaser-featured-karte--interaktiv": {
+          "id": "komponenten-cards-teaser-featured-karte--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { FeaturedCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FeaturedCardComponent],\n  template: `\n    <cds-featured-card\n        [title]=\"'Effizienz durch n8n.'\"\n        [text]=\"'Drei kurze Inputs, ein Workflow, spürbar weniger Klickarbeit im Tagesgeschäft.'\"\n        [imageSrc]=\"'data:image/svg+xml,%3Csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'800\\\\'%20height=\\\\'450\\\\'%3E%3Crect%20width=\\\\'800\\\\'%20height=\\\\'450\\\\'%20fill=\\\\'%23E8EDED\\\\'/%3E%3Ctext%20x=\\\\'400\\\\'%20y=\\\\'225\\\\'%20font-family=\\\\'sans-serif\\\\'%20font-size=\\\\'24\\\\'%20fill=\\\\'%236E8585\\\\'%20text-anchor=\\\\'middle\\\\'%20dominant-baseline=\\\\'middle\\\\'%3EBildfl%C3%A4che%20%C2%B7%2016%3A9%3C/text%3E%3C/svg%3E'\"\n        [imageAlt]=\"'Laptop mit einem n8n-Workflow-Diagramm auf dem Bildschirm'\"\n        [href]=\"'#veranstaltung-n8n'\"\n        [pill]=\"'Effektive Software'\"\n        [area]=\"'es'\"\n    />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-cards-teaser-featured-karte--pro-bereich": {
+          "id": "komponenten-cards-teaser-featured-karte--pro-bereich",
+          "name": "Pro Bereich",
+          "snippet": "import { Component } from '@angular/core';\nimport { FeaturedCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FeaturedCardComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:24px\">\n        <cds-featured-card\n            area=\"co\"\n            pill=\"Corporate\"\n            title=\"Zehn Jahre Conciso.\"\n            text=\"Wie aus einer Zwei-Personen-Idee ein Team wurde, das Mittelstand und KI zusammendenkt.\"\n            imageSrc=\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='450'%3E%3Crect%20width='800'%20height='450'%20fill='%23E8EDED'/%3E%3Ctext%20x='400'%20y='225'%20font-family='sans-serif'%20font-size='24'%20fill='%236E8585'%20text-anchor='middle'%20dominant-baseline='middle'%3EBildfl%C3%A4che%20%C2%B7%2016%3A9%3C/text%3E%3C/svg%3E\"\n            imageAlt=\"Conciso-Team bei einem Firmenjubiläum\"\n            href=\"#beitrag-jubilaeum\">\n        </cds-featured-card>\n        <cds-featured-card\n            area=\"ki\"\n            pill=\"Angewandte KI\"\n            title=\"Effizienz durch n8n.\"\n            text=\"Drei kurze Inputs, ein Workflow, spürbar weniger Klickarbeit im Tagesgeschäft.\"\n            imageSrc=\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='450'%3E%3Crect%20width='800'%20height='450'%20fill='%23E8EDED'/%3E%3Ctext%20x='400'%20y='225'%20font-family='sans-serif'%20font-size='24'%20fill='%236E8585'%20text-anchor='middle'%20dominant-baseline='middle'%3EBildfl%C3%A4che%20%C2%B7%2016%3A9%3C/text%3E%3C/svg%3E\"\n            imageAlt=\"Laptop mit einem n8n-Workflow-Diagramm auf dem Bildschirm\"\n            href=\"#veranstaltung-n8n\">\n        </cds-featured-card>\n        <cds-featured-card\n            area=\"es\"\n            pill=\"Effektive Software\"\n            title=\"Schlanke Architektur senkt Betriebskosten.\"\n            text=\"Was 40 Migrationsprojekte über den Zusammenhang von Komplexität und Wartungsaufwand zeigen.\"\n            imageSrc=\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='450'%3E%3Crect%20width='800'%20height='450'%20fill='%23E8EDED'/%3E%3Ctext%20x='400'%20y='225'%20font-family='sans-serif'%20font-size='24'%20fill='%236E8585'%20text-anchor='middle'%20dominant-baseline='middle'%3EBildfl%C3%A4che%20%C2%B7%2016%3A9%3C/text%3E%3C/svg%3E\"\n            imageAlt=\"Whiteboard mit einer Architekturskizze\"\n            href=\"#beitrag-architektur\">\n        </cds-featured-card>\n        <cds-featured-card\n            area=\"wo\"\n            pill=\"Wirksame Organisationen\"\n            title=\"Teams, die sich selbst organisieren.\"\n            text=\"Wie verteilte Verantwortung Entscheidungen beschleunigt, ohne Führung zu verlieren.\"\n            imageSrc=\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='450'%3E%3Crect%20width='800'%20height='450'%20fill='%23E8EDED'/%3E%3Ctext%20x='400'%20y='225'%20font-family='sans-serif'%20font-size='24'%20fill='%236E8585'%20text-anchor='middle'%20dominant-baseline='middle'%3EBildfl%C3%A4che%20%C2%B7%2016%3A9%3C/text%3E%3C/svg%3E\"\n            imageAlt=\"Team im Kreis bei einem Workshop\"\n            href=\"#beitrag-teams\">\n        </cds-featured-card>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-cards-teaser-featured-karte--pille-als-lesezeit": {
+          "id": "komponenten-cards-teaser-featured-karte--pille-als-lesezeit",
+          "name": "Pille als Lesezeit",
+          "snippet": "import { Component } from '@angular/core';\nimport { FeaturedCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FeaturedCardComponent],\n  template: `\n    <cds-featured-card\n        [title]=\"'Effizienz durch n8n.'\"\n        [text]=\"'Drei kurze Inputs, ein Workflow, spürbar weniger Klickarbeit im Tagesgeschäft.'\"\n        [imageSrc]=\"'data:image/svg+xml,%3Csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'800\\\\'%20height=\\\\'450\\\\'%3E%3Crect%20width=\\\\'800\\\\'%20height=\\\\'450\\\\'%20fill=\\\\'%23E8EDED\\\\'/%3E%3Ctext%20x=\\\\'400\\\\'%20y=\\\\'225\\\\'%20font-family=\\\\'sans-serif\\\\'%20font-size=\\\\'24\\\\'%20fill=\\\\'%236E8585\\\\'%20text-anchor=\\\\'middle\\\\'%20dominant-baseline=\\\\'middle\\\\'%3EBildfl%C3%A4che%20%C2%B7%2016%3A9%3C/text%3E%3C/svg%3E'\"\n        [imageAlt]=\"'Laptop mit einem n8n-Workflow-Diagramm auf dem Bildschirm'\"\n        [href]=\"'#veranstaltung-n8n'\"\n        [pill]=\"'12 min Lesezeit'\"\n        [area]=\"'es'\"\n        [pillAriaLabel]=\"'Lesezeit 12 Minuten'\"\n    />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-cards-teaser-featured-karte--ohne-pill": {
+          "id": "komponenten-cards-teaser-featured-karte--ohne-pill",
+          "name": "Ohne Pill",
+          "snippet": "import { Component } from '@angular/core';\nimport { FeaturedCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FeaturedCardComponent],\n  template: `\n    <cds-featured-card\n        [title]=\"'Effizienz durch n8n.'\"\n        [text]=\"'Drei kurze Inputs, ein Workflow, spürbar weniger Klickarbeit im Tagesgeschäft.'\"\n        [imageSrc]=\"'data:image/svg+xml,%3Csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'800\\\\'%20height=\\\\'450\\\\'%3E%3Crect%20width=\\\\'800\\\\'%20height=\\\\'450\\\\'%20fill=\\\\'%23E8EDED\\\\'/%3E%3Ctext%20x=\\\\'400\\\\'%20y=\\\\'225\\\\'%20font-family=\\\\'sans-serif\\\\'%20font-size=\\\\'24\\\\'%20fill=\\\\'%236E8585\\\\'%20text-anchor=\\\\'middle\\\\'%20dominant-baseline=\\\\'middle\\\\'%3EBildfl%C3%A4che%20%C2%B7%2016%3A9%3C/text%3E%3C/svg%3E'\"\n        [imageAlt]=\"'Laptop mit einem n8n-Workflow-Diagramm auf dem Bildschirm'\"\n        [href]=\"'#veranstaltung-n8n'\"\n        [pill]=\"''\"\n        [area]=\"'es'\"\n    />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-cards-teaser-featured-karte--ohne-link": {
+          "id": "komponenten-cards-teaser-featured-karte--ohne-link",
+          "name": "Ohne Link",
+          "snippet": "import { Component } from '@angular/core';\nimport { FeaturedCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FeaturedCardComponent],\n  template: `\n    <cds-featured-card\n        [title]=\"'Effizienz durch n8n.'\"\n        [text]=\"'Drei kurze Inputs, ein Workflow, spürbar weniger Klickarbeit im Tagesgeschäft.'\"\n        [imageSrc]=\"'data:image/svg+xml,%3Csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'800\\\\'%20height=\\\\'450\\\\'%3E%3Crect%20width=\\\\'800\\\\'%20height=\\\\'450\\\\'%20fill=\\\\'%23E8EDED\\\\'/%3E%3Ctext%20x=\\\\'400\\\\'%20y=\\\\'225\\\\'%20font-family=\\\\'sans-serif\\\\'%20font-size=\\\\'24\\\\'%20fill=\\\\'%236E8585\\\\'%20text-anchor=\\\\'middle\\\\'%20dominant-baseline=\\\\'middle\\\\'%3EBildfl%C3%A4che%20%C2%B7%2016%3A9%3C/text%3E%3C/svg%3E'\"\n        [imageAlt]=\"'Laptop mit einem n8n-Workflow-Diagramm auf dem Bildschirm'\"\n        [href]=\"''\"\n        [pill]=\"'Effektive Software'\"\n        [area]=\"'es'\"\n    />`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+{
+  "components": {
+    "komponenten-cards-teaser-icon-karte": {
+      "id": "komponenten-cards-teaser-icon-karte",
+      "name": "IconCardComponent",
+      "path": "./src/lib/icon-card/icon-card.stories.ts",
+      "stories": {
+        "komponenten-cards-teaser-icon-karte--interaktiv": {
+          "id": "komponenten-cards-teaser-icon-karte--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { IconCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [IconCardComponent],\n  template: `\n    <div\n        cdsIconCard\n        [eyebrow]=\"eyebrow\"\n        [title]=\"title\"\n        [text]=\"text\"\n        [area]=\"area\"\n        [ctaLabel]=\"ctaLabel\">\n        <svg\n            cdsIcon\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"var(--es-700)\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n            focusable=\"false\">\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z\" />\n        </svg>\n    </div>`,\n})\nexport class DemoComponent {\n  eyebrow = 'Effektive Software';\n  title = 'Schlanke Systeme';\n  text = 'Weniger Code, klarere Architektur, schnellere Lieferung.';\n  area = 'es';\n  ctaLabel = 'Mehr erfahren';\n}"
+        },
+        "komponenten-cards-teaser-icon-karte--als-link": {
+          "id": "komponenten-cards-teaser-icon-karte--als-link",
+          "name": "Als Link",
+          "snippet": "import { Component } from '@angular/core';\nimport { IconCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [IconCardComponent],\n  template: `\n    <a\n        cdsIconCard\n        href=\"#leistungen-es\"\n        [eyebrow]=\"eyebrow\"\n        [title]=\"title\"\n        [text]=\"text\"\n        [area]=\"area\"\n        [ctaLabel]=\"ctaLabel\">\n        <svg\n            cdsIcon\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"var(--es-700)\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n            focusable=\"false\">\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z\" />\n        </svg>\n    </a>`,\n})\nexport class DemoComponent {\n  eyebrow = 'Effektive Software';\n  title = 'Schlanke Systeme';\n  text = 'Weniger Code, klarere Architektur, schnellere Lieferung.';\n  area = 'es';\n  ctaLabel = 'Mehr erfahren';\n}"
+        },
+        "komponenten-cards-teaser-icon-karte--anker-ohne-href": {
+          "id": "komponenten-cards-teaser-icon-karte--anker-ohne-href",
+          "name": "Anker ohne Href",
+          "snippet": "import { Component } from '@angular/core';\nimport { IconCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [IconCardComponent],\n  template: `\n    <a\n        cdsIconCard\n        [eyebrow]=\"eyebrow\"\n        [title]=\"title\"\n        [text]=\"text\"\n        [area]=\"area\"\n        [ctaLabel]=\"ctaLabel\">\n        <svg\n            cdsIcon\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"var(--es-700)\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n            focusable=\"false\">\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z\" />\n        </svg>\n    </a>`,\n})\nexport class DemoComponent {\n  eyebrow = 'Effektive Software';\n  title = 'Schlanke Systeme';\n  text = 'Weniger Code, klarere Architektur, schnellere Lieferung.';\n  area = 'es';\n  ctaLabel = 'Mehr erfahren';\n}"
+        },
+        "komponenten-cards-teaser-icon-karte--pro-bereich": {
+          "id": "komponenten-cards-teaser-icon-karte--pro-bereich",
+          "name": "Pro Bereich",
+          "snippet": "import { Component } from '@angular/core';\nimport { IconCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [IconCardComponent],\n  template: `\n    <div\n        style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px\">\n        <a\n            cdsIconCard\n            href=\"#leistungen-co\"\n            area=\"co\"\n            eyebrow=\"Corporate\"\n            title=\"Marke mit Haltung\"\n            text=\"Klare Kommunikation, die vertraut und bewegt.\"\n            ctaLabel=\"Entdecken\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"var(--co-700)\"\n                stroke-width=\"1.5\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z\" />\n            </svg>\n        </a>\n        <a\n            cdsIconCard\n            href=\"#leistungen-ki\"\n            area=\"ki\"\n            eyebrow=\"Angewandte KI\"\n            title=\"KI mit Wirkung\"\n            text=\"Liefert, wenn die Demo vorbei ist.\"\n            ctaLabel=\"Entdecken\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"var(--ki-800)\"\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.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" />\n            </svg>\n        </a>\n        <a\n            cdsIconCard\n            href=\"#leistungen-es\"\n            area=\"es\"\n            eyebrow=\"Effektive Software\"\n            title=\"Präzise Systeme\"\n            text=\"Lebt, wenn der Hype vorbei ist.\"\n            ctaLabel=\"Ansehen\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"var(--es-700)\"\n                stroke-width=\"1.5\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z\" />\n            </svg>\n        </a>\n        <a\n            cdsIconCard\n            href=\"#leistungen-wo\"\n            area=\"wo\"\n            eyebrow=\"Wirksame Organisationen\"\n            title=\"Wandel, der trägt\"\n            text=\"Bleibt, wenn wir gehen.\"\n            ctaLabel=\"Kennenlernen\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"var(--wo-700)\"\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        </a>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-cards-teaser-icon-karte--im-raster": {
+          "id": "komponenten-cards-teaser-icon-karte--im-raster",
+          "name": "Im Raster",
+          "snippet": "import { Component } from '@angular/core';\nimport { IconCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [IconCardComponent],\n  template: `\n    <div class=\"ep-cards\">\n        <a\n            cdsIconCard\n            href=\"#leistungen-ki\"\n            area=\"ki\"\n            eyebrow=\"Angewandte KI\"\n            title=\"KI mit Wirkung\"\n            text=\"Kurzer Text.\"\n            ctaLabel=\"Entdecken\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"var(--ki-800)\"\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.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" />\n            </svg>\n        </a>\n        <a\n            cdsIconCard\n            href=\"#leistungen-es\"\n            area=\"es\"\n            eyebrow=\"Effektive Software\"\n            title=\"Präzise Systeme\"\n            text=\"Ein deutlich längerer Anreißertext, der über mehrere Zeilen umbricht und die Karte dadurch von Natur aus höher macht als ihre Nachbarn.\"\n            ctaLabel=\"Ansehen\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"var(--es-700)\"\n                stroke-width=\"1.5\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z\" />\n            </svg>\n        </a>\n        <a\n            cdsIconCard\n            href=\"#leistungen-wo\"\n            area=\"wo\"\n            eyebrow=\"Wirksame Organisationen\"\n            title=\"Wandel, der trägt\"\n            text=\"Mittellanger Text zur Kontrolle.\"\n            ctaLabel=\"Kennenlernen\">\n            <svg\n                cdsIcon\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"var(--wo-700)\"\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        </a>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-cards-teaser-icon-karte--ohne-cta": {
+          "id": "komponenten-cards-teaser-icon-karte--ohne-cta",
+          "name": "Ohne CTA",
+          "snippet": "import { Component } from '@angular/core';\nimport { IconCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [IconCardComponent],\n  template: `\n    <div\n        cdsIconCard\n        [eyebrow]=\"eyebrow\"\n        [title]=\"title\"\n        [text]=\"text\"\n        [area]=\"area\"\n        [ctaLabel]=\"ctaLabel\">\n        <svg\n            cdsIcon\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"var(--es-700)\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n            focusable=\"false\">\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z\" />\n        </svg>\n    </div>`,\n})\nexport class DemoComponent {\n  eyebrow = 'Effektive Software';\n  title = 'Schlanke Systeme';\n  text = 'Weniger Code, klarere Architektur, schnellere Lieferung.';\n  area = 'es';\n  ctaLabel = '';\n}"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+{
+  "components": {
+    "komponenten-cards-teaser-klickbare-karte": {
+      "id": "komponenten-cards-teaser-klickbare-karte",
+      "name": "LinkCardComponent",
+      "path": "./src/lib/link-card/link-card.stories.ts",
+      "stories": {
+        "komponenten-cards-teaser-klickbare-karte--interaktiv": {
+          "id": "komponenten-cards-teaser-klickbare-karte--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { LinkCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [LinkCardComponent],\n  template: `\n    <cds-link-card\n        [eyebrow]=\"'Angewandte KI'\"\n        [title]=\"'Warum 60 % der KI-Piloten nie in Produktion gehen'\"\n        [text]=\"'Demos überzeugen, Use-Cases scheitern. Was wir aus 200 Implementierungen gelernt haben.'\"\n        [href]=\"'#wissensbeitrag-ki-piloten'\"\n        [area]=\"'ki'\"\n        [showMedia]=\"true\"\n        [ctaLabel]=\"'Beitrag lesen'\"\n        [ctaPinned]=\"false\"\n    />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-cards-teaser-klickbare-karte--pro-bereich": {
+          "id": "komponenten-cards-teaser-klickbare-karte--pro-bereich",
+          "name": "Pro Bereich",
+          "snippet": "import { Component } from '@angular/core';\nimport { LinkCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [LinkCardComponent],\n  template: `\n    <div\n        style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px\">\n        <cds-link-card\n            area=\"co\"\n            eyebrow=\"Corporate\"\n            title=\"Marke &amp; Haltung\"\n            text=\"Ein konsistenter Auftritt über alle Berührungspunkte hinweg.\"\n            href=\"#leistungen-marke\"\n            ctaLabel=\"Mehr erfahren\">\n        </cds-link-card>\n        <cds-link-card\n            area=\"ki\"\n            eyebrow=\"AI.Applied\"\n            title=\"KI, die wirkt\"\n            text=\"Angewandte KI-Lösungen mit echtem Geschäftsnutzen.\"\n            href=\"#leistungen-ki\"\n            ctaLabel=\"Mehr erfahren\">\n        </cds-link-card>\n        <cds-link-card\n            area=\"es\"\n            eyebrow=\"Effektive Software\"\n            title=\"Schlanke Systeme\"\n            text=\"Weniger Code, klarere Architektur, schnellere Lieferung.\"\n            href=\"#leistungen-es\"\n            ctaLabel=\"Mehr erfahren\">\n        </cds-link-card>\n        <cds-link-card\n            area=\"wo\"\n            eyebrow=\"Wirksame Organisationen\"\n            title=\"Starke Teams\"\n            text=\"Organisationen, die lernen und sich wirksam anpassen.\"\n            href=\"#leistungen-wo\"\n            ctaLabel=\"Mehr erfahren\">\n        </cds-link-card>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-cards-teaser-klickbare-karte--im-raster": {
+          "id": "komponenten-cards-teaser-klickbare-karte--im-raster",
+          "name": "Im Raster",
+          "snippet": "import { Component } from '@angular/core';\nimport { LinkCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [LinkCardComponent],\n  template: `\n    <div class=\"layout-grid\" style=\"align-items:stretch\">\n        <cds-link-card\n            class=\"col-4\"\n            area=\"ki\"\n            eyebrow=\"Angewandte KI\"\n            title=\"Warum 60 % der KI-Piloten nie in Produktion gehen\"\n            text=\"Demos überzeugen, Use-Cases scheitern.\"\n            href=\"#wissensbeitrag-ki-piloten\"\n            ctaLabel=\"Beitrag lesen\"\n            [ctaPinned]=\"true\">\n        </cds-link-card>\n        <cds-link-card\n            class=\"col-4\"\n            area=\"es\"\n            eyebrow=\"Effektive Software\"\n            title=\"Schlanke Architektur senkt Betriebskosten\"\n            text=\"Ein längerer Anreißer über zwei Zeilen, damit der Höhenunterschied zwischen den Karten sichtbar wird und --pinned trotzdem greift.\"\n            href=\"#wissensbeitrag-architektur\"\n            ctaLabel=\"Beitrag lesen\"\n            [ctaPinned]=\"true\">\n        </cds-link-card>\n        <cds-link-card\n            class=\"col-4\"\n            area=\"wo\"\n            title=\"Teams, die sich selbst organisieren\"\n            text=\"Wie verteilte Verantwortung Entscheidungen beschleunigt.\"\n            href=\"#wissensbeitrag-teams\"\n            ctaLabel=\"Beitrag lesen\"\n            [ctaPinned]=\"true\">\n        </cds-link-card>\n    </div>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+{
+  "components": {
+    "komponenten-cards-teaser-statcard": {
+      "id": "komponenten-cards-teaser-statcard",
+      "name": "StatCardComponent",
+      "path": "./src/lib/stat-card/stat-card.stories.ts",
+      "stories": {
+        "komponenten-cards-teaser-statcard--interaktiv": {
+          "id": "komponenten-cards-teaser-statcard--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { StatCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [StatCardComponent],\n  template: `\n    <cds-stat-card\n        [value]=\"'98 %'\"\n        [label]=\"'Kundenzufriedenheit'\"\n        [area]=\"'co'\"\n        [trend]=\"'up'\"\n        [trendText]=\"'+12 %'\"\n    />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-cards-teaser-statcard--kennzahlen": {
+          "id": "komponenten-cards-teaser-statcard--kennzahlen",
+          "name": "Kennzahlen",
+          "snippet": "import { Component } from '@angular/core';\nimport { StatCardComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [StatCardComponent],\n  template: `\n    <div\n        style=\"display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px\">\n        <cds-stat-card\n            area=\"co\"\n            value=\"120+\"\n            label=\"Projekte\"\n            trend=\"up\"\n            trendText=\"+8\">\n        </cds-stat-card>\n        <cds-stat-card\n            area=\"ki\"\n            value=\"98 %\"\n            label=\"Zufriedenheit\"\n            trend=\"up\"\n            trendText=\"+12 %\">\n        </cds-stat-card>\n        <cds-stat-card\n            area=\"es\"\n            value=\"−34 %\"\n            label=\"Time-to-Market\"\n            trend=\"down\"\n            trendText=\"schneller\">\n        </cds-stat-card>\n        <cds-stat-card area=\"wo\" value=\"15 J.\" label=\"Erfahrung\"></cds-stat-card>\n    </div>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+{
+  "components": {
+    "komponenten-cards-teaser-statstrip": {
+      "id": "komponenten-cards-teaser-statstrip",
+      "name": "StatStripComponent",
+      "path": "./src/lib/stat-strip/stat-strip.stories.ts",
+      "stories": {
+        "komponenten-cards-teaser-statstrip--interaktiv": {
+          "id": "komponenten-cards-teaser-statstrip--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { StatStripComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [StatStripComponent],\n  template: `\n    <cds-stat-strip\n        [rounded]=\"true\"\n        [stats]=\"[{area: 'co', value: '94 %', label: 'Kundenzufriedenheit'}, {area: 'ki', value: '3×', label: 'Schnellere Prozesse durch KI'}, {area: 'es', value: '99,9 %', label: 'System-Uptime'}, {area: 'wo', value: '280+', label: 'Transformationsprojekte'}]\"\n    />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-cards-teaser-statstrip--drei-kennzahlen": {
+          "id": "komponenten-cards-teaser-statstrip--drei-kennzahlen",
+          "name": "Drei Kennzahlen",
+          "snippet": "import { Component } from '@angular/core';\nimport { StatStripComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [StatStripComponent],\n  template: `\n    <cds-stat-strip\n        [rounded]=\"true\"\n        [stats]=\"[{area: 'co', value: '120+', label: 'Projekte'}, {area: 'es', value: '−34 %', label: 'Time-to-Market'}, {area: 'wo', value: '15 J.', label: 'Erfahrung'}]\"\n    />`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+{
+  "components": {
+    "komponenten-cards-teaser-tier-trenner": {
+      "id": "komponenten-cards-teaser-tier-trenner",
+      "name": "TierComponent",
+      "path": "./src/lib/tier/tier.stories.ts",
+      "stories": {
+        "komponenten-cards-teaser-tier-trenner--interaktiv": {
+          "id": "komponenten-cards-teaser-tier-trenner--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { TierComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TierComponent],\n  template: `<cds-tier [label]=\"label\" [area]=\"area\"></cds-tier>`,\n})\nexport class DemoComponent {\n  label = 'In jedem Paket enthalten';\n}",
+          "warning": "Incomplete snippet: `area` could not be provided, since the story declares no such arg."
+        },
+        "komponenten-cards-teaser-tier-trenner--pro-bereich": {
+          "id": "komponenten-cards-teaser-tier-trenner--pro-bereich",
+          "name": "Pro Bereich",
+          "snippet": "import { Component } from '@angular/core';\nimport { TierComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TierComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:var(--s6)\">\n        <cds-tier label=\"In jedem Paket enthalten\"></cds-tier>\n        <cds-tier label=\"Zusätzlich mit Pro\" area=\"ki\"></cds-tier>\n    </div>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-chips-badges-pills-bereichs-badge.json

@@ -0,0 +1,21 @@
+{
+  "components": {
+    "komponenten-chips-badges-pills-bereichs-badge": {
+      "id": "komponenten-chips-badges-pills-bereichs-badge",
+      "name": "AreaBadgeComponent",
+      "path": "./src/lib/area-badge/area-badge.stories.ts",
+      "stories": {
+        "komponenten-chips-badges-pills-bereichs-badge--interaktiv": {
+          "id": "komponenten-chips-badges-pills-bereichs-badge--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { AreaBadgeComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [AreaBadgeComponent],\n  template: `<cds-area-badge [label]=\"'Corporate'\" [area]=\"'co'\" />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-chips-badges-pills-bereichs-badge--bereiche": {
+          "id": "komponenten-chips-badges-pills-bereichs-badge--bereiche",
+          "name": "Bereiche",
+          "snippet": "import { Component } from '@angular/core';\nimport { AreaBadgeComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [AreaBadgeComponent],\n  template: `\n    <div style=\"display:flex;gap:12px;flex-wrap:wrap;align-items:center\">\n        <cds-area-badge area=\"co\" label=\"Corporate\"></cds-area-badge>\n        <cds-area-badge area=\"ki\" label=\"Angewandte KI\"></cds-area-badge>\n        <cds-area-badge area=\"es\" label=\"Effektive Software\"></cds-area-badge>\n        <cds-area-badge area=\"wo\" label=\"Wirksame Organisationen\"></cds-area-badge>\n    </div>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-chips-badges-pills-chip.json

@@ -0,0 +1,27 @@
+{
+  "components": {
+    "komponenten-chips-badges-pills-chip": {
+      "id": "komponenten-chips-badges-pills-chip",
+      "name": "ChipComponent",
+      "path": "./src/lib/chip/chip.stories.ts",
+      "stories": {
+        "komponenten-chips-badges-pills-chip--interaktiv": {
+          "id": "komponenten-chips-badges-pills-chip--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { ChipComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ChipComponent],\n  template: `\n    <cds-chip\n        [label]=\"'Filter'\"\n        [area]=\"undefined\"\n        [pressed]=\"false\"\n        (pressedChange)=\"pressedChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  pressedChange(event: unknown) {}\n}"
+        },
+        "komponenten-chips-badges-pills-chip--lesbarer-zustand": {
+          "id": "komponenten-chips-badges-pills-chip--lesbarer-zustand",
+          "name": "Lesbarer Zustand",
+          "snippet": "import { Component } from '@angular/core';\nimport { ChipComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ChipComponent],\n  template: `\n    <div style=\"display:flex;gap:12px;flex-wrap:wrap;align-items:center\">\n        @for (f of filters; track f.label) {\n        <cds-chip\n            [label]=\"f.label\"\n            [area]=\"f.area\"\n            [(pressed)]=\"f.pressed\">\n        </cds-chip>\n        }\n    </div>\n    <p style=\"margin-top:16px;font:14px/1.4 system-ui,sans-serif\">\n        Aktiv:\n        <strong>{{ aktiveLabels() }}</strong>\n    </p>`,\n})\nexport class DemoComponent {\n  pressedChange(event: unknown) {}\n}",
+          "warning": "Incomplete snippet: `filters`, `aktiveLabels` could not be provided, since the story declares no such arg."
+        },
+        "komponenten-chips-badges-pills-chip--zustaende": {
+          "id": "komponenten-chips-badges-pills-chip--zustaende",
+          "name": "Zustände",
+          "snippet": "import { Component } from '@angular/core';\nimport { ChipComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ChipComponent],\n  template: `\n    <div style=\"display:flex;gap:12px;flex-wrap:wrap;align-items:center\">\n        <cds-chip label=\"Inaktiv\"></cds-chip>\n        <cds-chip label=\"Aktiv\" [pressed]=\"true\"></cds-chip>\n        <cds-chip area=\"co\" label=\"Corporate\"></cds-chip>\n        <cds-chip area=\"ki\" label=\"AI.Applied\" [pressed]=\"true\"></cds-chip>\n    </div>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-chips-badges-pills-pill.json

@@ -0,0 +1,21 @@
+{
+  "components": {
+    "komponenten-chips-badges-pills-pill": {
+      "id": "komponenten-chips-badges-pills-pill",
+      "name": "PillComponent",
+      "path": "./src/lib/pill/pill.stories.ts",
+      "stories": {
+        "komponenten-chips-badges-pills-pill--interaktiv": {
+          "id": "komponenten-chips-badges-pills-pill--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { PillComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [PillComponent],\n  template: `<cds-pill [label]=\"'Angewandte KI'\" [area]=\"'ki'\" />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-chips-badges-pills-pill--bereiche": {
+          "id": "komponenten-chips-badges-pills-pill--bereiche",
+          "name": "Bereiche",
+          "snippet": "import { Component } from '@angular/core';\nimport { PillComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [PillComponent],\n  template: `\n    <div style=\"display:flex;gap:12px;flex-wrap:wrap;align-items:center\">\n        <cds-pill area=\"co\" label=\"Corporate\"></cds-pill>\n        <cds-pill area=\"ki\" label=\"Angewandte KI\"></cds-pill>\n        <cds-pill area=\"es\" label=\"Effektive Software\"></cds-pill>\n        <cds-pill area=\"wo\" label=\"Wirksame Organisationen\"></cds-pill>\n    </div>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-chips-badges-pills-status-badge.json

@@ -0,0 +1,21 @@
+{
+  "components": {
+    "komponenten-chips-badges-pills-status-badge": {
+      "id": "komponenten-chips-badges-pills-status-badge",
+      "name": "StatusBadgeComponent",
+      "path": "./src/lib/status-badge/status-badge.stories.ts",
+      "stories": {
+        "komponenten-chips-badges-pills-status-badge--interaktiv": {
+          "id": "komponenten-chips-badges-pills-status-badge--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { StatusBadgeComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [StatusBadgeComponent],\n  template: `<cds-status-badge [label]=\"'Live'\" [tone]=\"'ok'\" />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-chips-badges-pills-status-badge--toene": {
+          "id": "komponenten-chips-badges-pills-status-badge--toene",
+          "name": "Alle Töne",
+          "snippet": "import { Component } from '@angular/core';\nimport { StatusBadgeComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [StatusBadgeComponent],\n  template: `\n    <div style=\"display:flex;gap:12px;flex-wrap:wrap;align-items:center\">\n        <cds-status-badge tone=\"ok\" label=\"Live\"></cds-status-badge>\n        <cds-status-badge tone=\"warn\" label=\"Beta\"></cds-status-badge>\n        <cds-status-badge tone=\"err\" label=\"Deprecated\"></cds-status-badge>\n        <cds-status-badge tone=\"neu\" label=\"Draft\"></cds-status-badge>\n    </div>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-code-block-code-block.json

@@ -0,0 +1,26 @@
+{
+  "components": {
+    "komponenten-code-block-code-block": {
+      "id": "komponenten-code-block-code-block",
+      "name": "CodeBlockComponent",
+      "path": "./src/lib/code-block/code-block.stories.ts",
+      "stories": {
+        "komponenten-code-block-code-block--interaktiv": {
+          "id": "komponenten-code-block-code-block--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { CodeBlockComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CodeBlockComponent],\n  template: `\n    <cds-code-block\n        [lang]=\"'HTML'\"\n        [code]=\"'<button class=&quot;btn btn-filled btn-co&quot;>Kontakt</button>'\"\n        [terminal]=\"false\"\n        [copyable]=\"true\"\n    />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-code-block-code-block--terminal": {
+          "id": "komponenten-code-block-code-block--terminal",
+          "name": "Terminal",
+          "snippet": "import { Component } from '@angular/core';\nimport { CodeBlockComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CodeBlockComponent],\n  template: `\n    <cds-code-block\n        [lang]=\"'bash'\"\n        [code]=\"'npm install\\\\nnpm run storybook'\"\n        [terminal]=\"true\"\n        [copyable]=\"true\"\n    />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-code-block-code-block--kopier-button": {
+          "id": "komponenten-code-block-code-block--kopier-button",
+          "name": "Kopier-Button",
+          "snippet": "import { Component } from '@angular/core';\nimport { CodeBlockComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CodeBlockComponent],\n  template: `\n    <cds-code-block\n        [lang]=\"'HTML'\"\n        [code]=\"'<button class=&quot;btn btn-filled btn-co&quot;>Kontakt</button>'\"\n        [terminal]=\"false\"\n        [copyable]=\"true\"\n    />`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-dropdowns-combobox.json

@@ -0,0 +1,37 @@
+{
+  "components": {
+    "komponenten-dropdowns-combobox": {
+      "id": "komponenten-dropdowns-combobox",
+      "name": "ComboboxComponent",
+      "path": "./src/lib/combobox/combobox.stories.ts",
+      "stories": {
+        "komponenten-dropdowns-combobox--interaktiv": {
+          "id": "komponenten-dropdowns-combobox--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { ComboboxComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ComboboxComponent],\n  template: `\n    <cds-combobox\n        [label]=\"'Thema'\"\n        [options]=\"[{value: 'ki', label: 'Angewandte KI'}, {value: 'es', label: 'Effektive Software'}, {value: 'wo', label: 'Wirksame Organisationen'}, {value: 'strategie', label: 'Strategie-Workshop'}, {value: 'daten', label: 'Datenanalyse & Reporting'}, {value: 'auto', label: 'Prozessautomatisierung'}, {value: 'cloud', label: 'Cloud-Migration'}, {value: 'change', label: 'Change-Begleitung'}, {value: 'training', label: 'Schulung & Training'}, {value: 'presse', label: 'Presse & Medien'}]\"\n        [placeholder]=\"'Thema suchen…'\"\n        [emptyText]=\"'Kein Thema gefunden'\"\n        [area]=\"'es'\"\n        [multi]=\"false\"\n        [disabled]=\"false\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n        (valuesChange)=\"valuesChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n  valuesChange(event: unknown) {}\n}"
+        },
+        "komponenten-dropdowns-combobox--tastatur": {
+          "id": "komponenten-dropdowns-combobox--tastatur",
+          "name": "Tastatur",
+          "snippet": "import { Component } from '@angular/core';\nimport { ComboboxComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ComboboxComponent],\n  template: `\n    <cds-combobox\n        [label]=\"'Interessen'\"\n        [options]=\"[{value: 'ki', label: 'Künstliche Intelligenz'}, {value: 'rag', label: 'LLM & RAG'}, {value: 'ds', label: 'Design Systems'}, {value: 'cloud', label: 'Cloud & DevOps'}, {value: 'scrum', label: 'Agile & Scrum'}, {value: 'okr', label: 'OKR & Strategie'}, {value: 'change', label: 'Change-Management'}, {value: 'ux', label: 'UX & Forschung'}]\"\n        [placeholder]=\"'Hinzufügen…'\"\n        [emptyText]=\"'Kein Thema gefunden'\"\n        [area]=\"'wo'\"\n        [multi]=\"true\"\n        [disabled]=\"false\"\n        [values]=\"[]\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n        (valuesChange)=\"valuesChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n  valuesChange(event: unknown) {}\n}"
+        },
+        "komponenten-dropdowns-combobox--multi-select": {
+          "id": "komponenten-dropdowns-combobox--multi-select",
+          "name": "Multi-Select",
+          "snippet": "import { Component } from '@angular/core';\nimport { ComboboxComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ComboboxComponent],\n  template: `\n    <cds-combobox\n        [label]=\"'Interessen'\"\n        [options]=\"[{value: 'ki', label: 'Künstliche Intelligenz'}, {value: 'rag', label: 'LLM & RAG'}, {value: 'ds', label: 'Design Systems'}, {value: 'cloud', label: 'Cloud & DevOps'}, {value: 'scrum', label: 'Agile & Scrum'}, {value: 'okr', label: 'OKR & Strategie'}, {value: 'change', label: 'Change-Management'}, {value: 'ux', label: 'UX & Forschung'}]\"\n        [placeholder]=\"'Hinzufügen…'\"\n        [emptyText]=\"'Kein Thema gefunden'\"\n        [area]=\"'wo'\"\n        [multi]=\"true\"\n        [disabled]=\"false\"\n        [values]=\"['ki', 'ds', 'ux']\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n        (valuesChange)=\"valuesChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n  valuesChange(event: unknown) {}\n}"
+        },
+        "komponenten-dropdowns-combobox--multi-select-hinzufuegen": {
+          "id": "komponenten-dropdowns-combobox--multi-select-hinzufuegen",
+          "name": "Multi-Select · Hinzufügen",
+          "snippet": "import { Component } from '@angular/core';\nimport { ComboboxComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ComboboxComponent],\n  template: `\n    <cds-combobox\n        [label]=\"'Interessen'\"\n        [options]=\"[{value: 'ki', label: 'Künstliche Intelligenz'}, {value: 'rag', label: 'LLM & RAG'}, {value: 'ds', label: 'Design Systems'}, {value: 'cloud', label: 'Cloud & DevOps'}, {value: 'scrum', label: 'Agile & Scrum'}, {value: 'okr', label: 'OKR & Strategie'}, {value: 'change', label: 'Change-Management'}, {value: 'ux', label: 'UX & Forschung'}]\"\n        [placeholder]=\"'Hinzufügen…'\"\n        [emptyText]=\"'Kein Thema gefunden'\"\n        [area]=\"'wo'\"\n        [multi]=\"true\"\n        [disabled]=\"false\"\n        [values]=\"['ki', 'ds']\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n        (valuesChange)=\"valuesChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n  valuesChange(event: unknown) {}\n}"
+        },
+        "komponenten-dropdowns-combobox--formularbindung": {
+          "id": "komponenten-dropdowns-combobox--formularbindung",
+          "name": "Formularbindung",
+          "snippet": "import { Component } from '@angular/core';\nimport { ComboboxComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ComboboxComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:var(--s3);max-width:28rem\">\n        <cds-combobox\n            label=\"Thema\"\n            [options]=\"options\"\n            [formControl]=\"ctrl\">\n        </cds-combobox>\n        <p style=\"font:14px/1.4 system-ui,sans-serif;margin:0\">\n            Wert:\n            <strong>{{ ctrl.value || '—' }}</strong>\n        </p>\n    </div>`,\n})\nexport class DemoComponent {\n  options = [{value: 'ki', label: 'Angewandte KI'}, {value: 'es', label: 'Effektive Software'}, {value: 'wo', label: 'Wirksame Organisationen'}, {value: 'strategie', label: 'Strategie-Workshop'}, {value: 'daten', label: 'Datenanalyse & Reporting'}, {value: 'auto', label: 'Prozessautomatisierung'}, {value: 'cloud', label: 'Cloud-Migration'}, {value: 'change', label: 'Change-Begleitung'}, {value: 'training', label: 'Schulung & Training'}, {value: 'presse', label: 'Presse & Medien'}];\n}",
+          "warning": "Incomplete snippet: `ctrl` could not be provided, since the story declares no such arg."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-dropdowns-custom-select.json

@@ -0,0 +1,37 @@
+{
+  "components": {
+    "komponenten-dropdowns-custom-select": {
+      "id": "komponenten-dropdowns-custom-select",
+      "name": "SelectComponent",
+      "path": "./src/lib/select/select.stories.ts",
+      "stories": {
+        "komponenten-dropdowns-custom-select--interaktiv": {
+          "id": "komponenten-dropdowns-custom-select--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { SelectComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SelectComponent],\n  template: `\n    <cds-select\n        [label]=\"'Bereich'\"\n        [options]=\"[{value: 'co', label: 'Corporate'}, {value: 'ki', label: 'Angewandte KI'}, {value: 'es', label: 'Effektive Software'}, {value: 'wo', label: 'Wirksame Organisationen'}]\"\n        [placeholder]=\"'Bitte wählen…'\"\n        [area]=\"undefined\"\n        [disabled]=\"false\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-dropdowns-custom-select--geoeffnet": {
+          "id": "komponenten-dropdowns-custom-select--geoeffnet",
+          "name": "Geöffnet · vorausgewählt",
+          "snippet": "import { Component } from '@angular/core';\nimport { SelectComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SelectComponent],\n  template: `\n    <cds-select\n        [label]=\"'Anwendungsfall'\"\n        [options]=\"[{value: 'co', label: 'Corporate'}, {value: 'ki', label: 'Angewandte KI'}, {value: 'es', label: 'Effektive Software'}, {value: 'wo', label: 'Wirksame Organisationen'}]\"\n        [placeholder]=\"'Bitte wählen…'\"\n        [area]=\"'ki'\"\n        [disabled]=\"false\"\n        [value]=\"'ki'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-dropdowns-custom-select--deaktiviert": {
+          "id": "komponenten-dropdowns-custom-select--deaktiviert",
+          "name": "Deaktiviert",
+          "snippet": "import { Component } from '@angular/core';\nimport { SelectComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SelectComponent],\n  template: `\n    <cds-select\n        [label]=\"'Bereich'\"\n        [options]=\"[{value: 'co', label: 'Corporate'}, {value: 'ki', label: 'Angewandte KI'}, {value: 'es', label: 'Effektive Software'}, {value: 'wo', label: 'Wirksame Organisationen'}]\"\n        [placeholder]=\"'Bitte wählen…'\"\n        [area]=\"undefined\"\n        [disabled]=\"true\"\n        [value]=\"'co'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-dropdowns-custom-select--tastatur": {
+          "id": "komponenten-dropdowns-custom-select--tastatur",
+          "name": "Tastatur",
+          "snippet": "import { Component } from '@angular/core';\nimport { SelectComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SelectComponent],\n  template: `\n    <cds-select\n        [label]=\"'Bereich'\"\n        [options]=\"[{value: 'co', label: 'Corporate'}, {value: 'ki', label: 'Angewandte KI'}, {value: 'es', label: 'Effektive Software'}, {value: 'wo', label: 'Wirksame Organisationen'}]\"\n        [placeholder]=\"'Bitte wählen…'\"\n        [area]=\"undefined\"\n        [disabled]=\"false\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-dropdowns-custom-select--formularbindung": {
+          "id": "komponenten-dropdowns-custom-select--formularbindung",
+          "name": "Formularbindung",
+          "snippet": "import { Component } from '@angular/core';\nimport { SelectComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SelectComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:var(--s3);max-width:28rem\">\n        <cds-select\n            label=\"Bereich\"\n            [options]=\"options\"\n            [formControl]=\"ctrl\">\n        </cds-select>\n        <p style=\"font:14px/1.4 system-ui,sans-serif;margin:0\">\n            Wert:\n            <strong>{{ ctrl.value || '—' }}</strong>\n        </p>\n    </div>`,\n})\nexport class DemoComponent {\n  options = [{value: 'co', label: 'Corporate'}, {value: 'ki', label: 'Angewandte KI'}, {value: 'es', label: 'Effektive Software'}, {value: 'wo', label: 'Wirksame Organisationen'}];\n}",
+          "warning": "Incomplete snippet: `ctrl` could not be provided, since the story declares no such arg."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-feedback-snackbar.json

@@ -0,0 +1,27 @@
+{
+  "components": {
+    "komponenten-feedback-snackbar": {
+      "id": "komponenten-feedback-snackbar",
+      "name": "SnackbarComponent",
+      "path": "./src/lib/snackbar/snackbar.stories.ts",
+      "stories": {
+        "komponenten-feedback-snackbar--interaktiv": {
+          "id": "komponenten-feedback-snackbar--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { SnackbarComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SnackbarComponent],\n  template: `\n    <cds-snackbar\n        [message]=\"'Formular gespeichert, noch nicht abgesendet.'\"\n        [tone]=\"'def'\"\n        [actionLabel]=\"'Jetzt senden'\"\n        (action)=\"action($event)\"\n    />`,\n})\nexport class DemoComponent {\n  action(event: unknown) {}\n}"
+        },
+        "komponenten-feedback-snackbar--aktions-button": {
+          "id": "komponenten-feedback-snackbar--aktions-button",
+          "name": "Aktions-Button",
+          "snippet": "import { Component } from '@angular/core';\nimport { SnackbarComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SnackbarComponent],\n  template: `\n    <cds-snackbar\n        [message]=\"'Formular gespeichert, noch nicht abgesendet.'\"\n        [tone]=\"'def'\"\n        [actionLabel]=\"'Jetzt senden'\"\n        (action)=\"action($event)\"\n    />`,\n})\nexport class DemoComponent {\n  action(event: unknown) {}\n}",
+          "warning": "Incomplete snippet: `fn()` could not be resolved statically."
+        },
+        "komponenten-feedback-snackbar--toene": {
+          "id": "komponenten-feedback-snackbar--toene",
+          "name": "Töne",
+          "snippet": "import { Component } from '@angular/core';\nimport { SnackbarComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SnackbarComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:12px;align-items:flex-start\">\n        <cds-snackbar\n            tone=\"def\"\n            message=\"Formular gespeichert, noch nicht abgesendet.\"\n            actionLabel=\"Jetzt senden\">\n        </cds-snackbar>\n        <cds-snackbar\n            tone=\"ok\"\n            message=\"Änderungen erfolgreich gespeichert.\"\n            actionLabel=\"Rückgängig\">\n        </cds-snackbar>\n        <cds-snackbar\n            tone=\"err\"\n            message=\"Speichern fehlgeschlagen.\"\n            actionLabel=\"Erneut versuchen\">\n        </cds-snackbar>\n    </div>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-footer-komplett.json

@@ -0,0 +1,22 @@
+{
+  "components": {
+    "komponenten-footer-komplett": {
+      "id": "komponenten-footer-komplett",
+      "name": "FooterComponent",
+      "path": "./src/lib/footer/footer.stories.ts",
+      "stories": {
+        "komponenten-footer-komplett--website-footer": {
+          "id": "komponenten-footer-komplett--website-footer",
+          "name": "Website-Footer",
+          "snippet": "import { Component } from '@angular/core';\nimport { FooterComponent } from '@conciso/design-system-angular';\nimport { FooterMainComponent, FooterBottomComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FooterComponent, FooterMainComponent, FooterBottomComponent],\n  template: `\n    <cds-footer>\n        <cds-footer-main>\n            <div>\n                <div class=\"footer-brand\">Conciso GmbH</div>\n                <address class=\"footer-address\">\n                    <p>\n                        Pariser Bogen 7\n                        <br />\n                        44269 Dortmund\n                    </p>\n                    <p>\n                        Tel.:\n                        <a\n                            class=\"footer-link\"\n                            href=\"tel:+492312261750\">\n                            +49 231 226175-0\n                        </a>\n                        <br />\n                        E-Mail:\n                        <a\n                            class=\"footer-link\"\n                            href=\"mailto:info@conciso.de\">\n                            info&#64;conciso.de\n                        </a>\n                    </p>\n                </address>\n            </div>\n            <div>\n                <h3 class=\"footer-htitle\">Wichtige Inhalte</h3>\n                <ul class=\"footer-nav-list\">\n                    <li>\n                        <a class=\"footer-link\" href=\"#\">Angewandte KI</a>\n                    </li>\n                    <li>\n                        <a class=\"footer-link\" href=\"#\">Effektive Software</a>\n                    </li>\n                    <li>\n                        <a class=\"footer-link\" href=\"#\">Wirksame Organisationen</a>\n                    </li>\n                    <li>\n                        <a class=\"footer-link\" href=\"#\">Beiträge</a>\n                    </li>\n                    <li>\n                        <a class=\"footer-link\" href=\"#\">Kontakt</a>\n                    </li>\n                </ul>\n            </div>\n            <div>\n                <h3 class=\"footer-htitle\">Contentletter abonnieren</h3>\n                <p\n                    class=\"footer-newsletter-desc\">\n                    Alle drei Monate neue Beiträge direkt ins Postfach.\n                </p>\n                <form\n                    class=\"footer-newsletter-form\"\n                    aria-label=\"Contentletter abonnieren\">\n                    <label class=\"footer-field\">\n                        <span class=\"footer-field-label\">\n                            Deine E-Mail\n                            <span class=\"req\" aria-hidden=\"true\">*</span>\n                        </span>\n                        <input\n                            type=\"email\"\n                            placeholder=\"name@unternehmen.de\"\n                            aria-required=\"true\"\n                            autocomplete=\"email\"\n                            required />\n                    </label>\n                    <label class=\"footer-newsletter-consent\">\n                        <input type=\"checkbox\" required />\n                        <span>\n                            Einverstanden mit den\n                            <a class=\"body-link\" href=\"#\">Datenschutzhinweisen</a>\n                        </span>\n                    </label>\n                    <button\n                        type=\"submit\"\n                        class=\"btn btn-filled btn-co\">\n                        Abonnieren\n                    </button>\n                </form>\n            </div>\n        </cds-footer-main>\n        <cds-footer-bottom></cds-footer-bottom>\n    </cds-footer>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-footer-komplett--app-footer": {
+          "id": "komponenten-footer-komplett--app-footer",
+          "name": "App-Footer (schlank)",
+          "snippet": "import { Component } from '@angular/core';\nimport { FooterComponent } from '@conciso/design-system-angular';\nimport { FooterMainComponent, FooterBottomComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FooterComponent, FooterMainComponent, FooterBottomComponent],\n  template: `\n    <cds-footer>\n        <cds-footer-bottom\n            copyright=\"© 2026 Conciso GmbH\"\n            version=\"Version 1.4.2\"\n            [support]=\"support\"\n            [legalLinks]=\"legal\"\n            [socialLinks]=\"[]\">\n        </cds-footer-bottom>\n    </cds-footer>`,\n})\nexport class DemoComponent {}",
+          "warning": "Incomplete snippet: `support`, `legal` could not be provided, since the story declares no such arg."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-footer-oberer-teil.json

@@ -0,0 +1,21 @@
+{
+  "components": {
+    "komponenten-footer-oberer-teil": {
+      "id": "komponenten-footer-oberer-teil",
+      "name": "FooterMainComponent",
+      "path": "./src/lib/footer/footer-main.stories.ts",
+      "stories": {
+        "komponenten-footer-oberer-teil--interaktiv": {
+          "id": "komponenten-footer-oberer-teil--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { FooterMainComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FooterMainComponent],\n  template: `\n    <cds-footer-main [columns]=\"columns\">\n        <div>\n            <h3 class=\"footer-htitle\">Produkt</h3>\n            <ul class=\"footer-nav-list\">\n                <li>\n                    <a class=\"footer-link\" href=\"#\">Funktionen</a>\n                </li>\n                <li>\n                    <a class=\"footer-link\" href=\"#\">Preise</a>\n                </li>\n                <li>\n                    <a class=\"footer-link\" href=\"#\">Roadmap</a>\n                </li>\n            </ul>\n        </div>\n        <div>\n            <h3 class=\"footer-htitle\">Ressourcen</h3>\n            <ul class=\"footer-nav-list\">\n                <li>\n                    <a class=\"footer-link\" href=\"#\">Dokumentation</a>\n                </li>\n                <li>\n                    <a class=\"footer-link\" href=\"#\">Beiträge</a>\n                </li>\n                <li>\n                    <a class=\"footer-link\" href=\"#\">Status</a>\n                </li>\n            </ul>\n        </div>\n        <div>\n            <h3 class=\"footer-htitle\">Kontakt</h3>\n            <address class=\"footer-address\">\n                <p>\n                    Pariser Bogen 7\n                    <br />\n                    44269 Dortmund\n                </p>\n                <p>\n                    E-Mail:\n                    <a\n                        class=\"footer-link\"\n                        href=\"mailto:info@conciso.de\">\n                        info&#64;conciso.de\n                    </a>\n                </p>\n            </address>\n        </div>\n    </cds-footer-main>`,\n})\nexport class DemoComponent {\n  columns = undefined;\n}"
+        },
+        "komponenten-footer-oberer-teil--vier-spalten": {
+          "id": "komponenten-footer-oberer-teil--vier-spalten",
+          "name": "Vier Spalten (columns)",
+          "snippet": "import { Component } from '@angular/core';\nimport { FooterMainComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FooterMainComponent],\n  template: `\n    <cds-footer-main columns=\"repeat(4, 1fr)\">\n        @for (col of ['Produkt', 'Lösungen', 'Ressourcen', 'Unternehmen']; track col) {\n        <div>\n            <h3 class=\"footer-htitle\">{{ col }}</h3>\n            <ul class=\"footer-nav-list\">\n                <li>\n                    <a class=\"footer-link\" href=\"#\">Link A</a>\n                </li>\n                <li>\n                    <a class=\"footer-link\" href=\"#\">Link B</a>\n                </li>\n            </ul>\n        </div>\n        }\n    </cds-footer-main>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-footer-unterer-teil.json

@@ -0,0 +1,32 @@
+{
+  "components": {
+    "komponenten-footer-unterer-teil": {
+      "id": "komponenten-footer-unterer-teil",
+      "name": "FooterBottomComponent",
+      "path": "./src/lib/footer/footer-bottom.stories.ts",
+      "stories": {
+        "komponenten-footer-unterer-teil--interaktiv": {
+          "id": "komponenten-footer-unterer-teil--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { FooterBottomComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FooterBottomComponent],\n  template: `\n    <cds-footer-bottom\n        [copyright]=\"'© 2026 Conciso GmbH · Dortmund'\"\n        [legalLinks]=\"[{label: 'Datenschutz', href: '#'}, {label: 'Impressum', href: '#'}]\"\n        [socialLinks]=\"[{platform: 'linkedin', href: '#'}, {platform: 'youtube', href: '#'}]\"\n    />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-footer-unterer-teil--mit-version-support": {
+          "id": "komponenten-footer-unterer-teil--mit-version-support",
+          "name": "Mit Version & Support",
+          "snippet": "import { Component } from '@angular/core';\nimport { FooterBottomComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FooterBottomComponent],\n  template: `\n    <cds-footer-bottom\n        [copyright]=\"'© 2026 Conciso GmbH'\"\n        [legalLinks]=\"[{label: 'Datenschutz', href: '#'}, {label: 'Impressum', href: '#'}]\"\n        [socialLinks]=\"[]\"\n        [version]=\"'Version 1.4.2'\"\n        [support]=\"{label: 'Support', href: '#'}\"\n    />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-footer-unterer-teil--eigene-social-links": {
+          "id": "komponenten-footer-unterer-teil--eigene-social-links",
+          "name": "Eigene Social-Links",
+          "snippet": "import { Component } from '@angular/core';\nimport { FooterBottomComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FooterBottomComponent],\n  template: `\n    <cds-footer-bottom\n        [copyright]=\"'© 2026 Conciso GmbH · Dortmund'\"\n        [legalLinks]=\"[{label: 'Datenschutz', href: '#'}, {label: 'Impressum', href: '#'}]\"\n        [socialLinks]=\"[{\n      platform: 'linkedin',\n      href: 'https://www.linkedin.com/company/conciso',\n    }, {\n      label: 'GitHub',\n      href: 'https://github.com/conciso',\n      iconPath: GITHUB_ICON,\n    }]\"\n    />`,\n})\nexport class DemoComponent {}",
+          "warning": "Incomplete snippet: `GITHUB_ICON`, `[{ platform: 'linkedin', href: 'https://www.linkedin.com/company/conciso' }, { label: 'GitHub', href: 'https://github.com/conciso', iconPath: GITHUB_ICON }]` could not be resolved statically."
+        },
+        "komponenten-footer-unterer-teil--doppelte-labels": {
+          "id": "komponenten-footer-unterer-teil--doppelte-labels",
+          "name": "Doppelte Labels",
+          "snippet": "import { Component } from '@angular/core';\nimport { FooterBottomComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [FooterBottomComponent],\n  template: `\n    <cds-footer-bottom\n        [copyright]=\"'© 2026 Conciso GmbH · Dortmund'\"\n        [legalLinks]=\"[{label: 'Datenschutz', href: '#datenschutz-website'}, {label: 'Datenschutz', href: '#datenschutz-bewerbung'}]\"\n        [socialLinks]=\"[{platform: 'linkedin', href: '#'}, {platform: 'youtube', href: '#'}]\"\n    />`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}