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>

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-center">Fachrichtung</th>
+            <th className="p-2 text-left">Arzt</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-center">{app.arztArt || '-'}</td>
+              <td className="p-2 text-left font-medium">{app.arztName}</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"