From 517549ce6e2934189f9d12dfc2d5161d639caf6f 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:03:50 +0200
Subject: [PATCH] Promote help-icon overlay stacking fix to component level

---
 ...card-listen-fundamentalanalyse-drawer.html |  4 +--
 styleguide.css                                | 33 +++----------------
 2 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
index 35d2e39..62ec04d 100644
--- a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+++ b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
@@ -146,9 +146,9 @@
           </div>
         </div>
         <div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-2" role="tabpanel" aria-labelledby="vsf-fundamental-tab-2" hidden>
-          <article class="sg-card sg-card--content-card sg-vsf-marktbewertung-card" data-component="content-card" aria-label="Marktbewertung">
+          <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Marktbewertung">
             <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Marktbewertung</div></div>
-            <div class="sg-card-segment sg-card-segment--gray sg-vsf-marktbewertung-table-segment" data-component-part="card-body">
+            <div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
               <div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
                 <div class="sg-score-bar-item" data-component="score-bar">
                   <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Score:</p>
diff --git a/styleguide.css b/styleguide.css
index 642addf..9faf7e3 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1224,7 +1224,7 @@ section + section {
       position: absolute;
       top: calc(100% + var(--spacing-small));
       left: 0;
-      z-index: 2;
+      z-index: var(--layer-pulldown-panel);
       display: none;
       width: var(--layout-help-panel-width);
       padding: var(--spacing-large);
@@ -1238,6 +1238,10 @@ section + section {
       display: block;
     }
 
+    .sg-help-icon-wrap[data-open="true"] {
+      z-index: var(--layer-pulldown-panel);
+    }
+
     .sg-help-icon-wrap[data-align="left"] .sg-help-icon-panel {
       left: 0;
       right: auto;
@@ -2158,33 +2162,6 @@ section + section {
   color: var(--text-vsf-drawer-object-card-body);
 }
 
-.sg-vsf-marktbewertung-table-segment {
-  position: relative;
-  z-index: 3;
-}
-
-.sg-vsf-marktbewertung-table-segment .sg-help-icon-panel {
-  z-index: var(--layer-pulldown-panel);
-}
-
-.sg-vsf-marktbewertung-table-segment .sg-help-icon-wrap[data-open="true"] {
-  z-index: calc(var(--layer-pulldown-panel) + 1);
-}
-
-.sg-vsf-marktbewertung-table-segment .sg-data-table,
-.sg-vsf-marktbewertung-table-segment .sg-data-table thead,
-.sg-vsf-marktbewertung-table-segment .sg-data-table tbody,
-.sg-vsf-marktbewertung-table-segment .sg-data-table tr,
-.sg-vsf-marktbewertung-table-segment .sg-data-table th,
-.sg-vsf-marktbewertung-table-segment .sg-data-table td {
-  position: relative;
-  overflow: visible;
-}
-
-.sg-vsf-marktbewertung-table-segment .sg-data-table__label {
-  position: relative;
-}
-
 /* ========================================================= */
 /* Patterns: Text Layouts                                    */
 /* ========================================================= */