Clean up multiselect pattern token cascade

foundations.html

@@ -192,8 +192,7 @@
         <tr><td>notifications-card-min-width</td><td>445px</td><td>Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns.</td></tr>
         <tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
         <tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr>
-        <tr><td>multiselect-pulldown-panel-desktop-width</td><td>500px</td><td>Reservierte Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
-        <tr><td>multiselect-pulldown-panel-mobile-width</td><td>80vw</td><td>Reservierte mobile Foundation-Breite für Multiselektions-Pulldown-Panels; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
+        <tr><td>multiselect-pulldown-panel-desktop-width</td><td>500px</td><td>Foundation-Breite des Multiselektions-Pulldown-Panels; wird als feste Pattern-Breite mit Viewport-Kappe wiederverwendet.</td></tr>
         <tr><td>options-row-mode-toggle-width</td><td>7rem</td><td>Breite des Modus-Schiebers in der Options Row.</td></tr>
         <tr><td>options-row-help-panel-width</td><td>16rem</td><td>Breite des Help-Panels in der Options Row.</td></tr>
         <tr><td>card-list-drawer-width</td><td>40%</td><td>Relative Breite des ausziehbaren Card-Listenbereichs.</td></tr>

semantic-tokens-components.html

@@ -199,7 +199,6 @@
       <tr><td>layout-pulldown-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Innenabstand links für Pulldown-Trigger und Select-Felder.</td></tr>
       <tr><td>layout-pulldown-chevron-offset</td><td>compact-interaction-padding-horizontal</td><td>Rechter Innenabstand des Chevron-Icons im Pulldown.</td></tr>
       <tr><td>layout-pulldown-chevron-reserved-space</td><td>spacing-large</td><td>Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.</td></tr>
-      <tr><td>layout-pulldown-panel-form-mobile-width</td><td>90%</td><td>Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt.</td></tr>
       <tr><td>layer-pulldown-panel</td><td>dimension-layer-pulldown-panel</td><td>Layer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten.</td></tr>
       <tr><td>layout-multiselect-pulldown-panel-desktop-width</td><td>dimension-multiselect-pulldown-panel-desktop-width</td><td>Semantische Obergrenze für die Panelbreite geöffneter Pulldowns; das Panel darf über Triggerbreite wachsen, bleibt aber durch diese Breite und die Viewport-Kappe begrenzt.</td></tr>
       <tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>

semantic-tokens-patterns.html

@@ -129,6 +129,16 @@
 
     <h3 class="sg-sub-heading sg-section-h3">Multiselektions-Pulldown</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-multiselect-panel-width</td><td>layout-multiselect-pulldown-panel-desktop-width</td><td>Feste Breite des Multiselektions-Pulldown-Panels auf allen Viewports innerhalb der vorhandenen Viewport-Kappe.</td></tr>
+      <tr><td>layout-multiselect-panel-available-width</td><td>Viewportbreite minus 2 × spacing-large</td><td>Viewport-Kappe für das Multiselektions-Pulldown-Panel mit gleichmäßigem Außenabstand.</td></tr>
+      <tr><td>layout-multiselect-chapter-gap</td><td>spacing-large</td><td>Einheitlicher vertikaler Abstand zwischen allen direkten Elementen eines Multiselect-Blocks.</td></tr>
+      <tr><td>layout-multiselect-column-gap</td><td>spacing-large</td><td>Horizontaler Abstand zwischen Aktivierungsschalter und Label in den Pattern-Zeilen.</td></tr>
+      <tr><td>layout-multiselect-control-gap</td><td>spacing-small</td><td>Standardabstand innerhalb der Slider-Zeilen.</td></tr>
+      <tr><td>layout-multiselect-visual-control-gap</td><td>2 × spacing-small</td><td>Visueller Abstand zwischen Kopfzeile und Interaktionselement bei Radio- und Pulldown-Zeilen.</td></tr>
+      <tr><td>layout-multiselect-control-row-height</td><td>interaction-height</td><td>Höhe der Kopfzeile in den filterbaren Pulldown-Zeilen.</td></tr>
+      <tr><td>layout-multiselect-value-min-width</td><td>1.25 × interaction-height</td><td>Mindestbreite der Slider-Wertanzeige.</td></tr>
+      <tr><td>typography-multiselect-label-line-height</td><td>line-height-base</td><td>Zeilenhöhe der Labels in den filterbaren Pulldown-Zeilen.</td></tr>
+      <tr><td>opacity-multiselect-disabled</td><td>disabled-opacity</td><td>Deckkraft deaktivierter Multiselect-Inhalte.</td></tr>
     </tbody></table>
 
     <h3 class="sg-sub-heading sg-section-h3">Overlay Card</h3>

styles/01-foundations.css

@@ -79,7 +79,6 @@
   --layout-pulldown-chevron-offset: var(--compact-interaction-padding-horizontal);
   --layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal);
   --layout-pulldown-chevron-reserved-space: var(--spacing-large);
-  --layout-pulldown-panel-form-mobile-width: 90%;
   --layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
   --layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
   --layout-input-label-width: var(--dimension-input-label-width);

styles/21-patterns-options-row.css

@@ -131,15 +131,6 @@
     width: 100%;
   }
 
-  .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
-    width: min(
-      var(--layout-pulldown-panel-form-mobile-width),
-      calc(100vw - (2 * var(--spacing-large)))
-    );
-    min-width: 0;
-    max-width: calc(100vw - (2 * var(--spacing-large)));
-  }
-
   .sg-options-row .sg-pulldown-panel .sg-form-sections-card-wrapper,
   .sg-options-row .sg-pulldown-panel .sg-form-sections-card {
     min-width: 0;

styles/25-patterns-form-sections.css

@@ -75,8 +75,21 @@
   padding-left: var(--layout-form-sections-interaction-indent);
 }
 
+.sg-options-row[data-pattern="multiselektions-pulldown"] {
+  --layout-multiselect-panel-width: var(--layout-multiselect-pulldown-panel-desktop-width);
+  --layout-multiselect-panel-available-width: calc(100vw - (2 * var(--spacing-large)));
+  --layout-multiselect-chapter-gap: var(--spacing-large);
+  --layout-multiselect-column-gap: var(--spacing-large);
+  --layout-multiselect-control-gap: var(--spacing-small);
+  --layout-multiselect-visual-control-gap: calc(var(--spacing-small) * 2);
+  --layout-multiselect-control-row-height: var(--interaction-height);
+  --layout-multiselect-value-min-width: calc(var(--interaction-height) * 1.25);
+  --typography-multiselect-label-line-height: var(--line-height-base);
+  --opacity-multiselect-disabled: var(--disabled-opacity);
+}
+
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > * + * {
-  margin-top: var(--spacing-large);
+  margin-top: var(--layout-multiselect-chapter-gap);
 }
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-options-row__left > .sg-pulldown-demo {
@@ -90,14 +103,14 @@
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
   width: min(
-    var(--layout-multiselect-pulldown-panel-desktop-width),
-    calc(100vw - (2 * var(--spacing-large)))
+    var(--layout-multiselect-panel-width),
+    var(--layout-multiselect-panel-available-width)
   );
   min-width: min(
-    var(--layout-multiselect-pulldown-panel-desktop-width),
-    calc(100vw - (2 * var(--spacing-large)))
+    var(--layout-multiselect-panel-width),
+    var(--layout-multiselect-panel-available-width)
   );
-  max-width: calc(100vw - (2 * var(--spacing-large)));
+  max-width: var(--layout-multiselect-panel-available-width);
 }
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel .sg-form-sections-card-wrapper,
@@ -117,8 +130,8 @@
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr) auto;
   align-items: center;
-  column-gap: var(--spacing-large);
-  row-gap: var(--spacing-small);
+  column-gap: var(--layout-multiselect-column-gap);
+  row-gap: var(--layout-multiselect-control-gap);
 }
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable {
@@ -126,14 +139,14 @@
 }
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-slider {
-  opacity: var(--disabled-opacity);
+  opacity: var(--opacity-multiselect-disabled);
 }
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-label,
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-slider-value,
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-label,
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-radio-activatable-group__choices {
-  opacity: var(--disabled-opacity);
+  opacity: var(--opacity-multiselect-disabled);
 }
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle {
@@ -159,7 +172,7 @@
   grid-column: 3;
   grid-row: 2;
   margin: 0;
-  min-width: calc(var(--interaction-height) * 1.25);
+  min-width: var(--layout-multiselect-value-min-width);
   line-height: 1;
   align-self: center;
   white-space: nowrap;
@@ -173,8 +186,8 @@
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr);
   align-items: center;
-  column-gap: var(--spacing-large);
-  row-gap: calc(var(--spacing-small) * 2);
+  column-gap: var(--layout-multiselect-column-gap);
+  row-gap: var(--layout-multiselect-visual-control-gap);
 }
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label {
@@ -207,8 +220,8 @@
 .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: var(--interaction-height) auto;
-  row-gap: calc(var(--spacing-small) * 2);
+  grid-template-rows: var(--layout-multiselect-control-row-height) auto;
+  row-gap: var(--layout-multiselect-visual-control-gap);
 }
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__row-header {
@@ -216,14 +229,14 @@
   grid-column: 1;
   grid-row: 1;
   align-items: center;
-  gap: var(--spacing-large);
+  gap: var(--layout-multiselect-column-gap);
   min-width: 0;
 }
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__row-header > .sg-pulldown-panel__label {
   margin: 0;
   min-width: 0;
-  line-height: var(--line-height-base);
+  line-height: var(--typography-multiselect-label-line-height);
 }
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown {
@@ -237,7 +250,7 @@
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown-panel__row-header > .sg-pulldown-panel__label,
 .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown {
-  opacity: var(--disabled-opacity);
+  opacity: var(--opacity-multiselect-disabled);
 }
 
 .sg-form-sections-card__actions {