Erledigte Termine ans Ende + blasser, neuer Tab 'Liste'

- Erledigte Einträge werden nicht mehr durchgestrichen, nur die
  Textfarbe wird blasser dargestellt
- Erledigte Termine werden in der Liste hinter die offenen sortiert
- Neuer Tab 'Liste' (Route /liste) mit einer read-only Übersicht
  aller Termine; TabLayout auf echte Tabs (Link/usePathname) umgestellt
- AppointmentList: Handler optional, damit die Liste read-only nutzbar ist

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

components/TabLayout.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import packageJson from '@/package.json';
 
 interface TabLayoutProps {
@@ -7,7 +9,13 @@ interface TabLayoutProps {
   onPrint?: () => void;
 }
 
+const TABS = [
+  { href: '/', label: 'Termine' },
+  { href: '/liste', label: 'Liste' },
+];
+
 export default function TabLayout({ children, onPrint }: TabLayoutProps) {
+  const pathname = usePathname();
   const version = packageJson.version;
   const buildDate =
     process.env.NEXT_PUBLIC_BUILD_DATE ||
@@ -31,29 +39,46 @@ export default function TabLayout({ children, onPrint }: TabLayoutProps) {
           {/* Tab-Leiste */}
           <div className="flex justify-between items-end">
             <div className="flex">
-              <span
-                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"
-                style={{
-                  backgroundColor: '#FFFFDD',
-                  color: '#000000',
-                  borderColor: '#000000',
-                  borderBottom: '2px solid #FFFFDD',
-                  marginBottom: '-2px',
-                  position: 'relative',
-                  zIndex: 10,
-                }}
-              >
-                Termine
-              </span>
-            </div>
-            <div className="pb-1">
-              <button
-                onClick={onPrint}
-                className="px-4 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black text-sm rounded-lg shadow-md transition-colors"
-              >
-                🖨️ Aktuelle Termine drucken
-              </button>
+              {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>
+            {onPrint && (
+              <div className="pb-1">
+                <button
+                  onClick={onPrint}
+                  className="px-4 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black text-sm rounded-lg shadow-md transition-colors"
+                >
+                  🖨️ Aktuelle Termine drucken
+                </button>
+              </div>
+            )}
           </div>
 
           {/* Inhaltsbereich */}