add ISO 8601 date picker, replace all native date inputs

custom DateInput component using react-day-picker + date-fns with
Calendar popover, always displays YYYY-MM-DD regardless of browser
locale. adds shadcn Popover and Calendar components. replaces all
<input type="date"> across process-stepper, contact-detail, contact-form

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

src/features/kontakte/components/contact-detail.tsx

@@ -13,6 +13,7 @@ import {
 import { Badge } from "@/shared/components/ui/badge";
 import { Button } from "@/shared/components/ui/button";
 import { Card, CardContent } from "@/shared/components/ui/card";
+import { DateInput } from "@/shared/components/ui/date-input";
 import { Input } from "@/shared/components/ui/input";
 import { Label } from "@/shared/components/ui/label";
 import { Separator } from "@/shared/components/ui/separator";
@@ -272,12 +273,10 @@ function NewKontaktForm({
 							{(field) => (
 								<div className="space-y-1">
 									<Label htmlFor="nk-datum">Datum</Label>
-									<input
+									<DateInput
 										id="nk-datum"
-										type="date"
-										className={inputClasses}
 										value={field.state.value}
-										onChange={(e) => field.handleChange(e.target.value)}
+										onChange={(iso) => field.handleChange(iso)}
 									/>
 								</div>
 							)}
@@ -410,11 +409,9 @@ function KontaktEditCard({
 							{(field) => (
 								<div className="space-y-1">
 									<Label>Datum</Label>
-									<input
-										type="date"
-										className={inputClasses}
+									<DateInput
 										value={field.state.value}
-										onChange={(e) => field.handleChange(e.target.value)}
+										onChange={(iso) => field.handleChange(iso)}
 									/>
 								</div>
 							)}

src/features/kontakte/components/contact-form.tsx

@@ -2,6 +2,7 @@ import { useForm } from "@tanstack/react-form";
 import { Link, useNavigate } from "@tanstack/react-router";
 import { createKontakt, createTherapeut } from "@/features/kontakte/hooks";
 import { Button } from "@/shared/components/ui/button";
+import { DateInput } from "@/shared/components/ui/date-input";
 import { Separator } from "@/shared/components/ui/separator";
 import type { KontaktErgebnis, KontaktKanal } from "@/shared/db/schema";
 import { kontaktErgebnisEnum, kontaktKanalEnum } from "@/shared/db/schema";
@@ -157,13 +158,10 @@ export function ContactForm() {
 							<label htmlFor="datum" className="text-sm font-medium">
 								Datum
 							</label>
-							<input
+							<DateInput
 								id="datum"
-								type="date"
-								className={inputClasses}
 								value={field.state.value}
-								onChange={(e) => field.handleChange(e.target.value)}
-								onBlur={field.handleBlur}
+								onChange={(iso) => field.handleChange(iso)}
 							/>
 						</div>
 					)}

src/features/prozess/components/process-stepper.tsx

@@ -3,6 +3,7 @@ import { Link } from "@tanstack/react-router";
 import { useState } from "react";
 import { useTherapeutenListe } from "@/features/kontakte/hooks";
 import { Button } from "@/shared/components/ui/button";
+import { DateInput } from "@/shared/components/ui/date-input";
 import { Label } from "@/shared/components/ui/label";
 import { Separator } from "@/shared/components/ui/separator";
 import { Switch } from "@/shared/components/ui/switch";
@@ -273,11 +274,9 @@ function SprechstundeForm({ onDone }: { onDone: () => void }) {
 					{(field) => (
 						<div className="space-y-1">
 							<Label>Datum</Label>
-							<input
-								type="date"
-								className={inputClasses}
+							<DateInput
 								value={field.state.value}
-								onChange={(e) => field.handleChange(e.target.value)}
+								onChange={(iso) => field.handleChange(iso)}
 							/>
 						</div>
 					)}