From f76f4b4322e8bb7c9f2e1e32d6142fe1b73b1cf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 4 Jun 2026 17:45:17 +0200
Subject: [PATCH] Remove left navigation wrapper card

---
 patterns/left-navigation.html          | 48 ++++++++++++--------------
 styles/29-patterns-left-navigation.css | 10 +-----
 2 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/patterns/left-navigation.html b/patterns/left-navigation.html
index 755a9b0..6ec97ab 100644
--- a/patterns/left-navigation.html
+++ b/patterns/left-navigation.html
@@ -16,34 +16,32 @@
       Die linke Navigationsspalte nutzt auf Desktop 15% der verfügbaren Breite. Die zweite Group Card ist leer und dient in der Demo nur dazu, den restlichen Bildschirm zu füllen.
     </p>
 
-    <div class="sg-left-navigation-pattern__surface">
-      <div class="sg-left-navigation-pattern__layout" aria-label="Left Navigation Demo">
-        <aside class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--navigation" data-component="group-card" aria-label="Linke Navigation">
-          <div class="sg-group-card__header-row sg-left-navigation-pattern__header-row">
-            <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Navigation</h2>
+    <div class="sg-left-navigation-pattern__layout" aria-label="Left Navigation Demo">
+      <aside class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--navigation" data-component="group-card" aria-label="Linke Navigation">
+        <div class="sg-group-card__header-row sg-left-navigation-pattern__header-row">
+          <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Navigation</h2>
 
-            <button
-              class="sg-interaction-element sg-button sg-button--active sg-left-navigation-pattern__toggle"
-              type="button"
-              data-left-navigation-toggle
-              aria-expanded="true"
-              aria-controls="left-navigation-menu"
-            >
-              Ausblenden
-            </button>
-          </div>
+          <button
+            class="sg-interaction-element sg-button sg-button--active sg-left-navigation-pattern__toggle"
+            type="button"
+            data-left-navigation-toggle
+            aria-expanded="true"
+            aria-controls="left-navigation-menu"
+          >
+            Ausblenden
+          </button>
+        </div>
 
-          <nav class="sg-tab-button-group" id="left-navigation-menu" role="tablist" aria-label="Linksmenue Items" data-component="tab-navigation" data-component-size="large" data-component-variant="linksmenu-items">
-            <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Übersicht</button>
-            <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Unternehmen</button>
-            <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Kennzahlen</button>
-            <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Nachrichten</button>
-            <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Einstellungen</button>
-          </nav>
-        </aside>
+        <nav class="sg-tab-button-group" id="left-navigation-menu" role="tablist" aria-label="Linksmenue Items" data-component="tab-navigation" data-component-size="large" data-component-variant="linksmenu-items">
+          <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Übersicht</button>
+          <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Unternehmen</button>
+          <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Kennzahlen</button>
+          <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Nachrichten</button>
+          <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Einstellungen</button>
+        </nav>
+      </aside>
 
-        <section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card" aria-hidden="true"></section>
-      </div>
+      <section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card" aria-hidden="true"></section>
     </div>
   </section>
 
diff --git a/styles/29-patterns-left-navigation.css b/styles/29-patterns-left-navigation.css
index b815d78..01924ca 100644
--- a/styles/29-patterns-left-navigation.css
+++ b/styles/29-patterns-left-navigation.css
@@ -8,14 +8,6 @@
   gap: var(--spacing-small);
 }
 
-.sg-left-navigation-pattern__surface {
-  width: 100%;
-  box-sizing: border-box;
-  padding: var(--spacing-large);
-  border-radius: var(--radius-card);
-  background: var(--color-light-grey);
-}
-
 .sg-left-navigation-pattern__layout {
   display: flex;
   align-items: stretch;
@@ -41,7 +33,7 @@
   width: 15vw;
   max-width: 15vw;
   padding: var(--spacing-small);
-  margin: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-small);
+  margin: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-small);
 }
 
 .sg-left-navigation-pattern__group-card--content {