Add CTA right card variant

components/cards-public-page.html

@@ -20,6 +20,34 @@
           <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>
+
+            <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--inactive" type="button" data-component="button" data-component-state="inactive" disabled aria-disabled="true">
+                        Link-Button inaktiv
+                      </button>
+
+                      <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+                        Link-Button aktiv
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </section>
         </div>
       </div>
     </section>

styles/40-components-cards.css

@@ -236,6 +236,34 @@
   margin: var(--spacing-large) 0;
 }
 
+.sg-page-cards-public-page .sg-cards-public-page__cta-right-card {
+  width: 60%;
+  max-width: none;
+  margin-inline-start: auto;
+}
+
+.sg-page-cards-public-page .sg-cards-public-page__cta-right-body {
+  display: flex;
+  align-items: center;
+}
+
+.sg-page-cards-public-page .sg-cards-public-page__cta-right-grid {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+}
+
+.sg-page-cards-public-page .sg-cards-public-page__cta-right-copy {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sg-page-cards-public-page .sg-cards-public-page__cta-right-buttons {
+  flex: 0 0 auto;
+}
+
 .sg-page-cards .sg-group-card > .sg-card {
   flex: 0 0 100%;
   width: 100%;