Sync styleguide 2026.05.18.1

docs/styleguide/patterns/left-navigation.html

@@ -41,7 +41,51 @@
         </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>
+      <section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card">
+        <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading" data-left-navigation-content-heading>Übersicht</h2>
+        <p class="sg-body sg-left-navigation-pattern__content-text">
+          Zeile 1: Überblick über die aktuelle Navigation.<br>
+          Zeile 2: Die Inhalte orientieren sich am aktiven Menüpunkt.<br>
+          Zeile 3: Jede Auswahl aktualisiert die Überschrift.<br>
+          Zeile 4: Die Content-Card bleibt optisch eigenständig.<br>
+          Zeile 5: Der Aufbau folgt dem linken Navigationsbereich.<br>
+          Zeile 6: Die Breite bleibt flexibel innerhalb des Layouts.<br>
+          Zeile 7: Lange Inhalte werden im Card-Rahmen geführt.<br>
+          Zeile 8: Der Text dient als Platzhalter für spätere Inhalte.<br>
+          Zeile 9: Die Darstellung bleibt auf Desktop und Mobile stabil.<br>
+          Zeile 10: Die Navigation links steuert den sichtbaren Zustand.<br>
+          Zeile 11: Der aktive Punkt ist visuell hervorgehoben.<br>
+          Zeile 12: Inaktive Punkte bleiben als klare Auswahloptionen sichtbar.<br>
+          Zeile 13: Die Content-Card reagiert auf den ausgewählten Eintrag.<br>
+          Zeile 14: Die Überschrift übernimmt den Namen des Menüpunkts.<br>
+          Zeile 15: Der Text kann später durch Fachinhalte ersetzt werden.<br>
+          Zeile 16: Die Gruppe bleibt als zusammenhängender Bereich lesbar.<br>
+          Zeile 17: Kartenabstände folgen den vorhandenen Styleguide-Tokens.<br>
+          Zeile 18: Keine lokalen Sonderregeln sind für den Demo-Text nötig.<br>
+          Zeile 19: Die Struktur bleibt bewusst einfach und nachvollziehbar.<br>
+          Zeile 20: Das Layout zeigt Navigation und Inhalt nebeneinander.<br>
+          Zeile 21: Der linke Bereich bleibt auf die Navigation fokussiert.<br>
+          Zeile 22: Der rechte Bereich zeigt den zugehörigen Inhalt.<br>
+          Zeile 23: Der Text dient als Füllmaterial für die Layoutprüfung.<br>
+          Zeile 24: Die Card-Höhe passt sich dem vorhandenen Inhalt an.<br>
+          Zeile 25: Scrollverhalten ist in diesem Demo-Zustand nicht nötig.<br>
+          Zeile 26: Die Darstellung bleibt ohne zusätzliche Interaktion verständlich.<br>
+          Zeile 27: Weitere Inhalte lassen sich später ergänzen oder ersetzen.<br>
+          Zeile 28: Die Auswahl folgt weiterhin dem Tab-Button-Verhalten.<br>
+          Zeile 29: Visuelle Konsistenz hat Vorrang vor dekorativen Effekten.<br>
+          Zeile 30: Der Demo-Text bleibt neutral und fachlich unaufgeladen.<br>
+          Zeile 31: Jede Zeile stützt die Prüfung der vertikalen Kartengröße.<br>
+          Zeile 32: Der Content-Bereich ist damit klar als gefüllte Fläche erkennbar.<br>
+          Zeile 33: Der Text nutzt die vorhandenen Typografie-Tokens.<br>
+          Zeile 34: Die Lesbarkeit bleibt auf hellem Inhaltshintergrund hoch.<br>
+          Zeile 35: Die Spaltenlogik wird durch den Text noch deutlicher.<br>
+          Zeile 36: Das Beispiel unterstützt die Wahrnehmung des Pattern-Rahmens.<br>
+          Zeile 37: Der Inhalt bleibt austauschbar und ohne Geschäftslogik.<br>
+          Zeile 38: Die Group Card dient als Container für den Demo-Inhalt.<br>
+          Zeile 39: Das Muster zeigt die vorgesehene Struktur des Portals.<br>
+          Zeile 40: Die finale Zeile schließt den Demo-Block sauber ab.
+        </p>
+      </section>
     </div>
   </section>
 
@@ -50,6 +94,7 @@
       const mediaQuery = window.matchMedia('(max-width: 767px)');
       const toggle = document.querySelector('[data-left-navigation-toggle]');
       const menu = document.getElementById('left-navigation-menu');
+      const contentHeading = document.querySelector('[data-left-navigation-content-heading]');
 
       if (!toggle || !menu) {
         return;
@@ -64,6 +109,14 @@
         toggle.classList.remove('sg-button--inactive');
       };
 
+      const setContentHeading = (button) => {
+        if (!contentHeading || !button) {
+          return;
+        }
+
+        contentHeading.textContent = button.textContent.trim();
+      };
+
       const syncMode = () => {
         if (mediaQuery.matches) {
           if (toggle.getAttribute('aria-expanded') !== 'true' && toggle.getAttribute('aria-expanded') !== 'false') {
@@ -92,9 +145,12 @@
           menu.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
             otherButton.setAttribute('aria-selected', String(otherButton === button));
           });
+
+          setContentHeading(button);
         });
       });
 
+      setContentHeading(menu.querySelector('.sg-tab-button[aria-selected="true"]'));
       syncMode();
       mediaQuery.addEventListener('change', syncMode);
     })();

docs/styleguide/styles/29-patterns-left-navigation.css

@@ -10,7 +10,7 @@
 
 .sg-left-navigation-pattern__layout {
   display: flex;
-  align-items: stretch;
+  align-items: flex-start;
   gap: 0;
   width: 100%;
   min-width: 0;
@@ -46,7 +46,6 @@
 
 @media (min-width: 768px) {
   .sg-left-navigation-pattern__group-card--navigation .sg-tab-button-group[data-component-variant="linksmenu-items"] {
-    height: 100%;
     justify-content: flex-start;
   }
 }

docs/styleguide/styles/30-layouts-card-list-page.css

@@ -7,21 +7,6 @@
   flex-direction: column;
 }
 
-.sg-card-list-page-drawer-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.45);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 220ms ease;
-  z-index: 999;
-}
-
-.sg-card-list-page-drawer-backdrop[data-open="true"] {
-  opacity: 1;
-  pointer-events: auto;
-}
-
 .sg-card-list-page-drawer {
   position: fixed;
   top: 0;
@@ -198,3 +183,4 @@
   margin: 0;
   color: var(--text-vsf-drawer-object-card-body);
 }
+