From ead84469478cd4e9c5d81d8391bb36772a6d6054 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sat, 23 May 2026 10:13:26 +0200
Subject: [PATCH] Slider mobile/header spacing und vertikale Ausrichtung der
 Werte korrigieren

---
 styleguide.css | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/styleguide.css b/styleguide.css
index d82f7fb..f48ebda 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1071,15 +1071,15 @@ section + section {
     }
 
     #component-slider .sg-slider-activatable-header {
-      display: contents;
-    }
-
-    #component-slider .sg-slider-activatable-header .sg-mode-toggle {
-      grid-column: 1;
+      grid-column: 1 / 3;
+      display: grid;
+      grid-template-columns: max-content max-content;
+      column-gap: var(--spacing-large);
+      align-items: center;
+      width: max-content;
     }
 
     #component-slider .sg-slider-activatable-header .sg-label {
-      grid-column: 2;
       min-width: 0;
     }
 
@@ -1100,6 +1100,14 @@ section + section {
       min-width: calc(var(--interaction-height) * 1.25);
     }
 
+    #component-slider .sg-slider-row .sg-slider-value,
+    #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
+      display: inline-flex;
+      align-items: center;
+      height: var(--interaction-height);
+      line-height: 1;
+    }
+
     .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
       display: grid;
       grid-template-columns:
@@ -1153,17 +1161,7 @@ section + section {
         column-gap: var(--spacing-large);
       }
 
-      #component-slider .sg-slider-activatable-header {
-        display: contents;
-      }
-
-      #component-slider .sg-slider-activatable-header .sg-mode-toggle {
-        grid-column: 1;
-        grid-row: 1;
-      }
-
       #component-slider .sg-slider-activatable-header .sg-label {
-        grid-column: 2;
         grid-row: 1;
       }