diff --git a/patterns/card-gruppe-mit-tastennavigation.html b/patterns/card-gruppe-mit-tastennavigation.html
index 7aa843f..16d7f35 100644
--- a/patterns/card-gruppe-mit-tastennavigation.html
+++ b/patterns/card-gruppe-mit-tastennavigation.html
@@ -139,9 +139,9 @@
           tab.style.flex = '0 1 auto';
           tab.style.minWidth = `${currentWidth}px`;
           tab.style.maxWidth = `${maxWidth}px`;
+          tab.style.width = `${preferredWidth}px`;
           tab.setAttribute('data-tab-min-width', `${currentWidth}px`);
           tab.setAttribute('data-tab-max-width', `${maxWidth}px`);
-          tab.setAttribute('data-tab-preferred-width', `${preferredWidth}px`);
         });
       };
 
@@ -149,10 +149,10 @@
         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');
-            const preferredWidth = tab.getAttribute('data-tab-preferred-width');
-            tab.style.width = tab === targetTab ? maxWidth : `clamp(${minWidth}, ${preferredWidth}, ${maxWidth})`;
+            const minWidth = Number((tab.getAttribute('data-tab-min-width') || '').replace('px', ''));
+            const maxWidth = Number((tab.getAttribute('data-tab-max-width') || '').replace('px', ''));
+            const preferredWidth = Math.ceil(minWidth + ((maxWidth - minWidth) * 0.5));
+            tab.style.width = `${preferredWidth}px`;
           } else {
             tab.style.removeProperty('width');
           }