Sync styleguide 2026.05.18.1

docs/styleguide/semantic-tokens-components.html

@@ -84,6 +84,43 @@
     </table>
   </section>
 
+  <section id="semantic-public-page-components">
+    <h2 class="sg-sub-heading sg-section-h2">Public Page Components</h2>
+
+    <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>
+
+    <h3 class="sg-sub-heading sg-section-h3">Public Page Content left</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-text-block</td><td>color-transparent</td><td>Transparente Fläche des Textblocks.</td></tr>
+        <tr><td>text-text-block</td><td>color-font-light</td><td>Standard-Textfarbe des Textblocks.</td></tr>
+        <tr><td>layout-text-block-width</td><td>dimension-public-content-width</td><td>Breite des Textblocks im Viewport.</td></tr>
+      </tbody>
+    </table>
+
+    <h3 class="sg-sub-heading sg-section-h3">Call to action Card</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-call-to-action-card</td><td>surface-card-group</td><td>Fläche der Call-to-action-Card als dunkle Content-Card-Variante.</td></tr>
+        <tr><td>text-call-to-action-card</td><td>color-font-light</td><td>Textfarbe in der Call-to-action-Card.</td></tr>
+        <tr><td>layout-call-to-action-card-width</td><td>dimension-public-content-width</td><td>Breite der Card im Page-Layout.</td></tr>
+        <tr><td>layout-call-to-action-card-content-columns</td><td>minmax(0, 1fr) max-content</td><td>Zweispaltiges Layout mit flexibler Textspalte und Buttonspalte in Buttonbreite.</td></tr>
+        <tr><td>layout-call-to-action-card-content-gap</td><td>spacing-large</td><td>Abstand zwischen Text und Button.</td></tr>
+      </tbody>
+    </table>
+  </section>
+
   <section id="semantic-interactive">
     <h2 class="sg-sub-heading sg-section-h2">Interactive Elements</h2>
 
@@ -99,6 +136,16 @@
       </tbody>
     </table>
 
+    <h3 class="sg-sub-heading sg-section-h3">Call-to-action-Button</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-button-cta</td><td>color-darkblue</td><td>Fläche des Call-to-action-Buttons.</td></tr>
+        <tr><td>text-button-cta</td><td>color-font-light</td><td>Textfarbe des Call-to-action-Buttons.</td></tr>
+        <tr><td>layout-button-cta-padding</td><td>spacing-large</td><td>Innenabstand des Call-to-action-Buttons auf allen Seiten.</td></tr>
+      </tbody>
+    </table>
+
     <h3 class="sg-sub-heading sg-section-h3">Tabs</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-tab-selected</td><td>color-dark-grey</td><td>Fläche des ausgewählten Tabs.</td></tr>