.

app/page.tsx

@@ -1,21 +1,16 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import Link from 'next/link';
 import WerteForm from '@/components/WerteForm';
 import WerteList from '@/components/WerteList';
 import { WerteEntry } from '@/types/werte';
-import packageJson from '@/package.json';
+import TabLayout from '@/components/TabLayout';
-import LogoutButton from '@/components/LogoutButton';
 
 export default function Home() {
   const [entries, setEntries] = useState<WerteEntry[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [selectedEntry, setSelectedEntry] = useState<WerteEntry | null>(null);
 
-  const version = packageJson.version;
-  const buildDate = process.env.NEXT_PUBLIC_BUILD_DATE || new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
-
   useEffect(() => {
     let isMounted = true;
     
@@ -81,22 +76,7 @@ export default function Home() {
   };
 
   return (
-    <div className="min-h-screen bg-white py-4 px-4">
+    <TabLayout>
-      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#FFFFDD]">
-        <div className="flex justify-between items-center mb-6">
-          <h1 className="text-3xl font-bold">Werte - Log</h1>
-          <div className="flex gap-3 items-center">
-            <Link
-              href="/charts"
-              className="px-4 py-2 text-sm rounded-lg transition-colors shadow-md"
-              style={{ backgroundColor: '#374151', color: '#ffffff' }}
-            >
-              {'Verlauf ->'}
-            </Link>
-            <LogoutButton className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg transition-colors shadow-md" />
-          </div>
-        </div>
-        
       <div className="mb-8">
           <h2 className="text-xl font-semibold mb-4">Eingabe</h2>
           <WerteForm onSuccess={handleSuccess} selectedEntry={selectedEntry} />
@@ -111,15 +91,6 @@ export default function Home() {
           )}
         </div>
 
-        <footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
+      </TabLayout>
-          <a href="mailto:rxf@gmx.de" className="hover:underline">
-            mailto:rxf@gmx.de
-          </a>
-          <div>
-            Version {version} - {buildDate}
-          </div>
-        </footer>
-      </main>
-    </div>
   );
 }

components/ChartsClient.tsx

@@ -1,12 +1,11 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import Link from 'next/link';
 import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import type { Options } from 'highcharts';
 import { WerteEntry } from '@/types/werte';
-import LogoutButton from '@/components/LogoutButton';
+import TabLayout from '@/components/TabLayout';
 
 const COLOR_ZUCKER = '#e67e22';
 const COLOR_DRUCKS = '#c0392b';
@@ -209,21 +208,7 @@ export default function ChartsClient() {
   } as Options;
 
   return (
-    <div className="min-h-screen bg-white py-4 px-4">
+    <TabLayout>
-      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#FFFFDD]">
-        {/* Header */}
-        <div className="flex justify-between items-center mb-6">
-          <h1 className="text-3xl font-bold">Werte &ndash; Verlauf</h1>
-          <div className="flex gap-3 items-center">
-            <Link
-              href="/"
-              className="bg-[#85B7D7] hover:bg-[#6a9fc5] px-4 py-2 text-sm rounded-lg transition-colors shadow-md"
-            >
-              {'<- Eingabe'}
-            </Link>
-            <LogoutButton className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg transition-colors shadow-md" />
-          </div>
-        </div>
 
         {/* Date range picker */}
         <div className="bg-white border border-black rounded-lg p-4 mb-6 flex flex-wrap gap-4 items-end">
@@ -283,7 +268,6 @@ export default function ChartsClient() {
             </div>
           </div>
         )}
-      </main>
+      </TabLayout>
-    </div>
   );
 }

components/TabLayout.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import LogoutButton from '@/components/LogoutButton';
+import packageJson from '@/package.json';
+
+interface TabLayoutProps {
+  children: React.ReactNode;
+}
+
+const TABS = [
+  { href: '/', label: 'Eingabe' },
+  { href: '/charts', label: 'Verlauf' },
+];
+
+export default function TabLayout({ children }: TabLayoutProps) {
+  const pathname = usePathname();
+  const version = packageJson.version;
+  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">
+      {/* 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">
+
+        {/* Page title */}
+        <h1 className="text-4xl font-bold text-center mb-6 tracking-tight">Werte-Log</h1>
+
+        {/* Inner content constrained to max-w-6xl */}
+        <div className="max-w-6xl mx-auto">
+
+        {/* Tab bar */}
+        <div className="flex justify-between items-end">
+          <div className="flex">
+            {TABS.map(tab => {
+              const isActive = pathname === tab.href;
+              return (
+                <Link
+                  key={tab.href}
+                  href={tab.href}
+                  className="px-6 py-2 text-sm font-semibold border-t-2 border-l-2 border-r-2 rounded-tl-lg rounded-tr-lg mr-1 transition-colors"
+                  style={
+                    isActive
+                      ? { backgroundColor: '#FFFFDD', color: '#000000', borderColor: '#000000', borderBottom: '2px solid #FFFFDD', marginBottom: '-2px', position: 'relative', zIndex: 10 }
+                      : { backgroundColor: '#85B7D7', color: '#374151', borderColor: '#000000' }
+                  }
+                >
+                  {tab.label}
+                </Link>
+              );
+            })}
+          </div>
+          <div className="pb-1">
+            <LogoutButton className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg shadow-md" />
+          </div>
+        </div>
+
+        {/* Content panel */}
+        <main className="border-2 border-black rounded-b-lg rounded-tr-lg p-6 bg-[#FFFFDD]">
+          {children}
+        </main>
+          <footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
+            <a href="mailto:rxf@gmx.de" className="hover:underline">
+              mailto:rxf@gmx.de
+            </a>
+            <div>Version {version} - {buildDate}</div>
+          </footer>
+
+        </div>
+      </div>
+    </div>
+  );
+}