Add green content card variant

components/cards.html

@@ -118,6 +118,23 @@
     </article>
   </div>
 
+  <p class="sg-preview-label">Variante: Green Content Card</p>
+
+  <div class="sg-preview-area">
+    <article class="sg-card sg-card--content-card sg-card--content-card-green" data-component="content-card" aria-label="Green Content Card">
+      <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
+        <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
+          <p class="sg-body sg-text-layout-pattern__column">
+            Footer links: Platzhaltertext fuer allgemeine Hinweise, Navigation oder Kontaktinformationen im zweispaltigen Layout.
+          </p>
+          <p class="sg-body sg-text-layout-pattern__column">
+            Footer rechts: Platzhaltertext fuer ergaenzende Angaben, rechtliche Hinweise oder sekundaere Footer-Inhalte im gleichen Raster.
+          </p>
+        </div>
+      </div>
+    </article>
+  </div>
+
   <p class="sg-preview-label">Variante: Footer Card</p>
 
   <div class="sg-preview-area">

styles/40-components-cards.css

@@ -38,6 +38,20 @@
   color: var(--color-font-light);
 }
 
+.sg-card.sg-card--content-card-green {
+  --surface-content-card-green: var(--color-signal-green);
+  --surface-card: var(--surface-content-card-green);
+  --surface-card-body: var(--surface-content-card-green);
+  --text-card-header: var(--color-font-light);
+  --text-card-body: var(--color-font-light);
+}
+
+.sg-card.sg-card--content-card-green .sg-card-segment--body,
+.sg-card.sg-card--content-card-green .sg-text-layout-pattern__column,
+.sg-card.sg-card--content-card-green .sg-body {
+  color: var(--text-card-body);
+}
+
 .sg-card.sg-card--footer-card {
   --surface-card: var(--color-black);
   --surface-card-body: var(--color-black);