Phase 9a: Schulkalender — Bundesland-Auswahl + Monatsansicht mit Ferien

Backend (school-service):
  - cal_public_event (region, event_type, name_de, name_en, start/end,
    UNIQUE(region, event_type, name_de, start_date)) — global snapshot.
  - cal_school_config (user_id PRIMARY KEY, bundesland, school year dates).
  - cal_school_event — Schul-eigene Termine; CRUD folgt in 9b.
  - GET /calendar/holidays?region=&from=&to= — Range-Query against
    cal_public_event, ordered by start_date.
  - GET / PUT /calendar/config — upsert Bundesland per User.
  - SeedFromSnapshot reads internal/seed/calendar_holidays.json on every
    boot; idempotent via the unique constraint. Async goroutine so the
    HTTP server starts immediately even if the seed file is large.

Data source:
  - scripts/calendar-snapshot.sh ruft openholidaysapi.org fuer alle 16
    Bundeslaender x 3 Schuljahre und schreibt
    school-service/internal/seed/calendar_holidays.json (854 Events,
    Stand Schuljahre 2026-2028).
  - Dockerfile kopiert das seed/-Verzeichnis ins Image, damit die
    Container-Datenbank beim ersten Start gefuellt wird.

Frontend (studio-v2):
  - /schulkalender Page mit Gradient + Blobs wie /stundenplan und
    /korrektur — gleicher Visual-Style.
  - BundeslandWizard: zeigt alle 16 Laender als Dropdown, speichert
    bei Klick die Config und switcht zur Monatsansicht.
  - MonthView: 6-Wochen-Grid Mo-So, Feiertage rose-toned, Schulferien
    amber-toned, heutiges Datum mit Indigo-Ring. Prev/Next/Heute
    Navigation.
  - lib/schulkalender/api.ts re-uses the stundenplan JWT helper so
    auth-mode wechselt nicht.
  - Sidebar bekommt einen Schulkalender-Eintrag (Icon mit Datum-Dots,
    Pfad /schulkalender) in allen 26 Sprachen.

Tests:
  - Go: 3 neue Validator-Tests (Bundesland len=5, EventType oneof,
    Pflichtfelder). 77 Tests gesamt, alle gruen.
  - Playwright: e2e/schulkalender.spec.ts mit Wizard, Save-Flow,
    MonthView-Render, Heute-Button, Sidebar-Link. Hermetisch via
    mockCalendarApi.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

studio-v2/app/schulkalender/_components/BundeslandWizard.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { useState } from 'react'
+import { useTheme } from '@/lib/ThemeContext'
+import { BUNDESLAENDER } from '@/app/schulkalender/types'
+
+interface BundeslandWizardProps {
+  onSave: (bundesland: string) => Promise<void>
+}
+
+export function BundeslandWizard({ onSave }: BundeslandWizardProps) {
+  const { isDark } = useTheme()
+  const [selected, setSelected] = useState('DE-NI')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSave = async () => {
+    setSaving(true)
+    setError(null)
+    try {
+      await onSave(selected)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Speichern fehlgeschlagen')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const cardClass = isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white/80 border-black/10 text-slate-900'
+  const selectClass = isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white border-slate-300 text-slate-900'
+
+  return (
+    <div className={`max-w-xl mx-auto rounded-2xl border backdrop-blur-xl p-6 ${cardClass}`} data-testid="bundesland-wizard">
+      <h2 className="text-xl font-semibold mb-2">Willkommen im Schulkalender</h2>
+      <p className={`text-sm mb-4 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
+        Waehle das Bundesland deiner Schule. Damit laden wir Ferien und
+        Feiertage aus dem offiziellen Datensatz fuer die naechsten drei
+        Schuljahre.
+      </p>
+      <div className="mb-4">
+        <label className="block text-sm mb-1 opacity-70">Bundesland</label>
+        <select
+          value={selected}
+          onChange={e => setSelected(e.target.value)}
+          data-testid="bundesland-select"
+          className={`w-full px-3 py-2 rounded-lg border ${selectClass}`}
+        >
+          {BUNDESLAENDER.map(b => (
+            <option key={b.code} value={b.code}>{b.name}</option>
+          ))}
+        </select>
+      </div>
+      {error && (
+        <div className="mb-3 p-2 rounded-lg bg-red-500/20 border border-red-500/40 text-red-300 text-sm">
+          {error}
+        </div>
+      )}
+      <button
+        onClick={handleSave}
+        disabled={saving}
+        data-testid="bundesland-save"
+        className="w-full px-4 py-2 rounded-lg bg-indigo-500 hover:bg-indigo-600 text-white font-medium disabled:opacity-50"
+      >
+        {saving ? 'Speichert…' : 'Bundesland uebernehmen'}
+      </button>
+    </div>
+  )
+}

studio-v2/app/schulkalender/_components/MonthView.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useTheme } from '@/lib/ThemeContext'
+import type { PublicEvent } from '@/app/schulkalender/types'
+
+interface MonthViewProps {
+  year: number
+  month: number // 1-12
+  holidays: PublicEvent[]
+  onPrev: () => void
+  onNext: () => void
+  onToday: () => void
+}
+
+const WEEKDAYS_DE = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
+const MONTHS_DE = [
+  'Januar', 'Februar', 'Maerz', 'April', 'Mai', 'Juni',
+  'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember',
+]
+
+interface Cell {
+  date: Date
+  inMonth: boolean
+  events: PublicEvent[]
+}
+
+function buildMonthGrid(year: number, month: number, holidays: PublicEvent[]): Cell[] {
+  // First Monday on or before the 1st of the month.
+  const first = new Date(Date.UTC(year, month - 1, 1))
+  const firstWeekday = (first.getUTCDay() + 6) % 7 // Monday = 0
+  const start = new Date(first)
+  start.setUTCDate(first.getUTCDate() - firstWeekday)
+
+  const cells: Cell[] = []
+  for (let i = 0; i < 42; i++) {
+    const d = new Date(start)
+    d.setUTCDate(start.getUTCDate() + i)
+    const iso = d.toISOString().slice(0, 10)
+    const events = holidays.filter(h => iso >= h.start_date && iso <= h.end_date)
+    cells.push({
+      date: d,
+      inMonth: d.getUTCMonth() === month - 1,
+      events,
+    })
+    if (i >= 27 && d.getUTCMonth() !== month - 1) {
+      // Stop a row early if the rest is fully outside the month.
+      const restAllOutside = cells.slice(i + 1 - ((i + 1) % 7), i + 1).every(c => !c.inMonth)
+      if (restAllOutside) break
+    }
+  }
+  // Pad to multiple of 7 if we cut early.
+  while (cells.length % 7 !== 0) {
+    const last = cells[cells.length - 1].date
+    const d = new Date(last)
+    d.setUTCDate(last.getUTCDate() + 1)
+    cells.push({ date: d, inMonth: false, events: [] })
+  }
+  return cells
+}
+
+export function MonthView({ year, month, holidays, onPrev, onNext, onToday }: MonthViewProps) {
+  const { isDark } = useTheme()
+  const cells = useMemo(() => buildMonthGrid(year, month, holidays), [year, month, holidays])
+
+  const headerClass = isDark ? 'text-white' : 'text-slate-900'
+  const subtleText = isDark ? 'text-white/40' : 'text-slate-400'
+  const cardClass = isDark ? 'bg-white/10 border-white/20' : 'bg-white/80 border-black/10'
+  const buttonClass = isDark
+    ? 'bg-white/10 text-white/80 hover:bg-white/20'
+    : 'bg-white text-slate-700 hover:bg-slate-100 border border-slate-200'
+
+  const todayIso = new Date().toISOString().slice(0, 10)
+
+  return (
+    <div className={`rounded-2xl border backdrop-blur-xl p-4 ${cardClass}`} data-testid="month-view">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className={`text-2xl font-semibold ${headerClass}`}>
+          {MONTHS_DE[month - 1]} {year}
+        </h2>
+        <div className="flex gap-2">
+          <button onClick={onPrev} data-testid="month-prev" className={`px-3 py-1.5 rounded-lg text-sm font-medium ${buttonClass}`}>←</button>
+          <button onClick={onToday} data-testid="month-today" className={`px-3 py-1.5 rounded-lg text-sm font-medium ${buttonClass}`}>Heute</button>
+          <button onClick={onNext} data-testid="month-next" className={`px-3 py-1.5 rounded-lg text-sm font-medium ${buttonClass}`}>→</button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-7 gap-1 mb-2">
+        {WEEKDAYS_DE.map(w => (
+          <div key={w} className={`text-xs font-medium text-center ${subtleText}`}>{w}</div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-7 gap-1">
+        {cells.map((c, i) => {
+          const iso = c.date.toISOString().slice(0, 10)
+          const isToday = iso === todayIso
+          const publicHoliday = c.events.find(e => e.event_type === 'public_holiday')
+          const schoolHoliday = c.events.find(e => e.event_type === 'school_holiday')
+
+          let bg = isDark ? 'bg-white/5' : 'bg-slate-50'
+          if (schoolHoliday) bg = isDark ? 'bg-amber-500/20' : 'bg-amber-100'
+          if (publicHoliday) bg = isDark ? 'bg-rose-500/25' : 'bg-rose-100'
+
+          return (
+            <div
+              key={i}
+              data-testid={`day-${iso}`}
+              className={`relative aspect-square rounded-lg p-2 text-sm border ${
+                isDark ? 'border-white/10' : 'border-black/5'
+              } ${c.inMonth ? bg : (isDark ? 'bg-transparent' : 'bg-transparent')} ${
+                isToday ? (isDark ? 'ring-2 ring-indigo-400' : 'ring-2 ring-indigo-500') : ''
+              }`}
+            >
+              <div className={`font-medium ${
+                c.inMonth ? (isDark ? 'text-white' : 'text-slate-900') : subtleText
+              }`}>
+                {c.date.getUTCDate()}
+              </div>
+              {c.events.length > 0 && (
+                <div className="mt-1 space-y-0.5 overflow-hidden">
+                  {c.events.slice(0, 2).map(e => (
+                    <div
+                      key={e.id}
+                      title={e.name_de}
+                      className={`text-[10px] leading-tight truncate ${
+                        e.event_type === 'public_holiday'
+                          ? (isDark ? 'text-rose-200' : 'text-rose-800')
+                          : (isDark ? 'text-amber-200' : 'text-amber-800')
+                      }`}
+                    >
+                      {e.name_de}
+                    </div>
+                  ))}
+                  {c.events.length > 2 && (
+                    <div className={`text-[10px] ${subtleText}`}>+{c.events.length - 2}</div>
+                  )}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+
+      <div className="mt-4 flex flex-wrap items-center gap-4 text-xs">
+        <span className="flex items-center gap-1.5">
+          <span className={`inline-block w-3 h-3 rounded ${isDark ? 'bg-rose-500/40' : 'bg-rose-200'}`}></span>
+          <span className={isDark ? 'text-white/70' : 'text-slate-600'}>Feiertag</span>
+        </span>
+        <span className="flex items-center gap-1.5">
+          <span className={`inline-block w-3 h-3 rounded ${isDark ? 'bg-amber-500/40' : 'bg-amber-200'}`}></span>
+          <span className={isDark ? 'text-white/70' : 'text-slate-600'}>Schulferien</span>
+        </span>
+      </div>
+    </div>
+  )
+}

studio-v2/app/schulkalender/page.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { useTheme } from '@/lib/ThemeContext'
+import { Sidebar } from '@/components/Sidebar'
+import { ThemeToggle } from '@/components/ThemeToggle'
+import { LanguageDropdown } from '@/components/LanguageDropdown'
+import { calendarApi } from '@/lib/schulkalender/api'
+import type { PublicEvent, SchoolCalendarConfig } from './types'
+import { BUNDESLAENDER } from './types'
+import { MonthView } from './_components/MonthView'
+import { BundeslandWizard } from './_components/BundeslandWizard'
+
+function monthRange(year: number, month: number): { from: string; to: string } {
+  // Render the visible 6-week grid worth of holidays (covers prev/next month edges).
+  const from = new Date(Date.UTC(year, month - 1, 1))
+  from.setUTCDate(from.getUTCDate() - 7)
+  const to = new Date(Date.UTC(year, month, 0))
+  to.setUTCDate(to.getUTCDate() + 14)
+  return { from: from.toISOString().slice(0, 10), to: to.toISOString().slice(0, 10) }
+}
+
+export default function SchulkalenderPage() {
+  const { isDark } = useTheme()
+  const today = new Date()
+  const [year, setYear] = useState(today.getFullYear())
+  const [month, setMonth] = useState(today.getMonth() + 1)
+  const [config, setConfig] = useState<SchoolCalendarConfig | null>(null)
+  const [holidays, setHolidays] = useState<PublicEvent[]>([])
+  const [configLoading, setConfigLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const loadConfig = useCallback(async () => {
+    setConfigLoading(true)
+    try {
+      const cfg = await calendarApi.getConfig()
+      setConfig(cfg)
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Config laden fehlgeschlagen')
+    } finally {
+      setConfigLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { loadConfig() }, [loadConfig])
+
+  const loadHolidays = useCallback(async () => {
+    if (!config?.bundesland) return
+    const { from, to } = monthRange(year, month)
+    try {
+      const data = await calendarApi.listHolidays(config.bundesland, from, to)
+      setHolidays(data || [])
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Ferien laden fehlgeschlagen')
+    }
+  }, [config, year, month])
+
+  useEffect(() => { loadHolidays() }, [loadHolidays])
+
+  const handleSaveBundesland = async (bundesland: string) => {
+    const cfg = await calendarApi.upsertConfig({ bundesland })
+    setConfig(cfg)
+  }
+
+  const goPrev = () => {
+    if (month === 1) { setYear(y => y - 1); setMonth(12) }
+    else setMonth(m => m - 1)
+  }
+  const goNext = () => {
+    if (month === 12) { setYear(y => y + 1); setMonth(1) }
+    else setMonth(m => m + 1)
+  }
+  const goToday = () => {
+    const t = new Date()
+    setYear(t.getFullYear())
+    setMonth(t.getMonth() + 1)
+  }
+
+  const bundeslandName = config
+    ? BUNDESLAENDER.find(b => b.code === config.bundesland)?.name || config.bundesland
+    : ''
+
+  return (
+    <div className={`min-h-screen flex relative overflow-hidden ${
+      isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
+        : 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'
+    }`}>
+      <div className={`absolute -top-40 -right-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob ${isDark ? 'bg-purple-500 opacity-30' : 'bg-purple-300 opacity-40'}`} />
+      <div className={`absolute top-1/2 -left-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 ${isDark ? 'bg-pink-500 opacity-30' : 'bg-pink-300 opacity-40'}`} />
+      <div className={`absolute -bottom-40 right-1/3 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 ${isDark ? 'bg-blue-500 opacity-30' : 'bg-blue-300 opacity-40'}`} />
+
+      <div className="relative z-10 p-4"><Sidebar selectedTab="schulkalender" /></div>
+
+      <main className="flex-1 relative z-10 p-6 overflow-y-auto">
+        <div className="max-w-6xl mx-auto">
+          <header className="flex items-center justify-between mb-6">
+            <div>
+              <h1 className={`text-3xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                Schulkalender
+              </h1>
+              <p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
+                {config ? `Ferien und Feiertage fuer ${bundeslandName}` : 'Ferien, Feiertage und Schultermine'}
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <ThemeToggle />
+              <LanguageDropdown />
+            </div>
+          </header>
+
+          {error && (
+            <div className="mb-4 p-3 rounded-xl bg-red-500/20 border border-red-500/40 text-red-300">{error}</div>
+          )}
+
+          {configLoading ? (
+            <div className={`text-center py-12 opacity-60 ${isDark ? 'text-white' : 'text-slate-700'}`}>Laedt…</div>
+          ) : !config ? (
+            <BundeslandWizard onSave={handleSaveBundesland} />
+          ) : (
+            <MonthView
+              year={year}
+              month={month}
+              holidays={holidays}
+              onPrev={goPrev}
+              onNext={goNext}
+              onToday={goToday}
+            />
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}

studio-v2/app/schulkalender/types.ts

@@ -0,0 +1,47 @@
+export type PublicEventType = 'public_holiday' | 'school_holiday'
+
+export interface PublicEvent {
+  id: string
+  region: string
+  event_type: PublicEventType
+  name_de: string
+  name_en?: string
+  start_date: string // YYYY-MM-DD
+  end_date: string
+  source?: string
+  created_at?: string
+}
+
+export interface SchoolCalendarConfig {
+  user_id: string
+  bundesland: string
+  school_year_start?: string | null
+  school_year_end?: string | null
+  created_at?: string
+  updated_at?: string
+}
+
+export interface UpsertSchoolCalendarConfig {
+  bundesland: string
+  school_year_start?: string | null
+  school_year_end?: string | null
+}
+
+export const BUNDESLAENDER: { code: string; name: string }[] = [
+  { code: 'DE-BW', name: 'Baden-Wuerttemberg' },
+  { code: 'DE-BY', name: 'Bayern' },
+  { code: 'DE-BE', name: 'Berlin' },
+  { code: 'DE-BB', name: 'Brandenburg' },
+  { code: 'DE-HB', name: 'Bremen' },
+  { code: 'DE-HH', name: 'Hamburg' },
+  { code: 'DE-HE', name: 'Hessen' },
+  { code: 'DE-MV', name: 'Mecklenburg-Vorpommern' },
+  { code: 'DE-NI', name: 'Niedersachsen' },
+  { code: 'DE-NW', name: 'Nordrhein-Westfalen' },
+  { code: 'DE-RP', name: 'Rheinland-Pfalz' },
+  { code: 'DE-SL', name: 'Saarland' },
+  { code: 'DE-SN', name: 'Sachsen' },
+  { code: 'DE-ST', name: 'Sachsen-Anhalt' },
+  { code: 'DE-SH', name: 'Schleswig-Holstein' },
+  { code: 'DE-TH', name: 'Thueringen' },
+]