Unternehmen
@@ -327,17 +237,58 @@
});
};
- document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
- group.querySelectorAll('.sg-tab-button').forEach((button) => {
+ const vsfListDetailPage = document.querySelector('.sg-vsf-list-detail-page');
+ const vsfListDetailMobileTabs = document.querySelector('.sg-vsf-list-detail-page__mobile-tabs');
+ const vsfListDetailButtons = vsfListDetailMobileTabs ? Array.from(vsfListDetailMobileTabs.querySelectorAll('.sg-tab-button')) : [];
+ const vsfListDetailPanels = {
+ meldungen: document.querySelector('[data-vsf-list-detail-panel="meldungen"]'),
+ unternehmen: document.querySelector('[data-vsf-list-detail-panel="unternehmen"]'),
+ };
+ const vsfListDetailMobileQuery = window.matchMedia('(max-width: 767px)');
+
+ const syncVsfListDetailMobileState = (activeKey) => {
+ const nextActiveKey = activeKey === 'unternehmen' ? 'unternehmen' : 'meldungen';
+
+ if (vsfListDetailPage) {
+ vsfListDetailPage.dataset.vsfListDetailActive = nextActiveKey;
+ }
+
+ vsfListDetailButtons.forEach((button) => {
+ const isActive = button.dataset.vsfListDetailTab === nextActiveKey;
+ button.setAttribute('aria-selected', String(isActive));
+ button.dataset.componentState = isActive ? 'active' : 'inactive';
+ });
+
+ const isMobile = vsfListDetailMobileQuery.matches;
+ Object.entries(vsfListDetailPanels).forEach(([key, panel]) => {
+ if (!panel) {
+ return;
+ }
+
+ panel.hidden = isMobile && key !== nextActiveKey;
+ panel.setAttribute('aria-hidden', String(isMobile && key !== nextActiveKey));
+ });
+ };
+
+ if (vsfListDetailMobileTabs) {
+ vsfListDetailButtons.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';
- });
+ syncVsfListDetailMobileState(button.dataset.vsfListDetailTab || 'meldungen');
});
});
- });
+ }
+
+ const handleVsfListDetailMobileModeChange = () => {
+ syncVsfListDetailMobileState(vsfListDetailPage?.dataset.vsfListDetailActive || 'meldungen');
+ };
+
+ if (typeof vsfListDetailMobileQuery.addEventListener === 'function') {
+ vsfListDetailMobileQuery.addEventListener('change', handleVsfListDetailMobileModeChange);
+ } else if (typeof vsfListDetailMobileQuery.addListener === 'function') {
+ vsfListDetailMobileQuery.addListener(handleVsfListDetailMobileModeChange);
+ }
+
+ syncVsfListDetailMobileState(vsfListDetailPage?.dataset.vsfListDetailActive || 'meldungen');
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-sandwich-button');
diff --git a/docs/styleguide/styleguide.css b/docs/styleguide/styleguide.css
index 8ea3f8b..7299c9a 100644
--- a/docs/styleguide/styleguide.css
+++ b/docs/styleguide/styleguide.css
@@ -14,6 +14,7 @@
@import "./styles/29-patterns-left-navigation.css";
@import "./styles/30-layouts-card-list-page.css";
@import "./styles/36-layouts-page-layout-app.css";
+@import "./styles/37-layouts-page-layout-public.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";
diff --git a/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css b/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css
index d360a7f..f1f6704 100644
--- a/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css
+++ b/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css
@@ -11,34 +11,16 @@
margin-top: var(--spacing-large);
}
-.sg-vsf-list-detail-page > .sg-options-row {
- margin-top: var(--spacing-large);
-}
-
-.sg-vsf-list-detail-page > .sg-vsf-list-detail-page__intro-block {
- margin-top: var(--spacing-large);
-}
-
-.sg-vsf-list-detail-page__intro-block {
- display: flex;
- flex-direction: column;
-}
-
-.sg-vsf-list-detail-page__intro-block .sg-vsf-list-detail-page__title,
-.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
- color: var(--color-font-light);
-}
-
-.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
- width: min(60vw, 100%);
-}
-
.sg-vsf-list-detail-page__content {
display: flex;
gap: var(--spacing-small);
width: 100%;
}
+.sg-vsf-list-detail-page__mobile-tabs {
+ display: none;
+}
+
.sg-vsf-list-detail-page__left-column {
width: 30%;
min-width: 30%;
@@ -78,12 +60,15 @@
}
@media (max-width: 767px) {
- .sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
+ .sg-vsf-list-detail-page__mobile-tabs {
+ display: flex;
width: 100%;
+ margin-bottom: 0;
}
.sg-vsf-list-detail-page__content {
display: block;
+ margin-top: var(--spacing-small);
}
.sg-vsf-list-detail-page__left-column {
@@ -95,9 +80,12 @@
width: 100%;
}
- .sg-vsf-list-detail-page__left-column .sg-group-card,
- .sg-vsf-list-detail-page__right-column .sg-group-card {
- margin-bottom: var(--spacing-large);
+ .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel] {
+ width: 100%;
+ }
+
+ .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel][hidden] {
+ display: none;
}
.sg-vsf-list-detail-page__mobile-toggle {
diff --git a/docs/styleguide/styles/37-layouts-page-layout-public.css b/docs/styleguide/styles/37-layouts-page-layout-public.css
new file mode 100644
index 0000000..2803bbd
--- /dev/null
+++ b/docs/styleguide/styles/37-layouts-page-layout-public.css
@@ -0,0 +1,34 @@
+/* ========================================================= */
+/* Layouts: Page Layout Public */
+/* ========================================================= */
+
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+main {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.sg-page-layout-public__heading-block {
+ margin-top: var(--spacing-large);
+ margin-bottom: var(--spacing-large);
+}
+
+.sg-page-layout-public__content-mirror {
+ width: 70vw;
+ max-width: 1100px;
+ margin-inline: auto;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.sg-page-layout-public__footer-card {
+ margin-top: auto;
+ background: var(--surface-card-group);
+}
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index 637847a..c950be1 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -3358,6 +3358,41 @@ section + section {
margin-bottom: var(--spacing-large);
}
+/* ========================================================= */
+/* Layouts: Page Layout Public */
+/* ========================================================= */
+
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+main {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.sg-page-layout-public__heading-block {
+ margin-top: var(--spacing-large);
+ margin-bottom: var(--spacing-large);
+}
+
+.sg-page-layout-public__content-mirror {
+ width: 70vw;
+ max-width: 1100px;
+ margin-inline: auto;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.sg-page-layout-public__footer-card {
+ margin-top: auto;
+ background: var(--surface-card-group);
+}
+
/* ========================================================= */
/* Layouts: VSF List Detailseite */
/* ========================================================= */
@@ -3371,34 +3406,16 @@ section + section {
margin-top: var(--spacing-large);
}
-.sg-vsf-list-detail-page > .sg-options-row {
- margin-top: var(--spacing-large);
-}
-
-.sg-vsf-list-detail-page > .sg-vsf-list-detail-page__intro-block {
- margin-top: var(--spacing-large);
-}
-
-.sg-vsf-list-detail-page__intro-block {
- display: flex;
- flex-direction: column;
-}
-
-.sg-vsf-list-detail-page__intro-block .sg-vsf-list-detail-page__title,
-.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
- color: var(--color-font-light);
-}
-
-.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
- width: min(60vw, 100%);
-}
-
.sg-vsf-list-detail-page__content {
display: flex;
gap: var(--spacing-small);
width: 100%;
}
+.sg-vsf-list-detail-page__mobile-tabs {
+ display: none;
+}
+
.sg-vsf-list-detail-page__left-column {
width: 30%;
min-width: 30%;
@@ -3438,12 +3455,15 @@ section + section {
}
@media (max-width: 767px) {
- .sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
+ .sg-vsf-list-detail-page__mobile-tabs {
+ display: flex;
width: 100%;
+ margin-bottom: 0;
}
.sg-vsf-list-detail-page__content {
display: block;
+ margin-top: var(--spacing-small);
}
.sg-vsf-list-detail-page__left-column {
@@ -3455,9 +3475,12 @@ section + section {
width: 100%;
}
- .sg-vsf-list-detail-page__left-column .sg-group-card,
- .sg-vsf-list-detail-page__right-column .sg-group-card {
- margin-bottom: var(--spacing-large);
+ .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel] {
+ width: 100%;
+ }
+
+ .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel][hidden] {
+ display: none;
}
.sg-vsf-list-detail-page__mobile-toggle {
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index f918668..e97ca0f 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": "3a596f3",
- "syncedAtUtc": "2026-06-18T08:56:17Z",
+ "styleguideCommit": "38dcf14",
+ "syncedAtUtc": "2026-06-18T10:17:03Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
diff --git a/public/assets/styles.css b/public/assets/styles.css
index 637847a..c950be1 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -3358,6 +3358,41 @@ section + section {
margin-bottom: var(--spacing-large);
}
+/* ========================================================= */
+/* Layouts: Page Layout Public */
+/* ========================================================= */
+
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+main {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.sg-page-layout-public__heading-block {
+ margin-top: var(--spacing-large);
+ margin-bottom: var(--spacing-large);
+}
+
+.sg-page-layout-public__content-mirror {
+ width: 70vw;
+ max-width: 1100px;
+ margin-inline: auto;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.sg-page-layout-public__footer-card {
+ margin-top: auto;
+ background: var(--surface-card-group);
+}
+
/* ========================================================= */
/* Layouts: VSF List Detailseite */
/* ========================================================= */
@@ -3371,34 +3406,16 @@ section + section {
margin-top: var(--spacing-large);
}
-.sg-vsf-list-detail-page > .sg-options-row {
- margin-top: var(--spacing-large);
-}
-
-.sg-vsf-list-detail-page > .sg-vsf-list-detail-page__intro-block {
- margin-top: var(--spacing-large);
-}
-
-.sg-vsf-list-detail-page__intro-block {
- display: flex;
- flex-direction: column;
-}
-
-.sg-vsf-list-detail-page__intro-block .sg-vsf-list-detail-page__title,
-.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
- color: var(--color-font-light);
-}
-
-.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
- width: min(60vw, 100%);
-}
-
.sg-vsf-list-detail-page__content {
display: flex;
gap: var(--spacing-small);
width: 100%;
}
+.sg-vsf-list-detail-page__mobile-tabs {
+ display: none;
+}
+
.sg-vsf-list-detail-page__left-column {
width: 30%;
min-width: 30%;
@@ -3438,12 +3455,15 @@ section + section {
}
@media (max-width: 767px) {
- .sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
+ .sg-vsf-list-detail-page__mobile-tabs {
+ display: flex;
width: 100%;
+ margin-bottom: 0;
}
.sg-vsf-list-detail-page__content {
display: block;
+ margin-top: var(--spacing-small);
}
.sg-vsf-list-detail-page__left-column {
@@ -3455,9 +3475,12 @@ section + section {
width: 100%;
}
- .sg-vsf-list-detail-page__left-column .sg-group-card,
- .sg-vsf-list-detail-page__right-column .sg-group-card {
- margin-bottom: var(--spacing-large);
+ .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel] {
+ width: 100%;
+ }
+
+ .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel][hidden] {
+ display: none;
}
.sg-vsf-list-detail-page__mobile-toggle {