From 8bc16561c1d6aae5d2d91a136310e5a5e7e59606 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:24:43 +0200
Subject: [PATCH] Slider als clean grid template bereinigen und
 output-typografie entkoppeln

---
 components/interactive-elements.html |  4 ++--
 styleguide.css                       | 33 ++++++++++++----------------
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 646a2cb..4d473b2 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -547,7 +547,7 @@
             value="6.5"
             aria-label="Slider"
           >
-          <output class="sg-slider-value sg-body" for="slider">6.5</output>
+          <output class="sg-slider-value" for="slider">6.5</output>
         </label>
       </div>
 
@@ -574,7 +574,7 @@
               value="2.0"
               aria-label="Slider inaktiv auswählbar"
             >
-            <output class="sg-slider-value sg-body" for="slider">2.0</output>
+            <output class="sg-slider-value" for="slider">2.0</output>
           </label>
         </div>
       </div>
diff --git a/styleguide.css b/styleguide.css
index 4c11b54..2605b10 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1063,23 +1063,24 @@ section + section {
       align-self: center;
       display: block;
       margin: 0;
+      line-height: 1;
     }
 
     #component-slider .sg-activatable-row {
       display: grid;
-      grid-template-columns: auto max-content minmax(0, 1fr) auto;
+      grid-template-columns: max-content minmax(0, 1fr);
       align-items: center;
       column-gap: var(--spacing-large);
       width: 100%;
     }
 
     #component-slider .sg-slider-activatable-header {
-      grid-column: 1 / 3;
       display: grid;
       grid-template-columns: max-content max-content;
       column-gap: var(--spacing-large);
       align-items: center;
-      width: max-content;
+      width: 100%;
+      justify-content: start;
     }
 
     #component-slider .sg-slider-activatable-header .sg-label {
@@ -1087,23 +1088,28 @@ section + section {
     }
 
     #component-slider .sg-activatable-row .sg-slider-row {
-      display: contents;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: center;
+      column-gap: var(--spacing-large);
+      width: 100%;
     }
 
     #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
-      grid-column: 3;
       width: 100%;
       max-width: none;
       min-width: 0;
+      grid-column: 1;
     }
 
     #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
-      grid-column: 4;
+      grid-column: 2;
       justify-self: start;
       min-width: 0;
       align-self: center;
       display: block;
       margin: 0;
+      line-height: 1;
     }
 
     .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
@@ -1153,10 +1159,9 @@ section + section {
       }
 
       #component-slider .sg-activatable-row {
-        grid-template-columns: auto max-content;
+        grid-template-columns: 1fr;
         align-items: start;
         row-gap: var(--spacing-small);
-        column-gap: var(--spacing-large);
       }
 
       #component-slider .sg-slider-activatable-header .sg-label {
@@ -1164,9 +1169,6 @@ section + section {
       }
 
       #component-slider .sg-activatable-row .sg-slider-row {
-        display: grid;
-        grid-column: 1 / -1;
-        grid-row: 2;
         grid-template-columns: minmax(0, 1fr) auto;
         column-gap: var(--spacing-large);
         align-items: center;
@@ -1174,21 +1176,14 @@ section + section {
       }
 
       #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
-        grid-column: 1;
-        grid-row: 1;
         width: 100%;
       }
 
       #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
-        grid-column: 2;
-        grid-row: 1;
         justify-self: start;
         align-self: center;
         margin: 0;
-      }
-
-      #component-slider .sg-activatable-row .sg-slider-row .sg-label {
-        display: contents;
+        line-height: 1;
       }
 
     }