From 21c19ba5d1a5b82b0330938738952d7dc288f135 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:43:29 +0200
Subject: [PATCH] Replace fundamentals detail boxes with content-card component

---
 patterns/card-listen-seite.html | 60 ++++++++++++++++-----------------
 styleguide.css                  |  5 ---
 2 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/patterns/card-listen-seite.html b/patterns/card-listen-seite.html
index 8ee4eb4..a7a3d2d 100644
--- a/patterns/card-listen-seite.html
+++ b/patterns/card-listen-seite.html
@@ -706,29 +706,29 @@
         </div>
       </div>
 
-      <article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 1">
-        <header class="sg-card-segment sg-card-segment--header">
-          <h2 class="sg-heading-h2">Box 1</h2>
-        </header>
-        <div class="sg-card-segment sg-card-segment--body">
+      <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-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 2">
-        <header class="sg-card-segment sg-card-segment--header">
-          <h2 class="sg-heading-h2">Box 2</h2>
-        </header>
-        <div class="sg-card-segment sg-card-segment--body">
+      <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-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 3">
-        <header class="sg-card-segment sg-card-segment--header">
-          <h2 class="sg-heading-h2">Box 3</h2>
-        </header>
-        <div class="sg-card-segment sg-card-segment--body">
+      <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>
@@ -760,29 +760,29 @@
       </div>
     </div>
 
-    <article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 1 mobil">
-      <header class="sg-card-segment sg-card-segment--header">
-        <h2 class="sg-heading-h2">Box 1</h2>
-      </header>
-      <div class="sg-card-segment sg-card-segment--body">
+    <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-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 2 mobil">
-      <header class="sg-card-segment sg-card-segment--header">
-        <h2 class="sg-heading-h2">Box 2</h2>
-      </header>
-      <div class="sg-card-segment sg-card-segment--body">
+    <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-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 3 mobil">
-      <header class="sg-card-segment sg-card-segment--header">
-        <h2 class="sg-heading-h2">Box 3</h2>
-      </header>
-      <div class="sg-card-segment sg-card-segment--body">
+    <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>
diff --git a/styleguide.css b/styleguide.css
index 4acae9c..1b383e9 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1718,11 +1718,6 @@ section + section {
     var(--card-segment-padding-horizontal);
 }
 
-.sg-card-list-page-drawer__info-card.sg-card {
-  --surface-card-header-primary: var(--color-light-grey);
-  --text-card-header: var(--color-font-dark);
-}
-
 .sg-card-list-page-mobile-detail {
   display: none;
   flex-direction: column;