Termine-Tab nur offene Termine, Spalten links, Formular 60% Breite

- Termine-Tab (/) zeigt in der Liste nur noch offene (nicht erledigte)
  Termine; Überschrift entsprechend "Offene Termine"
- Spalten Arzt, Fachrichtung und Bemerkungen linksbündig (Header + Zellen)
- Eingabe-Panel (AppointmentForm) auf 60% Breite reduziert und zentriert

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

app/page.tsx

@@ -126,6 +126,9 @@ export default function Home() {
 
   const handlePrint = () => window.print();
 
+  // Termine-Tab zeigt nur offene (nicht erledigte) Termine
+  const openAppointments = appointments.filter((a) => !a.erledigt);
+
   // Aktuelle (offene) Termine ab heute für die Druckansicht
   const startOfToday = new Date();
   startOfToday.setHours(0, 0, 0, 0);
@@ -156,12 +159,12 @@ export default function Home() {
           </div>
 
           <div className="bg-white border border-black rounded-lg shadow-md p-6">
-            <h2 className="text-xl font-semibold mb-4">Alle Termine</h2>
+            <h2 className="text-xl font-semibold mb-4">Offene Termine</h2>
             {isLoading ? (
               <div className="text-center py-4">Lade Daten...</div>
             ) : (
               <AppointmentList
-                appointments={appointments}
+                appointments={openAppointments}
                 onToggleDone={toggleDone}
                 onEdit={startEdit}
                 onDelete={setDeleteId}

components/AppointmentForm.tsx

@@ -98,7 +98,7 @@ export default function AppointmentForm({
     'w-full px-2 py-1 text-sm rounded border-2 border-gray-400 bg-white focus:border-blue-500 focus:outline-none';
 
   return (
-    <div className="bg-[#CCCCFF] border border-black p-6 rounded-lg mb-6">
+    <div className="bg-[#CCCCFF] border border-black p-6 rounded-lg mb-6 w-3/5 mx-auto">
       {editingAppointment && (
         <div className="mb-4 p-3 bg-blue-100 border border-blue-400 rounded text-sm text-blue-800">
           ℹ️ <strong>Bearbeitungsmodus:</strong> Sie bearbeiten einen bestehenden

components/AppointmentList.tsx

@@ -56,12 +56,12 @@ export default function AppointmentList({
         <thead>
           <tr className="bg-[#CCCCFF] border-b-2 border-gray-400">
             <th className="p-2 text-center">Erledigt</th>
-            <th className="p-2 text-center">Arzt</th>
+            <th className="p-2 text-left">Arzt</th>
-            <th className="p-2 text-center">Fachrichtung</th>
+            <th className="p-2 text-left">Fachrichtung</th>
             <th className="p-2 text-center">Datum</th>
             <th className="p-2 text-center">Tag</th>
             <th className="p-2 text-center">Zeit</th>
-            <th className="p-2 text-center">Bemerkungen</th>
+            <th className="p-2 text-left">Bemerkungen</th>
             {hasActions && <th className="p-2 text-center">Aktion</th>}
           </tr>
         </thead>
@@ -94,12 +94,12 @@ export default function AppointmentList({
                   }
                 />
               </td>
-              <td className="p-2 text-center font-medium">{app.arztName}</td>
+              <td className="p-2 text-left font-medium">{app.arztName}</td>
-              <td className="p-2 text-center">{app.arztArt || '-'}</td>
+              <td className="p-2 text-left">{app.arztArt || '-'}</td>
               <td className="p-2 text-center">{formatDate(app.termin)}</td>
               <td className="p-2 text-center">{getWeekday(app.termin)}</td>
               <td className="p-2 text-center">{formatTime(app.termin)}</td>
-              <td className="p-2 text-center">{app.bemerkungen || '-'}</td>
+              <td className="p-2 text-left">{app.bemerkungen || '-'}</td>
               {hasActions && (
                 <td
                   className="p-2 text-center"