Clean up text layouts and picture radius tokens

semantic-tokens-components.html

@@ -121,7 +121,12 @@
     </table>
 
     <h3 class="sg-sub-heading sg-section-h3">Picture Full Width</h3>
-    <p class="sg-table-label">Keine zusätzlichen semantischen Tokens erforderlich. Die Komponente ist strukturell und bezieht sich mit <code>width: 100%</code> auf den umgebenden Container, mit <code>height: auto</code> und <code>display: block</code> für das Bild-Element.</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>radius-picture-full-width</td><td>radius-card</td><td>Border-Radius des Full-Width-Bildes.</td></tr>
+      </tbody>
+    </table>
   </section>
 
   <section id="semantic-interactive">

styles/01-foundations.css

@@ -193,6 +193,7 @@
   --surface-navigation-card-body: var(--color-white);
   --surface-content-block-card-title: var(--color-light-grey);
   --surface-content-block-card-content: var(--color-white);
+  --radius-picture-full-width: var(--radius-card);
   --layout-content-cards-group-gap: var(--spacing-small);
   --surface-card-list-drawer: var(--color-background-purple);
   --text-content-block-card-title: var(--color-font-dark);

styles/31-patterns-text-layouts.css

@@ -4,12 +4,11 @@
 
 .sg-page-text-layouts {
   background: var(--surface-form-preview);
-  color: var(--color-font-dark);
 }
 
 .sg-page-text-layouts .sg-main-heading,
 .sg-page-text-layouts .sg-preview-label {
-  color: var(--color-font-dark);
+  color: inherit;
 }
 
 .sg-text-layout-pattern {

styles/44-components-public-page-components.css

@@ -80,7 +80,7 @@
   width: 100%;
   max-width: 100%;
   height: auto;
-  border-radius: var(--radius-card);
+  border-radius: var(--radius-picture-full-width);
 }
 
 .sg-page-public-page-components .sg-preview-area {