Various UX improvements and bug fixes

- Fix mustChangePassword session flag for users with pw=NULL
- Add PrF (Private Führung) as new ArtFuehrung type
- Split datetime-local into separate date + TimePicker5 (5-min steps, auto-repeat)
- Responsive Beginn/Ende layout: stacked on mobile, inline on desktop
- Sort BEOs alphabetically by Kürzel in selector
- Title shows active kuppel; hide user display in header
- Selected BEOs show Kürzel only (name stays in dropdown)
- Session timeout reduced to 1 hour
- Add CLAUDE.md

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

components/BeoSelector.tsx

@@ -20,7 +20,9 @@ export default function BeoSelector({ selected, onChange }: Props) {
   }, []);
 
   const selectedIds = new Set(selected.map((b) => b.ID));
-  const available = all.filter((b) => !selectedIds.has(b.ID));
+  const available = all
+    .filter((b) => !selectedIds.has(b.ID))
+    .sort((a, b) => a.Kuerzel.localeCompare(b.Kuerzel));
 
   function add(value: string) {
     const beo = all.find((b) => b.ID === parseInt(value));
@@ -39,7 +41,7 @@ export default function BeoSelector({ selected, onChange }: Props) {
             key={b.ID}
             className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-base px-3 py-1.5 rounded-full"
           >
-            {b.Kuerzel} — {b.Name}
+            {b.Kuerzel}
             <button
               type="button"
               onClick={() => remove(b.ID)}

components/LogbuchForm.tsx

@@ -6,6 +6,7 @@ import { ARTEN, ARTEN_MAP } from '@/types/logbuch';
 import BeoSelector from './BeoSelector';
 import ObjektSelector from './ObjektSelector';
 import CustomSelect from './CustomSelect';
+import TimePicker5 from './TimePicker5';
 
 interface Props {
   kuppel: Kuppel;
@@ -19,24 +20,39 @@ function toLocalDatetimeValue(isoOrDatetime: string): string {
   return isoOrDatetime.slice(0, 16);
 }
 
-function snapTo15(value: string): string {
+function snapTo5(value: string): string {
   if (!value) return value;
-  const d = new Date(value);
+  // Fix 4-digit years that are actually < 100 (e.g. "0024" → "2024")
+  const fixed = value.replace(/^(\d{4})(-.+)$/, (_, y, rest) => {
+    const year = parseInt(y, 10);
+    return (year < 100 ? String(year + 2000) : y) + rest;
+  });
+  const d = new Date(fixed);
   if (isNaN(d.getTime())) return value;
-  const rem = d.getMinutes() % 15;
-  if (rem !== 0) {
-    d.setMinutes(d.getMinutes() + (15 - rem));
-    d.setSeconds(0);
-  }
+  d.setMinutes(Math.round(d.getMinutes() / 5) * 5);
+  d.setSeconds(0);
   const pad = (n: number) => String(n).padStart(2, '0');
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
 }
 
+function snapTimeTo5(time: string): string {
+  if (!time) return time;
+  const [hStr, mStr] = time.split(':');
+  const h = parseInt(hStr, 10);
+  const m = parseInt(mStr, 10);
+  if (isNaN(h) || isNaN(m)) return time;
+  const snappedM = Math.round(m / 5) * 5;
+  const finalH = snappedM >= 60 ? (h + 1) % 24 : h;
+  const finalM = snappedM >= 60 ? 0 : snappedM;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${pad(finalH)}:${pad(finalM)}`;
+}
+
 function nowLocalDatetime(): string {
   const now = new Date();
   const pad = (n: number) => String(n).padStart(2, '0');
   const raw = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
-  return snapTo15(raw);
+  return snapTo5(raw);
 }
 
 const NO_OBJEKTE_ARTEN: ArtFuehrung[] = ['BEOS', 'TD'];
@@ -188,32 +204,51 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
         />
       </div>
 
-      {/* Beginn / Ende / Besucher — eine Zeile */}
-      <div className="flex flex-wrap gap-3 items-end">
-        <div className="flex-1 min-w-0">
+      {/* Beginn / Ende / Besucher */}
+      <div className="flex flex-col sm:flex-row gap-3 sm:items-end">
+        <div className="w-full sm:flex-1">
           <label className={labelCls}>Beginn</label>
-          <input
-            type="datetime-local"
-            value={beginn}
-            onChange={(e) => setBeginn(snapTo15(e.target.value))}
-            required
-            step={900}
-            className="w-full px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
-          />
+          <div className="flex gap-2">
+            <input
+              type="date"
+              value={beginn.slice(0, 10)}
+              onChange={(e) => {
+                if (!e.target.value) return;
+                setBeginn(e.target.value + 'T' + (beginn.slice(11, 16) || '00:00'));
+                setEnde(e.target.value + 'T' + (ende.slice(11, 16) || '00:00'));
+              }}
+              required
+              className="flex-1 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
+            />
+            <TimePicker5
+              value={beginn.slice(11, 16)}
+              onChange={(t) => setBeginn(beginn.slice(0, 10) + 'T' + t)}
+              className="w-24"
+            />
+          </div>
         </div>
-        <div className="flex-1 min-w-0">
+        <div className="w-full sm:flex-1">
           <label className={labelCls}>Ende</label>
-          <input
-            type="datetime-local"
-            value={ende}
-            onChange={(e) => setEnde(snapTo15(e.target.value))}
-            required
-            step={900}
-            className="w-full px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
-          />
+          <div className="flex gap-2">
+            <input
+              type="date"
+              value={ende.slice(0, 10)}
+              onChange={(e) => {
+                if (!e.target.value) return;
+                setEnde(e.target.value + 'T' + (ende.slice(11, 16) || '00:00'));
+              }}
+              required
+              className="flex-1 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
+            />
+            <TimePicker5
+              value={ende.slice(11, 16)}
+              onChange={(t) => setEnde(ende.slice(0, 10) + 'T' + t)}
+              className="w-24"
+            />
+          </div>
         </div>
         {showBesucher && (
-          <div className="shrink-0">
+          <div className="sm:shrink-0">
             <label className={labelCls}>Besucher</label>
             <input
               type="number"

components/LogbuchList.tsx

@@ -68,7 +68,7 @@ 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>
-              {!compact && <th className={`${head} text-center`}>Besucher</th>}
+              <th className={`${head} text-center`}>Besucher</th>
               <th className={head}>BEOs</th>
               <th className={head}>Objekte</th>
               {!compact && <th className={head}>Bemerkungen</th>}
@@ -81,7 +81,7 @@ 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>
-                {!compact && <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 && (

components/TimePicker5.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useRef } from 'react';
+
+interface Props {
+  value: string; // "HH:MM"
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+function addMinutes(time: string, delta: number): string {
+  const [h, m] = time.split(':').map(Number);
+  const total = ((h * 60 + m + delta) % (24 * 60) + 24 * 60) % (24 * 60);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${pad(Math.floor(total / 60))}:${pad(total % 60)}`;
+}
+
+export default function TimePicker5({ value, onChange, className = '' }: Props) {
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  function startRepeat(delta: number) {
+    onChange(addMinutes(valueRef.current, delta));
+    timeoutRef.current = setTimeout(() => {
+      const hourDelta = delta > 0 ? 60 : -60;
+      intervalRef.current = setInterval(() => {
+        onChange(addMinutes(valueRef.current, hourDelta));
+      }, 350);
+    }, 400);
+  }
+
+  function stopRepeat() {
+    if (timeoutRef.current !== null) { clearTimeout(timeoutRef.current); timeoutRef.current = null; }
+    if (intervalRef.current !== null) { clearInterval(intervalRef.current); intervalRef.current = null; }
+  }
+
+  function buttonProps(delta: number) {
+    return {
+      type: 'button' as const,
+      tabIndex: -1,
+      onMouseDown: () => startRepeat(delta),
+      onMouseUp: stopRepeat,
+      onMouseLeave: stopRepeat,
+      onTouchStart: (e: React.TouchEvent) => { e.preventDefault(); startRepeat(delta); },
+      onTouchEnd: stopRepeat,
+    };
+  }
+
+  return (
+    <div
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'ArrowUp')   { e.preventDefault(); onChange(addMinutes(value, 5)); }
+        if (e.key === 'ArrowDown') { e.preventDefault(); onChange(addMinutes(value, -5)); }
+      }}
+      className={`flex items-center border-2 border-gray-400 rounded-lg bg-white focus:border-blue-500 focus:outline-none select-none ${className}`}
+    >
+      <span className="flex-1 px-3 py-2 text-sm font-mono text-center">{value}</span>
+      <div className="flex flex-col border-l border-gray-300 shrink-0">
+        <button {...buttonProps(5)}  className="px-2 pt-1 pb-0.5 hover:bg-gray-100 text-gray-500 text-xs leading-none">▲</button>
+        <button {...buttonProps(-5)} className="px-2 pt-0.5 pb-1 hover:bg-gray-100 text-gray-500 text-xs leading-none">▼</button>
+      </div>
+    </div>
+  );
+}