Formular und Liste responsiv gestaltet

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

components/MonatsStatistik.tsx

@@ -59,10 +59,10 @@ export default function MonatsStatistik({ typ, refreshKey }: MonatsStatistikProp
   };
 
   return (
-    <div className="mt-4 bg-[#E0E0FF] border border-black rounded-lg shadow-md p-4">
+    <div className="mt-4 bg-[#E0E0FF] border border-black rounded-lg shadow-md p-3 sm:p-4">
       {/* Zeile 1: Monat/Jahr + Gesamtsumme */}
       <div className="flex items-center justify-between flex-wrap gap-2">
-        <div className="flex gap-4 items-center">
+        <div className="flex flex-wrap gap-x-4 gap-y-2 items-center">
           <label className="font-semibold">Monat:</label>
           <select
             value={month}
@@ -88,7 +88,7 @@ export default function MonatsStatistik({ typ, refreshKey }: MonatsStatistikProp
             type="number"
             value={year}
             onChange={(e) => setYear(e.target.value)}
-            className="border border-gray-400 rounded px-3 py-1 w-24"
+            className="border border-gray-400 rounded px-3 py-1 w-20"
             min="2013"
             max="2099"
           />