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>

app/liste/page.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import TabLayout from '@/components/TabLayout';
+import AppointmentList from '@/components/AppointmentList';
+import { Appointment } from '@/types/appointment';
+
+export default function ListePage() {
+  const [appointments, setAppointments] = useState<Appointment[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchAppointments = async () => {
+    try {
+      const res = await fetch('/api/appointments', { cache: 'no-store' });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      if (data.success) {
+        setAppointments(data.data);
+      }
+    } catch (error) {
+      console.error('Fehler beim Laden der Termine:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Termine einmalig beim Mount laden.
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    fetchAppointments();
+  }, []);
+
+  return (
+    <TabLayout>
+      <div className="bg-white border border-black rounded-lg shadow-md p-6">
+        <h2 className="text-xl font-semibold mb-4">Alle Termine</h2>
+        {isLoading ? (
+          <div className="text-center py-4">Lade Daten...</div>
+        ) : (
+          <AppointmentList appointments={appointments} />
+        )}
+      </div>
+    </TabLayout>
+  );
+}