Adjust portal header mobile row layout

patterns/portal-header.html

@@ -18,7 +18,7 @@
     </p>
 
     <p class="sg-table-label sg-text-on-dark">
-      Mobile: gleiche Struktur, ebenfalls volle verfügbare Breite; kein eigener visueller Zustand.
+      Mobile: Sandwich-Menü und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter.
     </p>
 
     <article class="sg-portal-header-pattern-variant" aria-label="Portal Header ohne Options Row">

styleguide.css

@@ -1377,11 +1377,31 @@ section + section {
 
 @media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) {
   .sg-portal-header {
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "brand menu"
+      "tabs tabs";
+    align-items: start;
+    row-gap: var(--spacing-small);
+    column-gap: var(--spacing-large);
   }
 
   .sg-portal-header__main {
-    gap: var(--spacing-small);
+    display: contents;
+  }
+
+  .sg-portal-header__brand {
+    grid-area: brand;
+  }
+
+  .sg-portal-header__tabs {
+    grid-area: tabs;
+  }
+
+  .sg-portal-header__menu-wrap {
+    grid-area: menu;
+    justify-self: end;
   }
 }