diff --git a/components/charts.html b/components/charts.html
index ad6c0ab..2239ca7 100644
--- a/components/charts.html
+++ b/components/charts.html
@@ -46,14 +46,14 @@
     <p class="sg-preview-label">Pattern: Gesamtscore-Balken</p>
 
     <div class="sg-form-preview-area sg-chart-preview-area">
-      <div class="sg-score-bar-list" data-component="score-bar-list">
+      <div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
         <div class="sg-score-bar-item" data-component="score-bar">
           <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
           <div class="sg-score-bar sg-score-bar--marker-mid" data-component-part="score-track">
             <div class="sg-score-bar__value sg-score-bar__value--positive sg-score-bar__value--w96" data-component-part="score-value" data-component-state="positive"></div>
             <div class="sg-score-bar__median-marker" data-component-part="score-median-marker"></div>
           </div>
-          <p class="sg-bar-label" data-component-part="score-state">attraktiv</p>
+          <p class="sg-bar-label sg-score-state--positive" data-component-part="score-state">attraktiv</p>
         </div>
       </div>
     </div>
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index 268f40a..b7fa4d9 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -160,6 +160,10 @@
       <tr><td>chart-value-neutral</td><td>color-signal-yellow</td><td>Füllfarbe neutraler Werte.</td></tr>
       <tr><td>chart-value-negative</td><td>color-signal-red</td><td>Füllfarbe negativer Werte.</td></tr>
       <tr><td>chart-median-line</td><td>color-font-dark</td><td>Farbe der Median-Markierung.</td></tr>
+      <tr><td>text-score-state-positive</td><td>chart-value-positive</td><td>Textfarbe positiver Zustandslabels am Gesamtscore-Balken.</td></tr>
+      <tr><td>layout-score-bar-item-columns</td><td>chart-axis-label-column-width und 1fr</td><td>Standardspalten der Score-Bar-Zeile: Labelspalte plus Balkenspur.</td></tr>
+      <tr><td>layout-score-bar-item-gap</td><td>spacing-large</td><td>Abstand zwischen Labelspalte und Balkenspur in der Score-Bar-Zeile.</td></tr>
+      <tr><td>layout-score-bar-item-single-score-columns</td><td>max-content, 1fr und max-content</td><td>Spalten der Score-Bar-Zeile in der Single-Score-Variante: Label, Balken, Zustandslabel.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Bar / Line Chart</h3>
diff --git a/styleguide.css b/styleguide.css
index cefa33f..4d3d398 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -111,6 +111,10 @@
   --chart-marker-line: var(--color-font-dark);
   --chart-median-line: var(--color-font-dark);
   --text-chart-default: var(--color-font-dark);
+  --text-score-state-positive: var(--chart-value-positive);
+  --layout-score-bar-item-columns: var(--chart-axis-label-column-width) 1fr;
+  --layout-score-bar-item-gap: var(--spacing-large);
+  --layout-score-bar-item-single-score-columns: max-content 1fr max-content;
 
   /* Semantic component tokens: Data display */
   --surface-data-table: var(--color-light-grey);
@@ -2224,20 +2228,20 @@ section + section {
 
 .sg-score-bar-item {
   display: grid;
-  grid-template-columns: var(--chart-axis-label-column-width) 1fr;
-  gap: var(--spacing-large);
+  grid-template-columns: var(--layout-score-bar-item-columns);
+  gap: var(--layout-score-bar-item-gap);
   align-items: center;
 }
 
-#pattern-gesamtscore-balken .sg-score-bar-item {
-  grid-template-columns: max-content 1fr max-content;
+.sg-score-bar-list--single-score {
+  --layout-score-bar-item-columns: var(--layout-score-bar-item-single-score-columns);
 }
 
-#pattern-gesamtscore-balken [data-component-part="score-state"] {
+.sg-score-state--positive {
   margin: 0;
   justify-self: end;
   text-align: right;
-  color: var(--chart-value-positive);
+  color: var(--text-score-state-positive);
 }
 
 .sg-score-bar-label {