From 49f283aba8bf24adaf090ed02f9c1e53e80a36f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 21 May 2026 17:20:17 +0200
Subject: [PATCH] Move drawer controls from options row into single gray card
 segment

---
 .../vsf-card-listen-fundamentalanalyse-drawer.html   | 10 ++++------
 styleguide.css                                       | 12 ++++++++++++
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
index d79c848..fc0e61d 100644
--- a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+++ b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
@@ -57,17 +57,15 @@
         <button id="vsf-business-model-toggle" class="sg-interaction-element sg-button" type="button" aria-controls="vsf-business-model-text" aria-expanded="false">Geschäftsmodell anzeigen</button>
       </footer>
     </article>
-    <div class="sg-options-row" aria-label="Fundamentalanalyse Optionen" data-pattern="options-row">
-      <div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
-        <button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
+    <article class="sg-card sg-card--content-card sg-vsf-drawer-controls-card" data-component="content-card" aria-label="Fundamentalanalyse Steuerung">
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray sg-vsf-drawer-controls-row" data-component-part="card-body">
+        <button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="drawer-controls">
           <span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
           <span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
             <span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
           </span>
           <span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
         </button>
-      </div>
-      <div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
         <div class="sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="small">
           <button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Objekt-Menü öffnen" data-component-part="sandwich-trigger">
             <span class="sg-sandwich-button__icon" aria-hidden="true">
@@ -83,7 +81,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </article>
     <div class="sg-transparent-card sg-vsf-fundamental-analysis-intro" data-component="transparent-card">
       <h2 class="sg-heading-h2 sg-vsf-fundamental-analysis-heading">Fundamentalanalyse vom 12.5.2026</h2>
       <p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width">
diff --git a/styleguide.css b/styleguide.css
index 9879f24..5d51815 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2139,6 +2139,18 @@ section + section {
   color: var(--text-portal-header-tab);
 }
 
+.sg-vsf-drawer-controls-card {
+  --surface-card-body: var(--surface-card-segment-neutral);
+}
+
+.sg-card-segment.sg-vsf-drawer-controls-row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-small);
+  flex-wrap: nowrap;
+}
+
 .sg-vsf-drawer-object-card__heading {
   color: var(--text-vsf-drawer-object-card-heading);
   margin: 0;