Planboard: Jahr im Zeitraum, Tagesköpfe einheitlich zweizeilig, Keine Termine lesbarer

- planboardSubtitle: das Ende des Zeitraums trägt das Jahr, der Anfang nur bei abweichendem Jahr; count ohne Wert zählt als 0
- dayLabels.full (aria-label der Spalte) mit Jahr
- ab 861 px steht der Wochentag in jedem Tageskopf über dem Datum (gleich hohe Köpfe, alle Termine beginnen auf einer Höhe)
- "Keine Termine" überall in --text-2, die Sonderregeln für Wochenende und Handy entfallen

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

src/lib/planboardView.js

@@ -5,10 +5,14 @@ import { de } from 'date-fns/locale'
 
 const NOBODY = 'niemand zugewiesen'
 
-// "Kalenderwoche 41 · 5. Oktober bis 11. Oktober · 13 Termine"
+// "Kalenderwoche 41 · 5. Oktober bis 11. Oktober 2026 · 13 Termine"
-export function planboardSubtitle({ weekStart, count, loading = false }) {
+// weekStart muss ein Montag sein (die Woche läuft bis weekStart + 6 Tage). Das Ende trägt immer das Jahr, der Anfang nur,
-  const from = format(weekStart, 'd. MMMM', { locale: de })
+// wenn sein Jahr vom Ende abweicht: "28. Dezember 2026 bis 3. Januar 2027".
-  const to = format(addDays(weekStart, 6), 'd. MMMM', { locale: de })
+export function planboardSubtitle({ weekStart, count = 0, loading = false }) {
+  const weekEnd = addDays(weekStart, 6)
+  const sameYear = weekStart.getFullYear() === weekEnd.getFullYear()
+  const from = format(weekStart, sameYear ? 'd. MMMM' : 'd. MMMM yyyy', { locale: de })
+  const to = format(weekEnd, 'd. MMMM yyyy', { locale: de })
   const rest = loading ? 'Wird geladen …' : `${count} ${count === 1 ? 'Termin' : 'Termine'}`
   return `Kalenderwoche ${getISOWeek(weekStart)} · ${from} bis ${to} · ${rest}`
 }
@@ -17,7 +21,7 @@ export function dayLabels(day) {
   return {
     weekday: format(day, 'EEEE', { locale: de }),
     number: format(day, 'dd.MM'),
-    full: format(day, 'EEEE, d. MMMM', { locale: de }),
+    full: format(day, 'EEEE, d. MMMM yyyy', { locale: de }),
   }
 }
 

src/styles/global.css

@@ -1030,14 +1030,16 @@ button.link { font-weight: 500; } /* font: inherit setzt sonst das Gewicht von .
 .appt:focus-visible { outline-offset: -2px; } /* im Scroll-Container .week wuerde der Ring sonst abgeschnitten */
 .day.weekend .appt:not(.akquise) { background: var(--bg); }
 .day.weekend .appt:not(.akquise):hover { background: var(--appt-hover); }
-.day .none { font-size: 12px; color: var(--text-3); padding-left: 4px; }
+.day .none { font-size: 12px; color: var(--text-2); padding-left: 4px; }
-.day.weekend .none { color: var(--text-2); }
+/* Ab 861 px stehen die Spalten nebeneinander: Wochentag ueber der Datumszahl, in jeder Spalte gleich hoch, alle Termine beginnen auf einer Hoehe */
+@media (min-width: 861px) {
+  .day-head { flex-direction: column; align-items: flex-start; gap: 0; }
+}
 @media (max-width: 860px) {
   .week { grid-template-columns: 1fr; border-top: 0; min-height: 0; overflow-x: visible; }
   .day { border-left: 0; padding: 12px 0; border-top: 1px solid var(--line); }
   .day.weekend { background: none; }
   .day.weekend .appt:not(.akquise) { background: var(--bg-hover); }
-  .day.weekend .none { color: var(--text-3); }
 }
 /* ===== ENDE Planboard (P3) ===== */
 

tests/unit/planboardView.test.mjs

@@ -7,17 +7,17 @@ const { planboardSubtitle, dayLabels, appointmentClass, appointmentTimeLabel, ap
 
 test('planboardSubtitle: Kalenderwoche, Zeitraum, Terminzahl', () => {
   const mo = new Date(2026, 9, 5)
-  assert.equal(planboardSubtitle({ weekStart: mo, count: 13 }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober · 13 Termine')
+  assert.equal(planboardSubtitle({ weekStart: mo, count: 13 }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober 2026 · 13 Termine')
-  assert.equal(planboardSubtitle({ weekStart: mo, count: 1 }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober · 1 Termin')
+  assert.equal(planboardSubtitle({ weekStart: mo, count: 1 }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober 2026 · 1 Termin')
-  assert.equal(planboardSubtitle({ weekStart: mo, count: 0 }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober · 0 Termine')
+  assert.equal(planboardSubtitle({ weekStart: mo, count: 0 }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober 2026 · 0 Termine')
-  assert.equal(planboardSubtitle({ weekStart: mo, count: 0, loading: true }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober · Wird geladen …')
+  assert.equal(planboardSubtitle({ weekStart: mo, count: 0, loading: true }), 'Kalenderwoche 41 · 5. Oktober bis 11. Oktober 2026 · Wird geladen …')
-  assert.equal(planboardSubtitle({ weekStart: new Date(2026, 11, 28), count: 2 }), 'Kalenderwoche 53 · 28. Dezember bis 3. Januar · 2 Termine')
+  assert.equal(planboardSubtitle({ weekStart: new Date(2026, 11, 28), count: 2 }), 'Kalenderwoche 53 · 28. Dezember 2026 bis 3. Januar 2027 · 2 Termine')
-  assert.equal(planboardSubtitle({ weekStart: new Date(2027, 0, 4), count: 2 }), 'Kalenderwoche 1 · 4. Januar bis 10. Januar · 2 Termine')
+  assert.equal(planboardSubtitle({ weekStart: new Date(2027, 0, 4), count: 2 }), 'Kalenderwoche 1 · 4. Januar bis 10. Januar 2027 · 2 Termine')
 })
 
 test('dayLabels: Wochentag, Datum, volles Datum', () => {
-  assert.deepEqual(dayLabels(new Date(2026, 9, 5)), { weekday: 'Montag', number: '05.10', full: 'Montag, 5. Oktober' })
+  assert.deepEqual(dayLabels(new Date(2026, 9, 5)), { weekday: 'Montag', number: '05.10', full: 'Montag, 5. Oktober 2026' })
-  assert.deepEqual(dayLabels(new Date(2026, 9, 11)), { weekday: 'Sonntag', number: '11.10', full: 'Sonntag, 11. Oktober' })
+  assert.deepEqual(dayLabels(new Date(2026, 9, 11)), { weekday: 'Sonntag', number: '11.10', full: 'Sonntag, 11. Oktober 2026' })
 })
 
 test('appointmentClass und appointmentTimeLabel', () => {