From 2a6dae10637bd4ebd25abb1dffbeb296fbd827be 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:33:07 +0200
Subject: [PATCH] Normalize sandwich menu item spacing to match pulldown
 options

---
 components/interactive-elements.html          |  12 +-
 patterns/card-listen-seite.html               | 124 +++++++++---------
 patterns/company-card.html                    |   6 +-
 patterns/object-card.html                     |  16 +--
 patterns/portal-header.html                   |   8 +-
 ...card-listen-fundamentalanalyse-drawer.html |   6 +-
 patterns/vsf-card-listen-seite.html           |  40 +++---
 styleguide.css                                |   5 +
 8 files changed, 111 insertions(+), 106 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 84ec904..9e56c0b 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -546,9 +546,9 @@
         </button>
 
         <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Portal-Menü" data-component-part="sandwich-panel">
-          <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-          <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-          <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+          <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+          <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+          <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
         </div>
       </div>
     </div>
@@ -566,9 +566,9 @@
         </button>
 
         <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Objekt-Menü" data-component-part="sandwich-panel">
-          <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-          <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-          <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+          <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+          <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+          <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
         </div>
       </div>
     </div>
diff --git a/patterns/card-listen-seite.html b/patterns/card-listen-seite.html
index e88762d..4359a8d 100644
--- a/patterns/card-listen-seite.html
+++ b/patterns/card-listen-seite.html
@@ -25,8 +25,8 @@
           </button>
 
           <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-            <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
-            <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
+            <a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
+            <a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
           </div>
         </div>
 
@@ -129,9 +129,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -157,9 +157,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -185,9 +185,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -213,9 +213,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -241,9 +241,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -269,9 +269,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -297,9 +297,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -325,9 +325,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -353,9 +353,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -381,9 +381,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -409,9 +409,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -437,9 +437,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -465,9 +465,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -493,9 +493,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -521,9 +521,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -549,9 +549,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -577,9 +577,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -605,9 +605,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -633,9 +633,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -661,9 +661,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
diff --git a/patterns/company-card.html b/patterns/company-card.html
index cf29d27..c4133c4 100644
--- a/patterns/company-card.html
+++ b/patterns/company-card.html
@@ -26,9 +26,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
diff --git a/patterns/object-card.html b/patterns/object-card.html
index b1ddde5..75e6987 100644
--- a/patterns/object-card.html
+++ b/patterns/object-card.html
@@ -26,9 +26,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -44,7 +44,7 @@
       </article>
 
       <article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
-        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
         <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
           <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
         </div>
@@ -56,7 +56,7 @@
       </article>
 
       <article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
-        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
         <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
           <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
         </div>
@@ -68,7 +68,7 @@
       </article>
 
       <article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
-        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
         <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
           <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
         </div>
@@ -80,7 +80,7 @@
       </article>
 
       <article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
-        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
         <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
           <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
         </div>
@@ -92,7 +92,7 @@
       </article>
 
       <article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
-        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a></div></div></header>
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
         <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
           <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
         </div>
diff --git a/patterns/portal-header.html b/patterns/portal-header.html
index 0f30858..33466e5 100644
--- a/patterns/portal-header.html
+++ b/patterns/portal-header.html
@@ -40,8 +40,8 @@
             </button>
 
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
+              <a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
+              <a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
             </div>
           </div>
 
@@ -78,8 +78,8 @@
             </button>
 
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
+              <a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
+              <a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
             </div>
           </div>
 
diff --git a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
index 1517aa4..2ed52f1 100644
--- a/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+++ b/patterns/vsf-card-listen-fundamentalanalyse-drawer.html
@@ -35,9 +35,9 @@
             </span>
           </button>
           <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Objekt-Menü" data-component-part="sandwich-panel">
-            <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-            <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-            <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+            <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+            <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+            <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
           </div>
         </div>
       </header>
diff --git a/patterns/vsf-card-listen-seite.html b/patterns/vsf-card-listen-seite.html
index 270c0fe..b88ef8c 100644
--- a/patterns/vsf-card-listen-seite.html
+++ b/patterns/vsf-card-listen-seite.html
@@ -25,8 +25,8 @@
           </button>
 
           <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-            <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Admin</a>
-            <a class="sg-sandwich-menu-link sg-body" href="#" data-component-part="sandwich-menu-link">Logout</a>
+            <a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
+            <a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
           </div>
         </div>
 
@@ -129,9 +129,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -219,9 +219,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -309,9 +309,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -399,9 +399,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -489,9 +489,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
@@ -579,9 +579,9 @@
               </span>
             </button>
             <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
-              <a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
+              <a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
             </div>
           </div>
         </header>
diff --git a/styleguide.css b/styleguide.css
index e5417bf..87a8c48 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1174,8 +1174,13 @@ section + section {
     }
 
     .sg-sandwich-menu-link {
+      margin: 0;
       text-decoration: none;
       white-space: nowrap;
+      font-family: var(--font-family-base);
+      font-size: var(--font-size-base);
+      font-weight: var(--font-weight-regular);
+      line-height: var(--line-height-base);
     }
 
     .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-link {