Sync styleguide 2026.05.18.1

docs/styleguide/index.html

@@ -72,6 +72,7 @@
         <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>
         <li><a href="./patterns/vsf-meldungen.html">VSF Meldungen</a></li>
+        <li><a href="./patterns/vsf-register-step-1.html">VSF Register Step 1</a></li>
         <li><a href="./patterns/vsf-listen-uebersicht-seite-v2.html">VSF Listen Übersicht Seite V2</a></li>
         <li><a href="./patterns/vsf-card-listen-fundamentalanalyse-mobile.html">VSF Card Listen Fundamentalanalyse Mobile</a></li>
         <li><a href="./patterns/vsf-card-listen-fundamentalanalyse-drawer.html">VSF Card Listen Fundamentalanalyse Drawer</a></li>

docs/styleguide/patterns/object-card.html

@@ -103,6 +103,48 @@
         </footer>
       </article>
     </div>
+
+    <h2 class="sg-sub-heading sg-section-h2">Object Card variable height</h2>
+    <p class="sg-preview-label">Pattern: Object Card variable height</p>
+    <p class="sg-body">Hinweis: In dieser Variante ist die komplette Karte in der Höhe flexibel. Die Segmenthöhen ergeben sich direkt aus dem Inhalt, dadurch sind die Karten im Grid bewusst unterschiedlich hoch.</p>
+
+    <div class="sg-object-card-grid">
+      <article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
+          <div class="sg-strong">Alcon Inc.</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
+          <p class="sg-body">Kurzer Inhalt für eine kompakte Karte mit wenig vertikalem Platzbedarf.</p>
+        </div>
+      </article>
+
+      <article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
+          <div class="sg-strong">Meyer Optik AG</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
+          <p class="sg-body">Etwas längerer Text mit mehr Inhalt. Die Karte wächst hier sichtbar mit dem Segment, weil der Body bewusst mehr Umbruchzeilen erzeugt und damit die Höhe definiert.</p>
+        </div>
+      </article>
+
+      <article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
+          <div class="sg-strong">Nordwind Therapeutics Holding</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
+          <p class="sg-body">Der Inhalt ist hier knapp, aber die Karte bleibt flexibel und nimmt nur so viel Höhe ein wie die Segmente tatsächlich benötigen.</p>
+        </div>
+      </article>
+
+      <article class="sg-card sg-object-card sg-object-card--variable-height" data-pattern="object-card" aria-label="Objekt Card variable Höhe">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
+          <div class="sg-strong">Valencia Holding Group International</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
+          <p class="sg-body">Dies ist die längste Variante in der Demo. Sie zeigt, dass der Body die Kartenhöhe direkt mitprägt, ohne dass ein fixer Kartenrahmen die Inhalte begrenzt oder künstlich streckt.</p>
+        </div>
+      </article>
+    </div>
   </section>
 
   <script>

docs/styleguide/patterns/vsf-portal-header-public.html

@@ -17,12 +17,12 @@
           <p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
 
           <div class="sg-portal-header__menu-wrap" data-pattern-part="portal-header-action">
-            <div class="sg-component-row">
+            <div class="sg-tab-button-group" role="tablist" aria-label="Anmeldung" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header">
-              <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+              <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
                 Login
               </button>
 
-              <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
+              <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
                 Registrieren
               </button>
             </div>
@@ -46,7 +46,7 @@
 
   <script src="../scripts/help-icon-overlays.js"></script>
   <script>
-    document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
+    document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__menu-wrap .sg-tab-button-group').forEach((group) => {
       group.querySelectorAll('.sg-tab-button').forEach((button) => {
         button.addEventListener('click', () => {
           group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {

docs/styleguide/patterns/vsf-register-step-1.html

@@ -0,0 +1,180 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Registriere dich bei ValueStockFinder</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body class="sg-vsf-register-step-1-page">
+
+  <h1 class="sg-main-heading">Layout – VSF Register Step 1</h1>
+
+  <section id="pattern-portal-header">
+    <article class="sg-portal-header-pattern-variant" aria-label="Portal Header ohne Options Row">
+      <header class="sg-portal-header" aria-label="Portal Header" data-pattern="portal-header">
+        <div class="sg-portal-header__main" data-pattern-part="portal-header-main">
+          <p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">ValueStockFinder</p>
+
+          <div class="sg-portal-header__menu-wrap" data-pattern-part="portal-header-action">
+            <div class="sg-tab-button-group" role="tablist" aria-label="Anmeldung" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header">
+              <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
+                Login
+              </button>
+
+              <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
+                Registrieren
+              </button>
+            </div>
+          </div>
+
+          <nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
+            <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Übersicht</button>
+            <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Features</button>
+            <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Preise</button>
+            <button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Firma der Woche</button>
+          </nav>
+        </div>
+      </header>
+
+      <div class="sg-transparent-card sg-portal-header-pattern-variant__next-element" aria-label="Registriere dich bei ValueStockFinder" data-component="transparent-card"></div>
+    </article>
+  </section>
+
+  <main class="sg-vsf-register-step-1">
+    <article class="sg-card sg-object-card sg-object-card--variable-height sg-vsf-register-step-1__card" data-pattern="object-card" aria-label="Registriere dich">
+      <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
+        <div class="sg-strong">Probiere ValueStockFinder kostenlos und unverbindlich aus</div>
+      </header>
+      <div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
+        <p class="sg-body">Teste ValueStockFinder 7 Tage kostenlos und unverbindlich. Erhalte direkten Zugriff auf fundierte Aktienanalysen, klare Bewertungen und übersichtliche Entscheidungshilfen – ohne Verpflichtung.</p>
+      </div>
+      <footer class="sg-card-segment sg-card-segment--gray" aria-label="Registrierungsformular">
+        <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">
+            <div class="sg-form-sections-card__body" data-pattern-part="form-body">
+              <h2 class="sg-strong sg-form-sections-card__title">Registrieren mit E-Mail und Passwort</h2>
+
+              <div class="sg-form-sections-card__field-group">
+                <label class="sg-labeled-input-row">
+                  <span class="sg-label">E-Mail</span>
+                  <input
+                    class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                    type="email"
+                    placeholder="E-Mail eingeben"
+                    aria-label="E-Mail"
+                    autocomplete="email"
+                  >
+                </label>
+
+                <label class="sg-labeled-input-row">
+                  <span class="sg-label">Passwort</span>
+                  <input
+                    class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+                    type="password"
+                    placeholder="Passwort eingeben"
+                    aria-label="Passwort"
+                    autocomplete="new-password"
+                  >
+                </label>
+              </div>
+            </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">Registrieren</button>
+              </div>
+            </footer>
+          </form>
+        </div>
+      </footer>
+      <footer class="sg-card-segment sg-card-segment--gray" aria-label="Registrieren mit">
+        <div class="sg-strong">Registrieren mit</div>
+        <div class="sg-vsf-register-step-1__social-links">
+          <a class="social-logo" href="#" aria-label="Mit Google fortfahren" data-idp="google">
+            <span class="kcLogoIdP-google" aria-hidden="true"></span>
+            <span>Logo Platzhalter</span>
+          </a>
+
+          <a class="social-logo" href="#" aria-label="Mit LinkedIn fortfahren" data-idp="linkedin">
+            <span class="kcLogoIdP-linkedin" aria-hidden="true"></span>
+            <span>Logo Platzhalter</span>
+          </a>
+
+          <a class="social-logo" href="#" aria-label="Mit Microsoft fortfahren" data-idp="microsoft">
+            <span class="kcLogoIdP-microsoft" aria-hidden="true"></span>
+            <span>Logo Platzhalter</span>
+          </a>
+        </div>
+      </footer>
+      <footer class="sg-card-segment sg-card-segment--gray" aria-label="Bereits registriert">
+        <div class="sg-body">
+          Du hast bereits einen Account? <a class="sg-hyperlink" href="#" data-component="hyperlink">Login</a>.
+        </div>
+      </footer>
+    </article>
+  </main>
+
+  <script src="../scripts/help-icon-overlays.js"></script>
+  <script>
+    document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__menu-wrap .sg-tab-button-group').forEach((group) => {
+      group.querySelectorAll('.sg-tab-button').forEach((button) => {
+        button.addEventListener('click', () => {
+          group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
+            const isActive = otherButton === button;
+            otherButton.setAttribute('aria-selected', String(isActive));
+            otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
+          });
+        });
+      });
+    });
+
+    document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
+      const button = wrap.querySelector('.sg-sandwich-button');
+
+      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));
+      });
+    });
+
+    (() => {
+      const formCard = document.querySelector('.sg-form-sections-card');
+      if (!formCard) {
+        return;
+      }
+
+      const registerButton = formCard.querySelector('.sg-button--process');
+      if (!registerButton) {
+        return;
+      }
+
+      const updateRegisterButtonState = () => {
+        const hasTextInput = Array.from(formCard.querySelectorAll('input[type="email"], input[type="password"]'))
+          .some((field) => field.value.trim().length > 0);
+
+        registerButton.disabled = !hasTextInput;
+        registerButton.setAttribute('aria-disabled', String(!hasTextInput));
+        registerButton.classList.toggle('sg-button--process-inactive', !hasTextInput);
+      };
+
+      formCard.querySelectorAll('input[type="email"], input[type="password"]').forEach((field) => {
+        field.addEventListener('input', updateRegisterButtonState);
+      });
+
+      updateRegisterButtonState();
+    })();
+  </script>
+
+</body>
+</html>

docs/styleguide/styleguide.css

@@ -15,6 +15,7 @@
 @import "./styles/30-layouts-card-list-page.css";
 @import "./styles/33-layouts-vsf-list-detailseite.css";
 @import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css";
+@import "./styles/35-layouts-vsf-register-step-1.css";
 @import "./styles/31-patterns-text-layouts.css";
 @import "./styles/32-patterns-card-group-keyboard-nav.css";
 @import "./styles/40-components-cards.css";

docs/styleguide/styles/22-patterns-object-card.css

@@ -67,3 +67,6 @@
   min-width: 0;
 }
 
+.sg-object-card--variable-height {
+  height: auto;
+}

docs/styleguide/styles/25-patterns-form-sections.css

@@ -10,6 +10,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  background: var(--surface-form-preview);
   min-width: min(
     100%,
     calc(var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-input-field-desktop-width))
@@ -27,7 +28,6 @@
 }
 
 .sg-form-sections-card__body {
-  background: var(--surface-form-preview);
   padding: 0;
 }
 
@@ -36,7 +36,7 @@
 }
 
 .sg-form-sections-card__actions-segment {
-  background: var(--surface-form-preview);
+  margin-top: var(--spacing-large);
   padding: 0;
 }
 
@@ -61,6 +61,10 @@
   margin-top: var(--spacing-large);
 }
 
+.sg-form-sections-card__field-group {
+  gap: var(--spacing-large);
+}
+
 .sg-form-sections-card .sg-labeled-input-row .sg-label {
   min-width: var(--layout-form-sections-label-column-width);
   flex: 0 0 var(--layout-form-sections-label-column-width);
@@ -205,7 +209,19 @@
   opacity: var(--disabled-opacity);
 }
 
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
+  min-width: 100%;
+  width: max-content;
+  max-width: calc(100vw - (2 * var(--spacing-large)));
+}
+
 @media (max-width: 48rem) {
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
+    min-width: 100%;
+    width: max-content;
+    max-width: calc(100vw - (2 * var(--spacing-large)));
+  }
+
   .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
     grid-template-columns: max-content minmax(0, 1fr) auto;
     row-gap: var(--spacing-small);
@@ -280,9 +296,12 @@
 
 .sg-form-sections-card__actions {
   display: flex;
-  justify-content: flex-start;
+  width: 100%;
+  justify-content: flex-end;
   gap: var(--spacing-small);
   margin-top: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .sg-form-sections-card__action {
@@ -324,8 +343,7 @@
     margin-right: 0;
   }
 
-  .sg-form-sections-card__option-group,
+  .sg-form-sections-card__option-group {
-  .sg-form-sections-card__actions {
     padding-left: 0;
   }
 }

docs/styleguide/styles/35-layouts-vsf-register-step-1.css

@@ -0,0 +1,29 @@
+/* ========================================================= */
+/* Layouts: VSF Register Step 1                              */
+/* ========================================================= */
+
+.sg-vsf-register-step-1 {
+  display: block;
+  margin-top: clamp(32px, 6vw, 100px);
+  padding: 0 var(--layout-page-content-inset-inline);
+  box-sizing: border-box;
+}
+
+.sg-vsf-register-step-1-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.sg-vsf-register-step-1__card {
+  width: 100%;
+  max-width: var(--layout-object-card-max-width);
+  margin: 0 auto;
+}
+
+.sg-vsf-register-step-1__social-links {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-large);
+  margin-top: var(--spacing-large);
+}

public/assets/styleguide.upstream.css

@@ -2282,6 +2282,9 @@ section + section {
   min-width: 0;
 }
 
+.sg-object-card--variable-height {
+  height: auto;
+}
 
 /* ========================================================= */
 /* Patterns: Object Group Card                               */
@@ -2347,6 +2350,7 @@ section + section {
   display: flex;
   flex-direction: column;
   width: 100%;
+  background: var(--surface-form-preview);
   min-width: min(
     100%,
     calc(var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-input-field-desktop-width))
@@ -2364,7 +2368,6 @@ section + section {
 }
 
 .sg-form-sections-card__body {
-  background: var(--surface-form-preview);
   padding: 0;
 }
 
@@ -2373,7 +2376,7 @@ section + section {
 }
 
 .sg-form-sections-card__actions-segment {
-  background: var(--surface-form-preview);
+  margin-top: var(--spacing-large);
   padding: 0;
 }
 
@@ -2398,6 +2401,10 @@ section + section {
   margin-top: var(--spacing-large);
 }
 
+.sg-form-sections-card__field-group {
+  gap: var(--spacing-large);
+}
+
 .sg-form-sections-card .sg-labeled-input-row .sg-label {
   min-width: var(--layout-form-sections-label-column-width);
   flex: 0 0 var(--layout-form-sections-label-column-width);
@@ -2542,7 +2549,19 @@ section + section {
   opacity: var(--disabled-opacity);
 }
 
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
+  min-width: 100%;
+  width: max-content;
+  max-width: calc(100vw - (2 * var(--spacing-large)));
+}
+
 @media (max-width: 48rem) {
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
+    min-width: 100%;
+    width: max-content;
+    max-width: calc(100vw - (2 * var(--spacing-large)));
+  }
+
   .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
     grid-template-columns: max-content minmax(0, 1fr) auto;
     row-gap: var(--spacing-small);
@@ -2617,9 +2636,12 @@ section + section {
 
 .sg-form-sections-card__actions {
   display: flex;
-  justify-content: flex-start;
+  width: 100%;
+  justify-content: flex-end;
   gap: var(--spacing-small);
   margin-top: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .sg-form-sections-card__action {
@@ -2661,8 +2683,7 @@ section + section {
     margin-right: 0;
   }
 
-  .sg-form-sections-card__option-group,
+  .sg-form-sections-card__option-group {
-  .sg-form-sections-card__actions {
     padding-left: 0;
   }
 }
@@ -3296,6 +3317,36 @@ section + section {
   }
 }
 
+/* ========================================================= */
+/* Layouts: VSF Register Step 1                              */
+/* ========================================================= */
+
+.sg-vsf-register-step-1 {
+  display: block;
+  margin-top: clamp(32px, 6vw, 100px);
+  padding: 0 var(--layout-page-content-inset-inline);
+  box-sizing: border-box;
+}
+
+.sg-vsf-register-step-1-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.sg-vsf-register-step-1__card {
+  width: 100%;
+  max-width: var(--layout-object-card-max-width);
+  margin: 0 auto;
+}
+
+.sg-vsf-register-step-1__social-links {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-large);
+  margin-top: var(--spacing-large);
+}
+
 /* ========================================================= */
 /* Patterns: Text Layouts                                    */
 /* ========================================================= */

public/assets/styleguide.upstream.meta.json

@@ -1,7 +1,7 @@
 {
   "styleguideVersion": "2026.05.18.1",
-  "styleguideCommit": "96d7915",
+  "styleguideCommit": "66d0740",
-  "syncedAtUtc": "2026-06-10T11:55:15Z",
+  "syncedAtUtc": "2026-06-10T16:04:47Z",
   "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
   "mirroredDocsPath": "docs/styleguide"
 }

public/assets/styles.css

@@ -2282,6 +2282,9 @@ section + section {
   min-width: 0;
 }
 
+.sg-object-card--variable-height {
+  height: auto;
+}
 
 /* ========================================================= */
 /* Patterns: Object Group Card                               */
@@ -2347,6 +2350,7 @@ section + section {
   display: flex;
   flex-direction: column;
   width: 100%;
+  background: var(--surface-form-preview);
   min-width: min(
     100%,
     calc(var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-input-field-desktop-width))
@@ -2364,7 +2368,6 @@ section + section {
 }
 
 .sg-form-sections-card__body {
-  background: var(--surface-form-preview);
   padding: 0;
 }
 
@@ -2373,7 +2376,7 @@ section + section {
 }
 
 .sg-form-sections-card__actions-segment {
-  background: var(--surface-form-preview);
+  margin-top: var(--spacing-large);
   padding: 0;
 }
 
@@ -2398,6 +2401,10 @@ section + section {
   margin-top: var(--spacing-large);
 }
 
+.sg-form-sections-card__field-group {
+  gap: var(--spacing-large);
+}
+
 .sg-form-sections-card .sg-labeled-input-row .sg-label {
   min-width: var(--layout-form-sections-label-column-width);
   flex: 0 0 var(--layout-form-sections-label-column-width);
@@ -2542,7 +2549,19 @@ section + section {
   opacity: var(--disabled-opacity);
 }
 
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
+  min-width: 100%;
+  width: max-content;
+  max-width: calc(100vw - (2 * var(--spacing-large)));
+}
+
 @media (max-width: 48rem) {
+  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
+    min-width: 100%;
+    width: max-content;
+    max-width: calc(100vw - (2 * var(--spacing-large)));
+  }
+
   .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
     grid-template-columns: max-content minmax(0, 1fr) auto;
     row-gap: var(--spacing-small);
@@ -2617,9 +2636,12 @@ section + section {
 
 .sg-form-sections-card__actions {
   display: flex;
-  justify-content: flex-start;
+  width: 100%;
+  justify-content: flex-end;
   gap: var(--spacing-small);
   margin-top: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .sg-form-sections-card__action {
@@ -2661,8 +2683,7 @@ section + section {
     margin-right: 0;
   }
 
-  .sg-form-sections-card__option-group,
+  .sg-form-sections-card__option-group {
-  .sg-form-sections-card__actions {
     padding-left: 0;
   }
 }
@@ -3296,6 +3317,36 @@ section + section {
   }
 }
 
+/* ========================================================= */
+/* Layouts: VSF Register Step 1                              */
+/* ========================================================= */
+
+.sg-vsf-register-step-1 {
+  display: block;
+  margin-top: clamp(32px, 6vw, 100px);
+  padding: 0 var(--layout-page-content-inset-inline);
+  box-sizing: border-box;
+}
+
+.sg-vsf-register-step-1-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.sg-vsf-register-step-1__card {
+  width: 100%;
+  max-width: var(--layout-object-card-max-width);
+  margin: 0 auto;
+}
+
+.sg-vsf-register-step-1__social-links {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-large);
+  margin-top: var(--spacing-large);
+}
+
 /* ========================================================= */
 /* Patterns: Text Layouts                                    */
 /* ========================================================= */