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

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

@@ -0,0 +1,18 @@
+{
+  "components": {
+    "seitenmuster-wissensbeitrag--übersicht": {
+      "id": "seitenmuster-wissensbeitrag--übersicht",
+      "name": "seitenmuster-wissensbeitrag--übersicht",
+      "docs": {
+        "seitenmuster-wissensbeitrag--übersicht": {
+          "id": "seitenmuster-wissensbeitrag--übersicht",
+          "name": "Übersicht",
+          "path": "./src/docs/seitenmuster/wissensbeitrag.mdx",
+          "title": "Seitenmuster/Wissensbeitrag",
+          "content": "import { Meta } from '@storybook/addon-docs/blocks';\n\n<Meta title=\"Seitenmuster/Wissensbeitrag\" name=\"Übersicht\" tags={['angular']} />\n\n# Wissensbeitrag\n\nPage-Pattern für redaktionelle Beiträge: zentrierter Header (Breadcrumb, Pill, Titel, Lead,\nMeta), 720-px-Spalte für den Lauftext, bereichssensitive Callouts und eine Author-Card am\nEnde. Quelle: `docs/index.html#sec-article`.\n\n## Aufbau\n\nEmpfohlene Sektions-Reihenfolge, dem Lesefluss „Lesen → Vertrauen → Vertiefen → Handeln →\nErkunden“ folgend:\n\n| # | Sektion | Bausteine | Funktion |\n|---|---|---|---|\n| 1 | Topnav | `Komponenten/Navigation/Topnav`, `aria-current=\"page\"` auf „Wissen“ | Globale Navigation, kennzeichnet den Wissens-Bereich |\n| 2 | Article Header | `.article-header` · `Komponenten/Chips, Badges & Pills/Pill` · `.article-meta` | Einordnung, Versprechen und Autor:in |\n| 3 | Hero-Bild | `Komponenten/Hero`, ohne Caption | Visuelles Versprechen ohne Marketing-Overlay |\n| 4 | Article Body | `.article-body` mit Inhaltsverzeichnis, Pull-Quote, `Komponenten/Zitate & Testimonials/Blockquote`, `Komponenten/Tabelle`, `Komponenten/Code-Block/Code-Block`, Callout, Figure | Lauftext mit eingebetteten Spezial-Bausteinen |\n| 5 | Download-CTA | `Komponenten/Call to Action/DownloadCta` in Bereichsfarbe | Topische Verlängerung des Beitrags als PDF oder Asset |\n| 6 | Author-Card | `.author-card` | Glaubwürdigkeit, Übergang zu nächsten Schritten |\n| 7 | Kontaktformular | `Komponenten/Inputs & Forms/Textfeld` (und verwandte Felder) im `.ds-card` mit `Komponenten/Buttons/Button` | High-Intent-Aktion am Punkt höchsten Interesses |\n| 8 | Weiterlesen | `.ep-cards` mit `.ep-card-link` pro Bereich | Sanfte Exit-Rampe in andere Beiträge |\n| 9 | Footer | `Komponenten/Footer` | Globale Navigation und Rechtliches |\n\nDie Sequenz Download-CTA, Author, Formular, Weiterlesen hat sich bewährt: Der Download\nbleibt nah am Inhalt (höchste topische Relevanz), das Formular sitzt am Punkt höchsten\nInteresses, Weiterlesen fängt alle ab, die noch nicht buchen wollen. Weiterlesen nicht vor\ndas Formular setzen, die Karten sind eine Exit-Rampe und führen vom Conversion-Punkt weg.\n\n## Article Header\n\nWrapper `.article-header` bündelt Breadcrumb, optionale Pill, H1, Lead und Meta-Strip auf\neiner zentrierten Achse (max. 880 px), typischerweise direkt unter dem Topnav und über dem\nHero-Bild. Der Meta-Strip trennt Autor-Block und Datum über einen 1-px-Trenner\n(`.article-meta-sep`), die Author-Text-Spalte bleibt linksbündig (`.article-meta-text`),\ndamit Name und Rolle nicht zwischen Avatar und Trenner zerrissen wirken. Das Datum steht als\n`<time datetime=\"JJJJ-MM-TT\">`, maschinenlesbar für Suchmaschinen und Assistenztechnologie.\n\n**Editorial gegen Marketing:** Der Article-Header ist bewusst zentriert\n(`text-align:center`, `max-width:880px`). Marketing-Sektionen wie „Was wir tun“ verwenden\n`.ep-section-*` und sind linksbündig. Editorial-Inhalte sind zum Lesen gedacht, der\nzentrierte Header bildet einen ruhigen Fokuspunkt vor dem 720-px-Lesefluss.\nMarketing-Sektionen sollen scan-tauglich wirken, dafür ist linksbündig die natürliche Wahl.\n\n```html\n<header class=\"article-header\">\n  <nav class=\"article-breadcrumb\" aria-label=\"Breadcrumb\">\n    <a href=\"/wissen\">Wissen</a>\n    <span class=\"article-breadcrumb-sep\" aria-hidden=\"true\">/</span>\n    <a href=\"/ki\">Angewandte KI</a>\n  </nav>\n  <span class=\"pill\" data-area=\"ki\" aria-label=\"Lesezeit 8 Minuten\">8 min Lesezeit</span>\n  <h1 class=\"article-title\">Warum 60 % der KI-Piloten nie in Produktion gehen</h1>\n  <p class=\"article-lead\">Demos überzeugen, Use-Cases scheitern.</p>\n  <div class=\"article-meta\">\n    <div class=\"article-meta-author\">\n      <div class=\"article-avatar\" data-area=\"ki\" aria-hidden=\"true\">LB</div>\n      <div class=\"article-meta-text\">\n        <p class=\"article-meta-name\">Lukas Brandt</p>\n        <p class=\"article-meta-role\">Senior AI Engineer · Conciso</p>\n      </div>\n    </div>\n    <span class=\"article-meta-sep\" aria-hidden=\"true\"></span>\n    <time class=\"article-meta-date\" datetime=\"2026-05-13\">13. Mai 2026</time>\n  </div>\n</header>\n```\n\n## Pill · Lesezeit\n\nIm Wissensbeitrag trägt die Pill (siehe `Komponenten/Chips, Badges & Pills/Pill`)\nausschließlich die Lesezeit. Die Bereichszuordnung übernimmt der Breadcrumb, der\nBereichsname zusätzlich in der Pill wäre Doppelung. Auf Übersichtsseiten trägt die Pill\ndagegen nur den Bereich, Lesezeit und Datum stehen darunter in einer eigenen Meta-Zeile\n(siehe `Seitenmuster/Beitragsübersicht`).\n\n| Constraint | Regel |\n|---|---|\n| Inhalt | Nur Lesezeit (z. B. „8 min Lesezeit“), kein Bereichsname, kein Format, kein Beitragstyp |\n| Bereich | Über `data-area`, nur die drei Disziplinen ki, es, wo. Corporate ist keine Wissens-Kategorie |\n| aria-label | `aria-label=\"Lesezeit X Minuten\"`, schreibt „min“ aus und liefert den Wert eindeutig |\n\n## Inhaltsverzeichnis\n\nAufklappbares Inhaltsverzeichnis für längere Beiträge, sitzt als erstes Element im\n`.article-body`, vor dem Lead-Absatz. Default zugeklappt, damit der Lesefluss ungestört\nbleibt. Implementiert mit nativem `<details>`/`<summary>`, dadurch ohne JavaScript per\nTastatur bedienbar (Enter/Space) und vom Screenreader als Disclosure angesagt. Die\nAnker-Links zeigen auf die `id` der jeweiligen H2 im Body (Konvention `wb-{slug}-{thema}`).\n\n| Faustregel | Empfehlung |\n|---|---|\n| Lesezeit unter 6 min | Kein TOC, Lesefluss schlägt Scanability |\n| Lesezeit 6 bis 10 min | TOC optional, default zugeklappt, Nutzer entscheidet |\n| Lesezeit über 10 min oder Tutorial | TOC empfohlen, gegebenenfalls später als Sticky-Sidebar |\n\n**Designentscheidung, minimaler Stil statt Container:** Das TOC trägt bewusst keine\nContainer-Box (kein Hintergrund, keine Border, kein Radius), nur dünne Trennlinien oben und\nunten. Eine Container-Box mit `n-50`-Hintergrund würde das TOC visuell auf die Stufe eines\nIn-Article-Callouts heben, also wie ein Inhaltselement wirken. Das TOC ist aber ein\nWerkzeug, kein Inhalt, der Beitrag spielt den Star.\n\nDer native Disclosure-Marker wird über `::-webkit-details-marker` und `list-style:none`\nausgeblendet, ein eigener Caret-SVG übernimmt die Funktion (dekorativ, `aria-hidden`).\n\n## Article Body\n\n`.article-body` setzt die Lese-Typografie (`--ty-body-md`, 16 px, `line-height:1.7`) und\ndie Abstände der Block-Kinder (`<p>`, `<h2>`, `<ul>`, `<ol>`), sodass diese ohne\nInline-Styles auskommen. Eingebettete Komponenten (`.bq`, `.tbl`, `.cb-wrap`,\n`.article-callout`) bringen ihre eigenen Abstände mit und überschreiben die Body-Defaults\nnicht.\n\n## In-Article Figure\n\nKlassen-Paar `.article-figure` (Wrapper als `<figure>`) und `.article-figcaption` (als\n`<figcaption>`), ein semantisch standardkonformes figure/figcaption-Pattern. Das Bild\nrendert mit `aspect-ratio:16/9` und `object-fit:cover`, verhindert Layout-Shift beim Laden.\nDie Caption sitzt zentriert darunter in Body-sm mit `text-wrap:balance`.\n\n**Barrierefreiheit, alt gegen figcaption:** Beide Texte tun unterschiedliche Jobs und sollten\nnicht denselben Inhalt tragen, sonst lesen Screenreader doppelt vor.\n\n| Attribut | Rolle |\n|---|---|\n| `alt` | Faktische Bildbeschreibung („was zu sehen ist“), für Screenreader gedacht, visuell unsichtbar |\n| `figcaption` | Redaktionelle Einordnung („was das Bild im Beitrag tut“), sichtbar, wird nach dem Alt-Text vorgelesen |\n\nKontrast: Die Caption nutzt `var(--tx-secondary)` (rund 5,8:1 auf Surface, AA-konform).\n`var(--tx-muted)` ist für inhaltlich essentielle Texte zu hell (rund 2,1:1), nur für\nHilfsangaben geeignet.\n\n```html\n<figure class=\"article-figure\">\n  <img src=\"bild.jpg\" alt=\"Faktische Bildbeschreibung, was zu sehen ist\" loading=\"lazy\">\n  <figcaption class=\"article-figcaption\">Redaktionelle Einordnung, was das Bild zum Beitrag beiträgt.</figcaption>\n</figure>\n```\n\n**Dos**\n- Alt-Text rein faktisch halten, keine Interpretation, keine Pointe.\n- Caption als redaktionellen Mehrwert nutzen, Brücke zwischen Bild und Beitragsthema.\n- `loading=\"lazy\"` für Bilder im Beitragskörper, sie sind below the fold.\n\n**Don'ts**\n- Alt-Text und Caption inhaltlich identisch, Screenreader liest doppelt.\n- `alt=\"\"` bei inhaltlichen Beitragsbildern, nur für rein dekorative Bilder zulässig.\n- Caption in `var(--tx-muted)`, fällt unter WCAG AA, nicht für inhaltliche Texte geeignet.\n\n## In-Article Callout\n\nAside-Block für Praxis-Beispiele, Hinweise oder „In der Realität“-Einschübe im Lauftext.\nHellster Bereichston (50) als Hintergrund, 4-px-linke Border in 500er-Stärke (analog zum\nBlockquote), Eyebrow mit 0,08em Letter-Spacing, 700er-Ton bei co, es, wo, 800er-Ton bei ki\n(KI-700 erreicht 4,4:1 und unterschreitet AA auf Weiß).\n\nAbgrenzung zum Blockquote: Der Callout ist redaktionelle Anmerkung im eigenen Stil, der\nBlockquote ist ein wörtliches Zitat einer benannten Person.\n\n```html\n<aside class=\"article-callout\" data-area=\"ki\">\n  <p class=\"article-callout-eyebrow\">In der Praxis</p>\n  <p>Bei einem mittelständischen Versicherer haben wir vor dem Pilot-Start sechs Wochen lang nur Daten und Prozesse aufgeräumt.</p>\n</aside>\n```\n\n## Pull-Quote gegen Blockquote\n\nZwei Patterns, gleiche typografische Familie, unterschiedlicher Zweck. Die Wahl folgt der\nFrage, wessen Stimme zitiert wird.\n\n**Pull-Quote (`.article-pullquote`):** typografische Hervorhebung eines Satzes aus dem\neigenen Lauftext, ohne Attribution, der Autor zitiert sich nicht selbst, sondern setzt einen\nSchlüsselsatz visuell ab. 4-px-Linksakzent in `{area}-500` (gleicher Akzent wie der\nBlockquote), Serif kursiv, kein Hintergrund, kein Icon, bewusst offen statt umrahmt.\n\n**Blockquote (`.bq`, siehe `Komponenten/Zitate & Testimonials/Blockquote`):** wörtliches\nZitat einer dritten Person, Kund:in, Forschungsstimme, Branchen-Statement, mit Attribution\n(Name plus Rolle), bereichsgetönte Akzent-Box mit Quote-Icon.\n\n```html\n<blockquote class=\"article-pullquote\" data-area=\"ki\">\n  „KI scheitert selten an der Technologie. Sie scheitert an der Prozesslandschaft, in die sie hineingeworfen wird.“\n</blockquote>\n```\n\nFaustregel: Stammt der Satz aus dem eigenen Lauftext und soll nur visuell hervorgehoben\nwerden, gilt die Pull-Quote ohne Attribution. Zitiert der Beitrag eine externe Person\n(Kunde, Studie, Branchen-Statement), gilt der Blockquote mit Name und Rolle. Ein Self-Quote\nim eigenen Beitrag wirkt sonst absurd, der Autor zitiert die Person, die den Beitrag\nschreibt.\n\n## Author Card\n\nBio-Strip am Ende des Beitrags: Avatar (`.article-avatar.article-avatar-lg`) als\nInitialen-Kreis oder mit Foto, daneben der Bio-Text. `data-area` auf `.author-card` färbt\nnur den Avatar, Text-Tokens bleiben neutral, damit der Strip auf jedem Hintergrund\n(typischerweise `var(--n-50)`) lesbar bleibt.\n\n**Avatar-Bild-Konvention:** Als `<img>`-Quelle nur Portraits der Person verwenden, niemals\nBeitrags-Hero-Bilder, Whiteboard-Fotos oder generische Content-Imagery. Ohne verfügbares\nPortrait bleiben die Initialen stehen, der Bereichston liefert dann die visuelle Identität\nsauberer als ein themenfremdes Bild.\n\nSitzt zwischen Article-Body und der nächsten Sektion, mit derselben `max-width` von 720 px\nwie der Article-Body, damit Avatar und Bio auf der gleichen Achse sitzen.\n\n**Barrierefreiheit:** Der Eyebrow („Über den Autor“ / „Über die Autorin“) ist als `<h3>`\nausgezeichnet (eine Ebene unter den H2 des Article-Body), damit die Author-Sektion in der\nHeading-Übersicht von Screenreadern erscheint und per Tastatur direkt anspringbar ist.\n\n```html\n<div class=\"author-card\" data-area=\"ki\">\n  <div class=\"article-avatar article-avatar-lg\" data-area=\"ki\" aria-hidden=\"true\">LB</div>\n  <div>\n    <h3 class=\"author-card-eyebrow\">Über den Autor</h3>\n    <p class=\"author-card-name\">Lukas Brandt</p>\n    <p class=\"author-card-role\">Senior AI Engineer · bei Conciso seit 2019</p>\n    <p class=\"author-card-bio\">Begleitet KI-Projekte von der Strategie bis in die Produktion.</p>\n  </div>\n</div>\n```\n\n## Team-Tile-Grid, rotierender Ausschnitt\n\nAuf der Landing „Wer wir sind“ kommt das Avatar-Pattern reduziert als 4-Kachel-Grid zum\nEinsatz: Foto-Avatar (`.article-avatar.article-avatar-xl`, 160 px) zentriert über Name und\nRolle, keine Bio. Conciso hat rund 70 Mitarbeitende, das Landing-Grid zeigt einen\nrotierenden Ausschnitt, kein vollständiges Roster (das vollständige Roster steht auf der\nÜber-uns-Seite, siehe Team-Roster unten).\n\n**Warum 4 statt 6:** Bei 6 Kacheln in einer Reihe wird jede sehr schmal, Rollen-Labels\nwrappen auf 2 Zeilen und das Foto wirkt klein. 4 Kacheln geben jeder Person 25 statt 16\nProzent der Breite, Rollen bleiben einzeilig, das 160-px-Foto füllt die Kachel präsenter\naus.\n\n**JS-Rotation:** Pro Seitenaufruf werden 4 Mitarbeitende zufällig aus einem Pool von rund 13\nPersonen ausgewählt (Fisher-Yates-Shuffle in `js/main.js`, `data-team-tiles` als Container,\n`data-team-tile` als Slot). Die initial im HTML hinterlegten Werte dienen als JS-off-Fallback,\ndie Seite ist auch ohne JavaScript inhaltlich vollständig. Der Pool spiegelt das\nBereichs-Verhältnis grob wider (4 ki, 4 es, 3 wo, 2 co), damit die zufällige Auswahl nicht\neinseitig wird.\n\n| Aspekt | Regel |\n|---|---|\n| Slot-Anzahl | 4 Tiles in `.layout-grid` mit `.col-3` (Desktop 4 in einer Reihe, Tablet 2×2, Mobile 1×4) |\n| Avatar | `.article-avatar.article-avatar-xl` (160 px) mit Foto-`<img>` als Kind, `object-position` pro Person |\n| Pool-Größe | Rund 12 bis 15 Personen, zu klein wirkt repetitiv, zu groß verwässert das Bereichs-Verhältnis |\n| JS-off | Die initiale HTML-Belegung bleibt sichtbar, Seite ist ohne JavaScript vollständig |\n| A11y | Avatar bleibt `aria-hidden=\"true\"`, Name und Rolle sind echte `<p>`-Elemente |\n\n## Team-Roster, vollständige Aufstellung nach Bereichen\n\nAuf der Über-uns-Seite steht statt des rotierenden Ausschnitts das vollständige Team,\ngegliedert nach organisatorischen Gruppen (Geschäftsführung & Partner, People und Topic\nLeads, Marketing & Vertrieb, HR & Recruiting). Jede Gruppe trägt eine `<h3>`-Überschrift mit\nunterer Haarlinie, darunter ein `.layout-grid` aus `.col-3`-Tiles im selben Aufbau wie das\nLanding-Grid.\n\n**Keine JS-Rotation:** Das Roster nutzt bewusst nicht `data-team-tiles`/`data-team-tile`. Es\nzeigt die Mannschaft vollständig und in fester Reihenfolge, nicht zufällig gemischt, alle\nTiles stehen statisch im HTML.\n\nFotos sind quadratisch, mindestens 320×320 px (besser 400 bis 480 px für HiDPI), Kopf\nzentriert, da der Kreis die Ecken beschneidet. Fehlt ein Portrait, bleibt der\nInitialen-Kreis als vollwertiger Platzhalter stehen, gemischte Belegung innerhalb einer\nGruppe ist erlaubt.\n\n**Reihenfolge der Gruppen:** von der Leitung (Geschäftsführung & Partner) über die\nfachlichen Köpfe (People und Topic Leads) zu Kontakt- und Support-Funktionen (Vertrieb, dann\nHR). HR steht bewusst zuletzt, direkt vor der Karriere-Sektion, als inhaltliche Brücke.\n\n## Mehrere Autor:innen\n\nBetrifft zwei Stellen: den Meta-Strip im Header (kompakt, Avatar-Stack) und die Author-Card\nam Artikelende (volle Bios, untereinander gestapelt). Die Avatare im Header tragen einen\nweißen Halo-Border, damit die Überlappung als Gruppe lesbar ist.\n\n**Sortierung:** Lead-Autor:in zuerst, danach Co-Autor:innen in Reihenfolge des Beitrags. Die\nReihenfolge gilt konsequent für Avatar-Stack, Namenszeile im Header und Author-Cards am\nEnde. Beim „+N“-Indikator sind die ersten zwei oder drei sichtbaren Personen die\nLead-Persons, nie zufällig ausgewählt.\n\n**Eyebrow-Konvention:** Bei einer Person trägt die Author-Card ihren eigenen Eyebrow (Über\nden Autor / Über die Autorin). Bei mehreren Personen ersetzt eine gemeinsame\nGruppen-Überschrift (`.author-card-group-eyebrow`, „Über die Autor:innen“) über dem Stack\ndie individuellen Eyebrows. So entsteht in der Screenreader-Heading-Übersicht nur ein\nEintrag statt mehrerer identischer.\n\n**Namens-Konvention:** Bei zwei Autor:innen mit „&“ verbinden. Bei drei mit „, “ plus „&“\nvor dem letzten Namen. Ab vier Personen die ersten zwei oder drei nennen, dann „& N\nweitere“ und einen `.article-avatar-more`-Kreis mit der Restzahl ergänzen. Die Rolle wird\nbei gleichem Org-Bezug zu einer Sammelbezeichnung („Conciso-Team“), sonst mit „·“ getrennt.\n\n```html\n<div class=\"article-avatar-stack\" aria-hidden=\"true\">\n  <div class=\"article-avatar\" data-area=\"es\">PM</div>\n  <div class=\"article-avatar\" data-area=\"es\">AR</div>\n  <div class=\"article-avatar\" data-area=\"es\">DH</div>\n  <div class=\"article-avatar-more\">+2</div>\n</div>\n```\n\n**Barrierefreiheit:** Der Avatar-Stack ist dekorativ (`aria-hidden=\"true\"`), die Namen\nstehen vollständig im Text. Der `.article-avatar-more`-Kreis trägt keine Textinformation,\ndie Restzahl steht zusätzlich im Meta-Namen-Text („… & 3 weitere“).\n\n**Ab vier Bios:** Die vertikale Stapelung wird lang. Optionen: Bios kürzer halten, den\nLead-Autor hervorgehoben oben und die übrigen zweispaltig darunter\n(`.author-card-group.is-grid`, dokumentiert unter `Seitenmuster/Seminar · Training`,\nAbschnitt Trainer:innen, weil sie dort und nicht in Wissensbeiträgen vorkommt), oder die\nAuthor-Cards in einer eigenen Team-Sektion bündeln und im Strip nur die Lead-Persons zeigen.\n\n## FAQ-Akkordeon\n\nAufklappbare Frage-Antwort-Liste über natives `<details>`/`<summary>` (standardmäßig zu),\ndieselbe Disclosure-Mechanik wie das Inhaltsverzeichnis. Die Komponente existiert als Story\n`Seitenmuster/Wissensbeitrag/FAQ`, dort dokumentiert, hier nur referenziert und nicht\nnachgebaut. Liest sich am besten im editorialen Zwei-Spalten-Layout: Überschrift im\n`.layout-grid` links (`.col-4`), das FAQ rechts (`.col-8`).\n\n## Story-Zeitstrahl\n\nEditorialer vertikaler Zeitstrahl für Unternehmens-Historie oder mehrstufige Stories\n(erprobt auf Unternehmen · Überblick, „Conciso Story“). Aufbau: `<ul>` mit einer `<li>` je\nStation als zweispaltiges Grid (168px minmax(0,1fr)). Die linke Spalte ist die Schiene\n(`border-right` in `--co-100`) mit Jahr (`--ty-display-sm`, `.t-co`), Kurzlabel und dem\nMarker `.ep-tl-icon`, der auf der Linie sitzt, rechts Titel und Text.\n\n| Baustein | Rolle |\n|---|---|\n| `<ul>` / `<li>` | Stationen-Liste, je Station ein 2-Spalten-Grid (Schiene plus Inhalt) |\n| Schiene | Linke Spalte mit `border-right:2px solid var(--co-100)`, `text-align:right` |\n| `.ep-tl-icon` | 38-px-Marker (Kreis `--co-50`, Icon `--co-800`), sitzt auf der Schiene |\n| Jahr und Label | Jahr `.t-co` / `--ty-display-sm`, Label darunter `--ty-label-xs` uppercase, `tx-muted` |\n| Inhalt | Titel als `<h3>` (`--ty-title-sm`), Text `--ty-body-md` |\n\n**Barrierefreiheit und Dark-Mode:** Echte Liste, Marker-Icon dekorativ (`aria-hidden=\"true\"`\nplus `focusable=\"false\"`), die Jahreszahl trägt die Information als Text. Im Dark wird der\nMarker-Glyph auf `--co-100` gehoben (sonst dunkel auf dunkel), das `.t-co`-Jahr flippt auf\n`co-200`. Standard-Bereichsfarbe ist co, der `.ep-tl-icon`-Marker ist aktuell co-fix, nicht\n`data-area`-parametrisiert.\n\n## Verwendung\n\nDer Wissensbeitrag ist als Komposition gedacht: Die `.article-*`- und `.author-card`-Klassen\nliefern den redaktionellen Rahmen, die Inhalte werden mit bestehenden Komponenten gefüllt\n(siehe Aufbau oben für die vollständige Sektions-Reihenfolge und Begründung der Sequenz).\n",
+          "summary": "# Wissensbeitrag Page-Pattern für redaktionelle Beiträge: zentrierter Header (Breadcrumb, ..."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/grundlagen-farben.json

@@ -0,0 +1,3 @@
+{
+  "components": {}
+}

package/snapshot/services/core/docgen/grundlagen-typografie.json

@@ -0,0 +1,3 @@
+{
+  "components": {}
+}

package/snapshot/services/core/docgen/komponenten-buttons-button.json

@@ -0,0 +1,183 @@
+{
+  "components": {
+    "komponenten-buttons-button": {
+      "id": "komponenten-buttons-button",
+      "name": "ButtonComponent",
+      "path": "./src/lib/button/button.stories.ts",
+      "description": "Button — dünner Angular-Wrapper um die bestehende `.btn`-CSS-Familie.\n\nErfindet KEINE Styles: setzt ausschließlich die im Design System vorhandenen\nKlassen (.btn, .btn-filled/.btn-tonal/.btn-elevated/.btn-outlined/.btn-text,\n.btn-sm/.btn-lg, .btn-co/.btn-ki/.btn-es/.btn-wo, .btn-full, .btn-on-band)\nzusammen. Siehe css/components.css → „Buttons“. Der Klick wird als `clicked`\nausgegeben (für Nutzung außerhalb reiner Formular-Submits).",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → .btn-co / .btn-ki / .btn-es / .btn-wo",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {
+              "summary": "co"
+            }
+          }
+        },
+        "disabled": {
+          "name": "disabled",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        },
+        "full": {
+          "name": "full",
+          "description": "Volle Breite → .btn-full (Host wird block, damit 100% greifen).",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        },
+        "label": {
+          "name": "label",
+          "description": "Sichtbarer Text des Buttons.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": "Button"
+            }
+          }
+        },
+        "size": {
+          "name": "size",
+          "description": "Größe → .btn-sm / (md = Default) / .btn-lg",
+          "type": {
+            "name": "enum",
+            "value": [
+              "sm",
+              "md",
+              "lg"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsButtonSize"
+            },
+            "defaultValue": {
+              "summary": "md"
+            }
+          }
+        },
+        "type": {
+          "name": "type",
+          "type": {
+            "name": "enum",
+            "value": [
+              "button",
+              "submit",
+              "reset"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "\"button\" | \"submit\" | \"reset\""
+            },
+            "defaultValue": {
+              "summary": "button"
+            }
+          }
+        },
+        "variant": {
+          "name": "variant",
+          "description": "Visuelle Variante → .btn-filled / .btn-tonal / .btn-elevated / .btn-outlined /\n .btn-text; `filled-on-band` → .btn-filled + .btn-on-band (invertiert).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "filled",
+              "tonal",
+              "elevated",
+              "outlined",
+              "text",
+              "filled-on-band"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsButtonVariant"
+            },
+            "defaultValue": {
+              "summary": "filled"
+            }
+          }
+        },
+        "clicked": {
+          "name": "clicked",
+          "description": "Klick auf den Button (feuert nicht, wenn `disabled`).",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "clicked",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "MouseEvent"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type ButtonComponentInputs = {\n  /**\n   * Markenbereich → .btn-co / .btn-ki / .btn-es / .btn-wo\n   *\n   * @default co\n   */\n  area?: CdsArea;\n  /** @default false */\n  disabled?: boolean;\n  /**\n   * Volle Breite → .btn-full (Host wird block, damit 100% greifen).\n   *\n   * @default false\n   */\n  full?: boolean;\n  /**\n   * Sichtbarer Text des Buttons.\n   *\n   * @default Button\n   */\n  label?: string;\n  /**\n   * Größe → .btn-sm / (md = Default) / .btn-lg\n   *\n   * @default md\n   */\n  size?: CdsButtonSize;\n  /** @default button */\n  type?: \"button\" | \"submit\" | \"reset\";\n  /**\n   * Visuelle Variante → .btn-filled / .btn-tonal / .btn-elevated / .btn-outlined /\n   *  .btn-text; `filled-on-band` → .btn-filled + .btn-on-band (invertiert).\n   *\n   * @default filled\n   */\n  variant?: CdsButtonVariant;\n}\n```\n\n## Outputs\n\n```\nexport type ButtonComponentOutputs = {\n  /** Klick auf den Button (feuert nicht, wenn `disabled`). */\n  clicked: MouseEvent;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "ButtonComponent",
+        "selector": "cds-button",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "disabled",
+          "full",
+          "label",
+          "size",
+          "type",
+          "variant"
+        ],
+        "outputs": [
+          "clicked"
+        ],
+        "enums": []
+      }
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+{
+  "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",
+      "description": "CtaBand (`[cdsCtaBand]`) — Wrapper um `.ep-cta-band` aus css/components.css\n(css/components.css:1456, Kopf-Duo `.ep-cta-h2`/`.ep-cta-sub` ebenda): das\nbereichsgefärbte Page-End-CTA-Band, das laut Doku-Site (`docs/index.html:6237`,\nAnker `gt-cta-band`) am Ende jeder Customer-Page direkt vor dem Footer steht — die\n„letzte Einladung“, wenn die Nutzerin die Seite durchgelesen hat. Ausgezählt: 22\nVorkommen auf den Beispielseiten, ausnahmslos als `<div class=\"ep-cta-band\"\nstyle=\"background:…\">` mit genau einer Aktion.\n\n**Entscheidung 1 — Attributselektor, kein eigenes Element (ADR-0008, derselbe\n„Fläche am Host“-Fall wie `cds-section`).** `css/components.css` trägt für\n`.ep-cta-band` KEIN `[data-area]` (per Grep geprüft, keine einzige Regel dieser\nForm existiert). Die Bandfläche kommt in allen 22 Vorkommen als Inline-Style\nDIREKT am `.ep-cta-band`-Element (`style=\"background:var(--co-700);color:#fff\"`,\ndocs/index.html:6304 u. a.), dem Bereich der Page folgend, nie aus einem\n`data-area`-Attribut. Ein Element-Selektor würde exakt den in ADR-0008 „Fall 2“\ngemessenen Fehler wiederholen: der `<cds-cta-band>`-Host ist ein unbekanntes\nCustom Element (`display:inline`), sein einziges Kind würde als Block\nherausgebrochen, ein am Host gesetzter Inline-`background` hätte keine eigene Box\nzum Malen. Die Komponente hängt sich deshalb als Attribut an ein vom Konsumenten\ngeschriebenes `<div>` (`<div cdsCtaBand style=\"background:…\">`) — das Element, das\nden Style trägt, und `.ep-cta-band` sind derselbe Knoten. Nur `<div>`, kein\n`<section>`-Zwilling wie bei `cds-section`: alle 22 Vorkommen benutzen\nausnahmslos ein `<div>`, keines variiert das Tag.\n\n**Entscheidung 2 — `area` färbt nur die Aktion, nicht das Band.** Aus demselben\nGrund wie bei `cds-section` (siehe dessen Klassendoku, Entscheidung 2) bleibt die\nBandfläche Sache des Konsumenten: welche Bereichsfarbe ein Band trägt, ist eine\nEntscheidung der Seite (Bereichszugehörigkeit der Customer-Page), keine\nBauteil-Eigenschaft — und das CSS bietet an dieser Klasse ohnehin keinen\n`[data-area]`-Haken an (siehe Entscheidung 1). `area` steuert deshalb\nausschließlich die Button-Farbklasse (`.btn-{area}`), nicht die Füllung des Bands.\n\n**Entscheidung 3 — `.btn-on-band` + `.btn-filled` direkt komponiert, nicht über\n`cds-button` projiziert.** `cds-button` KENNT den Modifier\n(`variant=\"filled-on-band\"`, geprüft über `npx storybook tools docs show --id\nkomponenten-buttons-button` — die Story „Auf Bereichs-Band“ existiert dort\nbereits). Trotzdem baut diese Komponente die `.btn`-Klassen direkt zusammen\n(Präzedenzfall `download-cta.component.ts`), aus einem härteren Grund als dort:\n`cds-button` rendert IMMER ein `<button>` — sein Input-Vertrag\n(`ButtonComponentInputs`) kennt kein `href` — und kann die vom Ticket geforderte\nVerzweigung „`primaryHref` gesetzt → `<a>`“ strukturell gar nicht erfüllen. Ein\nprojiziertes `<cds-button>` brächte hier also kein Custom-Element-Layoutproblem\n(kein Kindselektor an `.ep-cta-band` hängt von der DOM-Tiefe ab), sondern schlicht\ndie falsche Fähigkeit.\n\n**Entscheidung 4 — bewusst nur EINE Aktion, kein `secondaryLabel`.** Eine frühere\nFassung bot `secondaryLabel`/`secondaryHref` an, ungeprüft gegen das Mockup. Beide\nBelege dagegen: erstens zeigt KEINES der 22 `.ep-cta-band`-Vorkommen in\n`docs/index.html` eine zweite Aktion — der Zwei-Aktionen-Fall hat keine Vorlage.\nZweitens (der schwerere Grund) lässt sich eine zweite, optisch zurückhaltendere\nAktion mit den vorhandenen Klassen gar nicht bauen: `.btn-{area}.btn-on-band{color:\n…}` (css/components.css:47–51) überschreibt die Textfarbe JEDER Variante auf den\nBereichston — genau den Ton, den die Doku durchgängig als Bandhintergrund nennt.\nNur `.btn-filled` tauscht zusätzlich die Füllung gegen Weiß; `.btn-outlined`,\n`.btn-tonal` und `.btn-text` blieben transparent und zeigten Text in derselben\nFarbe wie das Band darunter — unsichtbar. Eine zweite Aktion hätte deshalb\nzwangsläufig dieselbe Optik wie die erste getragen, keine Hierarchie, nur zwei\ngleich gewichtete Buttons. Das ist eine CSS-Lücke (kein kontrastsicherer\nsekundärer On-Band-Stil), festgehalten in\n`.scratch/angular-seitenbausteine/issues/16-css-luecke-zweite-aktion-auf-band.md`\n— gemeldet, nicht in diesem Wrapper improvisiert. Solange sie besteht, trägt\n`cds-cta-band` nur eine Aktion; ein Konsument mit echtem Bedarf für eine zweite\nschreibt sie außerhalb der Komponente ins Band hinein (`<ng-content>` gibt es\nhier bewusst nicht, um genau das nicht als unterstützten Pfad zu suggerieren).\nOhne zweite Aktion braucht es auch keinen eigenen Container: die einzelne Aktion\nzentriert sich über das ererbte `.ep-cta-band{text-align:center}` von selbst,\ngenau wie in allen 22 Mockup-Vorkommen — ein zusätzliches Flex-Layout im Wrapper\nhätte eine Darstellung erfunden, die die CSS-Schicht so nicht kennt (ADR-0001;\ndie einzige existierende Deklaration dieser Form ist `.ep-hero-ctas`,\ncss/components.css:1222, eine andere Klasse für einen anderen Bauteiltyp).\n\n**Kein `aria-label` auf der Aktion.** Anders als bei `cds-feature`\n(`ctaAriaLabel`, 11 von 12 Vorkommen mit `aria-label`) zeigt keines der 22\nBand-Vorkommen einen `aria-label` auf seiner Aktion — ausgezählt, nicht\ngeschätzt. Die sichtbaren Texte sind durchgängig konkrete Verben mit Ziel\n(„Termin buchen“, „Gespräch anfragen“, „Offene Stellen ansehen“ …) und stehen je\nSeite nur einmal; anders als bei einer Karten-Liste braucht es hier keine\nDisambiguierung. Kein entsprechender Input.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → `.btn-{area}` auf der Aktion (nicht die Bandfläche, siehe Klassendoku).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {
+              "summary": "co"
+            }
+          }
+        },
+        "heading": {
+          "name": "heading",
+          "description": "Headline (`.ep-cta-h2`) — das konkrete Angebot, keine Marketing-Floskel.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "primaryHref": {
+          "name": "primaryHref",
+          "description": "Ziel der Aktion; gesetzt → `<a href>`, leer → `<button>` mit `primaryClick`.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "primaryLabel": {
+          "name": "primaryLabel",
+          "description": "Beschriftung der (einzigen) Aktion.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "sub": {
+          "name": "sub",
+          "description": "Unterzeile (`.ep-cta-sub`, leer = keine Unterzeile).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "primaryClick": {
+          "name": "primaryClick",
+          "description": "Klick auf die Aktion (feuert nur, wenn `primaryHref` leer ist).",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "primaryClick",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "MouseEvent"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type CtaBandComponentInputs = {\n  /**\n   * Markenbereich → `.btn-{area}` auf der Aktion (nicht die Bandfläche, siehe Klassendoku).\n   *\n   * @default co\n   */\n  area?: CdsArea;\n  /** Headline (`.ep-cta-h2`) — das konkrete Angebot, keine Marketing-Floskel. */\n  heading: string;\n  /**\n   * Ziel der Aktion; gesetzt → `<a href>`, leer → `<button>` mit `primaryClick`.\n   *\n   * @default ''\n   */\n  primaryHref?: string;\n  /** Beschriftung der (einzigen) Aktion. */\n  primaryLabel: string;\n  /**\n   * Unterzeile (`.ep-cta-sub`, leer = keine Unterzeile).\n   *\n   * @default ''\n   */\n  sub?: string;\n}\n```\n\n## Outputs\n\n```\nexport type CtaBandComponentOutputs = {\n  /** Klick auf die Aktion (feuert nur, wenn `primaryHref` leer ist). */\n  primaryClick: MouseEvent;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "CtaBandComponent",
+        "selector": "div[cdsCtaBand]",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "heading",
+          "primaryHref",
+          "primaryLabel",
+          "sub"
+        ],
+        "outputs": [
+          "primaryClick"
+        ],
+        "enums": []
+      }
+    }
+  }
+}

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

@@ -0,0 +1,182 @@
+{
+  "components": {
+    "komponenten-call-to-action-downloadcta": {
+      "id": "komponenten-call-to-action-downloadcta",
+      "name": "DownloadCtaComponent",
+      "path": "./src/lib/download-cta/download-cta.stories.ts",
+      "description": "DownloadCta — Wrapper um `.cta-dl` aus css/components.css → „Download CTA“.\n\nAufmerksamkeitsstarker Download-Block mit bereichsgefärbtem Top-Akzent + Icon\n(data-area), Eyebrow/Titel/Beschreibung/Meta und zwei Aktionen (primär/sekundär,\nüber die bestehenden `.btn`-Klassen). Konsumiert nur vorhandene Styles.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → data-area (Top-Akzent, Icon-Tönung, Button-Farbe).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {
+              "summary": "co"
+            }
+          }
+        },
+        "desc": {
+          "name": "desc",
+          "description": "Beschreibungstext unterhalb des Titels (leer = keine Beschreibung).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "eyebrow": {
+          "name": "eyebrow",
+          "description": "Kicker-Text oberhalb des Titels (leer = keine Eyebrow-Zeile).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "meta": {
+          "name": "meta",
+          "description": "Zusatzinfo unterhalb der Beschreibung, z. B. Dateiformat/-größe (leer = keine Meta-Zeile).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "primaryLabel": {
+          "name": "primaryLabel",
+          "description": "Beschriftung der primären Aktion.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "secondaryLabel": {
+          "name": "secondaryLabel",
+          "description": "Beschriftung der sekundären Aktion (leer = ausgeblendet).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "title": {
+          "name": "title",
+          "description": "Titel des Download-Angebots.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "primaryClick": {
+          "name": "primaryClick",
+          "description": "Klick auf die primäre Aktion (Haupt-CTA).",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "primaryClick",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "MouseEvent"
+            },
+            "defaultValue": {}
+          }
+        },
+        "secondaryClick": {
+          "name": "secondaryClick",
+          "description": "Klick auf die sekundäre Aktion (nur wenn `secondaryLabel` gesetzt ist).",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "secondaryClick",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "MouseEvent"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type DownloadCtaComponentInputs = {\n  /**\n   * Markenbereich → data-area (Top-Akzent, Icon-Tönung, Button-Farbe).\n   *\n   * @default co\n   */\n  area?: CdsArea;\n  /**\n   * Beschreibungstext unterhalb des Titels (leer = keine Beschreibung).\n   *\n   * @default ''\n   */\n  desc?: string;\n  /**\n   * Kicker-Text oberhalb des Titels (leer = keine Eyebrow-Zeile).\n   *\n   * @default ''\n   */\n  eyebrow?: string;\n  /**\n   * Zusatzinfo unterhalb der Beschreibung, z. B. Dateiformat/-größe (leer = keine Meta-Zeile).\n   *\n   * @default ''\n   */\n  meta?: string;\n  /** Beschriftung der primären Aktion. */\n  primaryLabel: string;\n  /**\n   * Beschriftung der sekundären Aktion (leer = ausgeblendet).\n   *\n   * @default ''\n   */\n  secondaryLabel?: string;\n  /** Titel des Download-Angebots. */\n  title: string;\n}\n```\n\n## Outputs\n\n```\nexport type DownloadCtaComponentOutputs = {\n  /** Klick auf die primäre Aktion (Haupt-CTA). */\n  primaryClick: MouseEvent;\n  /** Klick auf die sekundäre Aktion (nur wenn `secondaryLabel` gesetzt ist). */\n  secondaryClick: MouseEvent;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "DownloadCtaComponent",
+        "selector": "cds-download-cta",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "desc",
+          "eyebrow",
+          "meta",
+          "primaryLabel",
+          "secondaryLabel",
+          "title"
+        ],
+        "outputs": [
+          "primaryClick",
+          "secondaryClick"
+        ],
+        "enums": []
+      }
+    }
+  }
+}