Mobile Dropdowns und Aktionen vereinheitlichen

src/components/dashboard/budget-column.tsx

@@ -271,6 +271,31 @@ export function BudgetColumn({
 
   const selectedBudget = group.budgets.find((budget) => budget.id === selectedBudgetId) ?? group.budgets[0] ?? null;
   const visibleBudgets = isCompactLayout && selectedBudget ? [selectedBudget] : group.budgets;
+  const mobilePrimarySelectSx = {
+    width: "100%",
+    "& .MuiOutlinedInput-root": {
+      minHeight: 64,
+      borderRadius: "28px",
+      backgroundColor: alpha(theme.palette.background.paper, isDark ? 0.72 : 0.96),
+      "& fieldset": {
+        borderColor: alpha(theme.palette.primary.main, isDark ? 0.54 : 0.38)
+      },
+      "&:hover fieldset": {
+        borderColor: alpha(theme.palette.primary.main, 0.72)
+      },
+      "&.Mui-focused fieldset": {
+        borderWidth: 2,
+        borderColor: theme.palette.primary.main
+      }
+    },
+    "& .MuiInputLabel-root": {
+      color: theme.palette.text.secondary
+    },
+    "& .MuiInputBase-input": {
+      fontSize: "1.08rem",
+      fontWeight: 600
+    }
+  } as const;
 
   return (
     <Card
@@ -441,6 +466,7 @@ export function BudgetColumn({
               value={selectedBudget?.id ?? ""}
               onChange={(event) => setSelectedBudgetId(event.target.value)}
               fullWidth
+              sx={mobilePrimarySelectSx}
             >
               {group.budgets.map((budget) => (
                 <MenuItem key={budget.id} value={budget.id}>