From 7da494cca05e286b22786ad623d28a3b191c7bf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 18 May 2026 17:45:45 +0200
Subject: [PATCH] Use small spacing for grouped fundamentals content cards

---
 patterns/card-listen-seite.html | 100 +++++++++++++++++---------------
 styleguide.css                  |   6 ++
 2 files changed, 58 insertions(+), 48 deletions(-)

diff --git a/patterns/card-listen-seite.html b/patterns/card-listen-seite.html
index a7a3d2d..ff4ed3e 100644
--- a/patterns/card-listen-seite.html
+++ b/patterns/card-listen-seite.html
@@ -706,32 +706,34 @@
         </div>
       </div>
 
-      <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1">
-        <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
-          <div class="sg-strong">Box 1</div>
-        </div>
-        <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
-          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
-        </div>
-      </article>
+      <div class="sg-card-list-page-detail-group" aria-label="Fundamentalanalyse Karten Gruppe">
+        <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1">
+          <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+            <div class="sg-strong">Box 1</div>
+          </div>
+          <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+            <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
+          </div>
+        </article>
 
-      <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 2">
-        <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
-          <div class="sg-strong">Box 2</div>
-        </div>
-        <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
-          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
-        </div>
-      </article>
+        <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 2">
+          <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+            <div class="sg-strong">Box 2</div>
+          </div>
+          <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+            <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
+          </div>
+        </article>
 
-      <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 3">
-        <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
-          <div class="sg-strong">Box 3</div>
-        </div>
-        <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
-          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
-        </div>
-      </article>
+        <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 3">
+          <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+            <div class="sg-strong">Box 3</div>
+          </div>
+          <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+            <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
+          </div>
+        </article>
+      </div>
 
       <div class="sg-navigation-card-layout">
         <div class="sg-navigation-card-block">
@@ -760,32 +762,34 @@
       </div>
     </div>
 
-    <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1 mobil">
-      <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
-        <div class="sg-strong">Box 1</div>
-      </div>
-      <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
-        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
-      </div>
-    </article>
+    <div class="sg-card-list-page-detail-group" aria-label="Fundamentalanalyse Karten Gruppe mobil">
+      <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 1 mobil">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+          <div class="sg-strong">Box 1</div>
+        </div>
+        <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
+        </div>
+      </article>
 
-    <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 2 mobil">
-      <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
-        <div class="sg-strong">Box 2</div>
-      </div>
-      <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
-        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
-      </div>
-    </article>
+      <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 2 mobil">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+          <div class="sg-strong">Box 2</div>
+        </div>
+        <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
+        </div>
+      </article>
 
-    <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 3 mobil">
-      <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
-        <div class="sg-strong">Box 3</div>
-      </div>
-      <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
-        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
-      </div>
-    </article>
+      <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fundamentalanalyse Box 3 mobil">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+          <div class="sg-strong">Box 3</div>
+        </div>
+        <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
+        </div>
+      </article>
+    </div>
 
     <div class="sg-navigation-card-layout">
       <div class="sg-navigation-card-block">
diff --git a/styleguide.css b/styleguide.css
index 1b383e9..aa52669 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1718,6 +1718,12 @@ section + section {
     var(--card-segment-padding-horizontal);
 }
 
+.sg-card-list-page-detail-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
 .sg-card-list-page-mobile-detail {
   display: none;
   flex-direction: column;