Refine VSF list card token cascade and docs

.codex/skills/styleguide-erstellung/SKILL.md

@@ -232,6 +232,7 @@ Vor Abschluss prüfen:
 
 - richtige Styleguide-Ebene gewählt
 - Kaskade Foundations → semantische Tokens → Components → Patterns → Layouts → Templates → Usage Guidelines eingehalten
+- Lokale Overrides sind streng verboten!! Nur sauber kaskadierende Tokens!!
 - keine hardcoded Design Values außerhalb der Foundations
 - neue oder geänderte semantische Tokens in `styleguide.css` gepflegt
 - bestehende Struktur von `styleguide.css` eingehalten
@@ -245,6 +246,7 @@ Vor Abschluss prüfen:
 - keine lokalen Token-Blöcke oder `:root`-Definitionen in HTML-Dateien
 - keine Refactorings außerhalb Scope
 - keine Insellösungen oder Workarounds eingeführt
+- Nach der Bearbeitung konsequent alle Legacy entfernen und nur ein cleanes production-reifes Styleguide als Resultat zulassen
 
 ## Ergebnisbericht
 

AGENTS.md

@@ -13,7 +13,7 @@
 
 ## Verbindliche Arbeitsweise
 
-- Der Skill `styleguide erstellung` ist immer zu nutzen.
+- Der Skill `styleguide erstellung` ist immer zwingend!!! zu nutzen und vollständig zu befolgen
 - Lokaler Skill-Pfad: `/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide/.codex/skills/styleguide-erstellung/SKILL.md`.
 - Repository ist lokal + Gitea-Remote geführt.
 - Jede umgesetzte Änderung wird direkt mit passender Commit-Message committed und nach `origin/main` gepusht.
@@ -30,16 +30,5 @@
 - Verantwortung: Styleguide fachlich sauber, kaskadierend, konsistent und langfristig skalierbar führen und erweitern.
 - Ziel: wiederverwendbare UI-Bausteine, konsistente Portal-Interfaces, wartbare Struktur, keine lokalen Sonderlösungen.
 
-## Verbindliche Token-Policy (Merge vs. Behalten)
+## Minimalscope
-
+Arbeite IMMER mit minimalem Lesescope: Lies nur die Dateien und Ausschnitte, die für die aktuelle Aufgabe zwingend nötig sind. Vermeide breite Codebase-Scans, unnötige Kontextsuche und grosse Dateiöffnungen, um Tokenverbrauch und Kontextgrösse klein zu halten. Auch kein breites Lesen in db Tabellen, lies Schemas und kleine Stichproben. Stelle gezielte Rückfragen, wenn der benötigte Kontext unklar ist.
-- Semantische Tokens dürfen denselben Foundation-Wert teilen, wenn sie unterschiedliche fachliche Bedeutung, UI-Kontexte oder Zustandssemantik ausdrücken.
-- Semantische Tokens mit identischem Wert sind zu mergen, wenn Zweck, UI-Kontext und fachlicher Name identisch sind.
-- Reine Namensduplikate ohne zusätzliche Semantik sind unzulässig.
-- Alias-Ketten auf maximal eine sinnvolle Fach-Abstraktion begrenzen; unnötige Alias-of-Alias-Ketten reduzieren.
-- Pattern-spezifische Tokens nur bei eigener fachlicher Pattern-Verantwortung; sonst bestehende Component-/Layout-Tokens verwenden.
-- Sehr spezifische Einzelwerte (z. B. feste `rem`/`%` für Einzelfälle) nur als begründete Ausnahme; sonst bestehende Foundation-/Dimension-Tokens verwenden oder erweitern.
-- Vor jeder Token-Bereinigung klassifizieren:
-  - `mergebar`: semantisch gleich, zusammenführbar
-  - `behalten`: semantisch verschieden trotz gleichem Wert
-  - `prüfen`: Unsicherheit, fachliche Klärung nötig
-- Breaking Token-Renames sind ohne explizite Freigabe verboten; Standard ist rückwärtskompatible Migration (Alias-Übergang oder schrittweise Referenzumstellung).

semantic-tokens-patterns.html

@@ -87,6 +87,13 @@
       <tr><td>text-align-text-layout-column-right</td><td>right</td><td>Textausrichtung der rechten Spalte im Pattern Dreispaltig verteilt.</td></tr>
     </tbody></table>
 
+    <h3 class="sg-sub-heading sg-section-h3">VSF List Card</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
+      <tr><td>text-vsf-list-card-limit-note</td><td>color-signal-red</td><td>Hinweistextfarbe für die Meldung bei erreichter maximaler Listenanzahl.</td></tr>
+      <tr><td>layout-vsf-list-card-summary-offset-block-start</td><td>layout-company-card-analysis-gap-after-moat</td><td>Vertikaler Abstand vor dem Summary-Block in der VSF List Card.</td></tr>
+      <tr><td>layout-vsf-list-card-delete-confirmation-target-max-width</td><td>layout-object-group-card-max-width</td><td>Maximalbreite der Delete-Confirmation-Zielkarte innerhalb der VSF-List-Card-Demo.</td></tr>
+    </tbody></table>
+
     <h3 class="sg-sub-heading sg-section-h3">Multiselektions-Pulldown</h3>
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
       <tr><td>layout-multiselect-pulldown-label-column-width-fallback</td><td>max-content</td><td>Fallback-Breite der gemeinsamen Labelspalte im Panel, bis die längste Labelbreite per Pattern-Logik ermittelt wurde.</td></tr>

styles/01-foundations.css

@@ -191,6 +191,9 @@
   --text-vsf-drawer-object-card-heading: var(--color-font-light);
   --text-vsf-drawer-object-card-body: var(--color-font-light);
   --layout-vsf-drawer-object-card-column-gap: var(--spacing-large);
+  --text-vsf-list-card-limit-note: var(--color-signal-red);
+  --layout-vsf-list-card-summary-offset-block-start: var(--layout-company-card-analysis-gap-after-moat);
+  --layout-vsf-list-card-delete-confirmation-target-max-width: var(--layout-object-group-card-max-width);
   --surface-text-layout-preview: var(--color-light-grey);
   --layout-text-layout-column-gap: var(--spacing-large);
   --layout-text-layout-two-column-columns: repeat(2, minmax(0, 1fr));

styles/26-patterns-vsf-list-card.css

@@ -2,19 +2,15 @@
 /* Patterns: VSF List Card                                   */
 /* ========================================================= */
 
-#layout-vsf-list-card .sg-object-card[data-pattern="object-group-card"] {
-  --text-vsf-list-card-limit-note: var(--color-signal-red);
-}
-
 #layout-vsf-list-card .sg-vsf-list-card-limit-note {
   margin: 0 0 var(--space-16) 0;
   color: var(--text-vsf-list-card-limit-note);
 }
 
 #layout-vsf-list-card .sg-vsf-list-card__summary {
-  margin: var(--layout-company-card-analysis-gap-after-moat) 0 0 0;
+  margin: var(--layout-vsf-list-card-summary-offset-block-start) 0 0 0;
 }
 
 #layout-vsf-list-card [data-pattern="overlay-card"] {
-  --layout-delete-confirmation-target-max-width: var(--layout-object-group-card-max-width);
+  --layout-delete-confirmation-target-max-width: var(--layout-vsf-list-card-delete-confirmation-target-max-width);
 }