@conciso/design-system 0.0.0-bootstrap.0 → 2.1.1

package/README.md

@@ -50,8 +50,11 @@ npm install @conciso/design-system
 import '@conciso/design-system/dist/conciso-ds.css';
 // Tokens (optional, für JS/Framework):
 import { tokens } from '@conciso/design-system/tokens';
-// Icons (optional, maschinenlesbar — komplette <svg>-Bodies, currentColor):
-import { icons } from '@conciso/design-system/icons';
+// Icons (optional, maschinenlesbar — komplette <svg>-Bodies, currentColor): benannter Import
+// pro Icon, tree-shakable — nur importierte Glyphen landen im Bundle:
+import { uiShieldCheck } from '@conciso/design-system/icons';
+// Das aggregierte `icons`-Objekt (oder icons.json) zieht immer alle Icons ins Bundle — nur
+// für Kataloge/Doku, nicht für Apps. Details: icons/README.md.
 // Brand-Logo (Wortmarke, drei Varianten):
 import logo from '@conciso/design-system/assets/brand/logo-conciso.svg';
 ```

package/css/components.css

@@ -151,6 +151,17 @@
    Interaktion liegt dann in den Buttons; so eine Karte ruht flach mit dem --bd-Rahmen aus .card.
    Deshalb hängt die ganze Variante an a.*: eine <article>/<div>-Karte bekommt den Schatten auch
    dann nicht, wenn die Klasse gesetzt ist. Das ist der Riegel, nicht nur eine Empfehlung. */
+/* Ohne data-area erbt eine <article>/<div>-Karte die Seiten-Textfarbe automatisch, weil Eyebrow
+   und Media-Icon keine eigene Farbe setzen. Ein <a> bringt aber die UA-Linkfarbe UND -Unterstreichung
+   mit: ohne dieses Reset läuft die Unterstreichung durch alle Block-Kinder (Eyebrow, Titel, Text,
+   Meta), weil text-decoration nicht vererbt, sondern über in-flow-Nachfahren PROPAGIERT wird — ein
+   text-decoration:none auf dem Kind allein stoppt das nicht, nur der Reset am <a> selbst.
+   color:inherit + text-decoration:none gleichen beides an: Link-Card ohne Bereich = Card ohne
+   Bereich, Bereichs-Regeln (oben) bleiben unberührt, weil sie spezifischer sind (Befund 01).
+   .card-cta-link bleibt unberührt: als <span> im Card-Footer hatte es nie UA-Unterstreichung, als
+   eigenständiges a.card-cta-link (css/components.css ~1377) sitzt es nie verschachtelt in a.card
+   (ungültiges HTML, siehe LinkCardComponent-Klassendoku) und behält seinen eigenen Hover-Unterstrich. */
+a.card{color:inherit;text-decoration:none}
 a.card-elevated{box-shadow:var(--e1);border:none;background:var(--bg-surface)}
 a.card-elevated:hover{box-shadow:var(--e2);transform:translateY(-2px)}
 
@@ -594,8 +605,11 @@ a.card-elevated:hover{box-shadow:var(--e2);transform:translateY(-2px)}
 /* ── Snackbar ── */
 .snack{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);border-radius:var(--r-md);font:var(--ty-body-md);max-width:480px;box-shadow:var(--e3);margin-bottom:var(--s3);min-height:48px}
 .snack-def{background:var(--n-700);color:var(--n-0)}
-.snack-ok{background:#0d5e39;color:#d6f5e8}
-.snack-err{background:#7a1515;color:#fde8e8}
+/* Tokens statt Hardcodes (Befund 04): Werte und Kontraste stehen bei --c-success-strong/
+   --c-error-strong in tokens.css. Die Fläche flippt im Dark über den Token, kein eigenes
+   Dark-Overwrite hier nötig. */
+.snack-ok{background:var(--c-success-strong);color:var(--c-success-on-strong)}
+.snack-err{background:var(--c-error-strong);color:var(--c-error-on-strong)}
 .snack-act{margin-left:auto;background:none;border:none;color:inherit;opacity:.8;font:var(--ty-label-sm);cursor:pointer;text-transform:uppercase;letter-spacing:.04em;padding:0}
 
 /* ── Footer ──
@@ -1603,7 +1617,10 @@ thead th[aria-sort="descending"] .tbl-sort svg{opacity:1;color:var(--co-600)}
 .article-callout[data-area="ki"]{background:var(--ki-50);border-left-color:var(--ki-500)}
 .article-callout[data-area="es"]{background:var(--es-50);border-left-color:var(--es-500)}
 .article-callout[data-area="wo"]{background:var(--wo-50);border-left-color:var(--wo-500)}
-.article-callout-eyebrow{font:var(--ty-label-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--co-700);margin:0 0 var(--s1)}
+/* Direktkind-Selektor statt reiner Klasse: die Eyebrow ist selbst ein <p>, also schlägt
+   .article-callout > p (0,1,1) unten sonst diese Regel (0,1,0). Mit
+   .article-callout > .article-callout-eyebrow (0,2,0) gewinnt die Eyebrow (Befund 02). */
+.article-callout > .article-callout-eyebrow{font:var(--ty-label-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--co-700);margin:0 0 var(--s1)}
 .article-callout[data-area="ki"] .article-callout-eyebrow{color:var(--ki-800)}
 .article-callout[data-area="es"] .article-callout-eyebrow{color:var(--es-700)}
 .article-callout[data-area="wo"] .article-callout-eyebrow{color:var(--wo-700)}

package/css/dark-mode.css

@@ -78,6 +78,12 @@
   --c-error:#FFA5A5;    /* auf bg-page: 9.32:1 ✓ AAA · auf bg-surface: 6.93:1 ✓ AAA. Angehoben von
                            #FF8E8E, das nur gegen bg-page geprüft war und auf bg-surface 4.0:1
                            erreichte. Inline-Fehlertext sitzt aber fast immer auf bg-surface. */
+  /* Dark-only: Snackbar-Fläche (Befund 04) flippt auf die bereits vorhandenen --c-*-bg-Tints, der
+     helle Text auf --c-success-on-strong wird angehoben (--c-error-on-strong und beide -icon-Tokens
+     bleiben in Light UND Dark gleich, deshalb hier bewusst kein Override). Kontraste siehe
+     tokens.css. (Light: #0d5e39 / #d6f5e8.) */
+  --c-success-strong:var(--c-success-bg); --c-success-on-strong:#b0f0d0;
+  --c-error-strong:var(--c-error-bg);
   /* Brand tints (Dark), getrennt nach den zwei Jobs, die --XX-50 im Light in einem Wert erledigt.
      Der Grund: Ein Band muss DUNKLER bleiben als die Karten darauf, eine Badge- oder Kachel-Füllung
      muss HELLER sein als ihr Grund, sonst liest sie nicht als Fläche. Bei einer Basis von 17,51:1
@@ -249,18 +255,17 @@
 [data-theme="dark"] .logo-carousel-pause:hover { color: var(--n-200) }
 [data-theme="dark"] .ai-warning { color:var(--ki-300) }
 [data-theme="dark"] .pal-note { background:var(--c-warning-bg);color:#f0d080;border-color:#806000 }
-/* Dark-only: Die Flächen standen hier als hartkodierte Kopien von --c-success-bg und --c-error-bg
-   (#052415 / #220808). Als die Status-Tints angehoben wurden, blieben die Kopien zurück und trugen
-   nur noch ❌ 1,06:1 bzw. 1,08:1 gegen die Seite, die Snackbar war als Fläche praktisch weg.
-   Jetzt über die Token ✓ 1,78:1 und 1,79:1; Text darauf 7,60:1 und 8,34:1. */
-[data-theme="dark"] .snack-ok { background:var(--c-success-bg); color:#b0f0d0 }
-[data-theme="dark"] .snack-err { background:var(--c-error-bg); color:#fde8e8 }
-/* Dieselbe Familie wie die Snackbar darüber: die Kreisflächen standen als hartkodierte Kopien von
-   --c-success-bg und --c-error-bg (#052415 / #220808) und blieben beim Anheben der Status-Tints
-   zurück. Gegen die neue Seite trugen sie nur ❌ 1,06:1 bzw. 1,08:1, der Kreis war keine Fläche
-   mehr, nur noch ein farbiger Glyph. Jetzt über die Token ✓ 1,78:1 und 1,79:1 zur Seite, 1,32 und
-   1,33:1 zur Card. Der Fehler-Glyph geht mit: #F08080 trägt auf der aufgehellten Füllung nur
-   ❌ 3,78:1, --c-error (#FFA5A5) ✓ 5,21:1. Analog --c-success (#5CE8A0) auf Grün 6,33:1.
+/* Snackbar-Fläche/-Text (.snack-ok/.snack-err) brauchten hier früher ein eigenes Dark-Overwrite,
+   weil die Farben in components.css als Hex standen und im Dark nicht mitliefen. Seit Befund 04
+   stehen sie über --c-success-strong/--c-error-strong (tokens.css, Dark-Werte oben im Token-Block),
+   die Fläche flippt jetzt über den Token selbst — kein Overwrite mehr nötig, siehe .snack-ok/
+   .snack-err in components.css. */
+/* Die Kreisflächen hier standen als hartkodierte Kopien von --c-success-bg und --c-error-bg
+   (#052415 / #220808) und blieben beim Anheben der Status-Tints zurück. Gegen die neue Seite
+   trugen sie nur ❌ 1,06:1 bzw. 1,08:1, der Kreis war keine Fläche mehr, nur noch ein farbiger
+   Glyph. Jetzt über die Token ✓ 1,78:1 und 1,79:1 zur Seite, 1,32 und 1,33:1 zur Card. Der
+   Fehler-Glyph geht mit: #F08080 trägt auf der aufgehellten Füllung nur ❌ 3,78:1, --c-error
+   (#FFA5A5) ✓ 5,21:1. Analog --c-success (#5CE8A0) auf Grün 6,33:1.
    (Light: helle Tints #E6F9F1 / #FDEAEA mit dunklem Glyph, kein Fix nötig.) */
 [data-theme="dark"] .a11y-ok .a11y-rule-icon { background:var(--c-success-bg); color:var(--c-success) }
 [data-theme="dark"] .a11y-fail .a11y-rule-icon { background:var(--c-error-bg); color:var(--c-error) }
@@ -482,7 +487,13 @@
 /* In-Article-Callout-Eyebrow: 700er-/800er-Ton → dunkel-auf-dunkel auf der getönten -50-Fläche
    (1,6–2,5:1). Auf die hellen Bereichs-Tints heben (8–10:1), wie bei .t-Utilities und Badges. Body-Text ist
    tx-primary und flippt ohnehin. */
-[data-theme="dark"] .article-callout-eyebrow { color: var(--co-200) }
+/* .article-callout > vorangestellt (Befund 02, Spezifitäts-Fix in components.css): ohne den
+   Eltern-Qualifier lag diese Regel bei 0,2,0, exakt gleichauf mit der neuen Light-Basisregel
+   .article-callout > .article-callout-eyebrow — bei Gleichstand gewinnt components.css, weil es
+   nach dark-mode.css gebündelt wird (bundle-css.mjs), der Ton fiel im Dark auf co-700 zurück
+   (1,77:1 statt 4,5:1, von check:contrast gefangen). 0,3,0 hält den Vorsprung, wie bei den
+   Bereichs-Varianten darunter. */
+[data-theme="dark"] .article-callout > .article-callout-eyebrow { color: var(--co-200) }
 [data-theme="dark"] .article-callout[data-area="ki"] .article-callout-eyebrow { color: var(--ki-200) }
 [data-theme="dark"] .article-callout[data-area="es"] .article-callout-eyebrow { color: var(--es-100) }
 [data-theme="dark"] .article-callout[data-area="wo"] .article-callout-eyebrow { color: var(--wo-200) }

package/css/tokens.css

@@ -78,6 +78,17 @@
   --c-warning:#785008; --c-warning-bg:#F5D08C;  /* Text auf #fff 7,12:1, auf dem eigenen Tint 4,84:1 (vorher #8A5E0A: 5,70 bzw. nur 3,87:1) */
   --c-error:#9B2020;   --c-error-bg:#F5BFBF;    /* Text auf #fff 8,01:1, auf dem eigenen Tint 4,99:1 (vorher #B22020: 6,73 bzw. nur 4,19:1) */
 
+  /* --c-*-strong sind die satte Snackbar-Fläche (.snack-ok/.snack-err) plus Text-/Icon-Farbe darauf
+     (Befund 04): eigene Tokens statt --c-success/-error, weil das dort der Tint-Text ist, hier aber
+     eine volle Fläche. Werte = bisheriger hartkodierter Render, keine optische Änderung. Dark-Werte
+     in dark-mode.css (Fläche flippt auf --c-success-bg/--c-error-bg, Icon/Text meist unverändert).
+     Kontrast Text/Fläche und Icon/Fläche gemessen (Formel wie scripts/check-contrast.mjs):
+     Light: ok Text 6,76:1, ok Icon 5,72:1 · err Text 9,19:1, err Icon 5,75:1
+     Dark:  ok Text 6,53:1, ok Icon 6,16:1 · err Text 7,57:1, err Icon 4,74:1
+     (Soll ≥ 4,5:1 Text, ≥ 3:1 Icon — alle acht Paare ✓) */
+  --c-success-strong:#0d5e39; --c-success-on-strong:#d6f5e8; --c-success-strong-icon:#88f0c4;
+  --c-error-strong:#7a1515; --c-error-on-strong:#fde8e8; --c-error-strong-icon:#f9a8a8;
+
   /* ── Component color tokens (theme-overridable) ── */
   --badge-ok-text:var(--c-success); --badge-warn-text:var(--c-warning); --badge-err-text:var(--c-error); /* dieselben Töne wie die semantischen Textfarben: sie stehen auf denselben Tints, zwei Werte dafür wären zwei Quellen der Wahrheit */
   --badge-neu-bg:var(--n-200); --badge-neu-text:var(--n-600); /* n-200 statt n-100: als Füllung trug n-100 nur 1,18:1 gegen Weiß und 1,10:1 gegen n-50, n-200 gibt 1,53 / 1,42:1. Text darauf 6,69:1 */

package/dist/conciso-ds.css

@@ -102,6 +102,17 @@
   --c-warning:#785008; --c-warning-bg:#F5D08C;  /* Text auf #fff 7,12:1, auf dem eigenen Tint 4,84:1 (vorher #8A5E0A: 5,70 bzw. nur 3,87:1) */
   --c-error:#9B2020;   --c-error-bg:#F5BFBF;    /* Text auf #fff 8,01:1, auf dem eigenen Tint 4,99:1 (vorher #B22020: 6,73 bzw. nur 4,19:1) */
 
+  /* --c-*-strong sind die satte Snackbar-Fläche (.snack-ok/.snack-err) plus Text-/Icon-Farbe darauf
+     (Befund 04): eigene Tokens statt --c-success/-error, weil das dort der Tint-Text ist, hier aber
+     eine volle Fläche. Werte = bisheriger hartkodierter Render, keine optische Änderung. Dark-Werte
+     in dark-mode.css (Fläche flippt auf --c-success-bg/--c-error-bg, Icon/Text meist unverändert).
+     Kontrast Text/Fläche und Icon/Fläche gemessen (Formel wie scripts/check-contrast.mjs):
+     Light: ok Text 6,76:1, ok Icon 5,72:1 · err Text 9,19:1, err Icon 5,75:1
+     Dark:  ok Text 6,53:1, ok Icon 6,16:1 · err Text 7,57:1, err Icon 4,74:1
+     (Soll ≥ 4,5:1 Text, ≥ 3:1 Icon — alle acht Paare ✓) */
+  --c-success-strong:#0d5e39; --c-success-on-strong:#d6f5e8; --c-success-strong-icon:#88f0c4;
+  --c-error-strong:#7a1515; --c-error-on-strong:#fde8e8; --c-error-strong-icon:#f9a8a8;
+
   /* ── Component color tokens (theme-overridable) ── */
   --badge-ok-text:var(--c-success); --badge-warn-text:var(--c-warning); --badge-err-text:var(--c-error); /* dieselben Töne wie die semantischen Textfarben: sie stehen auf denselben Tints, zwei Werte dafür wären zwei Quellen der Wahrheit */
   --badge-neu-bg:var(--n-200); --badge-neu-text:var(--n-600); /* n-200 statt n-100: als Füllung trug n-100 nur 1,18:1 gegen Weiß und 1,10:1 gegen n-50, n-200 gibt 1,53 / 1,42:1. Text darauf 6,69:1 */
@@ -313,6 +324,12 @@
   --c-error:#FFA5A5;    /* auf bg-page: 9.32:1 ✓ AAA · auf bg-surface: 6.93:1 ✓ AAA. Angehoben von
                            #FF8E8E, das nur gegen bg-page geprüft war und auf bg-surface 4.0:1
                            erreichte. Inline-Fehlertext sitzt aber fast immer auf bg-surface. */
+  /* Dark-only: Snackbar-Fläche (Befund 04) flippt auf die bereits vorhandenen --c-*-bg-Tints, der
+     helle Text auf --c-success-on-strong wird angehoben (--c-error-on-strong und beide -icon-Tokens
+     bleiben in Light UND Dark gleich, deshalb hier bewusst kein Override). Kontraste siehe
+     tokens.css. (Light: #0d5e39 / #d6f5e8.) */
+  --c-success-strong:var(--c-success-bg); --c-success-on-strong:#b0f0d0;
+  --c-error-strong:var(--c-error-bg);
   /* Brand tints (Dark), getrennt nach den zwei Jobs, die --XX-50 im Light in einem Wert erledigt.
      Der Grund: Ein Band muss DUNKLER bleiben als die Karten darauf, eine Badge- oder Kachel-Füllung
      muss HELLER sein als ihr Grund, sonst liest sie nicht als Fläche. Bei einer Basis von 17,51:1
@@ -484,18 +501,17 @@
 [data-theme="dark"] .logo-carousel-pause:hover { color: var(--n-200) }
 [data-theme="dark"] .ai-warning { color:var(--ki-300) }
 [data-theme="dark"] .pal-note { background:var(--c-warning-bg);color:#f0d080;border-color:#806000 }
-/* Dark-only: Die Flächen standen hier als hartkodierte Kopien von --c-success-bg und --c-error-bg
-   (#052415 / #220808). Als die Status-Tints angehoben wurden, blieben die Kopien zurück und trugen
-   nur noch ❌ 1,06:1 bzw. 1,08:1 gegen die Seite, die Snackbar war als Fläche praktisch weg.
-   Jetzt über die Token ✓ 1,78:1 und 1,79:1; Text darauf 7,60:1 und 8,34:1. */
-[data-theme="dark"] .snack-ok { background:var(--c-success-bg); color:#b0f0d0 }
-[data-theme="dark"] .snack-err { background:var(--c-error-bg); color:#fde8e8 }
-/* Dieselbe Familie wie die Snackbar darüber: die Kreisflächen standen als hartkodierte Kopien von
-   --c-success-bg und --c-error-bg (#052415 / #220808) und blieben beim Anheben der Status-Tints
-   zurück. Gegen die neue Seite trugen sie nur ❌ 1,06:1 bzw. 1,08:1, der Kreis war keine Fläche
-   mehr, nur noch ein farbiger Glyph. Jetzt über die Token ✓ 1,78:1 und 1,79:1 zur Seite, 1,32 und
-   1,33:1 zur Card. Der Fehler-Glyph geht mit: #F08080 trägt auf der aufgehellten Füllung nur
-   ❌ 3,78:1, --c-error (#FFA5A5) ✓ 5,21:1. Analog --c-success (#5CE8A0) auf Grün 6,33:1.
+/* Snackbar-Fläche/-Text (.snack-ok/.snack-err) brauchten hier früher ein eigenes Dark-Overwrite,
+   weil die Farben in components.css als Hex standen und im Dark nicht mitliefen. Seit Befund 04
+   stehen sie über --c-success-strong/--c-error-strong (tokens.css, Dark-Werte oben im Token-Block),
+   die Fläche flippt jetzt über den Token selbst — kein Overwrite mehr nötig, siehe .snack-ok/
+   .snack-err in components.css. */
+/* Die Kreisflächen hier standen als hartkodierte Kopien von --c-success-bg und --c-error-bg
+   (#052415 / #220808) und blieben beim Anheben der Status-Tints zurück. Gegen die neue Seite
+   trugen sie nur ❌ 1,06:1 bzw. 1,08:1, der Kreis war keine Fläche mehr, nur noch ein farbiger
+   Glyph. Jetzt über die Token ✓ 1,78:1 und 1,79:1 zur Seite, 1,32 und 1,33:1 zur Card. Der
+   Fehler-Glyph geht mit: #F08080 trägt auf der aufgehellten Füllung nur ❌ 3,78:1, --c-error
+   (#FFA5A5) ✓ 5,21:1. Analog --c-success (#5CE8A0) auf Grün 6,33:1.
    (Light: helle Tints #E6F9F1 / #FDEAEA mit dunklem Glyph, kein Fix nötig.) */
 [data-theme="dark"] .a11y-ok .a11y-rule-icon { background:var(--c-success-bg); color:var(--c-success) }
 [data-theme="dark"] .a11y-fail .a11y-rule-icon { background:var(--c-error-bg); color:var(--c-error) }
@@ -717,7 +733,13 @@
 /* In-Article-Callout-Eyebrow: 700er-/800er-Ton → dunkel-auf-dunkel auf der getönten -50-Fläche
    (1,6–2,5:1). Auf die hellen Bereichs-Tints heben (8–10:1), wie bei .t-Utilities und Badges. Body-Text ist
    tx-primary und flippt ohnehin. */
-[data-theme="dark"] .article-callout-eyebrow { color: var(--co-200) }
+/* .article-callout > vorangestellt (Befund 02, Spezifitäts-Fix in components.css): ohne den
+   Eltern-Qualifier lag diese Regel bei 0,2,0, exakt gleichauf mit der neuen Light-Basisregel
+   .article-callout > .article-callout-eyebrow — bei Gleichstand gewinnt components.css, weil es
+   nach dark-mode.css gebündelt wird (bundle-css.mjs), der Ton fiel im Dark auf co-700 zurück
+   (1,77:1 statt 4,5:1, von check:contrast gefangen). 0,3,0 hält den Vorsprung, wie bei den
+   Bereichs-Varianten darunter. */
+[data-theme="dark"] .article-callout > .article-callout-eyebrow { color: var(--co-200) }
 [data-theme="dark"] .article-callout[data-area="ki"] .article-callout-eyebrow { color: var(--ki-200) }
 [data-theme="dark"] .article-callout[data-area="es"] .article-callout-eyebrow { color: var(--es-100) }
 [data-theme="dark"] .article-callout[data-area="wo"] .article-callout-eyebrow { color: var(--wo-200) }
@@ -1409,6 +1431,17 @@ body{font-family:var(--font);font-size:1rem;line-height:1.7;color:var(--tx-prima
    Interaktion liegt dann in den Buttons; so eine Karte ruht flach mit dem --bd-Rahmen aus .card.
    Deshalb hängt die ganze Variante an a.*: eine <article>/<div>-Karte bekommt den Schatten auch
    dann nicht, wenn die Klasse gesetzt ist. Das ist der Riegel, nicht nur eine Empfehlung. */
+/* Ohne data-area erbt eine <article>/<div>-Karte die Seiten-Textfarbe automatisch, weil Eyebrow
+   und Media-Icon keine eigene Farbe setzen. Ein <a> bringt aber die UA-Linkfarbe UND -Unterstreichung
+   mit: ohne dieses Reset läuft die Unterstreichung durch alle Block-Kinder (Eyebrow, Titel, Text,
+   Meta), weil text-decoration nicht vererbt, sondern über in-flow-Nachfahren PROPAGIERT wird — ein
+   text-decoration:none auf dem Kind allein stoppt das nicht, nur der Reset am <a> selbst.
+   color:inherit + text-decoration:none gleichen beides an: Link-Card ohne Bereich = Card ohne
+   Bereich, Bereichs-Regeln (oben) bleiben unberührt, weil sie spezifischer sind (Befund 01).
+   .card-cta-link bleibt unberührt: als <span> im Card-Footer hatte es nie UA-Unterstreichung, als
+   eigenständiges a.card-cta-link (css/components.css ~1377) sitzt es nie verschachtelt in a.card
+   (ungültiges HTML, siehe LinkCardComponent-Klassendoku) und behält seinen eigenen Hover-Unterstrich. */
+a.card{color:inherit;text-decoration:none}
 a.card-elevated{box-shadow:var(--e1);border:none;background:var(--bg-surface)}
 a.card-elevated:hover{box-shadow:var(--e2);transform:translateY(-2px)}
 
@@ -1852,8 +1885,11 @@ a.card-elevated:hover{box-shadow:var(--e2);transform:translateY(-2px)}
 /* ── Snackbar ── */
 .snack{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);border-radius:var(--r-md);font:var(--ty-body-md);max-width:480px;box-shadow:var(--e3);margin-bottom:var(--s3);min-height:48px}
 .snack-def{background:var(--n-700);color:var(--n-0)}
-.snack-ok{background:#0d5e39;color:#d6f5e8}
-.snack-err{background:#7a1515;color:#fde8e8}
+/* Tokens statt Hardcodes (Befund 04): Werte und Kontraste stehen bei --c-success-strong/
+   --c-error-strong in tokens.css. Die Fläche flippt im Dark über den Token, kein eigenes
+   Dark-Overwrite hier nötig. */
+.snack-ok{background:var(--c-success-strong);color:var(--c-success-on-strong)}
+.snack-err{background:var(--c-error-strong);color:var(--c-error-on-strong)}
 .snack-act{margin-left:auto;background:none;border:none;color:inherit;opacity:.8;font:var(--ty-label-sm);cursor:pointer;text-transform:uppercase;letter-spacing:.04em;padding:0}
 
 /* ── Footer ──
@@ -2861,7 +2897,10 @@ thead th[aria-sort="descending"] .tbl-sort svg{opacity:1;color:var(--co-600)}
 .article-callout[data-area="ki"]{background:var(--ki-50);border-left-color:var(--ki-500)}
 .article-callout[data-area="es"]{background:var(--es-50);border-left-color:var(--es-500)}
 .article-callout[data-area="wo"]{background:var(--wo-50);border-left-color:var(--wo-500)}
-.article-callout-eyebrow{font:var(--ty-label-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--co-700);margin:0 0 var(--s1)}
+/* Direktkind-Selektor statt reiner Klasse: die Eyebrow ist selbst ein <p>, also schlägt
+   .article-callout > p (0,1,1) unten sonst diese Regel (0,1,0). Mit
+   .article-callout > .article-callout-eyebrow (0,2,0) gewinnt die Eyebrow (Befund 02). */
+.article-callout > .article-callout-eyebrow{font:var(--ty-label-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--co-700);margin:0 0 var(--s1)}
 .article-callout[data-area="ki"] .article-callout-eyebrow{color:var(--ki-800)}
 .article-callout[data-area="es"] .article-callout-eyebrow{color:var(--es-700)}
 .article-callout[data-area="wo"] .article-callout-eyebrow{color:var(--wo-700)}

package/icons/README.md

@@ -7,7 +7,9 @@ neue/geänderte Icons in `icons/source/` ablegen und `npm run build:icons` ausf
 ## Inhalt
 
 - `icons/icons.json` — Map `key → { name, area, style, viewBox, strokeWidth?, body, svg, usage? }`
-- `icons/icons.js` — derselbe Datensatz als ESM (`import { icons } from '@conciso/design-system/icons'`)
+- `icons/icons.js` — derselbe Datensatz als ESM: **ein benannter Export pro Icon** (camelCase,
+  z. B. `uiShieldCheck`) **plus** das aggregierte `icons`-Objekt (Key → Eintrag)
+- `icons/icons.d.ts` — Typdeklaration zu `icons/icons.js` (benannte Exporte + `icons`, je `CdsIconEntry`)
 - `icons/source/*.svg` — die einzelnen normalisierten Quell-SVGs (Dateiname = Key)
 
 ## Konventionen
@@ -20,15 +22,37 @@ neue/geänderte Icons in `icons/source/` ablegen und `npm run build:icons` ausf
   `color` (z. B. `color: var(--ki-800)` bzw. im Dark `--ki-200`). Keine hartkodierten Hex-Werte.
 - **Self-contained:** Outline-Icons tragen ihre `stroke-width` inline → `set:html` funktioniert ohne
   Wrapper-Annahmen über den Stil. Größe via `width`/`height` oder CSS (viewBox bleibt erhalten).
-- **Keys:** `{area}-{name}` für die Bereichs-Glyphen (`co|ki|es|wo`), `ui-{name}` für bereichsneutrale Icons.
+- **Keys:** `{area}-{name}` für die Bereichs-Glyphen (`co|ki|es|wo`), `ui-{name}` für bereichsneutrale
+  Icons. Jeder Key hat einen benannten Export in camelCase (Bindestrich-Segment groß:
+  `ui-caret-down` → `uiCaretDown`, `co-building` → `coBuilding`); der Generator bricht bei einer
+  Kollision oder einem ungültigen JS-Bezeichner ab.
 
 ## Verwendung
 
+**Empfohlen: benannter Import.** Nur benannte Imports sind tree-shakable — jeder Export ist ein
+eigenes `const` auf Modulebene ohne Property-Zugriff oder Funktionsaufruf, Bundler (Webpack,
+Rollup, esbuild, Angular/Vite) lassen dadurch jedes nicht importierte Icon aus dem Bundle.
+
+```js
+import { uiShieldCheck } from '@conciso/design-system/icons';
+
+uiShieldCheck.svg    // komplettes <svg>…</svg> (currentColor, self-contained)
+uiShieldCheck.body   // nur das innere Markup (für set:html in ein bestehendes <svg>)
+uiShieldCheck.style  // "outline"
+```
+
+**Aggregat `icons` / `icons.json`: nur für Kataloge und Doku.** `import { icons } from
+'@conciso/design-system/icons'` oder der Import von `icons.json` liefert alle 99 Icons in einem
+Objekt — praktisch für eine Icon-Galerie oder einen dynamischen Lookup per String-Key, zieht dabei
+aber immer die komplette Bibliothek ins Bundle, auch wenn nur ein Icon benutzt wird. In Apps daher
+immer den benannten Import verwenden; `icons`/`icons.json` bleiben Kataloge/Doku (z. B. die
+Storybook-Icon-Galerie) vorbehalten.
+
 ```js
 import { icons } from '@conciso/design-system/icons';
 // oder: import iconsJson from '@conciso/design-system/icons.json' assert { type: 'json' };
 
-const shield = icons['ui-shield-check'];
+const shield = icons['ui-shield-check']; // äquivalent zu uiShieldCheck oben, aber nicht tree-shakable
 shield.svg    // komplettes <svg>…</svg> (currentColor, self-contained)
 shield.body   // nur das innere Markup (für set:html in ein bestehendes <svg>)
 shield.style  // "outline"
@@ -38,8 +62,8 @@ shield.style  // "outline"
 
 ```astro
 ---
-import { icons } from '@conciso/design-system/icons';
-const { svg } = icons['ki-bot'];
+import { kiBot } from '@conciso/design-system/icons';
+const { svg } = kiBot;
 ---
 <span class="icon" set:html={svg} />
 <style>.icon { color: var(--ki-800); display: inline-flex; }
@@ -63,124 +87,124 @@ Karten. Das Marken-Glyph ist dem Verweis auf den Bereich selbst vorbehalten.
 
 ### Corporate
 
-| Key | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
-|---|---|---|---|
-| `co-building` | Corporate / Unternehmen – Bereichs-Glyphe (Gebäude) | solid | icon-size-swatch @co |
-| `co-mark` | Corporate – Logo-Zeichen „C.“ (nur mit Logo verwenden) | solid | icon-size-swatch @co |
+| Key | Export | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
+|---|---|---|---|---|
+| `co-building` | `coBuilding` | Corporate / Unternehmen – Bereichs-Glyphe (Gebäude) | solid | icon-size-swatch @co |
+| `co-mark` | `coMark` | Corporate – Logo-Zeichen „C.“ (nur mit Logo verwenden) | solid | icon-size-swatch @co |
 
 ### Angewandte KI
 
-| Key | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
-|---|---|---|---|
-| `ki-bot` | Angewandte KI – Bereichs-Glyphe (Tablet/Bot) | solid | icon-size-swatch @ki, ep-card-icon t-ki @ki |
+| Key | Export | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
+|---|---|---|---|---|
+| `ki-bot` | `kiBot` | Angewandte KI – Bereichs-Glyphe (Tablet/Bot) | solid | icon-size-swatch @ki, ep-card-icon t-ki @ki |
 
 ### Effektive Software
 
-| Key | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
-|---|---|---|---|
-| `es-window-check` | Effektive Software – Bereichs-Glyphe (Fenster + Check) | solid | icon-size-swatch @es, ep-card-icon t-es @es |
+| Key | Export | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
+|---|---|---|---|---|
+| `es-window-check` | `esWindowCheck` | Effektive Software – Bereichs-Glyphe (Fenster + Check) | solid | icon-size-swatch @es, ep-card-icon t-es @es |
 
 ### Wirksame Organisationen
 
-| Key | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
-|---|---|---|---|
-| `wo-network` | Wirksame Organisationen – Bereichs-Glyphe (Netzwerk) | solid | icon-size-swatch @wo, ep-card-icon t-wo @wo |
+| Key | Export | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
+|---|---|---|---|---|
+| `wo-network` | `woNetwork` | Wirksame Organisationen – Bereichs-Glyphe (Netzwerk) | solid | icon-size-swatch @wo, ep-card-icon t-wo @wo |
 
 ### Bereichsneutral (UI)
 
-| Key | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
-|---|---|---|---|
-| `ui-academic-cap` | Doktorhut / Lernen | outline | ep-feature-icon @co |
-| `ui-adjustments-horizontal` | Regler / Einstellungen | outline (1.25) | ep-card-icon @ki |
-| `ui-arrow-down-tray-2` | Download (Outline-Variante) | outline (1.5) | docs-nav (cta) |
-| `ui-arrow-down-tray` | Download | solid | cta-dl-icon @ki |
-| `ui-arrow-path` | Aktualisieren / Kreislauf | outline (1.25) | ep-card-icon @wo |
-| `ui-arrow-trending-up` | Trend aufwärts | outline (1.25) | ep-card-icon @ki |
-| `ui-banknotes` | Geldscheine | outline | ep-feature-icon @co |
-| `ui-bars-3-center-left` | Balken, mittlere Zeile kurz und linksbündig (Footer) | outline (1.5) | docs-nav (footer) |
-| `ui-bars-3` | Balken (Hamburger-Navigation) | outline (1.5) | docs-nav (navigation) |
-| `ui-bolt-2` | Blitz (Variante) | outline (1.25) | card-media @es |
-| `ui-bolt` | Blitz | outline (1.25) | ep-card-icon @co, ep-card-icon @ki |
-| `ui-book-open` | Aufgeschlagenes Buch / Quellen | outline (1.5) | docs-nav (sources) |
-| `ui-briefcase-2` | Aktenkoffer (Variante) | outline | ep-section |
-| `ui-briefcase` | Aktenkoffer | outline (1.25) | ep-card-icon @co |
-| `ui-building-office` | Bürogebäude | outline (1.5) | ep-tl-icon |
-| `ui-calendar-days` | Kalender (Tage) | outline (1.25) | ep-card-icon @co, col-3, stoerer-icon (Veranstaltung) |
-| `ui-calendar` | Kalender | outline (1) | card-meta |
-| `ui-caret-down` | Caret nach unten (Nav-Toggle) | outline | ep-tab-toggle, ep-nav-btn ep-nav-item-toggle, ep-nav-btn ep-nav-item-toggle t-co |
-| `ui-chart-bar` | Balkendiagramm | outline | ep-feature-icon @co |
-| `ui-chat-bubble-left-right` | Chat-Blasen (Dialog) | outline (1.5) | ep-feature-icon, ep-feature-icon @ki |
-| `ui-chat-bubble-oval-left-ellipsis` | Chat-Blase oval mit Auslassungspunkten | outline (1.5) | docs-nav (feedback) |
-| `ui-chat-bubble-oval` | Chat-Blase (oval) | outline (1.25) | ep-card-icon @ki |
-| `ui-check-badge` | Verifiziert-Abzeichen | solid | — |
-| `ui-check-circle-2` | Häkchen im Kreis (Variante) | outline (1.5) | — |
-| `ui-check-circle` | Häkchen im Kreis | outline | — |
-| `ui-check` | Häkchen (klein) | outline | — |
-| `ui-chevron-down` | Chevron nach unten (FAQ/Akkordeon) | outline (1.25) | ep-faq, ep-faq-a, ep-compare-summary, article-toc-summary |
-| `ui-chevron-up-down` | Chevron auf/ab (Dropdown-Toggle) | outline (1.5) | docs-nav (dropdowns) |
-| `ui-circle-stack` | Datenbank / Stapel | outline (1.25) | card-media @es |
-| `ui-clock` | Uhr | outline | ep-feature-icon @co |
-| `ui-code-bracket-2` | Code-Klammern (Variante) | outline (1.25) | ep-card-icon @es |
-| `ui-code-bracket-square` | Code-Klammern im Quadrat | outline (1.5) | docs-nav (code) |
-| `ui-code-bracket` | Code-Klammern | outline | — |
-| `ui-cog-6tooth` | Zahnrad (6 Zähne) | outline (1.5) | ep-feature-icon @ki |
-| `ui-cog` | Zahnrad | outline (1.25) | ep-card-icon @ki |
-| `ui-computer-desktop` | Desktop-Rechner / Hero | outline (1.5) | docs-nav (hero) |
-| `ui-cpu-chip-2` | CPU / Chip (Variante) | outline (1.5) | ep-feature-icon |
-| `ui-cpu-chip` | CPU / Chip | outline (1.25) | ep-card-icon @ki |
-| `ui-cube-2` | Würfel (Variante) | outline (1.5) | ep-feature-icon @ki |
-| `ui-cube-transparent` | Würfel transparent / Design Tokens | outline (1.5) | docs-nav (tokens) |
-| `ui-cube` | Würfel / Box | outline (1.25) | ep-card-icon @ki |
-| `ui-currency-euro` | Euro | outline (1.25) | col-3 |
-| `ui-cursor-arrow-rays` | Cursor mit Strahlen / Interaktion | outline (1.5) | docs-nav (buttons) |
-| `ui-device-phone-mobile` | Mobilgerät / Responsive | outline (1.5) | docs-nav (responsive) |
-| `ui-document-text` | Dokument mit Text / Wissensbeitrag | outline (1.5) | docs-nav (article) |
-| `ui-face-smile` | Smiley / Icons | outline (1.5) | docs-nav (icons) |
-| `ui-flag` | Fahne / Markenrad | outline (1.5) | docs-nav (brand) |
-| `ui-folder` | Ordner | outline (1.25) | ep-card-icon @co |
-| `ui-hand-raised` | Erhobene Hand | outline (1.25) | ep-card-icon @co |
-| `ui-heart` | Herz | outline | ep-feature-icon @co |
-| `ui-information-circle` | Info im Kreis | outline (1.25) | stoerer-icon (Info) |
-| `ui-language` | Sprache / Typografie | outline (1.5) | docs-nav (typography) |
-| `ui-link` | Kettenglied / Link | outline (1.5) | ep-feature-icon @ki |
-| `ui-list-bullet` | Aufzählungsliste | outline | — |
-| `ui-lock-closed-2` | Schloss (Variante) | outline (1.25) | ep-card-icon @ki |
-| `ui-lock-closed` | Schloss geschlossen | outline (1.5) | ep-feature-icon |
-| `ui-magnifying-glass` | Lupe | outline (1.25) | ep-card-icon @ki |
-| `ui-map-pin-2` | Standort-Pin (Variante) | outline (1.25) | col-3 |
-| `ui-map-pin` | Standort-Pin | outline (1) | — |
-| `ui-megaphone` | Megafon / Verlautbarung | outline (1.25) | stoerer-icon (Pressemitteilung) |
-| `ui-newspaper-2` | Zeitung / Artikel (Variante) | outline (1.5) | docs-nav (listing), docs-nav (events) |
-| `ui-newspaper` | Zeitung / Artikel | outline (1.25) | ep-card-icon @co, ep-card-icon @ki, stoerer-icon (Wissensbeitrag) |
-| `ui-pause` | Pause | solid | logo-carousel-pause |
-| `ui-pencil-square` | Stift im Quadrat / Bearbeiten | outline (1.5) | docs-nav (inputs) |
-| `ui-photo` | Foto / Bildsprache | outline (1.5) | docs-nav (imagery) |
-| `ui-play` | Play | solid | icon-pause |
-| `ui-puzzle-piece` | Puzzleteil | outline (1.5) | ep-tl-icon |
-| `ui-quote` | Zitatzeichen (Team-Stimme) | solid | team-voice-body @co |
-| `ui-rectangle-stack` | Rechteck-Stapel / Cards | outline (1.5) | docs-nav (cards) |
-| `ui-rocket-launch` | Rakete | outline (1.5) | ep-tl-icon |
-| `ui-shield-check-2` | Schild mit Häkchen (Variante) | outline | ep-feature-icon @co |
-| `ui-shield-check` | Schild mit Häkchen | outline (1.25) | ep-card-icon @co, ep-card-icon @ki, ep-card-icon @es |
-| `ui-sparkles-2` | Funkeln (Variante) | outline (1.5) | ep-feature-icon @ki |
-| `ui-sparkles-3` | Funkeln (Variante) | outline (1.25) | card-media @es |
-| `ui-sparkles-4` | Funkeln (Variante, drei Strahlen) | outline (1.5) | docs-nav (brand) |
-| `ui-sparkles` | Funkeln / Sparkles | outline (1.25) | ep-card-icon @ki |
-| `ui-square-2-stack` | Quadrate gestapelt / Slider | outline (1.5) | docs-nav (slider) |
-| `ui-squares-2x2` | Raster 2×2 | outline (1.25) | ep-card-icon @ki, ep-card-icon @es |
-| `ui-squares-plus` | Module / Raster+ | outline (1.25) | ep-card-icon @wo |
-| `ui-star-2` | Stern (Variante) | outline | — |
-| `ui-star` | Stern | outline (1.5) | ep-tl-icon |
-| `ui-sun` | Sonne / Theme-Umschalter | outline (1.5) | docs-nav (theme) |
-| `ui-swatch` | Farbfeld / Swatch | outline (1.5) | ep-tl-icon |
-| `ui-table-cells` | Tabellenzellen | outline (1.5) | docs-nav (table) |
-| `ui-tag` | Preisschild / Tag | outline (1.5) | docs-nav (chips), docs-nav (leistung-detail) |
-| `ui-trophy-2` | Pokal (Variante) | outline | — |
-| `ui-trophy` | Pokal | outline (1.5) | ep-tl-icon |
-| `ui-user-group-2` | Personengruppe (Variante) | outline | ep-feature-icon @co |
-| `ui-user-group` | Personengruppe (3) | outline (1.25) | ep-card-icon @co, ep-card-icon @wo, col-3 |
-| `ui-users-2` | Personen (Variante) | outline | — |
-| `ui-users` | Personen (2) | outline (1) | — |
-| `ui-viewfinder-circle` | Sucher / Fokus | outline (1.25) | ep-card-icon @co |
-| `ui-window` | Browserfenster / Beispielseiten | outline (1.5) | docs-nav (examples) |
-| `ui-wrench-screwdriver` | Werkzeug (Schlüssel + Schraubendreher) | outline (1.25) | ep-card-icon @co |
+| Key | Export | Name | Stil (Stroke-Width) | Verwendung (DS-Kontext) |
+|---|---|---|---|---|
+| `ui-academic-cap` | `uiAcademicCap` | Doktorhut / Lernen | outline | ep-feature-icon @co |
+| `ui-adjustments-horizontal` | `uiAdjustmentsHorizontal` | Regler / Einstellungen | outline (1.25) | ep-card-icon @ki |
+| `ui-arrow-down-tray-2` | `uiArrowDownTray2` | Download (Outline-Variante) | outline (1.5) | docs-nav (cta) |
+| `ui-arrow-down-tray` | `uiArrowDownTray` | Download | solid | cta-dl-icon @ki |
+| `ui-arrow-path` | `uiArrowPath` | Aktualisieren / Kreislauf | outline (1.25) | ep-card-icon @wo |
+| `ui-arrow-trending-up` | `uiArrowTrendingUp` | Trend aufwärts | outline (1.25) | ep-card-icon @ki |
+| `ui-banknotes` | `uiBanknotes` | Geldscheine | outline | ep-feature-icon @co |
+| `ui-bars-3-center-left` | `uiBars3CenterLeft` | Balken, mittlere Zeile kurz und linksbündig (Footer) | outline (1.5) | docs-nav (footer) |
+| `ui-bars-3` | `uiBars3` | Balken (Hamburger-Navigation) | outline (1.5) | docs-nav (navigation) |
+| `ui-bolt-2` | `uiBolt2` | Blitz (Variante) | outline (1.25) | card-media @es |
+| `ui-bolt` | `uiBolt` | Blitz | outline (1.25) | ep-card-icon @co, ep-card-icon @ki |
+| `ui-book-open` | `uiBookOpen` | Aufgeschlagenes Buch / Quellen | outline (1.5) | docs-nav (sources) |
+| `ui-briefcase-2` | `uiBriefcase2` | Aktenkoffer (Variante) | outline | ep-section |
+| `ui-briefcase` | `uiBriefcase` | Aktenkoffer | outline (1.25) | ep-card-icon @co |
+| `ui-building-office` | `uiBuildingOffice` | Bürogebäude | outline (1.5) | ep-tl-icon |
+| `ui-calendar-days` | `uiCalendarDays` | Kalender (Tage) | outline (1.25) | ep-card-icon @co, col-3, stoerer-icon (Veranstaltung) |
+| `ui-calendar` | `uiCalendar` | Kalender | outline (1) | card-meta |
+| `ui-caret-down` | `uiCaretDown` | Caret nach unten (Nav-Toggle) | outline | ep-tab-toggle, ep-nav-btn ep-nav-item-toggle, ep-nav-btn ep-nav-item-toggle t-co |
+| `ui-chart-bar` | `uiChartBar` | Balkendiagramm | outline | ep-feature-icon @co |
+| `ui-chat-bubble-left-right` | `uiChatBubbleLeftRight` | Chat-Blasen (Dialog) | outline (1.5) | ep-feature-icon, ep-feature-icon @ki |
+| `ui-chat-bubble-oval-left-ellipsis` | `uiChatBubbleOvalLeftEllipsis` | Chat-Blase oval mit Auslassungspunkten | outline (1.5) | docs-nav (feedback) |
+| `ui-chat-bubble-oval` | `uiChatBubbleOval` | Chat-Blase (oval) | outline (1.25) | ep-card-icon @ki |
+| `ui-check-badge` | `uiCheckBadge` | Verifiziert-Abzeichen | solid | — |
+| `ui-check-circle-2` | `uiCheckCircle2` | Häkchen im Kreis (Variante) | outline (1.5) | — |
+| `ui-check-circle` | `uiCheckCircle` | Häkchen im Kreis | outline | — |
+| `ui-check` | `uiCheck` | Häkchen (klein) | outline | — |
+| `ui-chevron-down` | `uiChevronDown` | Chevron nach unten (FAQ/Akkordeon) | outline (1.25) | ep-faq, ep-faq-a, ep-compare-summary, article-toc-summary |
+| `ui-chevron-up-down` | `uiChevronUpDown` | Chevron auf/ab (Dropdown-Toggle) | outline (1.5) | docs-nav (dropdowns) |
+| `ui-circle-stack` | `uiCircleStack` | Datenbank / Stapel | outline (1.25) | card-media @es |
+| `ui-clock` | `uiClock` | Uhr | outline | ep-feature-icon @co |
+| `ui-code-bracket-2` | `uiCodeBracket2` | Code-Klammern (Variante) | outline (1.25) | ep-card-icon @es |
+| `ui-code-bracket-square` | `uiCodeBracketSquare` | Code-Klammern im Quadrat | outline (1.5) | docs-nav (code) |
+| `ui-code-bracket` | `uiCodeBracket` | Code-Klammern | outline | — |
+| `ui-cog-6tooth` | `uiCog6tooth` | Zahnrad (6 Zähne) | outline (1.5) | ep-feature-icon @ki |
+| `ui-cog` | `uiCog` | Zahnrad | outline (1.25) | ep-card-icon @ki |
+| `ui-computer-desktop` | `uiComputerDesktop` | Desktop-Rechner / Hero | outline (1.5) | docs-nav (hero) |
+| `ui-cpu-chip-2` | `uiCpuChip2` | CPU / Chip (Variante) | outline (1.5) | ep-feature-icon |
+| `ui-cpu-chip` | `uiCpuChip` | CPU / Chip | outline (1.25) | ep-card-icon @ki |
+| `ui-cube-2` | `uiCube2` | Würfel (Variante) | outline (1.5) | ep-feature-icon @ki |
+| `ui-cube-transparent` | `uiCubeTransparent` | Würfel transparent / Design Tokens | outline (1.5) | docs-nav (tokens) |
+| `ui-cube` | `uiCube` | Würfel / Box | outline (1.25) | ep-card-icon @ki |
+| `ui-currency-euro` | `uiCurrencyEuro` | Euro | outline (1.25) | col-3 |
+| `ui-cursor-arrow-rays` | `uiCursorArrowRays` | Cursor mit Strahlen / Interaktion | outline (1.5) | docs-nav (buttons) |
+| `ui-device-phone-mobile` | `uiDevicePhoneMobile` | Mobilgerät / Responsive | outline (1.5) | docs-nav (responsive) |
+| `ui-document-text` | `uiDocumentText` | Dokument mit Text / Wissensbeitrag | outline (1.5) | docs-nav (article) |
+| `ui-face-smile` | `uiFaceSmile` | Smiley / Icons | outline (1.5) | docs-nav (icons) |
+| `ui-flag` | `uiFlag` | Fahne / Markenrad | outline (1.5) | docs-nav (brand) |
+| `ui-folder` | `uiFolder` | Ordner | outline (1.25) | ep-card-icon @co |
+| `ui-hand-raised` | `uiHandRaised` | Erhobene Hand | outline (1.25) | ep-card-icon @co |
+| `ui-heart` | `uiHeart` | Herz | outline | ep-feature-icon @co |
+| `ui-information-circle` | `uiInformationCircle` | Info im Kreis | outline (1.25) | stoerer-icon (Info) |
+| `ui-language` | `uiLanguage` | Sprache / Typografie | outline (1.5) | docs-nav (typography) |
+| `ui-link` | `uiLink` | Kettenglied / Link | outline (1.5) | ep-feature-icon @ki |
+| `ui-list-bullet` | `uiListBullet` | Aufzählungsliste | outline | — |
+| `ui-lock-closed-2` | `uiLockClosed2` | Schloss (Variante) | outline (1.25) | ep-card-icon @ki |
+| `ui-lock-closed` | `uiLockClosed` | Schloss geschlossen | outline (1.5) | ep-feature-icon |
+| `ui-magnifying-glass` | `uiMagnifyingGlass` | Lupe | outline (1.25) | ep-card-icon @ki |
+| `ui-map-pin-2` | `uiMapPin2` | Standort-Pin (Variante) | outline (1.25) | col-3 |
+| `ui-map-pin` | `uiMapPin` | Standort-Pin | outline (1) | — |
+| `ui-megaphone` | `uiMegaphone` | Megafon / Verlautbarung | outline (1.25) | stoerer-icon (Pressemitteilung) |
+| `ui-newspaper-2` | `uiNewspaper2` | Zeitung / Artikel (Variante) | outline (1.5) | docs-nav (listing), docs-nav (events) |
+| `ui-newspaper` | `uiNewspaper` | Zeitung / Artikel | outline (1.25) | ep-card-icon @co, ep-card-icon @ki, stoerer-icon (Wissensbeitrag) |
+| `ui-pause` | `uiPause` | Pause | solid | logo-carousel-pause |
+| `ui-pencil-square` | `uiPencilSquare` | Stift im Quadrat / Bearbeiten | outline (1.5) | docs-nav (inputs) |
+| `ui-photo` | `uiPhoto` | Foto / Bildsprache | outline (1.5) | docs-nav (imagery) |
+| `ui-play` | `uiPlay` | Play | solid | icon-pause |
+| `ui-puzzle-piece` | `uiPuzzlePiece` | Puzzleteil | outline (1.5) | ep-tl-icon |
+| `ui-quote` | `uiQuote` | Zitatzeichen (Team-Stimme) | solid | team-voice-body @co |
+| `ui-rectangle-stack` | `uiRectangleStack` | Rechteck-Stapel / Cards | outline (1.5) | docs-nav (cards) |
+| `ui-rocket-launch` | `uiRocketLaunch` | Rakete | outline (1.5) | ep-tl-icon |
+| `ui-shield-check-2` | `uiShieldCheck2` | Schild mit Häkchen (Variante) | outline | ep-feature-icon @co |
+| `ui-shield-check` | `uiShieldCheck` | Schild mit Häkchen | outline (1.25) | ep-card-icon @co, ep-card-icon @ki, ep-card-icon @es |
+| `ui-sparkles-2` | `uiSparkles2` | Funkeln (Variante) | outline (1.5) | ep-feature-icon @ki |
+| `ui-sparkles-3` | `uiSparkles3` | Funkeln (Variante) | outline (1.25) | card-media @es |
+| `ui-sparkles-4` | `uiSparkles4` | Funkeln (Variante, drei Strahlen) | outline (1.5) | docs-nav (brand) |
+| `ui-sparkles` | `uiSparkles` | Funkeln / Sparkles | outline (1.25) | ep-card-icon @ki |
+| `ui-square-2-stack` | `uiSquare2Stack` | Quadrate gestapelt / Slider | outline (1.5) | docs-nav (slider) |
+| `ui-squares-2x2` | `uiSquares2x2` | Raster 2×2 | outline (1.25) | ep-card-icon @ki, ep-card-icon @es |
+| `ui-squares-plus` | `uiSquaresPlus` | Module / Raster+ | outline (1.25) | ep-card-icon @wo |
+| `ui-star-2` | `uiStar2` | Stern (Variante) | outline | — |
+| `ui-star` | `uiStar` | Stern | outline (1.5) | ep-tl-icon |
+| `ui-sun` | `uiSun` | Sonne / Theme-Umschalter | outline (1.5) | docs-nav (theme) |
+| `ui-swatch` | `uiSwatch` | Farbfeld / Swatch | outline (1.5) | ep-tl-icon |
+| `ui-table-cells` | `uiTableCells` | Tabellenzellen | outline (1.5) | docs-nav (table) |
+| `ui-tag` | `uiTag` | Preisschild / Tag | outline (1.5) | docs-nav (chips), docs-nav (leistung-detail) |
+| `ui-trophy-2` | `uiTrophy2` | Pokal (Variante) | outline | — |
+| `ui-trophy` | `uiTrophy` | Pokal | outline (1.5) | ep-tl-icon |
+| `ui-user-group-2` | `uiUserGroup2` | Personengruppe (Variante) | outline | ep-feature-icon @co |
+| `ui-user-group` | `uiUserGroup` | Personengruppe (3) | outline (1.25) | ep-card-icon @co, ep-card-icon @wo, col-3 |
+| `ui-users-2` | `uiUsers2` | Personen (Variante) | outline | — |
+| `ui-users` | `uiUsers` | Personen (2) | outline (1) | — |
+| `ui-viewfinder-circle` | `uiViewfinderCircle` | Sucher / Fokus | outline (1.25) | ep-card-icon @co |
+| `ui-window` | `uiWindow` | Browserfenster / Beispielseiten | outline (1.5) | docs-nav (examples) |
+| `ui-wrench-screwdriver` | `uiWrenchScrewdriver` | Werkzeug (Schlüssel + Schraubendreher) | outline (1.25) | ep-card-icon @co |