From 26488025bf88d02ed67ef6deddcf58f7c231f644 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:49:04 +0200
Subject: [PATCH] Route mobile fundamentals to dedicated page

---
 index.html                                    |  1 +
 ...card-listen-fundamentalanalyse-mobile.html | 69 +++++++++++++++
 patterns/card-listen-seite.html               | 84 +------------------
 styleguide.css                                | 18 ----
 4 files changed, 71 insertions(+), 101 deletions(-)
 create mode 100644 patterns/card-listen-fundamentalanalyse-mobile.html
diff --git a/index.html b/index.html
index 18c86d7..8f12f03 100644
--- a/index.html
+++ b/index.html
@@ -52,6 +52,7 @@
 
       <ul class="sg-index-list">
         <li><a href="./patterns/card-listen-seite.html">Card Listen Seite</a></li>
+        <li><a href="./patterns/card-listen-fundamentalanalyse-mobile.html">Card Listen Fundamentalanalyse Mobile</a></li>
       </ul>
     </section>
 
diff --git a/patterns/card-listen-fundamentalanalyse-mobile.html b/patterns/card-listen-fundamentalanalyse-mobile.html
new file mode 100644
index 0000000..1ff4cf7
--- /dev/null
+++ b/patterns/card-listen-fundamentalanalyse-mobile.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Card Listen Seite Fundamentalanalyse Mobile</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Layout – Fundamentalanalyse Mobile</h1>
+
+  <section class="sg-card-list-page" aria-label="Fundamentalanalyse Seite mobil">
+    <div class="sg-navigation-card-layout">
+      <div class="sg-navigation-card-block">
+        <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste oben">
+          <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+            <div class="sg-navigation-card-center">
+              <a class="sg-hyperlink" href="./card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+
+    <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 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">
+        <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste unten">
+          <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+            <div class="sg-navigation-card-center">
+              <a class="sg-hyperlink" href="./card-listen-seite.html" data-component="hyperlink">zurück zur Liste</a>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+  </section>
+
+</body>
+</html>
diff --git a/patterns/card-listen-seite.html b/patterns/card-listen-seite.html
index ff4ed3e..6102f62 100644
--- a/patterns/card-listen-seite.html
+++ b/patterns/card-listen-seite.html
@@ -749,61 +749,6 @@
     </div>
   </aside>
 
-  <section class="sg-card-list-page-mobile-detail" aria-label="Fundamentalanalyse mobil" aria-hidden="true" hidden>
-    <div class="sg-navigation-card-layout">
-      <div class="sg-navigation-card-block">
-        <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste oben">
-          <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
-            <div class="sg-navigation-card-center">
-              <button class="sg-interaction-element sg-hyperlink" type="button" data-mobile-back>zurück zur Liste</button>
-            </div>
-          </div>
-        </article>
-      </div>
-    </div>
-
-    <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 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">
-        <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste unten">
-          <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
-            <div class="sg-navigation-card-center">
-              <button class="sg-interaction-element sg-hyperlink" type="button" data-mobile-back>zurück zur Liste</button>
-            </div>
-          </div>
-        </article>
-      </div>
-    </div>
-  </section>
-
   <script>
     const updateObjectCardGridRowState = () => {
       document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
@@ -1062,11 +1007,8 @@
       updateState();
     });
 
-    const cardListPage = document.querySelector('.sg-card-list-page');
-    const mobileFundamentalPage = document.querySelector('.sg-card-list-page-mobile-detail');
     const fundamentalDrawer = document.querySelector('.sg-card-list-page-drawer');
     const fundamentalDrawerCloseButtons = document.querySelectorAll('[data-drawer-close]');
-    const mobileBackButtons = document.querySelectorAll('[data-mobile-back]');
     const mobileBreakpoint = window.matchMedia('(max-width: 767px)');
 
     const setFundamentalDrawerState = (open) => {
@@ -1078,17 +1020,6 @@
       fundamentalDrawer.setAttribute('aria-hidden', String(!open));
     };
 
-    const setMobileFundamentalPageState = (open) => {
-      if (!cardListPage || !mobileFundamentalPage) {
-        return;
-      }
-
-      cardListPage.hidden = open;
-      cardListPage.setAttribute('aria-hidden', String(open));
-      mobileFundamentalPage.hidden = !open;
-      mobileFundamentalPage.setAttribute('aria-hidden', String(!open));
-    };
-
     document.querySelectorAll('.sg-object-card__action').forEach((button) => {
       if (button.textContent?.trim() !== 'Fundamentalanalyse') {
         return;
@@ -1096,7 +1027,7 @@
 
       button.addEventListener('click', () => {
         if (mobileBreakpoint.matches) {
-          setMobileFundamentalPageState(true);
+          window.location.href = './card-listen-fundamentalanalyse-mobile.html';
           return;
         }
 
@@ -1110,22 +1041,9 @@
       });
     });
 
-    mobileBackButtons.forEach((backButton) => {
-      backButton.addEventListener('click', () => {
-        setMobileFundamentalPageState(false);
-      });
-    });
-
     document.addEventListener('keydown', (event) => {
       if (event.key === 'Escape') {
         setFundamentalDrawerState(false);
-        setMobileFundamentalPageState(false);
-      }
-    });
-
-    window.addEventListener('resize', () => {
-      if (!mobileBreakpoint.matches) {
-        setMobileFundamentalPageState(false);
       }
     });
 
diff --git a/styleguide.css b/styleguide.css
index e6de348..4c04c2d 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -1724,16 +1724,6 @@ section + section {
   gap: var(--spacing-small);
 }
 
-.sg-card-list-page-mobile-detail {
-  display: none;
-  flex-direction: column;
-  gap: var(--spacing-large);
-}
-
-.sg-card-list-page-mobile-detail[hidden] {
-  display: none;
-}
-
 .sg-card-list-page > * + * {
   margin-top: var(--spacing-large);
 }
@@ -1770,14 +1760,6 @@ section + section {
     display: none;
   }
 
-  .sg-card-list-page-mobile-detail {
-    display: flex;
-  }
-
-  .sg-card-list-page-mobile-detail[hidden] {
-    display: none;
-  }
-
   .sg-card-list-page__intro-card.sg-card {
     align-self: stretch;
     width: 100%;
