From e46eb330f25a891678c0a7bdd2a7bc28d2afb0ee 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:11:14 +0200
Subject: [PATCH] =?UTF-8?q?Mobile=20Slider-Layout:=20Header=20(Schalter+We?=
 =?UTF-8?q?rt)=20und=20volle=20Breite=20f=C3=BCr=20Slider-Zeile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/interactive-elements.html | 18 ++++++------
 styleguide.css                       | 43 +++++++++++++++++++++++-----
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index fad115f..646a2cb 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -554,15 +554,17 @@
       <div class="sg-state-example">
         <p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
         <div class="sg-activatable-row">
-          <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-slider-activatable">
-            <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
-              <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
-              <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
-              <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
-            </span>
-          </button>
-          <label class="sg-slider-row sg-slider-row--inactive-selectable" id="component-slider-activatable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
+          <span class="sg-slider-activatable-header">
+            <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung: aus" data-activation-target="component-slider-activatable">
+              <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
+                <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
+                <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--right">an</span>
+                <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
+              </span>
+            </button>
             <span class="sg-label">Wert</span>
+          </span>
+          <label class="sg-slider-row sg-slider-row--inactive-selectable" id="component-slider-activatable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
             <input
               class="sg-interaction-element sg-slider sg-form-inactive-selectable"
               type="range"
diff --git a/styleguide.css b/styleguide.css
index e75cef5..d82f7fb 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1070,15 +1070,23 @@ section + section {
       width: 100%;
     }
 
-    #component-slider .sg-activatable-row .sg-slider-row {
+    #component-slider .sg-slider-activatable-header {
       display: contents;
     }
 
-    #component-slider .sg-activatable-row .sg-slider-row .sg-label {
+    #component-slider .sg-slider-activatable-header .sg-mode-toggle {
+      grid-column: 1;
+    }
+
+    #component-slider .sg-slider-activatable-header .sg-label {
       grid-column: 2;
       min-width: 0;
     }
 
+    #component-slider .sg-activatable-row .sg-slider-row {
+      display: contents;
+    }
+
     #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
       grid-column: 3;
       width: 100%;
@@ -1139,32 +1147,53 @@ section + section {
       }
 
       #component-slider .sg-activatable-row {
-        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-columns: auto max-content;
         align-items: start;
         row-gap: var(--spacing-small);
+        column-gap: var(--spacing-large);
       }
 
-      #component-slider .sg-activatable-row .sg-slider-row {
+      #component-slider .sg-slider-activatable-header {
         display: contents;
       }
 
-      #component-slider .sg-activatable-row .sg-slider-row .sg-label {
+      #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;
       }
 
+      #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;
+        width: 100%;
+      }
+
       #component-slider .sg-activatable-row .sg-slider-row .sg-slider {
         grid-column: 1;
-        grid-row: 2;
+        grid-row: 1;
+        width: 100%;
       }
 
       #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value {
         grid-column: 2;
-        grid-row: 2;
+        grid-row: 1;
         justify-self: end;
         align-self: center;
       }
 
+      #component-slider .sg-activatable-row .sg-slider-row .sg-label {
+        display: contents;
+      }
+
     }
 
     .sg-sandwich-button {