Use active-tab width switching within mobile min/max bounds

patterns/card-gruppe-mit-tastennavigation.html

@@ -124,6 +124,8 @@
           tab.style.removeProperty('flex');
           tab.style.removeProperty('min-width');
           tab.style.removeProperty('max-width');
+          tab.removeAttribute('data-tab-min-width');
+          tab.removeAttribute('data-tab-max-width');
         });
 
         if (!mobileBreakpoint.matches) {
@@ -133,16 +135,24 @@
         tabs.forEach((tab) => {
           const currentWidth = Math.ceil(tab.getBoundingClientRect().width);
           const maxWidth = Math.ceil(currentWidth * 1.4);
-          tab.style.width = `clamp(${currentWidth}px, 33vw, ${maxWidth}px)`;
           tab.style.flex = '0 1 auto';
           tab.style.minWidth = `${currentWidth}px`;
           tab.style.maxWidth = `${maxWidth}px`;
+          tab.setAttribute('data-tab-min-width', `${currentWidth}px`);
+          tab.setAttribute('data-tab-max-width', `${maxWidth}px`);
         });
       };
 
       const activateTab = (targetTab) => {
         tabs.forEach((tab) => {
           tab.setAttribute('aria-selected', String(tab === targetTab));
+          if (mobileBreakpoint.matches) {
+            const minWidth = tab.getAttribute('data-tab-min-width');
+            const maxWidth = tab.getAttribute('data-tab-max-width');
+            tab.style.width = tab === targetTab ? maxWidth : minWidth;
+          } else {
+            tab.style.removeProperty('width');
+          }
         });
 
         panels.forEach((panel) => {
@@ -170,6 +180,10 @@
       });
 
       applyMobileTabWidthBounds();
+      const activeTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true') || tabs[0];
+      if (activeTab) {
+        activateTab(activeTab);
+      }
       mobileBreakpoint.addEventListener('change', applyMobileTabWidthBounds);
       window.addEventListener('resize', applyMobileTabWidthBounds);
     }