Add public content element width token

semantic-tokens-layouts.html

@@ -30,6 +30,7 @@
       <tr><td>layout-object-card-shared-width</td><td>auto</td><td>Geteilte Laufzeitbreite für gekoppelte Object-Card-Instanzen.</td></tr>
       <tr><td>layout-content-cards-group-gap</td><td>spacing-small</td><td>Abstand zwischen Inhaltsblock-Karten innerhalb der Gruppe.</td></tr>
       <tr><td>layout-card-list-drawer-width</td><td>dimension-card-list-drawer-width</td><td>Breite des ausziehbaren Card-Listenbereichs relativ zum Container.</td></tr>
+      <tr><td>layout-public-content-element-width</td><td>60%</td><td>Standardbreite eines rechtsbündigen Public-Content-Elements innerhalb einer Wrapper-Card.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Layouts</h3>

styles/01-foundations.css

@@ -199,6 +199,7 @@
   --text-content-block-card-content: var(--color-font-dark);
   --text-card-list-drawer: var(--color-font-dark);
   --layout-card-list-drawer-width: var(--dimension-card-list-drawer-width);
+  --layout-public-content-element-width: 60%;
   --surface-vsf-drawer-object-card-header: var(--color-darkblue);
   --surface-vsf-drawer-object-card-body: var(--color-darkblue);
   --text-vsf-drawer-object-card-heading: var(--color-font-light);

styles/40-components-cards.css

@@ -254,7 +254,7 @@
 }
 
 .sg-page-cards-public-page .sg-cards-public-page__cta-right-card {
-  width: 60%;
+  width: var(--layout-public-content-element-width);
   max-width: none;
   margin-inline-start: auto;
 }