From 4f003a8709890ba1645521b5933bd95ff14b5641 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:08:28 +0200
Subject: [PATCH] =?UTF-8?q?Copy=20table=20and=20Graphik=20segments=20to=20?=
 =?UTF-8?q?Wachstum=20Profitabilit=C3=A4t=20Stabilit=C3=A4t=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...card-listen-fundamentalanalyse-drawer.html | 81 +++++++++++++++++++
 1 file changed, 81 insertions(+)

diff --git a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
index bfdcad2..b84b92a 100644
--- a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+++ b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
@@ -205,6 +205,33 @@
                 </div>
               </div>
             </div>
+            <div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
+              <table class="sg-data-table" aria-label="Wachstum Kennzahlen" data-component="data-table">
+                <thead>
+                  <tr>
+                    <th data-component-part="data-table-header-cell">Kennzahl</th>
+                    <th data-component-part="data-table-header-cell">Wert</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></td>
+                    <td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
+                  </tr>
+                  <tr>
+                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></td>
+                    <td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
+                  </tr>
+                  <tr>
+                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></td>
+                    <td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
+              <p class="sg-body">Graphik</p>
+            </div>
             <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Wachstum.</p></div>
           </article>
         </div>
@@ -223,6 +250,33 @@
                 </div>
               </div>
             </div>
+            <div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
+              <table class="sg-data-table" aria-label="Profitabilität Kennzahlen" data-component="data-table">
+                <thead>
+                  <tr>
+                    <th data-component-part="data-table-header-cell">Kennzahl</th>
+                    <th data-component-part="data-table-header-cell">Wert</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></td>
+                    <td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
+                  </tr>
+                  <tr>
+                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></td>
+                    <td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
+                  </tr>
+                  <tr>
+                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></td>
+                    <td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
+              <p class="sg-body">Graphik</p>
+            </div>
             <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Profitabilität.</p></div>
           </article>
         </div>
@@ -241,6 +295,33 @@
                 </div>
               </div>
             </div>
+            <div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
+              <table class="sg-data-table" aria-label="Stabilität Kennzahlen" data-component="data-table">
+                <thead>
+                  <tr>
+                    <th data-component-part="data-table-header-cell">Kennzahl</th>
+                    <th data-component-part="data-table-header-cell">Wert</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PE <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></td>
+                    <td class="sg-data-table__value" data-component-part="data-table-value-cell">27.5</td>
+                  </tr>
+                  <tr>
+                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PE Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></td>
+                    <td class="sg-data-table__value" data-component-part="data-table-value-cell">26.4</td>
+                  </tr>
+                  <tr>
+                    <td class="sg-data-table__label" data-component-part="data-table-label-cell">PEG Forward <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="data-table"><button class="sg-help-icon sg-data-table__help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></td>
+                    <td class="sg-data-table__value sg-score-state--positive" data-component-part="data-table-value-cell">0.35</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
+              <p class="sg-body">Graphik</p>
+            </div>
             <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Stabilität.</p></div>
           </article>
         </div>