Add content group box component

components/public-page-components.html

@@ -10,14 +10,25 @@
 
   <h1 class="sg-main-heading">Components – Public Page Components</h1>
 
-  <section id="public-page-components">
+  <section id="component-content-group-box">
-    <p class="sg-preview-label">Component Group: Public Page Components</p>
+    <p class="sg-preview-label">Component: Content Group Box</p>
 
     <div class="sg-preview-area">
-      <p class="sg-body">
+      <div class="sg-content-group-box" data-component="content-group-box">
-        Diese Seite bündelt die Components für Public Pages. Die konkrete Component-Auswahl und die
+        <section>
-        zugehörigen semantischen Tokens werden im nächsten Schritt ergänzt.
+          <h2 class="sg-sub-heading">Abschnitt 1</h2>
-      </p>
+          <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>
 

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.
+    <h3 class="sg-sub-heading sg-section-h3">Content Group Box</h3>
-    </p>
+    <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">

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";

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%;
+}