Arbeitsblatt-Formular erneuert: Kalender, deutsche Service-Art

- Start und Ende mit Kalender und Uhrzeitfeld (gemeinsame Komponente
  DateTimeInput, auch im Ticketformular); gespeichert weiter als
  dd.mm.yyyy / hhmm, das Ende rückt mit, wenn der Start später liegt
- Service Type nur noch "Fernwartung (remote)" oder "Vor Ort beim Kunden",
  vorbelegt vom Ticket; COMMENT entfällt (dafür gibt es "Nur Kommentar")
- Minuten werden aus den Uhrzeiten berechnet (über Mitternacht weiter)
- Minutenfeld nimmt ganze Minuten: mit step 15 ließ der Browser berechnete
  Zeiten wie 70 Minuten nicht absenden
- Arbeitsblatt-Liste und -Statistik zeigen die Service-Art auf Deutsch
  (Remote und altes Off Site zusammen als Fernwartung)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/CreateTicketModal.jsx

@@ -11,7 +11,7 @@ import {
   buildRequesterSuggestions,
   rankSuggestions,
 } from '../lib/ticketForm'
-import { AutocompleteInput } from './ui'
+import { AutocompleteInput, DateTimeInput } from './ui'
 
 // Neue Tickets gibt es aktuell nur fuer diese Arten; alte Tickets behalten ihre Art.
 // Migration = ein Kunde, den wir von einem anderen Anbieter uebernehmen.
@@ -45,15 +45,6 @@ const emptyForm = () => ({
   details: ''
 })
 
-// Klick irgendwo ins Datumsfeld oeffnet den Kalender, nicht nur das kleine Symbol
-const openCalendar = (e) => {
-  try {
-    e.currentTarget.showPicker?.()
-  } catch {
-    // aeltere Browser: Kalender bleibt ueber das Symbol erreichbar
-  }
-}
-
 export default function CreateTicketModal({ isOpen, onClose, onCreate, customers = [] }) {
   const { config } = useAdminConfig()
   const { employees } = useEmployees()
@@ -260,45 +251,27 @@ export default function CreateTicketModal({ isOpen, onClose, onCreate, customers
 
               <div className="form-group">
                 <label className="form-label" htmlFor="ticket-start-date">Start Date & Time</label>
-                <div className="datetime-pair">
-                  <input
-                    id="ticket-start-date"
-                    type="date"
-                    className="form-control"
-                    value={formData.startDate}
-                    onChange={(e) => handleStartDateChange(e.target.value)}
-                    onClick={openCalendar}
-                  />
-                  <input
-                    type="time"
-                    className="form-control"
-                    aria-label="Start time"
-                    value={formData.startTime}
-                    onChange={(e) => handleChange('startTime', e.target.value)}
-                  />
-                </div>
+                <DateTimeInput
+                  id="ticket-start-date"
+                  timeLabel="Start time"
+                  date={formData.startDate}
+                  time={formData.startTime}
+                  onDateChange={handleStartDateChange}
+                  onTimeChange={(value) => handleChange('startTime', value)}
+                />
               </div>
 
               <div className="form-group">
                 <label className="form-label" htmlFor="ticket-end-date">End Date & Time (Deadline)</label>
-                <div className="datetime-pair">
-                  <input
-                    id="ticket-end-date"
-                    type="date"
-                    className="form-control"
-                    min={formData.startDate || undefined}
-                    value={formData.deadline}
-                    onChange={(e) => handleChange('deadline', e.target.value)}
-                    onClick={openCalendar}
-                  />
-                  <input
-                    type="time"
-                    className="form-control"
-                    aria-label="End time"
-                    value={formData.endTime}
-                    onChange={(e) => handleChange('endTime', e.target.value)}
-                  />
-                </div>
+                <DateTimeInput
+                  id="ticket-end-date"
+                  timeLabel="End time"
+                  min={formData.startDate}
+                  date={formData.deadline}
+                  time={formData.endTime}
+                  onDateChange={(value) => handleChange('deadline', value)}
+                  onTimeChange={(value) => handleChange('endTime', value)}
+                />
               </div>
 
               <div className="form-group">