From 701b08123272731697ae9701c9d349cd2aaeab67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 2 Jun 2026 08:33:25 +0200
Subject: [PATCH] Add in-content large tab navigation variant

---
 components/interactive-elements.html          | 13 +++++++++++++
 styles/10-components-interactive-elements.css | 14 ++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 62ff8a1..d9dce58 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -57,6 +57,19 @@
     </div>
   </section>
 
+  <!-- Component: Button Tab Navigation In Content -->
+  <section id="component-button-tab-navigation-in-content">
+    <p class="sg-preview-label">Component: Tasten-Navigation-gross in content</p>
+
+    <div class="sg-tab-button-group" role="tablist" aria-label="Tasten Navigation im Content" data-component="tab-navigation" data-component-size="large" data-component-context="content">
+      <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Gesamtbewertung</button>
+      <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Marktbewertung</button>
+      <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Wachstum</button>
+      <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Profitabilität</button>
+      <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Stabilität</button>
+    </div>
+  </section>
+
   <!-- Component: Compact Button Tab Navigation -->
   <section id="component-button-tab-navigation-compact">
     <p class="sg-preview-label">Component: Tasten-Navigation-schmal</p>
diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css
index f518b68..9d65a39 100644
--- a/styles/10-components-interactive-elements.css
+++ b/styles/10-components-interactive-elements.css
@@ -155,6 +155,10 @@
       background: var(--surface-tab-compact-background);
     }
 
+    .sg-tab-button-group[data-component-context="content"] {
+      background: var(--surface-tab-compact-background);
+    }
+
     .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button {
       padding-inline: var(--layout-tab-navigation-large-padding-inline);
     }
@@ -169,6 +173,16 @@
       color: var(--text-tab-selected);
     }
 
+    .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="true"] {
+      background: var(--surface-control-default);
+      color: var(--text-control-default);
+    }
+
+    .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="false"] {
+      background: var(--surface-tab-compact-unselected);
+      color: var(--text-control-default);
+    }
+
     .sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] {
       background: var(--surface-tab-compact-unselected);
       color: var(--text-control-default);