From 8690a64a94de6a2dae28296740126c87a2531fd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 16 Jun 2026 20:40:48 +0200
Subject: [PATCH] Add demo text to left navigation content

---
 patterns/left-navigation.html | 44 ++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/patterns/left-navigation.html b/patterns/left-navigation.html
index f764ed0..3866239 100644
--- a/patterns/left-navigation.html
+++ b/patterns/left-navigation.html
@@ -41,8 +41,50 @@
         </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 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>