From d94fd4e530da64f540bd8f0a95c066bda18786d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 27 May 2026 16:52:12 +0200
Subject: [PATCH] Match VSF list-card form structure 1:1 with form-sections
 pattern

---
 patterns/vsf-list-card.html          | 102 +++++++++++++++------------
 styles/26-patterns-vsf-list-card.css |   4 --
 2 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/patterns/vsf-list-card.html b/patterns/vsf-list-card.html
index 734f568..ce73c5b 100644
--- a/patterns/vsf-list-card.html
+++ b/patterns/vsf-list-card.html
@@ -20,55 +20,63 @@
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
           <div class="sg-strong">Neue Liste anlegen</div>
         </header>
-        <div class="sg-card-segment sg-card-segment--body sg-card-segment--lightgrey sg-object-card__content" data-pattern-part="object-group-card-content">
-          <form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
-            <div class="sg-form-sections-card__field-group">
-              <label class="sg-labeled-input-row">
-                <span class="sg-label">Listentyp</span>
-                <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable">
-                  <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-form-inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp">
-                    Listentyp
-                  </button>
-                  <div class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">
-                    <ul class="sg-pulldown-option-list" aria-label="Listentyp Optionen">
-                      <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Watchlist</span></li>
-                      <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Portfolio</span></li>
-                      <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Screening</span></li>
-                    </ul>
+        <div class="sg-card-segment sg-card-segment--gray sg-object-card__content" data-pattern-part="object-group-card-content">
+          <div class="sg-form-sections-card-wrapper" data-pattern="form-sections" 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-labelledby="vsf-list-card-neue-liste-anlegen">
+                  <h2 id="vsf-list-card-neue-liste-anlegen" class="sg-strong sg-form-sections-card__chapter-title">Neue Liste</h2>
+
+                  <div class="sg-form-sections-card__field-group">
+                    <label class="sg-labeled-input-row">
+                      <span class="sg-label">Listentyp</span>
+                      <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable">
+                        <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-form-inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp">
+                          Listentyp
+                        </button>
+                        <div class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">
+                          <ul class="sg-pulldown-option-list" aria-label="Listentyp Optionen">
+                            <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Watchlist</span></li>
+                            <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Portfolio</span></li>
+                            <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Screening</span></li>
+                          </ul>
+                        </div>
+                      </div>
+                    </label>
+
+                    <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>
-                </div>
-              </label>
-
-              <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>
-
-            <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--active sg-form-sections-card__action" type="button">Abbrechen</button>
-                <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">Prozess Button</button>
+                </section>
               </div>
-            </footer>
-          </form>
+
+              <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--active sg-form-sections-card__action" type="button">Abbrechen</button>
+                  <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">Prozess Button</button>
+                </div>
+              </footer>
+            </form>
+          </div>
         </div>
       </article>
     </div>
diff --git a/styles/26-patterns-vsf-list-card.css b/styles/26-patterns-vsf-list-card.css
index 75c203e..1723e25 100644
--- a/styles/26-patterns-vsf-list-card.css
+++ b/styles/26-patterns-vsf-list-card.css
@@ -1,7 +1,3 @@
 /* ========================================================= */
 /* Patterns: VSF List Card                                   */
 /* ========================================================= */
-
-#layout-vsf-list-card .sg-object-card[data-pattern="object-group-card"] .sg-object-card__content.sg-card-segment--lightgrey {
-  background: var(--surface-card-segment-neutral);
-}