From e4277b18679734bf08a2fbc16e15c72d638b2c3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 15 Jun 2026 13:59:31 +0200
Subject: [PATCH] Sync styleguide 2026.05.18.1

---
 .../assets/icons/star-filled-white.svg        |   3 +
 docs/styleguide/assets/icons/star-filled.svg  |   3 +
 docs/styleguide/assets/icons/star-outline.svg |   3 +
 docs/styleguide/foundations.html              |   2 +
 docs/styleguide/index.html                    |   2 +-
 docs/styleguide/patterns/company-card.html    |   9 +-
 .../patterns/delete-confirmation-overlay.html | 401 +++++++++++++-----
 docs/styleguide/semantic-tokens-patterns.html |   3 +-
 docs/styleguide/styles/01-foundations.css     |   3 +-
 .../10-components-interactive-elements.css    |   7 +
 .../styles/23-patterns-object-group-card.css  |  15 +
 .../styles/25-patterns-form-sections.css      |   2 +-
 .../27-patterns-delete-confirmation.css       |  73 +++-
 public/assets/styleguide.upstream.css         | 100 ++++-
 public/assets/styleguide.upstream.meta.json   |   4 +-
 public/assets/styles.css                      | 101 ++++-
 16 files changed, 617 insertions(+), 114 deletions(-)
 create mode 100644 docs/styleguide/assets/icons/star-filled-white.svg
 create mode 100644 docs/styleguide/assets/icons/star-filled.svg
 create mode 100644 docs/styleguide/assets/icons/star-outline.svg

diff --git a/docs/styleguide/assets/icons/star-filled-white.svg b/docs/styleguide/assets/icons/star-filled-white.svg
new file mode 100644
index 0000000..81003b1
--- /dev/null
+++ b/docs/styleguide/assets/icons/star-filled-white.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
+  <path d="m12 2.8 2.89 5.85 6.46.94-4.68 4.56 1.1 6.44L12 17.53 6.23 20.59l1.1-6.44L2.65 9.59l6.46-.94L12 2.8Z" fill="#FFFFFF"/>
+</svg>
diff --git a/docs/styleguide/assets/icons/star-filled.svg b/docs/styleguide/assets/icons/star-filled.svg
new file mode 100644
index 0000000..a95a036
--- /dev/null
+++ b/docs/styleguide/assets/icons/star-filled.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
+  <path d="m12 2.8 2.89 5.85 6.46.94-4.68 4.56 1.1 6.44L12 17.53 6.23 20.59l1.1-6.44L2.65 9.59l6.46-.94L12 2.8Z" fill="#000000"/>
+</svg>
diff --git a/docs/styleguide/assets/icons/star-outline.svg b/docs/styleguide/assets/icons/star-outline.svg
new file mode 100644
index 0000000..f9ee578
--- /dev/null
+++ b/docs/styleguide/assets/icons/star-outline.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
+  <path d="m12 2.8 2.89 5.85 6.46.94-4.68 4.56 1.1 6.44L12 17.53 6.23 20.59l1.1-6.44L2.65 9.59l6.46-.94L12 2.8Z" fill="none" stroke="#000000" stroke-width="1.6" stroke-linejoin="round"/>
+</svg>
diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html
index 735cb29..79eb4f1 100644
--- a/docs/styleguide/foundations.html
+++ b/docs/styleguide/foundations.html
@@ -158,6 +158,8 @@
         <tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
+        <tr><td>delete-confirmation-overlay-offset-block-start</td><td>10%</td><td>Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße.</td></tr>
+        <tr><td>delete-confirmation-overlay-max-height</td><td>calc(100vh - 10vh)</td><td>Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays.</td></tr>
         <tr><td>notifications-card-min-width</td><td>445px</td><td>Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns.</td></tr>
         <tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
         <tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr>
diff --git a/docs/styleguide/index.html b/docs/styleguide/index.html
index 5dfd14b..e0bf853 100644
--- a/docs/styleguide/index.html
+++ b/docs/styleguide/index.html
@@ -67,7 +67,7 @@
 
       <h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</h3>
       <ul class="sg-index-list">
-        <li><a href="./patterns/company-card.html">Company Card</a></li>
+        <li><a href="./patterns/company-card.html">VSF Layout – Company Card</a></li>
         <li><a href="./patterns/vsf-list-card.html">VSF List Card</a></li>
         <li><a href="./patterns/vsf-card-listen-seite.html">VSF Card Listen Seite</a></li>
         <li><a href="./patterns/vsf-list-detailseite.html">VSF List Detailseite</a></li>
diff --git a/docs/styleguide/patterns/company-card.html b/docs/styleguide/patterns/company-card.html
index a3723fe..61daefc 100644
--- a/docs/styleguide/patterns/company-card.html
+++ b/docs/styleguide/patterns/company-card.html
@@ -3,12 +3,12 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Styleguide – Layout Company Card</title>
+  <title>Styleguide – VSF Layout – Company Card</title>
   <link rel="stylesheet" href="../styleguide.css">
 </head>
 <body>
 
-  <h1 class="sg-main-heading">Layout – Company Card</h1>
+  <h1 class="sg-main-heading">VSF Layout – Company Card</h1>
   <section id="layout-company-card">
     <p class="sg-preview-label">Layout: Company Card</p>
     <p class="sg-body">Dieses Layout basiert auf der Object Card und zeigt initial eine einzelne Company Card Instanz.</p>
@@ -16,7 +16,10 @@
     <div class="sg-object-card-grid">
       <article class="sg-card sg-object-card" data-pattern="company-card" aria-label="Company Card">
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="company-card-header">
-          <div class="sg-strong">Netflix, Inc.</div>
+          <div class="sg-company-card__header-title">
+            <div class="sg-strong">Netflix, Inc.</div>
+            <span class="sg-company-card__header-star" aria-hidden="true"></span>
+          </div>
           <div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
             <button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
               <span class="sg-sandwich-button__icon" aria-hidden="true">
diff --git a/docs/styleguide/patterns/delete-confirmation-overlay.html b/docs/styleguide/patterns/delete-confirmation-overlay.html
index 44e25a2..eebe00c 100644
--- a/docs/styleguide/patterns/delete-confirmation-overlay.html
+++ b/docs/styleguide/patterns/delete-confirmation-overlay.html
@@ -13,7 +13,7 @@
   <section id="pattern-overlay-card" class="sg-delete-confirmation-pattern">
     <p class="sg-preview-label">Pattern: Overlay Card</p>
 
-    <div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-object-card" data-pattern="overlay-card" data-dialog-open="false">
+    <div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-object-card" data-pattern="overlay-card" data-dialog-open="false" data-overlay-confirmation-value="DELETE">
       <article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" aria-label="Zu löschendes Objekt">
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
           <div class="sg-strong">Alcon Inc.</div>
@@ -53,7 +53,7 @@
               type="text"
               placeholder="DELETE"
               aria-label="Löschbestätigung durch DELETE"
-              data-delete-confirmation-input
+              data-overlay-confirmation-input
             >
           </label>
 
@@ -64,7 +64,7 @@
               type="button"
               disabled
               aria-disabled="true"
-              data-delete-confirmation-submit
+              data-overlay-confirmation-submit
               data-overlay-dialog-close
             >
               Löschen
@@ -75,109 +75,320 @@
     </div>
   </section>
 
+  <section id="pattern-add-to-list-overlay" class="sg-delete-confirmation-pattern">
+    <p class="sg-preview-label">Pattern: Add to List Overlay</p>
+
+    <div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-object-card" data-pattern="add-to-list-overlay" data-dialog-open="false" data-overlay-selected-lists="1,2">
+      <article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" aria-label="Zu einer Liste hinzuzufügendes Objekt">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
+          <div class="sg-strong">Alcon Inc.</div>
+          <div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
+            <button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
+              <span class="sg-sandwich-button__icon" aria-hidden="true">
+                <span class="sg-sandwich-button__line"></span>
+                <span class="sg-sandwich-button__line"></span>
+                <span class="sg-sandwich-button__line"></span>
+              </span>
+            </button>
+            <div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
+              <a class="sg-sandwich-menu-link" href="#!" data-overlay-open-dialog="add-to-list">Zur Liste hinzufügen</a>
+            </div>
+          </div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content">
+          <p class="sg-body">Objekt-Inhalt der Card. Während das Overlay sichtbar ist, wird dieses Objekt um 50% ausgegraut.</p>
+        </div>
+        <footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment">
+          <div class="sg-object-card__actions">
+            <button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
+            <button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
+          </div>
+        </footer>
+      </article>
+
+      <article class="sg-card sg-card--overlay-host sg-object-card sg-object-card--variable-height sg-delete-confirmation-pattern__floating-card" aria-label="Zur Liste hinzufügen" role="dialog" aria-modal="true" aria-labelledby="add-to-list-title" data-overlay-dialog="add-to-list" hidden>
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
+          <p class="sg-body sg-strong" id="add-to-list-title">Füge das Unternehmen einer Liste hinzu</p>
+        </header>
+
+        <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
+          <ul class="sg-delete-confirmation-pattern__list" aria-label="Listen">
+            <li class="sg-delete-confirmation-pattern__list-item">
+              <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="1" aria-pressed="true">
+                <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
+                <span class="sg-delete-confirmation-pattern__list-label">Liste 1</span>
+              </button>
+            </li>
+            <li class="sg-delete-confirmation-pattern__list-item">
+              <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="2" aria-pressed="true">
+                <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
+                <span class="sg-delete-confirmation-pattern__list-label">Liste 2</span>
+              </button>
+            </li>
+            <li class="sg-delete-confirmation-pattern__list-item">
+              <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="3" aria-pressed="false">
+                <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
+                <span class="sg-delete-confirmation-pattern__list-label">Liste 3</span>
+              </button>
+            </li>
+            <li class="sg-delete-confirmation-pattern__list-item">
+              <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="4" aria-pressed="false">
+                <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
+                <span class="sg-delete-confirmation-pattern__list-label">Liste 4</span>
+              </button>
+            </li>
+            <li class="sg-delete-confirmation-pattern__list-item">
+              <button class="sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button" type="button" data-overlay-list-toggle data-overlay-list-id="5" aria-pressed="false">
+                <span class="sg-delete-confirmation-pattern__list-icon" aria-hidden="true"></span>
+                <span class="sg-delete-confirmation-pattern__list-label">Liste 5</span>
+              </button>
+            </li>
+          </ul>
+
+          <div class="sg-delete-confirmation-pattern__actions">
+            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
+            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
+          </div>
+        </div>
+
+        <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body sg-delete-confirmation-pattern__create-list-segment" data-create-list-form hidden>
+          <p class="sg-body sg-delete-confirmation-pattern__text sg-delete-confirmation-pattern__create-list-title" data-create-list-title>Füge das Unternehmen einer neuen Liste hinzu</p>
+
+          <div class="sg-form-sections-card-wrapper sg-delete-confirmation-pattern__create-list-form" aria-label="Formular mit Abschnitten">
+            <form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
+              <div class="sg-form-sections-card__body" data-pattern-part="form-body">
+                <section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
+                  <div class="sg-form-sections-card__field-group">
+                    <label class="sg-labeled-input-row">
+                      <span class="sg-label">Name</span>
+                      <input
+                        class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                        type="text"
+                        placeholder="Name eingeben"
+                        aria-label="Name"
+                        maxlength="80"
+                      >
+                    </label>
+
+                    <label class="sg-labeled-input-row">
+                      <span class="sg-label">Beschreibung</span>
+                      <textarea
+                        class="sg-input-multi-line sg-form-inactive-selectable"
+                        rows="4"
+                        placeholder="Beschreibung eingeben"
+                        aria-label="Beschreibung"
+                        maxlength="350"
+                      ></textarea>
+                    </label>
+                  </div>
+                </section>
+              </div>
+
+              <footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
+                <div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
+                  <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
+                </div>
+              </footer>
+            </form>
+          </div>
+        </div>
+      </article>
+    </div>
+  </section>
+
   <script>
-    const confirmationInput = document.querySelector('[data-delete-confirmation-input]');
-    const confirmationSubmitButton = document.querySelector('[data-delete-confirmation-submit]');
+    const setupOverlayStage = (stage) => {
+      const confirmationInput = stage.querySelector('[data-overlay-confirmation-input]');
+      const confirmationSubmitButton = stage.querySelector('[data-overlay-confirmation-submit]');
+      const expectedConfirmationValue = stage.dataset.overlayConfirmationValue ?? '';
+      const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]'));
+      const createListForm = stage.querySelector('[data-create-list-form]');
+      const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]');
+      const createListTitle = stage.querySelector('[data-create-list-title]');
+      const createListSegment = stage.querySelector('[data-create-list-form]');
+      const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]');
+      const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]');
+      const createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]');
+      const selectedListIds = new Set(
+        (stage.dataset.overlaySelectedLists ?? '')
+          .split(',')
+          .map((value) => value.trim())
+          .filter(Boolean)
+      );
 
-    if (confirmationInput && confirmationSubmitButton) {
-      const updateDeleteConfirmationState = () => {
-        const isValid = confirmationInput.value === 'DELETE';
-
-        confirmationSubmitButton.disabled = !isValid;
-        confirmationSubmitButton.setAttribute('aria-disabled', String(!isValid));
-        confirmationSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
+      const closeStageDialogs = () => {
+        stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
+          dialog.hidden = true;
+        });
+        if (createListSegment) {
+          createListSegment.hidden = true;
+        }
+        if (createListFormToggle) {
+          createListFormToggle.disabled = false;
+          createListFormToggle.setAttribute('aria-disabled', 'false');
+          createListFormToggle.setAttribute('aria-expanded', 'false');
+          createListFormToggle.classList.remove('sg-button--inactive');
+          createListFormToggle.classList.add('sg-button--active');
+        }
+        stage.dataset.dialogOpen = 'false';
       };
 
-      confirmationInput.addEventListener('input', updateDeleteConfirmationState);
-      updateDeleteConfirmationState();
-    }
-
-    const closeStageDialogs = (stage) => {
-      stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
-        dialog.hidden = true;
-      });
-      stage.dataset.dialogOpen = 'false';
-    };
-
-    document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
-      closeStageDialogs(stage);
-    });
-
-    document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
-      link.addEventListener('click', (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        const stage = link.closest('.sg-delete-confirmation-pattern__stage');
-        if (!stage) {
-          return;
-        }
-
-        const target = link.getAttribute('data-overlay-open-dialog');
-        const dialog = stage.querySelector(`[data-overlay-dialog="${target}"]`);
-        if (!dialog) {
-          return;
-        }
-
-        closeStageDialogs(stage);
-        dialog.hidden = false;
-        stage.dataset.dialogOpen = 'true';
-
-        const menuWrap = link.closest('.sg-sandwich-menu-wrap');
-        const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
-        if (menuWrap) {
-          menuWrap.dataset.open = 'false';
-        }
-        if (menuButton) {
-          menuButton.setAttribute('aria-expanded', 'false');
-        }
-      });
-    });
-
-    document.querySelectorAll('[data-overlay-dialog-close]').forEach((button) => {
-      button.addEventListener('click', (event) => {
-        event.preventDefault();
-        const stage = button.closest('.sg-delete-confirmation-pattern__stage');
-        if (!stage) {
-          return;
-        }
-        closeStageDialogs(stage);
-      });
-    });
-
-    document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
-      const button = wrap.querySelector('.sg-sandwich-button');
-      const panel = wrap.querySelector('.sg-sandwich-menu-panel');
-
-      if (!button) {
-        return;
-      }
-
-      button.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const nextState = wrap.dataset.open !== 'true';
-
-        document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
-          const otherButton = otherWrap.querySelector('.sg-sandwich-button');
-          otherWrap.dataset.open = 'false';
-          if (otherButton) {
-            otherButton.setAttribute('aria-expanded', 'false');
-          }
+      const syncOverlayListState = () => {
+        overlayListButtons.forEach((button) => {
+          const listId = button.dataset.overlayListId;
+          const isSelected = Boolean(listId && selectedListIds.has(listId));
+          button.dataset.selected = String(isSelected);
+          button.setAttribute('aria-pressed', String(isSelected));
         });
 
-        wrap.dataset.open = String(nextState);
-        button.setAttribute('aria-expanded', String(nextState));
+        stage.dataset.overlaySelectedLists = Array.from(selectedListIds).join(',');
+      };
 
-        if (!nextState || !panel) {
+      if (confirmationInput && confirmationSubmitButton) {
+        const updateConfirmationState = () => {
+          const isValid = confirmationInput.value === expectedConfirmationValue;
+
+          confirmationSubmitButton.disabled = !isValid;
+          confirmationSubmitButton.setAttribute('aria-disabled', String(!isValid));
+          confirmationSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
+        };
+
+        confirmationInput.addEventListener('input', updateConfirmationState);
+        updateConfirmationState();
+      }
+
+      if (overlayListButtons.length > 0) {
+        syncOverlayListState();
+
+        overlayListButtons.forEach((button) => {
+          button.addEventListener('click', (event) => {
+            event.preventDefault();
+
+            const listId = button.dataset.overlayListId;
+            if (!listId) {
+              return;
+            }
+
+            if (selectedListIds.has(listId)) {
+              selectedListIds.delete(listId);
+            } else {
+              selectedListIds.add(listId);
+            }
+
+            syncOverlayListState();
+          });
+        });
+      }
+
+      if (createListForm && createListFormToggle) {
+        const updateCreateListButtonState = () => {
+          if (!createListSubmitButton) {
+            return;
+          }
+
+          const hasName = Boolean(createListNameInput?.value.trim());
+          const hasDescription = Boolean(createListDescriptionInput?.value.trim());
+          const isActive = hasName || hasDescription;
+
+          createListSubmitButton.disabled = !isActive;
+          createListSubmitButton.setAttribute('aria-disabled', String(!isActive));
+          createListSubmitButton.classList.toggle('sg-button--process-inactive', !isActive);
+        };
+
+        createListNameInput?.addEventListener('input', updateCreateListButtonState);
+        createListDescriptionInput?.addEventListener('input', updateCreateListButtonState);
+        updateCreateListButtonState();
+
+        createListFormToggle.addEventListener('click', (event) => {
+          event.preventDefault();
+          if (createListSegment) {
+            createListSegment.hidden = false;
+          }
+          createListFormToggle.setAttribute('aria-expanded', 'true');
+          createListFormToggle.classList.remove('sg-button--active');
+          createListFormToggle.classList.add('sg-button--inactive');
+          createListFormToggle.disabled = true;
+          createListFormToggle.setAttribute('aria-disabled', 'true');
+          updateCreateListButtonState();
+        });
+      }
+
+      closeStageDialogs();
+
+      stage.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
+        link.addEventListener('click', (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+
+          const target = link.getAttribute('data-overlay-open-dialog');
+          const dialog = stage.querySelector(`[data-overlay-dialog="${target}"]`);
+          if (!dialog) {
+            return;
+          }
+
+          closeStageDialogs();
+          dialog.hidden = false;
+          stage.dataset.dialogOpen = 'true';
+
+          const menuWrap = link.closest('.sg-sandwich-menu-wrap');
+          const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
+          if (menuWrap) {
+            menuWrap.dataset.open = 'false';
+          }
+          if (menuButton) {
+            menuButton.setAttribute('aria-expanded', 'false');
+          }
+        });
+      });
+
+      stage.querySelectorAll('[data-overlay-dialog-close]').forEach((button) => {
+        button.addEventListener('click', (event) => {
+          event.preventDefault();
+          closeStageDialogs();
+        });
+      });
+
+      stage.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
+        const button = wrap.querySelector('.sg-sandwich-button');
+        const panel = wrap.querySelector('.sg-sandwich-menu-panel');
+
+        if (!button) {
           return;
         }
 
-        wrap.dataset.align = 'right';
-        const panelRect = panel.getBoundingClientRect();
-        if (panelRect.left < 0) {
-          wrap.dataset.align = 'left';
-        }
+        button.addEventListener('click', (event) => {
+          event.stopPropagation();
+          const nextState = wrap.dataset.open !== 'true';
+
+          document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
+            const otherButton = otherWrap.querySelector('.sg-sandwich-button');
+            otherWrap.dataset.open = 'false';
+            if (otherButton) {
+              otherButton.setAttribute('aria-expanded', 'false');
+            }
+          });
+
+          wrap.dataset.open = String(nextState);
+          button.setAttribute('aria-expanded', String(nextState));
+
+          if (!nextState || !panel) {
+            return;
+          }
+
+          wrap.dataset.align = 'right';
+          const panelRect = panel.getBoundingClientRect();
+          if (panelRect.left < 0) {
+            wrap.dataset.align = 'left';
+          }
+        });
       });
+
+      return closeStageDialogs;
+    };
+
+    const overlayStages = Array.from(document.querySelectorAll('.sg-delete-confirmation-pattern__stage'));
+    overlayStages.forEach((stage) => {
+      setupOverlayStage(stage);
     });
 
     document.addEventListener('click', (event) => {
diff --git a/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html
index 2f46f10..b4d466c 100644
--- a/docs/styleguide/semantic-tokens-patterns.html
+++ b/docs/styleguide/semantic-tokens-patterns.html
@@ -116,7 +116,8 @@
       <tr><td>text-delete-confirmation-overlay</td><td>color-font-dark</td><td>Textfarbe im Bestätigungsfenster.</td></tr>
       <tr><td>layout-delete-confirmation-target-max-width</td><td>35rem</td><td>Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo.</td></tr>
       <tr><td>layout-delete-confirmation-overlay-width-factor</td><td>0.8</td><td>Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%).</td></tr>
-      <tr><td>layout-delete-confirmation-overlay-offset-block-start</td><td>spacing-large</td><td>Abstand des Overlays von der oberen Kante des Zielobjekts.</td></tr>
+      <tr><td>layout-delete-confirmation-overlay-offset-block-start</td><td>10%</td><td>Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße.</td></tr>
+      <tr><td>layout-delete-confirmation-overlay-max-height</td><td>calc(100vh - 10vh)</td><td>Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays.</td></tr>
       <tr><td>layout-delete-confirmation-content-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen den Inhaltsblöcken im Overlay.</td></tr>
       <tr><td>layout-delete-confirmation-actions-gap</td><td>spacing-small</td><td>Horizontaler Abstand zwischen Abbrechen- und Löschen-Button.</td></tr>
       <tr><td>layout-delete-confirmation-actions-offset-block-start</td><td>spacing-large</td><td>Zusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile.</td></tr>
diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css
index 288ba7e..279379e 100644
--- a/docs/styleguide/styles/01-foundations.css
+++ b/docs/styleguide/styles/01-foundations.css
@@ -217,7 +217,8 @@
   --text-delete-confirmation-overlay: var(--color-font-dark);
   --layout-delete-confirmation-target-max-width: 35rem;
   --layout-delete-confirmation-overlay-width-factor: 0.8;
-  --layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large);
+  --layout-delete-confirmation-overlay-offset-block-start: 10%;
+  --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
   --layout-delete-confirmation-content-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
diff --git a/docs/styleguide/styles/10-components-interactive-elements.css b/docs/styleguide/styles/10-components-interactive-elements.css
index fa8360e..a1bc316 100644
--- a/docs/styleguide/styles/10-components-interactive-elements.css
+++ b/docs/styleguide/styles/10-components-interactive-elements.css
@@ -1028,7 +1028,14 @@
     }
 
     .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon {
+      display: block;
       width: calc(var(--sandwich-line-width) - 3px);
+      height: calc(var(--sandwich-line-width) - 3px);
+      background: url("../assets/icons/star-filled.svg") no-repeat center / contain;
+    }
+
+    .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line {
+      display: none;
     }
 
     .sg-sandwich-menu-wrap {
diff --git a/docs/styleguide/styles/23-patterns-object-group-card.css b/docs/styleguide/styles/23-patterns-object-group-card.css
index 5fbb9b3..a3bb85d 100644
--- a/docs/styleguide/styles/23-patterns-object-group-card.css
+++ b/docs/styleguide/styles/23-patterns-object-group-card.css
@@ -31,6 +31,21 @@
   color: var(--color-font-light);
 }
 
+.sg-company-card__header-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-large);
+  min-width: 0;
+}
+
+.sg-company-card__header-star {
+  display: inline-block;
+  flex: 0 0 auto;
+  inline-size: 1em;
+  block-size: 1em;
+  background: url("../assets/icons/star-filled-white.svg") no-repeat center / contain;
+}
+
 .sg-company-card__metric-negative {
   color: var(--text-company-card-data-negative);
 }
diff --git a/docs/styleguide/styles/25-patterns-form-sections.css b/docs/styleguide/styles/25-patterns-form-sections.css
index 94d43a7..b17af49 100644
--- a/docs/styleguide/styles/25-patterns-form-sections.css
+++ b/docs/styleguide/styles/25-patterns-form-sections.css
@@ -36,7 +36,7 @@
 }
 
 .sg-form-sections-card__actions-segment {
-  margin-top: var(--spacing-large);
+  margin-top: calc(var(--spacing-large) - var(--card-segment-padding-vertical));
   padding: 0;
 }
 
diff --git a/docs/styleguide/styles/27-patterns-delete-confirmation.css b/docs/styleguide/styles/27-patterns-delete-confirmation.css
index 06f9f9e..6cf5d55 100644
--- a/docs/styleguide/styles/27-patterns-delete-confirmation.css
+++ b/docs/styleguide/styles/27-patterns-delete-confirmation.css
@@ -40,12 +40,14 @@
 
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
-  top: 50%;
+  top: var(--layout-delete-confirmation-overlay-offset-block-start);
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   box-sizing: border-box;
   max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
+  max-height: var(--layout-delete-confirmation-overlay-max-height);
+  overflow: auto;
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);
 }
@@ -61,6 +63,73 @@
   background: var(--surface-delete-confirmation-overlay);
 }
 
+.sg-delete-confirmation-pattern__list {
+  display: grid;
+  gap: var(--spacing-small);
+  margin: 0;
+  margin-top: var(--spacing-large);
+  padding: 0;
+  list-style: none;
+}
+
+.sg-delete-confirmation-pattern__list-item {
+  margin: 0;
+}
+
+.sg-delete-confirmation-pattern__list-button {
+  display: inline-flex;
+  width: 100%;
+  justify-content: flex-start;
+  gap: var(--spacing-small);
+  font-weight: var(--font-weight-regular);
+  color: var(--text-delete-confirmation-overlay);
+  background: var(--surface-control-inactive);
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="true"] {
+  background: var(--surface-control-active);
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="false"] {
+  background: var(--surface-control-inactive);
+}
+
+.sg-delete-confirmation-pattern__list-icon {
+  display: block;
+  flex: 0 0 auto;
+  width: 1rem;
+  height: 1rem;
+  background: center / contain no-repeat;
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="true"] .sg-delete-confirmation-pattern__list-icon {
+  background-image: url("../assets/icons/star-filled.svg");
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="false"] .sg-delete-confirmation-pattern__list-icon {
+  background-image: url("../assets/icons/star-outline.svg");
+}
+
+.sg-delete-confirmation-pattern__create-list-form {
+  margin-top: 0;
+}
+
+.sg-delete-confirmation-pattern__create-list-segment {
+  gap: 0;
+}
+
+.sg-delete-confirmation-pattern__create-list-title {
+  margin: 0 0 var(--spacing-large) 0;
+}
+
+.sg-delete-confirmation-pattern__create-list-form[hidden] {
+  display: none;
+}
+
+.sg-delete-confirmation-pattern__create-list-segment[hidden] {
+  display: none;
+}
+
 .sg-delete-confirmation-pattern__text {
   margin: 0;
   color: var(--text-delete-confirmation-overlay);
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index 8a889fb..01dc21f 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -217,7 +217,8 @@
   --text-delete-confirmation-overlay: var(--color-font-dark);
   --layout-delete-confirmation-target-max-width: 35rem;
   --layout-delete-confirmation-overlay-width-factor: 0.8;
-  --layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large);
+  --layout-delete-confirmation-overlay-offset-block-start: 10%;
+  --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
   --layout-delete-confirmation-content-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
@@ -1513,7 +1514,14 @@ section + section {
     }
 
     .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon {
+      display: block;
       width: calc(var(--sandwich-line-width) - 3px);
+      height: calc(var(--sandwich-line-width) - 3px);
+      background: url("../assets/icons/star-filled.svg") no-repeat center / contain;
+    }
+
+    .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line {
+      display: none;
     }
 
     .sg-sandwich-menu-wrap {
@@ -2353,6 +2361,21 @@ section + section {
   color: var(--color-font-light);
 }
 
+.sg-company-card__header-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-large);
+  min-width: 0;
+}
+
+.sg-company-card__header-star {
+  display: inline-block;
+  flex: 0 0 auto;
+  inline-size: 1em;
+  block-size: 1em;
+  background: url("../assets/icons/star-filled-white.svg") no-repeat center / contain;
+}
+
 .sg-company-card__metric-negative {
   color: var(--text-company-card-data-negative);
 }
@@ -2425,7 +2448,7 @@ section + section {
 }
 
 .sg-form-sections-card__actions-segment {
-  margin-top: var(--spacing-large);
+  margin-top: calc(var(--spacing-large) - var(--card-segment-padding-vertical));
   padding: 0;
 }
 
@@ -2796,12 +2819,14 @@ section + section {
 
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
-  top: 50%;
+  top: var(--layout-delete-confirmation-overlay-offset-block-start);
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   box-sizing: border-box;
   max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
+  max-height: var(--layout-delete-confirmation-overlay-max-height);
+  overflow: auto;
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);
 }
@@ -2817,6 +2842,73 @@ section + section {
   background: var(--surface-delete-confirmation-overlay);
 }
 
+.sg-delete-confirmation-pattern__list {
+  display: grid;
+  gap: var(--spacing-small);
+  margin: 0;
+  margin-top: var(--spacing-large);
+  padding: 0;
+  list-style: none;
+}
+
+.sg-delete-confirmation-pattern__list-item {
+  margin: 0;
+}
+
+.sg-delete-confirmation-pattern__list-button {
+  display: inline-flex;
+  width: 100%;
+  justify-content: flex-start;
+  gap: var(--spacing-small);
+  font-weight: var(--font-weight-regular);
+  color: var(--text-delete-confirmation-overlay);
+  background: var(--surface-control-inactive);
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="true"] {
+  background: var(--surface-control-active);
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="false"] {
+  background: var(--surface-control-inactive);
+}
+
+.sg-delete-confirmation-pattern__list-icon {
+  display: block;
+  flex: 0 0 auto;
+  width: 1rem;
+  height: 1rem;
+  background: center / contain no-repeat;
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="true"] .sg-delete-confirmation-pattern__list-icon {
+  background-image: url("../assets/icons/star-filled.svg");
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="false"] .sg-delete-confirmation-pattern__list-icon {
+  background-image: url("../assets/icons/star-outline.svg");
+}
+
+.sg-delete-confirmation-pattern__create-list-form {
+  margin-top: 0;
+}
+
+.sg-delete-confirmation-pattern__create-list-segment {
+  gap: 0;
+}
+
+.sg-delete-confirmation-pattern__create-list-title {
+  margin: 0 0 var(--spacing-large) 0;
+}
+
+.sg-delete-confirmation-pattern__create-list-form[hidden] {
+  display: none;
+}
+
+.sg-delete-confirmation-pattern__create-list-segment[hidden] {
+  display: none;
+}
+
 .sg-delete-confirmation-pattern__text {
   margin: 0;
   color: var(--text-delete-confirmation-overlay);
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 25bbe61..142a8ac 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "fab999d",
-  "syncedAtUtc": "2026-06-14T14:00:49Z",
+  "styleguideCommit": "2b03437",
+  "syncedAtUtc": "2026-06-15T11:59:31Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }
diff --git a/public/assets/styles.css b/public/assets/styles.css
index f1f152f..01dc21f 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -217,7 +217,8 @@
   --text-delete-confirmation-overlay: var(--color-font-dark);
   --layout-delete-confirmation-target-max-width: 35rem;
   --layout-delete-confirmation-overlay-width-factor: 0.8;
-  --layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large);
+  --layout-delete-confirmation-overlay-offset-block-start: 10%;
+  --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
   --layout-delete-confirmation-content-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
@@ -1513,7 +1514,14 @@ section + section {
     }
 
     .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon {
+      display: block;
       width: calc(var(--sandwich-line-width) - 3px);
+      height: calc(var(--sandwich-line-width) - 3px);
+      background: url("../assets/icons/star-filled.svg") no-repeat center / contain;
+    }
+
+    .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line {
+      display: none;
     }
 
     .sg-sandwich-menu-wrap {
@@ -2353,6 +2361,21 @@ section + section {
   color: var(--color-font-light);
 }
 
+.sg-company-card__header-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-large);
+  min-width: 0;
+}
+
+.sg-company-card__header-star {
+  display: inline-block;
+  flex: 0 0 auto;
+  inline-size: 1em;
+  block-size: 1em;
+  background: url("../assets/icons/star-filled-white.svg") no-repeat center / contain;
+}
+
 .sg-company-card__metric-negative {
   color: var(--text-company-card-data-negative);
 }
@@ -2425,7 +2448,7 @@ section + section {
 }
 
 .sg-form-sections-card__actions-segment {
-  margin-top: var(--spacing-large);
+  margin-top: calc(var(--spacing-large) - var(--card-segment-padding-vertical));
   padding: 0;
 }
 
@@ -2796,12 +2819,14 @@ section + section {
 
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
-  top: 50%;
+  top: var(--layout-delete-confirmation-overlay-offset-block-start);
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   box-sizing: border-box;
   max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
+  max-height: var(--layout-delete-confirmation-overlay-max-height);
+  overflow: auto;
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);
 }
@@ -2817,6 +2842,73 @@ section + section {
   background: var(--surface-delete-confirmation-overlay);
 }
 
+.sg-delete-confirmation-pattern__list {
+  display: grid;
+  gap: var(--spacing-small);
+  margin: 0;
+  margin-top: var(--spacing-large);
+  padding: 0;
+  list-style: none;
+}
+
+.sg-delete-confirmation-pattern__list-item {
+  margin: 0;
+}
+
+.sg-delete-confirmation-pattern__list-button {
+  display: inline-flex;
+  width: 100%;
+  justify-content: flex-start;
+  gap: var(--spacing-small);
+  font-weight: var(--font-weight-regular);
+  color: var(--text-delete-confirmation-overlay);
+  background: var(--surface-control-inactive);
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="true"] {
+  background: var(--surface-control-active);
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="false"] {
+  background: var(--surface-control-inactive);
+}
+
+.sg-delete-confirmation-pattern__list-icon {
+  display: block;
+  flex: 0 0 auto;
+  width: 1rem;
+  height: 1rem;
+  background: center / contain no-repeat;
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="true"] .sg-delete-confirmation-pattern__list-icon {
+  background-image: url("../assets/icons/star-filled.svg");
+}
+
+.sg-delete-confirmation-pattern__list-button[data-selected="false"] .sg-delete-confirmation-pattern__list-icon {
+  background-image: url("../assets/icons/star-outline.svg");
+}
+
+.sg-delete-confirmation-pattern__create-list-form {
+  margin-top: 0;
+}
+
+.sg-delete-confirmation-pattern__create-list-segment {
+  gap: 0;
+}
+
+.sg-delete-confirmation-pattern__create-list-title {
+  margin: 0 0 var(--spacing-large) 0;
+}
+
+.sg-delete-confirmation-pattern__create-list-form[hidden] {
+  display: none;
+}
+
+.sg-delete-confirmation-pattern__create-list-segment[hidden] {
+  display: none;
+}
+
 .sg-delete-confirmation-pattern__text {
   margin: 0;
   color: var(--text-delete-confirmation-overlay);
@@ -4255,3 +4347,4 @@ section + section {
   color: var(--text-typography-preview);
   margin-top: 0;
 }
+