fix(CAD-12c): ribbon overflow - dynamic height + scrollable content so all tool groups visible; emoji toggle replaced with text button (Einfach/Pro)

frontend/src/components/Topbar.tsx

@@ -45,7 +45,7 @@ const Topbar: React.FC<TopbarProps> = ({
           aria-label={uiMode === 'pro' ? t('mode.toSimple') : t('mode.toPro')}
           onClick={toggleUIMode}
         >
-          {uiMode === 'pro' ? '😊' : '🛠'}
+          {uiMode === 'pro' ? 'Einfach' : 'Pro'}
         </button>
         <button className="icon-btn-top" aria-label="Rückgängig (Strg+Z)" title="Rückgängig (Strg+Z)" onClick={onUndo}>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>

frontend/src/styles.css

@@ -335,7 +335,10 @@ a:hover { text-decoration: underline; }
   border-bottom: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
-  height: var(--ribbon-h);
+  height: auto;
+  min-height: var(--ribbon-h);
+  max-height: 220px;
+  overflow-y: auto;
   z-index: 25;
   flex-shrink: 0;
 }
@@ -370,10 +373,12 @@ a:hover { text-decoration: underline; }
 .ribbon-content {
   flex: 1;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   padding: 6px 8px;
   gap: var(--spacing-lg);
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex-wrap: wrap;
 }
 .ribbon-group {
   display: flex;