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