diff --git a/docs/styleguide/components/charts.html b/docs/styleguide/components/charts.html
index 881e73f..5b8511d 100644
--- a/docs/styleguide/components/charts.html
+++ b/docs/styleguide/components/charts.html
@@ -38,6 +38,13 @@
             <div class="sg-score-bar__median-marker sg-score-bar__median-marker--outline" data-component-part="score-median-marker" data-component-variant="outline"></div>
           </div>
         </div>
+
+        <div class="sg-score-bar-item" data-component="score-bar">
+          <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Kirschen</p>
+          <div class="sg-score-bar sg-score-bar--marker-mid sg-score-bar--no-value" role="img" aria-label="Keine Daten" data-component-part="score-track">
+            <span class="sg-score-bar__empty-state" data-component-part="score-empty-state">keine Daten</span>
+          </div>
+        </div>
       </div>
     </div>
   </section>
diff --git a/docs/styleguide/components/data-display.html b/docs/styleguide/components/data-display.html
index 40e86b3..b024738 100644
--- a/docs/styleguide/components/data-display.html
+++ b/docs/styleguide/components/data-display.html
@@ -72,5 +72,384 @@
 
   </section>
 
+  <!-- Component: Large Table -->
+  <section id="component-large-table">
+
+    <p class="sg-preview-label">Component: Large Table</p>
+
+    <article class="sg-card sg-large-table" data-component="large-table" role="table" aria-label="Beispiel Large Table">
+      <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-large-table__title-segment" data-component-part="large-table-header">
+        <div class="sg-strong">Large Table</div>
+        <span class="sg-search-field-row" data-component="search-field">
+          <span class="sg-input-single-line-wrap" data-has-value="false" data-component="single-line-input" data-component-state="inactive-selectable">
+            <input
+              class="sg-interaction-element sg-input-single-line sg-search-field-input sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+              type="text"
+              placeholder="Suche"
+              aria-label="Suchfeld ohne Eingabe"
+              data-large-table-search
+            >
+            <button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen">×</button>
+          </span>
+        </span>
+      </div>
+
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row sg-large-table__row--header" role="row" data-component-part="large-table-header-row">
+        <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="0">
+          <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 1 sortieren">
+            <span class="sg-large-table__sort-label">Spalte 1</span>
+            <span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
+          </button>
+        </div>
+        <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="1">
+          <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 2 sortieren">
+            <span class="sg-large-table__sort-label">Spalte 2</span>
+            <span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
+          </button>
+        </div>
+        <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="2">
+          <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 3 sortieren">
+            <span class="sg-large-table__sort-label">Spalte 3</span>
+            <span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
+          </button>
+        </div>
+        <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="3">
+          <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 4 sortieren">
+            <span class="sg-large-table__sort-label">Spalte 4</span>
+            <span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
+          </button>
+        </div>
+        <div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="4">
+          <button class="sg-large-table__sort-button" type="button" aria-label="Spalte 5 sortieren">
+            <span class="sg-large-table__sort-label">Spalte 5</span>
+            <span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
+          </button>
+        </div>
+      </div>
+
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
+        <div class="sg-large-table__cell" role="cell">A1</div>
+        <div class="sg-large-table__cell" role="cell">B1</div>
+        <div class="sg-large-table__cell" role="cell">C1</div>
+        <div class="sg-large-table__cell" role="cell">D1</div>
+        <div class="sg-large-table__cell" role="cell">E1</div>
+      </div>
+
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
+        <div class="sg-large-table__cell" role="cell">A2</div>
+        <div class="sg-large-table__cell" role="cell">B2</div>
+        <div class="sg-large-table__cell" role="cell">C2</div>
+        <div class="sg-large-table__cell" role="cell">D2</div>
+        <div class="sg-large-table__cell" role="cell">E2</div>
+      </div>
+
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
+        <div class="sg-large-table__cell" role="cell">A3</div>
+        <div class="sg-large-table__cell" role="cell">B3</div>
+        <div class="sg-large-table__cell" role="cell">C3</div>
+        <div class="sg-large-table__cell" role="cell">D3</div>
+        <div class="sg-large-table__cell" role="cell">E3</div>
+      </div>
+
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
+        <div class="sg-large-table__cell" role="cell">A4</div>
+        <div class="sg-large-table__cell" role="cell">B4</div>
+        <div class="sg-large-table__cell" role="cell">C4</div>
+        <div class="sg-large-table__cell" role="cell">D4</div>
+        <div class="sg-large-table__cell" role="cell">E4</div>
+      </div>
+
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
+        <div class="sg-large-table__cell" role="cell">A5</div>
+        <div class="sg-large-table__cell" role="cell">B5</div>
+        <div class="sg-large-table__cell" role="cell">C5</div>
+        <div class="sg-large-table__cell" role="cell">D5</div>
+        <div class="sg-large-table__cell" role="cell">E5</div>
+      </div>
+
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
+        <div class="sg-large-table__cell" role="cell">A6</div>
+        <div class="sg-large-table__cell" role="cell">B6</div>
+        <div class="sg-large-table__cell" role="cell">C6</div>
+        <div class="sg-large-table__cell" role="cell">D6</div>
+        <div class="sg-large-table__cell" role="cell">E6</div>
+      </div>
+
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
+        <div class="sg-large-table__cell" role="cell">A7</div>
+        <div class="sg-large-table__cell" role="cell">B7</div>
+        <div class="sg-large-table__cell" role="cell">C7</div>
+        <div class="sg-large-table__cell" role="cell">D7</div>
+        <div class="sg-large-table__cell" role="cell">E7</div>
+      </div>
+
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
+        <div class="sg-large-table__cell" role="cell">A8</div>
+        <div class="sg-large-table__cell" role="cell">B8</div>
+        <div class="sg-large-table__cell" role="cell">C8</div>
+        <div class="sg-large-table__cell" role="cell">D8</div>
+        <div class="sg-large-table__cell" role="cell">E8</div>
+      </div>
+
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
+        <div class="sg-large-table__cell" role="cell">A9</div>
+        <div class="sg-large-table__cell" role="cell">B9</div>
+        <div class="sg-large-table__cell" role="cell">C9</div>
+        <div class="sg-large-table__cell" role="cell">D9</div>
+        <div class="sg-large-table__cell" role="cell">E9</div>
+      </div>
+
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
+        <div class="sg-large-table__cell" role="cell">A10</div>
+        <div class="sg-large-table__cell" role="cell">B10</div>
+        <div class="sg-large-table__cell" role="cell">C10</div>
+        <div class="sg-large-table__cell" role="cell">D10</div>
+        <div class="sg-large-table__cell" role="cell">E10</div>
+      </div>
+
+      <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row sg-large-table__row--load-more" role="row" data-component-part="large-table-row" data-large-table-load-more-row="true">
+        <div class="sg-large-table__cell sg-large-table__cell--load-more" role="cell">
+          <div class="sg-navigation-card-layout sg-large-table__load-more-layout">
+            <div class="sg-navigation-card-block">
+              <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
+                <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+                  <div class="sg-navigation-card-center">
+                    <a class="sg-hyperlink" href="#" data-component="hyperlink" data-large-table-load-more-trigger="true">Mehr laden</a>
+                  </div>
+                </div>
+              </article>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+
+  </section>
+
+  <script>
+    (function () {
+      const table = document.querySelector('[data-component="large-table"]');
+      if (!table) {
+        return;
+      }
+
+      const headerCells = Array.from(table.querySelectorAll('[role="columnheader"][data-sort-key]'));
+      const headerButtons = headerCells.map((cell) => cell.querySelector('.sg-large-table__sort-button'));
+      const dataRows = Array.from(table.querySelectorAll('[data-component-part="large-table-row"]')).filter((row) => !row.hasAttribute('data-large-table-load-more-row'));
+      const loadMoreRow = table.querySelector('[data-large-table-load-more-row="true"]');
+      const loadMoreTrigger = table.querySelector('[data-large-table-load-more-trigger="true"]');
+      const headerRow = table.querySelector('[data-component-part="large-table-header-row"]');
+      const searchInput = table.querySelector('[data-large-table-search]');
+      const searchFieldWrap = table.querySelector('[data-component="single-line-input"]');
+      const searchClearButton = table.querySelector('.sg-input-clear-button');
+      let searchTimer = null;
+      let loadMoreTimer = null;
+      const totalRows = Array.from({ length: 20 }, (_, index) => {
+        const number = index + 1;
+        return ['A' + number, 'B' + number, 'C' + number, 'D' + number, 'E' + number];
+      });
+      const state = {
+        columnIndex: 0,
+        direction: 'ascending',
+        query: '',
+        loadingSearch: false,
+        loadingMore: false,
+        loadedCount: dataRows.length,
+      };
+
+      function createDataRow(values) {
+        const row = document.createElement('div');
+        row.className = 'sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row';
+        row.setAttribute('role', 'row');
+        row.setAttribute('data-component-part', 'large-table-row');
+        row.setAttribute('data-large-table-data-row', 'true');
+
+        values.forEach((value) => {
+          const cell = document.createElement('div');
+          cell.className = 'sg-large-table__cell';
+          cell.setAttribute('role', 'cell');
+          cell.textContent = value;
+          row.appendChild(cell);
+        });
+
+        return row;
+      }
+
+      function setHeaderState(activeIndex, direction) {
+        headerCells.forEach((cell, index) => {
+          const icon = cell.querySelector('.sg-large-table__sort-icon');
+          const isActive = index === activeIndex;
+
+          cell.setAttribute('aria-sort', isActive ? direction : 'none');
+          if (icon) {
+            icon.dataset.direction = isActive ? direction : 'ascending';
+          }
+        });
+
+        headerButtons.forEach((button, index) => {
+          if (!button) {
+            return;
+          }
+
+          const label = `Spalte ${index + 1}`;
+          button.setAttribute(
+            'aria-label',
+            index === activeIndex
+              ? `${label} ${direction === 'ascending' ? 'aufsteigend' : 'absteigend'} sortiert`
+              : `${label} sortieren`
+          );
+        });
+      }
+
+      function compareValues(left, right, direction) {
+        const normalizedLeft = left.trim();
+        const normalizedRight = right.trim();
+        const comparison = normalizedLeft.localeCompare(normalizedRight, 'de', {
+          numeric: true,
+          sensitivity: 'base',
+        });
+
+        return direction === 'ascending' ? comparison : -comparison;
+      }
+
+      function rowMatchesQuery(row, query) {
+        if (!query) {
+          return true;
+        }
+
+        return Array.from(row.querySelectorAll('[role="cell"]')).some((cell) => {
+          const value = cell.textContent || '';
+          return value.toLowerCase().includes(query);
+        });
+      }
+
+      function renderRows() {
+        table.setAttribute('aria-busy', state.loadingSearch || state.loadingMore ? 'true' : 'false');
+        const sortedRows = dataRows.slice().sort((leftRow, rightRow) => {
+          const leftCell = leftRow.querySelectorAll('[role="cell"]')[state.columnIndex];
+          const rightCell = rightRow.querySelectorAll('[role="cell"]')[state.columnIndex];
+          const leftValue = leftCell ? leftCell.textContent : '';
+          const rightValue = rightCell ? rightCell.textContent : '';
+
+          return compareValues(leftValue, rightValue, state.direction);
+        });
+
+        let visibleIndex = 0;
+        sortedRows.forEach((row) => {
+          table.appendChild(row);
+          const isVisible = rowMatchesQuery(row, state.query);
+          row.classList.toggle('sg-large-table__row--hidden', !isVisible);
+          row.setAttribute('aria-hidden', isVisible ? 'false' : 'true');
+          row.classList.remove('sg-large-table__row--striped-light');
+          if (isVisible && visibleIndex % 2 === 0) {
+            row.classList.add('sg-large-table__row--striped-light');
+          }
+          if (isVisible) {
+            visibleIndex += 1;
+          }
+        });
+
+        if (loadMoreRow) {
+          const hasMoreRows = state.loadedCount < totalRows.length;
+          loadMoreRow.classList.toggle('sg-large-table__row--hidden', !hasMoreRows);
+          loadMoreRow.setAttribute('aria-hidden', hasMoreRows ? 'false' : 'true');
+          table.appendChild(loadMoreRow);
+        }
+
+        setHeaderState(state.columnIndex, state.direction);
+      }
+
+      headerButtons.forEach((button, index) => {
+        if (!button) {
+          return;
+        }
+
+        button.addEventListener('click', () => {
+          const direction = state.columnIndex === index && state.direction === 'ascending'
+            ? 'descending'
+            : 'ascending';
+
+          state.columnIndex = index;
+          state.direction = direction;
+          renderRows();
+        });
+      });
+
+      if (searchInput) {
+        searchInput.addEventListener('input', () => {
+          if (searchFieldWrap) {
+            searchFieldWrap.setAttribute('data-has-value', searchInput.value ? 'true' : 'false');
+          }
+          state.loadingSearch = true;
+          renderRows();
+
+          if (searchTimer) {
+            window.clearTimeout(searchTimer);
+          }
+
+          searchTimer = window.setTimeout(() => {
+            state.query = searchInput.value.trim().toLowerCase();
+            state.loadingSearch = false;
+            renderRows();
+          }, 250);
+        });
+      }
+
+      if (searchClearButton && searchInput) {
+        searchClearButton.addEventListener('click', () => {
+          if (searchTimer) {
+            window.clearTimeout(searchTimer);
+            searchTimer = null;
+          }
+          searchInput.value = '';
+          state.query = '';
+          state.loadingSearch = false;
+          if (searchFieldWrap) {
+            searchFieldWrap.setAttribute('data-has-value', 'false');
+          }
+          renderRows();
+          searchInput.focus();
+        });
+      }
+
+      if (loadMoreTrigger) {
+        loadMoreTrigger.addEventListener('click', (event) => {
+          event.preventDefault();
+
+          if (state.loadingMore || state.loadedCount >= totalRows.length) {
+            return;
+          }
+
+          if (loadMoreTimer) {
+            window.clearTimeout(loadMoreTimer);
+          }
+
+          state.loadingMore = true;
+          loadMoreTrigger.textContent = 'Lädt ...';
+          renderRows();
+
+          loadMoreTimer = window.setTimeout(() => {
+            const nextCount = Math.min(state.loadedCount + 5, totalRows.length);
+            const nextRows = totalRows.slice(state.loadedCount, nextCount).map((values) => createDataRow(values));
+
+            nextRows.forEach((row) => {
+              dataRows.push(row);
+            });
+
+            state.loadedCount = nextCount;
+            state.loadingMore = false;
+            loadMoreTrigger.textContent = 'Mehr laden';
+            renderRows();
+          }, 350);
+        });
+      }
+
+      if (headerRow) {
+        setHeaderState(state.columnIndex, state.direction);
+      }
+      renderRows();
+    })();
+  </script>
+
 </body>
 </html>
diff --git a/docs/styleguide/components/interactive-elements.html b/docs/styleguide/components/interactive-elements.html
index d9dce58..2e294ca 100644
--- a/docs/styleguide/components/interactive-elements.html
+++ b/docs/styleguide/components/interactive-elements.html
@@ -57,6 +57,19 @@
     </div>
   </section>
 
+  <!-- Component: Link Menu Items -->
+  <section id="component-linksmenu-items">
+    <p class="sg-preview-label">Component: Linksmenue-Items</p>
+
+    <div class="sg-tab-button-group" 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="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: 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>
diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html
index e24fd7d..3643483 100644
--- a/docs/styleguide/index.html
+++ b/docs/styleguide/index.html
@@ -44,6 +44,7 @@
         <li><a href="./patterns/object-card.html">Object Card</a></li>
         <li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
         <li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
+        <li><a href="./patterns/left-navigation.html">Left Navigation</a></li>
         <li><a href="./patterns/notifications.html">Notifications</a></li>
         <li><a href="./patterns/content-cards-group.html">Content Cards Group</a></li>
         <li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
diff --git a/docs/styleguide/patterns/left-navigation.html b/docs/styleguide/patterns/left-navigation.html
new file mode 100644
index 0000000..a6d785a
--- /dev/null
+++ b/docs/styleguide/patterns/left-navigation.html
@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Pattern Left Navigation</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Pattern – Left Navigation</h1>
+
+  <section id="pattern-left-navigation" class="sg-left-navigation-pattern">
+    <p class="sg-preview-label">Pattern: Left Navigation</p>
+    <p class="sg-body">
+      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__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>
+
+        <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>
+
+  <script>
+    (() => {
+      const mediaQuery = window.matchMedia('(max-width: 767px)');
+      const toggle = document.querySelector('[data-left-navigation-toggle]');
+      const menu = document.getElementById('left-navigation-menu');
+
+      if (!toggle || !menu) {
+        return;
+      }
+
+      const setMenuState = (expanded) => {
+        menu.hidden = !expanded;
+        menu.classList.toggle('sg-left-navigation-pattern__menu--collapsed', !expanded);
+        toggle.setAttribute('aria-expanded', String(expanded));
+        toggle.textContent = expanded ? 'Ausblenden' : 'Einblenden';
+        toggle.classList.add('sg-button--active');
+        toggle.classList.remove('sg-button--inactive');
+      };
+
+      const syncMode = () => {
+        if (mediaQuery.matches) {
+          if (toggle.getAttribute('aria-expanded') !== 'true' && toggle.getAttribute('aria-expanded') !== 'false') {
+            setMenuState(true);
+            return;
+          }
+
+          setMenuState(toggle.getAttribute('aria-expanded') !== 'false');
+          return;
+        }
+
+        menu.hidden = false;
+        menu.classList.remove('sg-left-navigation-pattern__menu--collapsed');
+        toggle.setAttribute('aria-expanded', 'true');
+        toggle.textContent = 'Ausblenden';
+        toggle.classList.add('sg-button--active');
+        toggle.classList.remove('sg-button--inactive');
+      };
+
+      toggle.addEventListener('click', () => {
+        setMenuState(menu.hidden);
+      });
+
+      menu.querySelectorAll('.sg-tab-button').forEach((button) => {
+        button.addEventListener('click', () => {
+          menu.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
+            otherButton.setAttribute('aria-selected', String(otherButton === button));
+          });
+        });
+      });
+
+      syncMode();
+      mediaQuery.addEventListener('change', syncMode);
+    })();
+  </script>
+
+</body>
+</html>
diff --git a/docs/styleguide/styleguide.css b/docs/styleguide/styleguide.css
index 7ee74cb..66b3a38 100644
--- a/docs/styleguide/styleguide.css
+++ b/docs/styleguide/styleguide.css
@@ -11,6 +11,7 @@
 @import "./styles/26-patterns-vsf-list-card.css";
 @import "./styles/27-patterns-delete-confirmation.css";
 @import "./styles/28-patterns-notifications.css";
+@import "./styles/29-patterns-left-navigation.css";
 @import "./styles/30-layouts-card-list-page.css";
 @import "./styles/33-layouts-vsf-list-detailseite.css";
 @import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css";
diff --git a/docs/styleguide/styles/10-components-interactive-elements.css b/docs/styleguide/styles/10-components-interactive-elements.css
index 9d65a39..073f85c 100644
--- a/docs/styleguide/styles/10-components-interactive-elements.css
+++ b/docs/styleguide/styles/10-components-interactive-elements.css
@@ -155,6 +155,18 @@
       background: var(--surface-tab-compact-background);
     }
 
+    .sg-tab-button-group[data-component-variant="linksmenu-items"] {
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+    }
+
+    .sg-tab-button-group[data-component-variant="linksmenu-items"] .sg-tab-button {
+      width: 100%;
+      justify-content: flex-start;
+      text-align: left;
+    }
+
     .sg-tab-button-group[data-component-context="content"] {
       background: var(--surface-tab-compact-background);
     }
diff --git a/docs/styleguide/styles/29-patterns-left-navigation.css b/docs/styleguide/styles/29-patterns-left-navigation.css
new file mode 100644
index 0000000..fcea361
--- /dev/null
+++ b/docs/styleguide/styles/29-patterns-left-navigation.css
@@ -0,0 +1,75 @@
+/* ========================================================= */
+/* Patterns: Left Navigation                                 */
+/* ========================================================= */
+
+.sg-left-navigation-pattern {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.sg-left-navigation-pattern__layout {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.sg-left-navigation-pattern__header-row {
+  display: none;
+}
+
+.sg-left-navigation-pattern__toggle {
+  display: none;
+}
+
+.sg-left-navigation-pattern__menu--collapsed {
+  display: none;
+}
+
+.sg-left-navigation-pattern__group-card {
+  min-width: 0;
+}
+
+.sg-left-navigation-pattern__group-card--navigation {
+  flex: 0 0 15vw;
+  width: 15vw;
+  max-width: 15vw;
+  padding: var(--spacing-small);
+  margin: 0 var(--spacing-small) var(--spacing-small) 0;
+}
+
+.sg-left-navigation-pattern__group-card--content {
+  flex: 1 1 auto;
+}
+
+@media (max-width: 767px) {
+  .sg-left-navigation-pattern__layout {
+    flex-direction: column;
+  }
+
+  .sg-left-navigation-pattern__header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-small);
+    margin-bottom: 0;
+  }
+
+  .sg-left-navigation-pattern__toggle {
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
+  .sg-left-navigation-pattern__group-card--navigation {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: none;
+    margin: 0;
+  }
+
+  .sg-left-navigation-pattern__group-card--content {
+    margin-top: var(--spacing-small);
+  }
+}
diff --git a/docs/styleguide/styles/41-components-charts.css b/docs/styleguide/styles/41-components-charts.css
index 62dafa7..5e2d8e1 100644
--- a/docs/styleguide/styles/41-components-charts.css
+++ b/docs/styleguide/styles/41-components-charts.css
@@ -56,6 +56,10 @@
   --score-marker-position: 50%;
 }
 
+.sg-score-bar--no-value {
+  display: block;
+}
+
 .sg-score-bar__value {
   height: 100%;
   border-radius: var(--radius-graph-bar);
@@ -85,6 +89,21 @@
   background: transparent;
 }
 
+.sg-score-bar__empty-state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline-start: var(--spacing-small);
+  color: var(--text-chart-default);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+  pointer-events: none;
+}
+
 .sg-chart-preview-area {
   min-width: var(--layout-object-card-min-width);
   max-width: var(--layout-object-card-max-width);
diff --git a/docs/styleguide/styles/42-components-data-display.css b/docs/styleguide/styles/42-components-data-display.css
index bf6af2a..8d558b7 100644
--- a/docs/styleguide/styles/42-components-data-display.css
+++ b/docs/styleguide/styles/42-components-data-display.css
@@ -67,3 +67,110 @@
   background: var(--surface-data-table-help-icon);
 }
 
+.sg-large-table {
+  width: 100%;
+}
+
+.sg-large-table__title-segment {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+}
+
+.sg-large-table__row {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--color-white);
+}
+
+.sg-large-table__row--hidden {
+  display: none;
+}
+
+.sg-large-table__row--header {
+  font-weight: var(--font-weight-semibold);
+  background: var(--color-medium-grey);
+}
+
+.sg-large-table__row--striped-light {
+  background: var(--color-light-grey);
+}
+
+.sg-large-table__row--load-more {
+  background: var(--color-medium-grey);
+}
+
+.sg-large-table__cell {
+  min-width: 0;
+  padding: 0 var(--spacing-small);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sg-large-table__cell--load-more {
+  grid-column: 1 / -1;
+  padding: 0;
+  white-space: normal;
+}
+
+.sg-large-table__load-more-layout {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.sg-large-table__cell--header {
+  padding: 0;
+}
+
+.sg-large-table__sort-button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.2rem;
+  width: 100%;
+  padding: 0 var(--spacing-small);
+  border: var(--border-none);
+  background: var(--color-transparent);
+  color: inherit;
+  font: inherit;
+  font-weight: var(--font-weight-semibold);
+  text-align: left;
+  cursor: pointer;
+}
+
+.sg-large-table__sort-button:focus-visible {
+  outline: 2px solid var(--color-darkblue);
+  outline-offset: -2px;
+}
+
+.sg-large-table__sort-icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.85rem;
+  height: 0.85rem;
+  line-height: 1;
+  transform: translateY(0.02em);
+}
+
+.sg-large-table__sort-icon::before {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border-left: 0.36rem solid transparent;
+  border-right: 0.36rem solid transparent;
+  border-bottom: 0.55rem solid currentColor;
+}
+
+.sg-large-table__sort-icon[data-direction="descending"]::before {
+  transform: rotate(180deg);
+}
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index 30059d6..f39af61 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -638,6 +638,18 @@ section + section {
       background: var(--surface-tab-compact-background);
     }
 
+    .sg-tab-button-group[data-component-variant="linksmenu-items"] {
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+    }
+
+    .sg-tab-button-group[data-component-variant="linksmenu-items"] .sg-tab-button {
+      width: 100%;
+      justify-content: flex-start;
+      text-align: left;
+    }
+
     .sg-tab-button-group[data-component-context="content"] {
       background: var(--surface-tab-compact-background);
     }
@@ -2837,6 +2849,82 @@ section + section {
   }
 }
 
+/* ========================================================= */
+/* Patterns: Left Navigation                                 */
+/* ========================================================= */
+
+.sg-left-navigation-pattern {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.sg-left-navigation-pattern__layout {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.sg-left-navigation-pattern__header-row {
+  display: none;
+}
+
+.sg-left-navigation-pattern__toggle {
+  display: none;
+}
+
+.sg-left-navigation-pattern__menu--collapsed {
+  display: none;
+}
+
+.sg-left-navigation-pattern__group-card {
+  min-width: 0;
+}
+
+.sg-left-navigation-pattern__group-card--navigation {
+  flex: 0 0 15vw;
+  width: 15vw;
+  max-width: 15vw;
+  padding: var(--spacing-small);
+  margin: 0 var(--spacing-small) var(--spacing-small) 0;
+}
+
+.sg-left-navigation-pattern__group-card--content {
+  flex: 1 1 auto;
+}
+
+@media (max-width: 767px) {
+  .sg-left-navigation-pattern__layout {
+    flex-direction: column;
+  }
+
+  .sg-left-navigation-pattern__header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-small);
+    margin-bottom: 0;
+  }
+
+  .sg-left-navigation-pattern__toggle {
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
+  .sg-left-navigation-pattern__group-card--navigation {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: none;
+    margin: 0;
+  }
+
+  .sg-left-navigation-pattern__group-card--content {
+    margin-top: var(--spacing-small);
+  }
+}
+
 /* ========================================================= */
 /* Layouts: Card Listen Seite                                */
 /* ========================================================= */
@@ -3610,6 +3698,10 @@ section + section {
   --score-marker-position: 50%;
 }
 
+.sg-score-bar--no-value {
+  display: block;
+}
+
 .sg-score-bar__value {
   height: 100%;
   border-radius: var(--radius-graph-bar);
@@ -3639,6 +3731,21 @@ section + section {
   background: transparent;
 }
 
+.sg-score-bar__empty-state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline-start: var(--spacing-small);
+  color: var(--text-chart-default);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+  pointer-events: none;
+}
+
 .sg-chart-preview-area {
   min-width: var(--layout-object-card-min-width);
   max-width: var(--layout-object-card-max-width);
@@ -3895,6 +4002,113 @@ section + section {
   background: var(--surface-data-table-help-icon);
 }
 
+.sg-large-table {
+  width: 100%;
+}
+
+.sg-large-table__title-segment {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+}
+
+.sg-large-table__row {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--color-white);
+}
+
+.sg-large-table__row--hidden {
+  display: none;
+}
+
+.sg-large-table__row--header {
+  font-weight: var(--font-weight-semibold);
+  background: var(--color-medium-grey);
+}
+
+.sg-large-table__row--striped-light {
+  background: var(--color-light-grey);
+}
+
+.sg-large-table__row--load-more {
+  background: var(--color-medium-grey);
+}
+
+.sg-large-table__cell {
+  min-width: 0;
+  padding: 0 var(--spacing-small);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sg-large-table__cell--load-more {
+  grid-column: 1 / -1;
+  padding: 0;
+  white-space: normal;
+}
+
+.sg-large-table__load-more-layout {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.sg-large-table__cell--header {
+  padding: 0;
+}
+
+.sg-large-table__sort-button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.2rem;
+  width: 100%;
+  padding: 0 var(--spacing-small);
+  border: var(--border-none);
+  background: var(--color-transparent);
+  color: inherit;
+  font: inherit;
+  font-weight: var(--font-weight-semibold);
+  text-align: left;
+  cursor: pointer;
+}
+
+.sg-large-table__sort-button:focus-visible {
+  outline: 2px solid var(--color-darkblue);
+  outline-offset: -2px;
+}
+
+.sg-large-table__sort-icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.85rem;
+  height: 0.85rem;
+  line-height: 1;
+  transform: translateY(0.02em);
+}
+
+.sg-large-table__sort-icon::before {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border-left: 0.36rem solid transparent;
+  border-right: 0.36rem solid transparent;
+  border-bottom: 0.55rem solid currentColor;
+}
+
+.sg-large-table__sort-icon[data-direction="descending"]::before {
+  transform: rotate(180deg);
+}
 
 /* ========================================================= */
 /* Components: Typography                                    */
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index fd6947e..74f9fb3 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "cfc933f",
-  "syncedAtUtc": "2026-06-04T12:33:11Z",
+  "styleguideCommit": "a5e286f",
+  "syncedAtUtc": "2026-06-05T06:08:46Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index 30059d6..f39af61 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -638,6 +638,18 @@ section + section {
       background: var(--surface-tab-compact-background);
     }
 
+    .sg-tab-button-group[data-component-variant="linksmenu-items"] {
+      flex-direction: column;
+      align-items: stretch;
+      width: 100%;
+    }
+
+    .sg-tab-button-group[data-component-variant="linksmenu-items"] .sg-tab-button {
+      width: 100%;
+      justify-content: flex-start;
+      text-align: left;
+    }
+
     .sg-tab-button-group[data-component-context="content"] {
       background: var(--surface-tab-compact-background);
     }
@@ -2837,6 +2849,82 @@ section + section {
   }
 }
 
+/* ========================================================= */
+/* Patterns: Left Navigation                                 */
+/* ========================================================= */
+
+.sg-left-navigation-pattern {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.sg-left-navigation-pattern__layout {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.sg-left-navigation-pattern__header-row {
+  display: none;
+}
+
+.sg-left-navigation-pattern__toggle {
+  display: none;
+}
+
+.sg-left-navigation-pattern__menu--collapsed {
+  display: none;
+}
+
+.sg-left-navigation-pattern__group-card {
+  min-width: 0;
+}
+
+.sg-left-navigation-pattern__group-card--navigation {
+  flex: 0 0 15vw;
+  width: 15vw;
+  max-width: 15vw;
+  padding: var(--spacing-small);
+  margin: 0 var(--spacing-small) var(--spacing-small) 0;
+}
+
+.sg-left-navigation-pattern__group-card--content {
+  flex: 1 1 auto;
+}
+
+@media (max-width: 767px) {
+  .sg-left-navigation-pattern__layout {
+    flex-direction: column;
+  }
+
+  .sg-left-navigation-pattern__header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-small);
+    margin-bottom: 0;
+  }
+
+  .sg-left-navigation-pattern__toggle {
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
+  .sg-left-navigation-pattern__group-card--navigation {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: none;
+    margin: 0;
+  }
+
+  .sg-left-navigation-pattern__group-card--content {
+    margin-top: var(--spacing-small);
+  }
+}
+
 /* ========================================================= */
 /* Layouts: Card Listen Seite                                */
 /* ========================================================= */
@@ -3610,6 +3698,10 @@ section + section {
   --score-marker-position: 50%;
 }
 
+.sg-score-bar--no-value {
+  display: block;
+}
+
 .sg-score-bar__value {
   height: 100%;
   border-radius: var(--radius-graph-bar);
@@ -3639,6 +3731,21 @@ section + section {
   background: transparent;
 }
 
+.sg-score-bar__empty-state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline-start: var(--spacing-small);
+  color: var(--text-chart-default);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+  pointer-events: none;
+}
+
 .sg-chart-preview-area {
   min-width: var(--layout-object-card-min-width);
   max-width: var(--layout-object-card-max-width);
@@ -3895,6 +4002,113 @@ section + section {
   background: var(--surface-data-table-help-icon);
 }
 
+.sg-large-table {
+  width: 100%;
+}
+
+.sg-large-table__title-segment {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+}
+
+.sg-large-table__row {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--color-white);
+}
+
+.sg-large-table__row--hidden {
+  display: none;
+}
+
+.sg-large-table__row--header {
+  font-weight: var(--font-weight-semibold);
+  background: var(--color-medium-grey);
+}
+
+.sg-large-table__row--striped-light {
+  background: var(--color-light-grey);
+}
+
+.sg-large-table__row--load-more {
+  background: var(--color-medium-grey);
+}
+
+.sg-large-table__cell {
+  min-width: 0;
+  padding: 0 var(--spacing-small);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sg-large-table__cell--load-more {
+  grid-column: 1 / -1;
+  padding: 0;
+  white-space: normal;
+}
+
+.sg-large-table__load-more-layout {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.sg-large-table__cell--header {
+  padding: 0;
+}
+
+.sg-large-table__sort-button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.2rem;
+  width: 100%;
+  padding: 0 var(--spacing-small);
+  border: var(--border-none);
+  background: var(--color-transparent);
+  color: inherit;
+  font: inherit;
+  font-weight: var(--font-weight-semibold);
+  text-align: left;
+  cursor: pointer;
+}
+
+.sg-large-table__sort-button:focus-visible {
+  outline: 2px solid var(--color-darkblue);
+  outline-offset: -2px;
+}
+
+.sg-large-table__sort-icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.85rem;
+  height: 0.85rem;
+  line-height: 1;
+  transform: translateY(0.02em);
+}
+
+.sg-large-table__sort-icon::before {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border-left: 0.36rem solid transparent;
+  border-right: 0.36rem solid transparent;
+  border-bottom: 0.55rem solid currentColor;
+}
+
+.sg-large-table__sort-icon[data-direction="descending"]::before {
+  transform: rotate(180deg);
+}
 
 /* ========================================================= */
 /* Components: Typography                                    */