Add right-side fundamentals drawer to card list page

patterns/card-listen-seite.html

@@ -692,6 +692,16 @@
     </div>
   </section>
 
+  <aside class="sg-card-list-page-drawer" aria-label="Fundamentalanalyse" aria-hidden="true" data-open="false">
+    <header class="sg-card-list-page-drawer__header">
+      <h2 class="sg-heading-h2 sg-card-list-page-drawer__title">Fundamentalanalyse</h2>
+      <button class="sg-interaction-element sg-button" type="button" data-drawer-close>Schließen</button>
+    </header>
+    <div class="sg-card-list-page-drawer__content">
+      <p class="sg-body">Detailinhalte zur Fundamentalanalyse werden hier angezeigt.</p>
+    </div>
+  </aside>
+
   <script>
     const updateObjectCardGridRowState = () => {
       document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
@@ -950,6 +960,40 @@
       updateState();
     });
 
+    const fundamentalDrawer = document.querySelector('.sg-card-list-page-drawer');
+    const fundamentalDrawerCloseButton = fundamentalDrawer?.querySelector('[data-drawer-close]');
+
+    const setFundamentalDrawerState = (open) => {
+      if (!fundamentalDrawer) {
+        return;
+      }
+
+      fundamentalDrawer.dataset.open = String(open);
+      fundamentalDrawer.setAttribute('aria-hidden', String(!open));
+    };
+
+    document.querySelectorAll('.sg-object-card__action').forEach((button) => {
+      if (button.textContent?.trim() !== 'Fundamentalanalyse') {
+        return;
+      }
+
+      button.addEventListener('click', () => {
+        setFundamentalDrawerState(true);
+      });
+    });
+
+    if (fundamentalDrawerCloseButton) {
+      fundamentalDrawerCloseButton.addEventListener('click', () => {
+        setFundamentalDrawerState(false);
+      });
+    }
+
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        setFundamentalDrawerState(false);
+      }
+    });
+
     document.addEventListener('click', (event) => {
       if (!event.target.closest('.sg-sandwich-menu-wrap')) {
         document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {

styleguide.css

@@ -170,8 +170,11 @@
   --surface-navigation-card-body: var(--color-white);
   --surface-content-block-card-title: var(--color-light-grey);
   --surface-content-block-card-content: var(--color-white);
+  --surface-card-list-drawer: var(--color-light-grey);
   --text-content-block-card-title: var(--color-font-dark);
   --text-content-block-card-content: var(--color-font-dark);
+  --text-card-list-drawer: var(--color-font-dark);
+  --layout-card-list-drawer-width: 30%;
 
   /* Typography */
   --font-family-base: "Open Sans", sans-serif;
@@ -1667,6 +1670,50 @@ section + section {
   flex-direction: column;
 }
 
+.sg-card-list-page-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--layout-card-list-drawer-width);
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 220ms ease;
+  background: var(--surface-card-list-drawer);
+  color: var(--text-card-list-drawer);
+  box-shadow: var(--shadow-overlay);
+  z-index: 1000;
+}
+
+.sg-card-list-page-drawer[data-open="true"] {
+  transform: translateX(0);
+}
+
+.sg-card-list-page-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-small);
+  padding:
+    var(--card-segment-padding-vertical)
+    var(--card-segment-padding-horizontal);
+}
+
+.sg-card-list-page-drawer__title {
+  margin: 0;
+  color: inherit;
+}
+
+.sg-card-list-page-drawer__content {
+  padding:
+    0
+    var(--card-segment-padding-horizontal)
+    var(--card-segment-padding-vertical)
+    var(--card-segment-padding-horizontal);
+}
+
 .sg-card-list-page > * + * {
   margin-top: var(--spacing-large);
 }