From 47575e96878a63e986df7a5f676b179916c1b221 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 20 May 2026 13:43:49 +0200
Subject: [PATCH] Add right-aligned score state text to single score bar
 pattern

---
 components/charts.html | 1 +
 styleguide.css         | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/charts.html b/components/charts.html
index 0aa8db0..d034b01 100644
--- a/components/charts.html
+++ b/components/charts.html
@@ -53,6 +53,7 @@
             <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-strong" data-component-part="score-state">attraktiv</p>
         </div>
       </div>
     </div>
diff --git a/styleguide.css b/styleguide.css
index fe7295e..5553456 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2230,7 +2230,13 @@ section + section {
 }
 
 #pattern-gesamtscore-balken .sg-score-bar-item {
-  grid-template-columns: max-content 1fr;
+  grid-template-columns: max-content 1fr max-content;
+}
+
+#pattern-gesamtscore-balken [data-component-part="score-state"] {
+  margin: 0;
+  justify-self: end;
+  text-align: right;
 }
 
 .sg-score-bar-label {