From 6de7cb5807212e342cfaa6fd6c0b497d6eb13fd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 23 Jun 2026 17:27:51 +0200
Subject: [PATCH] Remove preview area from public cards page

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

diff --git a/components/cards-public-page.html b/components/cards-public-page.html
index 57e467c..d65fb78 100644
--- a/components/cards-public-page.html
+++ b/components/cards-public-page.html
@@ -15,36 +15,34 @@
     <section id="component-content-wrapper-card">
       <p class="sg-preview-label">Component: Content Wrapper Card</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>
+      <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>
+                <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>
-            </article>
-          </section>
-        </div>
+            </div>
+          </article>
+        </section>
       </div>
     </section>
 
diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css
index b8ad233..f60fa6c 100644
--- a/styles/40-components-cards.css
+++ b/styles/40-components-cards.css
@@ -232,14 +232,11 @@
   max-width: none;
 }
 
-.sg-page-cards-public-page .sg-preview-area {
-  display: block;
-  width: calc(100% + (2 * var(--spacing-small)));
-  box-sizing: border-box;
+.sg-page-cards-public-page #component-content-wrapper-card {
   margin-inline: calc(-1 * var(--spacing-small));
 }
 
-.sg-page-cards-public-page .sg-preview-area > .sg-transparent-card {
+.sg-page-cards-public-page #component-content-wrapper-card > .sg-transparent-card {
   width: 100%;
   max-width: none;
   margin: var(--spacing-large) 0;