From 122eddbabf63cde59f74caf71bc6bee2ff71347d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 24 Jun 2026 09:32:29 +0200
Subject: [PATCH] Add content group box component

---
 components/public-page-components.html        | 23 +++++++++++----
 semantic-tokens-components.html               | 14 ++++++++--
 styleguide.css                                |  1 +
 .../44-components-public-page-components.css  | 28 +++++++++++++++++++
 4 files changed, 57 insertions(+), 9 deletions(-)
 create mode 100644 styles/44-components-public-page-components.css

diff --git a/components/public-page-components.html b/components/public-page-components.html
index 985e38b..a1ff710 100644
--- a/components/public-page-components.html
+++ b/components/public-page-components.html
@@ -10,14 +10,25 @@
 
   <h1 class="sg-main-heading">Components – Public Page Components</h1>
 
-  <section id="public-page-components">
-    <p class="sg-preview-label">Component Group: Public Page Components</p>
+  <section id="component-content-group-box">
+    <p class="sg-preview-label">Component: Content Group Box</p>
 
     <div class="sg-preview-area">
-      <p class="sg-body">
-        Diese Seite bündelt die Components für Public Pages. Die konkrete Component-Auswahl und die
-        zugehörigen semantischen Tokens werden im nächsten Schritt ergänzt.
-      </p>
+      <div class="sg-content-group-box" data-component="content-group-box">
+        <section>
+          <h2 class="sg-sub-heading">Abschnitt 1</h2>
+          <p class="sg-body">
+            Inhaltlicher Block für die erste Gruppe. Die Component liefert hier nur Breite, Abstand und den temporären Prüfrahmen.
+          </p>
+        </section>
+
+        <section>
+          <h2 class="sg-sub-heading">Abschnitt 2</h2>
+          <p class="sg-body">
+            Weitere Inhalte werden im selben Wrapper zusammengefasst, damit die vertikale Struktur auf Public Pages konsistent bleibt.
+          </p>
+        </section>
+      </div>
     </div>
   </section>
 
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index fc9dc2f..772b09a 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -86,9 +86,17 @@
 
   <section id="semantic-public-page-components">
     <h2 class="sg-sub-heading sg-section-h2">Public Page Components</h2>
-    <p class="sg-table-label">
-      Die konkreten semantischen Tokens für diese Component-Gruppe werden ergänzt, sobald die Components für Public Pages festgelegt sind.
-    </p>
+
+    <h3 class="sg-sub-heading sg-section-h3">Content Group Box</h3>
+    <table class="sg-foundation-table sg-table-label">
+      <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
+      <tbody>
+        <tr><td>surface-content-group-box</td><td>color-transparent</td><td>Transparente Fläche der Wrapper-Component.</td></tr>
+        <tr><td>border-content-group-box</td><td>color-white</td><td>Temporärer Prüfrahmen für die visuelle Kontrolle der Component-Erstellung.</td></tr>
+        <tr><td>layout-content-group-box-gap</td><td>spacing-large</td><td>Vertikaler Abstand zwischen den direkten Abschnitts-Containern innerhalb der Wrapper-Component.</td></tr>
+        <tr><td>layout-content-group-box-margin-block</td><td>calc(var(--spacing-large) * 0.5)</td><td>Oberer und unterer Außenabstand der Wrapper-Component.</td></tr>
+      </tbody>
+    </table>
   </section>
 
   <section id="semantic-interactive">
diff --git a/styleguide.css b/styleguide.css
index 7299c9a..cfb5ba4 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -24,3 +24,4 @@
 @import "./styles/41-components-charts.css";
 @import "./styles/42-components-data-display.css";
 @import "./styles/43-components-typography.css";
+@import "./styles/44-components-public-page-components.css";
diff --git a/styles/44-components-public-page-components.css b/styles/44-components-public-page-components.css
new file mode 100644
index 0000000..12e42f6
--- /dev/null
+++ b/styles/44-components-public-page-components.css
@@ -0,0 +1,28 @@
+/* ========================================================= */
+/* Components: Public Page Components                        */
+/* ========================================================= */
+
+.sg-content-group-box {
+  --surface-content-group-box: var(--color-transparent);
+  --border-content-group-box: var(--color-white);
+  --layout-content-group-box-gap: var(--spacing-large);
+  --layout-content-group-box-margin-block: calc(var(--spacing-large) * 0.5);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  margin: var(--layout-content-group-box-margin-block) 0;
+  border: 1px solid var(--border-content-group-box);
+  background: var(--surface-content-group-box);
+  gap: var(--layout-content-group-box-gap);
+}
+
+.sg-content-group-box > * {
+  margin: 0;
+}
+
+.sg-page-public-page-components .sg-preview-area {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}