Sync styleguide 2026.05.18.1

docs/styleguide/styles/28-patterns-notifications.css

@@ -42,6 +42,50 @@
   height: auto;
 }
 
+.sg-user-notification-pattern {
+  display: flex;
+  width: var(--layout-user-notification-card-width);
+  margin-inline: auto;
+}
+
+.sg-card-segment.sg-user-notification-pattern__actions {
+  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));
@@ -91,4 +135,12 @@
   .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
     height: auto;
   }
+
+  .sg-user-notification-pattern {
+    width: 100%;
+  }
+
+  .sg-user-notification-staple {
+    width: 100%;
+  }
 }