Add standalone scrollable card pattern

foundations.html

@@ -157,6 +157,8 @@
         <tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
         <tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
         <tr><td>object-card-height</td><td>600px</td><td>Fixe Höhe der Object Card im Desktop-Layout (u. a. für Company Card).</td></tr>
+        <tr><td>scrollable-card-width</td><td>600px</td><td>Standardbreite der eigenständigen Scrollable Card; kann im konsumierenden Portal über den semantischen Layout-Token angepasst werden.</td></tr>
+        <tr><td>scrollable-card-height</td><td>600px</td><td>Standardhöhe der eigenständigen Scrollable Card; kann im konsumierenden Portal über den semantischen Layout-Token angepasst werden.</td></tr>
         <tr><td>content-card-margin-top-desktop</td><td>100px</td><td>Oberer Außenabstand der Content Card auf Desktop.</td></tr>
         <tr><td>content-card-margin-top-mobile</td><td>1rem</td><td>Oberer Außenabstand der Content Card auf Mobile; entspricht spacing-large.</td></tr>
         <tr><td>notification-card-width</td><td>50%</td><td>Breite der Notification Card relativ zum übergeordneten Layout.</td></tr>

index.html

@@ -43,6 +43,7 @@
         <li><a href="./patterns/portal-header.html">Portal Header</a></li>
         <li><a href="./patterns/options-row.html">Options Row</a></li>
         <li><a href="./patterns/object-card.html">Object Card</a></li>
+        <li><a href="./patterns/scrollable-card.html">Scrollable Card</a></li>
         <li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
         <li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
         <li><a href="./patterns/left-navigation.html">Left Navigation</a></li>

patterns/scrollable-card.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Pattern Scrollable Card</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Pattern – Scrollable Card</h1>
+
+  <section id="pattern-scrollable-card">
+    <p class="sg-preview-label">Pattern: Scrollable Card</p>
+    <p class="sg-body">Die Scrollable Card besitzt eine fixe Breite und Höhe. Header und Aktionsbereich bleiben sichtbar; ausschließlich der Inhaltsbereich ist scrollbar. Das Pattern ist unabhängig von Overlay-Patterns und kann bei Bedarf von diesen verwendet werden.</p>
+
+    <article class="sg-card sg-scrollable-card" data-pattern="scrollable-card" aria-label="Scrollable Card">
+      <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-scrollable-card__header" data-pattern-part="scrollable-card-header">
+        <div class="sg-strong">Scrollable Card</div>
+      </header>
+
+      <div class="sg-card-segment sg-card-segment--body sg-scrollable-card__content" data-pattern-part="scrollable-card-content" tabindex="0" aria-label="Scrollbarer Karteninhalt">
+        <p class="sg-body">Der Karteninhalt bleibt innerhalb der definierten Kartenhöhe. Bei längeren Inhalten entsteht hier ein eigener vertikaler Scrollbereich, während Titel und Aktionen sichtbar bleiben.</p>
+        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus, turpis vel porttitor cursus, nibh justo feugiat sem, sit amet egestas lorem arcu sed augue.</p>
+        <p class="sg-body">Donec sed lorem in urna sagittis aliquet. Suspendisse potenti. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p>
+        <p class="sg-body">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.</p>
+        <p class="sg-body">Zusätzlicher Inhalt zur Demonstration des unabhängigen Scrollbereichs innerhalb der Card.</p>
+        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
+        <p class="sg-body">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p class="sg-body">Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.</p>
+        <p class="sg-body">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.</p>
+        <p class="sg-body">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+        <p class="sg-body">Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Vestibulum ligula porta felis euismod semper.</p>
+        <p class="sg-body">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+        <p class="sg-body">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod.</p>
+        <p class="sg-body">Morbi risus porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.</p>
+        <p class="sg-body">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
+        <p class="sg-body">Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p class="sg-body">Der untere Aktionsbereich bleibt auch am Ende des Scrollvorgangs an seiner Position sichtbar.</p>
+      </div>
+
+      <footer class="sg-card-segment sg-card-segment--body sg-scrollable-card__actions-segment" data-pattern-part="scrollable-card-actions">
+        <div class="sg-scrollable-card__actions">
+          <button class="sg-interaction-element sg-button sg-button--active" type="button">Abbrechen</button>
+          <button class="sg-interaction-element sg-button sg-button--active" type="button">Speichern</button>
+        </div>
+      </footer>
+    </article>
+  </section>
+
+</body>
+</html>

semantic-tokens-patterns.html

@@ -63,6 +63,12 @@
       <tr><td>surface-object-card-lower-segment</td><td>color-white</td><td>Hintergrundfläche der unteren zwei Segmente der Object Card.</td></tr>
     </tbody></table>
 
+    <h3 class="sg-sub-heading sg-section-h3">Scrollable Card</h3>
+    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
+      <tr><td>layout-scrollable-card-width</td><td>dimension-scrollable-card-width</td><td>Fixe Breite der Scrollable Card; kann im konsumierenden Portal individuell gesetzt werden.</td></tr>
+      <tr><td>layout-scrollable-card-height</td><td>dimension-scrollable-card-height</td><td>Fixe Höhe der Scrollable Card; kann im konsumierenden Portal individuell gesetzt werden.</td></tr>
+    </tbody></table>
+
     <h3 class="sg-sub-heading sg-section-h3">Object Group Card</h3>
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
       <tr><td>layout-object-group-card-min-width</td><td>dimension-object-group-card-min-width</td><td>Mindestbreite der einzelnen Karten im Pattern Object Group Card.</td></tr>

styleguide.css

@@ -26,3 +26,4 @@
 @import "./styles/43-components-typography.css";
 @import "./styles/44-components-public-page-components.css";
 @import "./styles/45-patterns-public-page-patterns.css";
+@import "./styles/46-patterns-scrollable-card.css";

styles/01-foundations.css

@@ -174,6 +174,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
+  --layout-scrollable-card-width: var(--dimension-scrollable-card-width);
+  --layout-scrollable-card-height: var(--dimension-scrollable-card-height);
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
   --layout-notification-card-width: var(--dimension-notification-card-width);
@@ -286,6 +288,8 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
+  --dimension-scrollable-card-width: 600px;
+  --dimension-scrollable-card-height: 600px;
   --dimension-content-card-margin-top-desktop: 100px;
   --dimension-content-card-margin-top-mobile: 1rem;
   --dimension-object-group-card-min-width: 450px;

styles/46-patterns-scrollable-card.css

@@ -0,0 +1,34 @@
+/* ========================================================= */
+/* Patterns: Scrollable Card                                 */
+/* ========================================================= */
+
+.sg-scrollable-card {
+  display: flex;
+  flex-direction: column;
+  width: var(--layout-scrollable-card-width);
+  max-width: 100%;
+  height: var(--layout-scrollable-card-height);
+  box-sizing: border-box;
+}
+
+.sg-scrollable-card__header,
+.sg-scrollable-card__actions-segment {
+  flex: 0 0 auto;
+}
+
+.sg-scrollable-card__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.sg-scrollable-card__actions {
+  display: flex;
+  gap: var(--spacing-small);
+  width: 100%;
+}
+
+.sg-scrollable-card__actions > .sg-button {
+  flex: 1 1 0;
+  min-width: 0;
+}