From 9e62f784462f3533f4e6ba4d6c2b72bfeaf816cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 24 Jun 2026 09:21:39 +0200
Subject: [PATCH] Revert "Remove preview area from public cards page"

This reverts commit 6de7cb5807212e342cfaa6fd6c0b497d6eb13fd5.
---
 components/cards-public-page.html | 46 ++++++++++++++++---------------
 styles/40-components-cards.css    |  7 +++--
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/components/cards-public-page.html b/components/cards-public-page.html
index d65fb78..57e467c 100644
--- a/components/cards-public-page.html
+++ b/components/cards-public-page.html
@@ -15,34 +15,36 @@
     <section id="component-content-wrapper-card">
       <p class="sg-preview-label">Component: Content Wrapper Card</p>
 
-      <div class="sg-transparent-card" data-component="transparent-card">
-        <p class="sg-body">
-          Content Wrapper Card als Transparent Card ohne horizontale Außenabstände und mit vertikalem Abstand gemäss spacing-large.
-        </p>
+      <div class="sg-preview-area">
+        <div class="sg-transparent-card" data-component="transparent-card">
+          <p class="sg-body">
+            Content Wrapper Card als Transparent Card ohne horizontale Außenabstände und mit vertikalem Abstand gemäss spacing-large.
+          </p>
 
-        <section id="component-cta-right">
-          <p class="sg-preview-label">Component: CTA Right</p>
+          <section id="component-cta-right">
+            <p class="sg-preview-label">Component: CTA Right</p>
 
-          <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-cards-public-page__cta-right-card" data-component="content-card" aria-label="CTA Right">
-            <div class="sg-card-segment sg-card-segment--body sg-cards-public-page__cta-right-body">
-              <div class="sg-cards-public-page__cta-right-grid">
-                <div class="sg-cards-public-page__cta-right-copy">
-                  <p class="sg-body">
-                    Ein Satz Text als CTA-Hinweis.
-                  </p>
-                </div>
+            <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-cards-public-page__cta-right-card" data-component="content-card" aria-label="CTA Right">
+              <div class="sg-card-segment sg-card-segment--body sg-cards-public-page__cta-right-body">
+                <div class="sg-cards-public-page__cta-right-grid">
+                  <div class="sg-cards-public-page__cta-right-copy">
+                    <p class="sg-body">
+                      Ein Satz Text als CTA-Hinweis.
+                    </p>
+                  </div>
 
-                <div class="sg-cards-public-page__cta-right-buttons" data-component="link-buttons">
-                  <div class="sg-component-row">
-                    <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
-                      Link-Button
-                    </button>
+                  <div class="sg-cards-public-page__cta-right-buttons" data-component="link-buttons">
+                    <div class="sg-component-row">
+                      <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+                        Link-Button
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </article>
-        </section>
+            </article>
+          </section>
+        </div>
       </div>
     </section>
 
diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css
index f60fa6c..b8ad233 100644
--- a/styles/40-components-cards.css
+++ b/styles/40-components-cards.css
@@ -232,11 +232,14 @@
   max-width: none;
 }
 
-.sg-page-cards-public-page #component-content-wrapper-card {
+.sg-page-cards-public-page .sg-preview-area {
+  display: block;
+  width: calc(100% + (2 * var(--spacing-small)));
+  box-sizing: border-box;
   margin-inline: calc(-1 * var(--spacing-small));
 }
 
-.sg-page-cards-public-page #component-content-wrapper-card > .sg-transparent-card {
+.sg-page-cards-public-page .sg-preview-area > .sg-transparent-card {
   width: 100%;
   max-width: none;
   margin: var(--spacing-large) 0;