diff --git a/patterns/page-layout-public.html b/patterns/page-layout-public.html
index 5c4d416..e1ef523 100644
--- a/patterns/page-layout-public.html
+++ b/patterns/page-layout-public.html
@@ -43,6 +43,17 @@
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum.
         </p>
       </div>
+
+      <div class="sg-content-cards-group sg-page-layout-public__footer-group" data-pattern="content-cards-group" aria-label="Fusszeile">
+        <article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Fusszeile">
+          <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
+            <div class="sg-strong">Fusszeile</div>
+          </div>
+          <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+            <p class="sg-body">Platzhalterinhalt fuer die Fusszeile.</p>
+          </div>
+        </article>
+      </div>
     </div>
   </main>
 
diff --git a/styles/37-layouts-page-layout-public.css b/styles/37-layouts-page-layout-public.css
index e277bf1..2aa38d0 100644
--- a/styles/37-layouts-page-layout-public.css
+++ b/styles/37-layouts-page-layout-public.css
@@ -2,6 +2,18 @@
 /* Layouts: Page Layout Public                               */
 /* ========================================================= */
 
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 .sg-page-layout-public__heading-block {
   margin-top: var(--spacing-large);
   margin-bottom: var(--spacing-large);
@@ -11,4 +23,11 @@
   width: 70vw;
   max-width: 1100px;
   margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.sg-page-layout-public__footer-group {
+  margin-top: auto;
 }