v1.1.0: Druck-Optimierung, UI-Verbesserungen

- Drucklayout: kein innerer Rahmen, volle DIN-A4-Breite, @page-Regel
- Besucher-Spalte: zeigt keine 0 an wenn kein Wert eingetragen
- Beginn-Zeit synchronisiert automatisch die Ende-Zeit
- Hintergrundfarbe auf helles Blau (#EEF4FF)
- Listen-Tab und kompakte Vorschau mit weißem Rahmen
- Besucher-Spalte schmaler, Header als "Bes." abgekürzt
- Drucken-Button im Listen-Tab, Navigation bei Druck ausgeblendet

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/MainClient.tsx

@@ -43,11 +43,11 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
   }
 
   return (
-    <div className="min-h-screen bg-white py-2 px-2 sm:py-4 sm:px-4">
-      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-3 sm:p-6 bg-[#FFFFDD]">
+    <div className="min-h-screen bg-white py-2 px-2 sm:py-4 sm:px-4 print:p-0">
+      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-3 sm:p-6 bg-[#EEF4FF] print:max-w-none print:border-0 print:p-0 print:bg-white">
 
         {/* Header */}
-        <div className="flex justify-between items-start sm:items-center mb-4 gap-2">
+        <div className="flex justify-between items-start sm:items-center mb-4 gap-2 print:hidden">
           <h1 className="text-xl sm:text-2xl font-bold leading-tight">
             <span className="hidden sm:inline">Sternwarte-Welzheim &nbsp; </span>
             Logbuch für {activeKuppel}-Kuppel
@@ -63,7 +63,7 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
         </div>
 
         {/* Kuppel-Tabs */}
-        <div className="flex gap-1 mb-4 border-b-2 border-gray-300 overflow-x-auto">
+        <div className="flex gap-1 mb-4 border-b-2 border-gray-300 overflow-x-auto print:hidden">
           {KUPPELN.map((k) => (
             <button
               key={k}
@@ -81,7 +81,7 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
         </div>
 
         {/* Eingabe/Liste-Tabs */}
-        <div className="flex gap-1 mb-4 border-b border-gray-200">
+        <div className="flex gap-1 mb-4 border-b border-gray-200 print:hidden">
           {(['eingabe', 'liste'] as const).map((tab) => (
             <button
               key={tab}
@@ -115,37 +115,54 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
 
             {/* Kompakte Liste — nur auf Desktop sichtbar */}
             <div className="hidden lg:block mt-5 border-t-2 border-gray-300 pt-4">
-              <div className="flex justify-between items-center mb-2">
-                <h2 className="text-sm font-semibold text-gray-600">Letzte Einträge</h2>
-                <button
-                  onClick={() => setActiveTab('liste')}
-                  className="text-xs text-blue-600 hover:underline"
-                >
-                  Alle anzeigen →
-                </button>
+              <div className="border-2 border-gray-400 rounded-xl bg-white p-3">
+                <div className="flex justify-between items-center mb-2">
+                  <h2 className="text-sm font-semibold text-gray-600">Letzte Einträge</h2>
+                  <button
+                    onClick={() => setActiveTab('liste')}
+                    className="text-xs text-blue-600 hover:underline"
+                  >
+                    Alle anzeigen →
+                  </button>
+                </div>
+                <LogbuchList
+                  kuppel={activeKuppel}
+                  refreshKey={refreshKey}
+                  onEdit={handleEdit}
+                  limit={5}
+                  compact
+                />
               </div>
-              <LogbuchList
-                kuppel={activeKuppel}
-                refreshKey={refreshKey}
-                onEdit={handleEdit}
-                limit={5}
-                compact
-              />
             </div>
           </>
         )}
 
         {/* Liste-Tab: vollständige Liste */}
         {activeTab === 'liste' && (
-          <LogbuchList
-            kuppel={activeKuppel}
-            refreshKey={refreshKey}
-            onEdit={handleEdit}
-            limit={20}
-          />
+          <div className="border-2 border-gray-400 rounded-xl bg-white p-3 print:border-0 print:rounded-none print:p-0">
+            <div className="flex justify-between items-center mb-2 print:hidden">
+              <span className="text-sm font-semibold text-gray-600">Einträge {activeKuppel}-Kuppel</span>
+              <button
+                onClick={() => window.print()}
+                className="text-sm px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg"
+              >
+                🖨 Drucken
+              </button>
+            </div>
+            <div className="hidden print:block mb-4">
+              <div className="text-lg font-bold">Sternwarte Welzheim — Logbuch {activeKuppel}-Kuppel</div>
+              <div className="text-sm text-gray-500">Ausdruck vom {new Date().toLocaleDateString('de-DE')}</div>
+            </div>
+            <LogbuchList
+              kuppel={activeKuppel}
+              refreshKey={refreshKey}
+              onEdit={handleEdit}
+              limit={20}
+            />
+          </div>
         )}
 
-        <footer className="mt-6 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4">
+        <footer className="mt-6 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4 print:hidden">
           <div>
             <a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">
               rxf@gmx.de

app/globals.css

@@ -24,3 +24,13 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+@media print {
+  @page {
+    size: A4 portrait;
+    margin: 1.5cm;
+  }
+  body {
+    background: white;
+  }
+}

components/LogbuchForm.tsx

@@ -222,7 +222,10 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
             />
             <TimePicker5
               value={beginn.slice(11, 16)}
-              onChange={(t) => setBeginn(beginn.slice(0, 10) + 'T' + t)}
+              onChange={(t) => {
+                setBeginn(beginn.slice(0, 10) + 'T' + t);
+                setEnde(ende.slice(0, 10) + 'T' + t);
+              }}
               className="w-24"
             />
           </div>

components/LogbuchList.tsx

@@ -68,11 +68,11 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit, limit = 20, co
               <th className={`${head} whitespace-nowrap`}>Beginn</th>
               <th className={`${head} whitespace-nowrap`}>Ende</th>
               <th className={head}>Art</th>
-              <th className={`${head} text-center`}>Besucher</th>
+              <th className={`${head} text-center w-10`}>Bes.</th>
               <th className={head}>BEOs</th>
               <th className={head}>Objekte</th>
               {!compact && <th className={head}>Bemerkungen</th>}
-              <th className={`${head} text-center`}>Aktionen</th>
+              <th className={`${head} text-center print:hidden`}>Aktionen</th>
             </tr>
           </thead>
           <tbody>
@@ -81,15 +81,13 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit, limit = 20, co
                 <td className={`${cell} whitespace-nowrap`}>{formatDateTime(e.Beginn, compact)}</td>
                 <td className={`${cell} whitespace-nowrap`}>{formatDateTime(e.Ende, compact)}</td>
                 <td className={cell}>{e.ArtFuehrung}</td>
-                <td className={`${cell} text-center`}>{e.Besucher}</td>
+                <td className={`${cell} text-center`}>{e.Besucher || ''}</td>
                 <td className={cell}>{e.BEOs || '—'}</td>
                 <td className={cell}>{e.Objekte || '—'}</td>
                 {!compact && (
-                  <td className={`${cell} max-w-xs`}>
-                    <span className="line-clamp-2">{e.Bemerkungen || ''}</span>
-                  </td>
+                  <td className={cell}>{e.Bemerkungen || ''}</td>
                 )}
-                <td className={`${cell} text-center whitespace-nowrap`}>
+                <td className={`${cell} text-center whitespace-nowrap print:hidden`}>
                   <button
                     onClick={() => onEdit(e)}
                     className="text-blue-600 hover:text-blue-800 mr-2 font-medium"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "logbuch",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",