Clean up public page component docs and alignment

semantic-tokens-components.html

@@ -119,6 +119,9 @@
         <tr><td>layout-call-to-action-card-content-gap</td><td>spacing-large</td><td>Abstand zwischen Text und Button.</td></tr>
       </tbody>
     </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>
   </section>
 
   <section id="semantic-interactive">

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

@@ -67,6 +67,10 @@
   justify-content: flex-end;
 }
 
+.sg-call-to-action-card--align-right {
+  margin-left: auto;
+}
+
 .sg-picture-full-width {
   display: block;
   width: 100%;
@@ -82,8 +86,7 @@
 
 @media (max-width: 48rem) {
   .sg-text-block,
-  .sg-card--call-to-action-card,
+  .sg-card--call-to-action-card {
-  .sg-picture-full-width {
     width: 100%;
   }
 }

styles/45-patterns-public-page-patterns.css

@@ -11,7 +11,3 @@
 .sg-page-public-page-patterns .sg-text-block--align-right {
   margin-left: auto;
 }
-
-.sg-call-to-action-card--align-right {
-  margin-left: auto;
-}