feat(patterns): add full-width public CTA box

patterns/public-page-patterns.html

@@ -335,6 +335,32 @@
         </div>
       </div>
 
+      <p class="sg-preview-label">pattern: call to action full witdh</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-public-page-pattern-call-to-action-box sg-public-page-pattern-call-to-action-box--light sg-public-page-pattern-call-to-action-box--full-width" data-pattern="call-to-action-full-width" aria-label="Call to action full width">
+            <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow" data-component-part="card-header">
+              <div class="sg-strong">Hinweistext als Platzhalter</div>
+            </div>
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+              <ul class="sg-bullet-list">
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</li>
+                <li>Lorem ipsum dolor sit amet, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.</li>
+                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod ut labore et dolore.</li>
+                <li>Lorem ipsum dolor sit amet, reprehenderit in voluptate velit esse cillum dolore eu fugiat.</li>
+                <li>Lorem ipsum dolor sit amet, cupidatat non proident, sunt in culpa qui officia deserunt mollit.</li>
+              </ul>
+            </div>
+            <div class="sg-card-segment sg-card-segment--body sg-public-page-pattern-call-to-action-box__action" data-component-part="card-action">
+              <button class="sg-interaction-element sg-button sg-button--process" type="button" data-component="button" data-component-variant="process" data-component-state="active">
+                Prozess Button
+              </button>
+            </div>
+          </article>
+        </div>
+      </div>
+
       <p class="sg-preview-label">pattern: picture full width</p>
 
     <div class="sg-preview-area">

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

@@ -29,6 +29,10 @@
   color: var(--color-font-dark);
 }
 
+.sg-public-page-pattern-call-to-action-box--full-width {
+  width: 100%;
+}
+
 .sg-public-page-pattern-call-to-action-box__action {
   display: flex;
 }
@@ -37,6 +41,10 @@
   width: 100%;
 }
 
+.sg-public-page-pattern-call-to-action-box__action .sg-button--process {
+  width: 100%;
+}
+
 .sg-public-page-pattern-text-and-picture-right {
   --layout-public-page-pattern-text-picture-columns: repeat(2, minmax(0, 1fr));
   --layout-public-page-pattern-text-picture-gap: var(--spacing-large);