Add right CTA box pattern

patterns/public-page-patterns.html

@@ -54,6 +54,26 @@
         </article>
       </div>
     </div>
+
+    <p class="sg-preview-label">pattern: CTA box right</p>
+
+    <div class="sg-preview-area">
+      <div class="sg-content-group-box" data-component="content-group-box">
+        <article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-call-to-action-card--align-right" data-component="call-to-action-card" aria-label="Call to action Card">
+          <div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
+            <p class="sg-body sg-call-to-action-card__text">
+              Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
+            </p>
+
+            <div class="sg-call-to-action-card__action">
+              <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
+                Call-to-action-Button
+              </button>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
   </section>
 
 </body>

styles/45-patterns-public-page-patterns.css

@@ -11,3 +11,7 @@
 .sg-page-public-page-patterns .sg-text-block--align-right {
   margin-left: auto;
 }
+
+.sg-page-public-page-patterns .sg-call-to-action-card--align-right {
+  margin-left: auto;
+}