Formular und Liste responsiv gestalten

Eingabemaske als CSS-Grid statt starrer Tabelle, damit sie auf dem
Smartphone vollständig sichtbar bleibt (2/4/8 Spalten je nach
Breite). Einträge-Liste zeigt unterhalb von 768px eine zweizeilige
Kartenansicht statt der breiten Tabelle. Anzahl geladener Einträge
von 15 auf 5 reduziert.

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

components/TabLayout.tsx

@@ -19,9 +19,9 @@ export default function TabLayout({ children }: TabLayoutProps) {
   const buildDate = process.env.NEXT_PUBLIC_BUILD_DATE || new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
 
   return (
-    <div className="min-h-screen py-8 px-4">
+    <div className="min-h-screen py-8 px-2 sm:px-4">
       {/* Outer wrapper: ~10% wider than the inner max-w-6xl (72rem → ~79rem), with border */}
-      <div className="max-w-316 mx-auto border-2 border-black rounded-xl bg-gray-200 p-6">
+      <div className="max-w-316 mx-auto border-2 border-black rounded-xl bg-gray-200 p-3 sm:p-6">
 
         {/* Page title */}
         <h1 className="text-4xl font-bold text-center mb-6 tracking-tight">Werte-Log</h1>
@@ -51,7 +51,7 @@ export default function TabLayout({ children }: TabLayoutProps) {
         </div>
 
         {/* Content panel */}
-        <main className="border-2 border-black rounded-b-lg rounded-tr-lg p-6 bg-[#FFFFDD]">
+        <main className="border-2 border-black rounded-b-lg rounded-tr-lg p-3 sm:p-6 bg-[#FFFFDD]">
           {children}
         </main>
           <footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">