feat: add stacked user notification pattern

styles/01-foundations.css

@@ -178,6 +178,7 @@
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
   --layout-notification-card-width: var(--dimension-notification-card-width);
   --layout-user-notification-card-width: var(--dimension-user-notification-card-width);
+  --layout-user-notification-staple-offset: var(--spacing-small);
   --dimension-notifications-card-min-width: 445px;
   --layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
   --layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);

styles/28-patterns-notifications.css

@@ -52,6 +52,40 @@
   align-items: flex-end;
 }
 
+.sg-user-notification-staple {
+  display: grid;
+  width: var(--layout-user-notification-card-width);
+  margin-inline: auto;
+  padding-inline-end: calc(var(--layout-user-notification-staple-offset) * 2);
+  padding-block-end: calc(var(--layout-user-notification-staple-offset) * 2);
+  box-sizing: border-box;
+}
+
+.sg-user-notification-staple > .sg-card {
+  grid-area: 1 / 1;
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+}
+
+.sg-user-notification-staple > .sg-card:nth-child(2) {
+  transform: translate(
+    var(--layout-user-notification-staple-offset),
+    var(--layout-user-notification-staple-offset)
+  );
+}
+
+.sg-user-notification-staple > .sg-card:nth-child(3) {
+  transform: translate(
+    calc(var(--layout-user-notification-staple-offset) * 2),
+    calc(var(--layout-user-notification-staple-offset) * 2)
+  );
+}
+
+.sg-card-segment.sg-user-notification-staple__actions {
+  align-items: flex-end;
+}
+
 .sg-vsf-meldungen-layout {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -105,4 +139,8 @@
   .sg-user-notification-pattern {
     width: 100%;
   }
+
+  .sg-user-notification-staple {
+    width: 100%;
+  }
 }