Phase 9b: Schul-Events CRUD + Schuljahres-Rollover

Backend (school-service):
  - calendar_events.go — Create/List/Delete on cal_school_event with
    UUID[] handling for affected_class_ids. Default lead-days [7,1]
    if caller omits the array.
  - calendar_rollover.go — single-transaction promotion: graduating
    classes (grade >= 13) get deleted first so the +1 update doesn't
    bump them to invalid grade 14. defaultSchoolYearDates() picks the
    next Aug-Jul pair when the caller doesn't specify.
  - Handlers + routes: GET/POST /calendar/events,
    DELETE /calendar/events/:id, POST /calendar/school-year-rollover.

Frontend (studio-v2):
  - EventModal: form with Title / Typ / Datum/Zeit / unterrichtsfrei /
    Beschreibung / Sichtbarkeit + Notification-Checkboxen. Per-Type
    Farb-Mapping in types.ts.
  - DayDetail: Modal das beim Klick auf einen Kalender-Tag aufgeht und
    Feiertage + Schulferien + Schul-Events fuer diesen Tag listet,
    inkl. Loeschen-Button pro Event.
  - RolloverWizard: zwei-Schritt-Dialog mit Datums-Auswahl + Tipp-
    Bestaetigung ("SCHULJAHR WECHSELN") gegen versehentliche Auslo-
    sung, danach Ergebnis-Card mit promoted/graduated-Counts.
  - MonthView gewinnt onDayClick + onAddEvent + onRollover Props,
    rendert farb-codierte Punkte fuer School-Events am Tagesrand.
  - Page laed Events parallel mit Holidays und reicht alle Handler
    nach unten.

Tests:
  - Go: 3 neue Tests fuer defaultSchoolYearDates + parseClassIDs.
    Validator-Test fuer CreateSchoolEventRequest existiert bereits.
    80 Subtests gesamt, alle gruen.
  - Playwright: mockCalendarApi gewinnt Routes fuer events GET/POST/
    DELETE und school-year-rollover. 6 neue Tests (EventModal open,
    submit, DayDetail open, Rollover-Trigger, Confirm-Schutz,
    Ergebnis-Anzeige).

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

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

@@ -0,0 +1,102 @@
+'use client'
+
+import { useTheme } from '@/lib/ThemeContext'
+import { calendarApi } from '@/lib/schulkalender/api'
+import type { PublicEvent, SchoolEvent } from '@/app/schulkalender/types'
+import { EVENT_TYPE_COLOR, EVENT_TYPE_LABEL } from '@/app/schulkalender/types'
+
+interface DayDetailProps {
+  iso: string
+  holidays: PublicEvent[]
+  events: SchoolEvent[]
+  onClose: () => void
+  onDeleted: () => void
+}
+
+export function DayDetail({ iso, holidays, events, onClose, onDeleted }: DayDetailProps) {
+  const { isDark } = useTheme()
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Termin wirklich loeschen?')) return
+    try {
+      await calendarApi.deleteEvent(id)
+      onDeleted()
+    } catch {
+      // best-effort
+    }
+  }
+
+  const cardClass = isDark ? 'bg-slate-900/95 border-white/20 text-white' : 'bg-white border-black/10 text-slate-900'
+
+  const dayHolidays = holidays.filter(h => iso >= h.start_date && iso <= h.end_date)
+  const dayEvents = events.filter(e => iso >= e.start_date && iso <= e.end_date)
+
+  const formattedDate = new Date(iso).toLocaleDateString('de-DE', {
+    weekday: 'long', day: 'numeric', month: 'long', year: 'numeric',
+  })
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur" data-testid="day-detail">
+      <div className={`w-full max-w-lg rounded-2xl border p-6 space-y-4 max-h-[90vh] overflow-y-auto ${cardClass}`}>
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-semibold">{formattedDate}</h2>
+          <button onClick={onClose} className="opacity-60 hover:opacity-100">✕</button>
+        </div>
+
+        {dayHolidays.length === 0 && dayEvents.length === 0 && (
+          <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
+            Keine Eintraege fuer diesen Tag.
+          </p>
+        )}
+
+        {dayHolidays.length > 0 && (
+          <section className="space-y-2">
+            <h3 className="text-sm font-medium opacity-80">Bundesweite Eintraege</h3>
+            {dayHolidays.map(h => (
+              <div key={h.id} className={`p-2 rounded-lg text-sm ${h.event_type === 'public_holiday' ? (isDark ? 'bg-rose-500/20' : 'bg-rose-50') : (isDark ? 'bg-amber-500/20' : 'bg-amber-50')}`}>
+                <div className="font-medium">{h.name_de}</div>
+                <div className="text-xs opacity-70">{h.event_type === 'public_holiday' ? 'Feiertag' : 'Schulferien'} · {h.start_date}{h.start_date !== h.end_date ? ` – ${h.end_date}` : ''}</div>
+              </div>
+            ))}
+          </section>
+        )}
+
+        {dayEvents.length > 0 && (
+          <section className="space-y-2">
+            <h3 className="text-sm font-medium opacity-80">Schul-Termine</h3>
+            {dayEvents.map(e => (
+              <div
+                key={e.id}
+                className={`p-3 rounded-lg ${isDark ? 'bg-white/10' : 'bg-slate-50'}`}
+                style={{ borderLeft: `4px solid ${EVENT_TYPE_COLOR[e.event_type]}` }}
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex-1">
+                    <div className="font-medium">{e.title}</div>
+                    <div className="text-xs opacity-70 mt-0.5">
+                      {EVENT_TYPE_LABEL[e.event_type]}
+                      {e.start_time && ` · ${e.start_time}${e.end_time ? `–${e.end_time}` : ''}`}
+                      {e.is_school_free && ' · unterrichtsfrei'}
+                    </div>
+                    {e.description && <div className="text-sm opacity-90 mt-1">{e.description}</div>}
+                    <div className="text-xs opacity-60 mt-1.5">
+                      {e.visible_to_parents && '👨‍👩‍👧 sichtbar fuer Eltern'}
+                      {e.notify_parents && ' · 📧 Eltern erinnern'}
+                      {e.notify_students && ' · 💬 Schueler erinnern'}
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => handleDelete(e.id)}
+                    className="text-xs text-red-400 hover:text-red-300"
+                  >
+                    Loeschen
+                  </button>
+                </div>
+              </div>
+            ))}
+          </section>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,178 @@
+'use client'
+
+import { useState } from 'react'
+import { useTheme } from '@/lib/ThemeContext'
+import { calendarApi } from '@/lib/schulkalender/api'
+import type { CreateSchoolEvent, SchoolEventType } from '@/app/schulkalender/types'
+import { EVENT_TYPE_LABEL } from '@/app/schulkalender/types'
+
+interface EventModalProps {
+  defaultDate: string // YYYY-MM-DD
+  onClose: () => void
+  onCreated: () => void
+}
+
+const initial = (date: string): CreateSchoolEvent => ({
+  title: '',
+  event_type: 'fortbildung',
+  is_school_free: false,
+  start_date: date,
+  end_date: date,
+  visible_to_parents: true,
+  notify_parents: false,
+  notify_students: false,
+  notification_lead_days: [7, 1],
+})
+
+export function EventModal({ defaultDate, onClose, onCreated }: EventModalProps) {
+  const { isDark } = useTheme()
+  const [form, setForm] = useState<CreateSchoolEvent>(initial(defaultDate))
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    try {
+      await calendarApi.createEvent(form)
+      onCreated()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Anlegen fehlgeschlagen')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const cardClass = isDark ? 'bg-slate-900/95 border-white/20 text-white' : 'bg-white border-black/10 text-slate-900'
+  const inputClass = isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white border-slate-300 text-slate-900'
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur" data-testid="event-modal">
+      <form
+        onSubmit={handleSubmit}
+        className={`w-full max-w-2xl rounded-2xl border p-6 space-y-3 max-h-[90vh] overflow-y-auto ${cardClass}`}
+      >
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-semibold">Neuer Termin</h2>
+          <button type="button" onClick={onClose} className="opacity-60 hover:opacity-100">✕</button>
+        </div>
+
+        <div>
+          <label className="block text-sm mb-1 opacity-70">Titel</label>
+          <input
+            required
+            value={form.title}
+            onChange={e => setForm({ ...form, title: e.target.value })}
+            placeholder="z.B. SCHILF: Digitale Tafeln"
+            className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
+            data-testid="event-title"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className="block text-sm mb-1 opacity-70">Typ</label>
+            <select
+              value={form.event_type}
+              onChange={e => setForm({ ...form, event_type: e.target.value as SchoolEventType })}
+              className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
+              data-testid="event-type"
+            >
+              {(Object.keys(EVENT_TYPE_LABEL) as SchoolEventType[]).map(k => (
+                <option key={k} value={k}>{EVENT_TYPE_LABEL[k]}</option>
+              ))}
+            </select>
+          </div>
+          <div className="flex items-end gap-2">
+            <input
+              type="checkbox"
+              id="is-school-free"
+              checked={form.is_school_free || false}
+              onChange={e => setForm({ ...form, is_school_free: e.target.checked })}
+              className="w-5 h-5"
+            />
+            <label htmlFor="is-school-free" className="text-sm">Unterrichtsfrei</label>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className="block text-sm mb-1 opacity-70">Von</label>
+            <input type="date" required value={form.start_date} onChange={e => setForm({ ...form, start_date: e.target.value })} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
+          </div>
+          <div>
+            <label className="block text-sm mb-1 opacity-70">Bis</label>
+            <input type="date" required value={form.end_date} onChange={e => setForm({ ...form, end_date: e.target.value })} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
+          </div>
+          <div>
+            <label className="block text-sm mb-1 opacity-70">Startzeit (optional)</label>
+            <input type="time" value={form.start_time || ''} onChange={e => setForm({ ...form, start_time: e.target.value || null })} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
+          </div>
+          <div>
+            <label className="block text-sm mb-1 opacity-70">Endzeit (optional)</label>
+            <input type="time" value={form.end_time || ''} onChange={e => setForm({ ...form, end_time: e.target.value || null })} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm mb-1 opacity-70">Beschreibung (optional)</label>
+          <textarea
+            value={form.description || ''}
+            onChange={e => setForm({ ...form, description: e.target.value })}
+            rows={2}
+            className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
+          />
+        </div>
+
+        <div className="space-y-2 pt-2 border-t border-white/10">
+          <label className="flex items-center gap-2 text-sm">
+            <input
+              type="checkbox"
+              checked={form.visible_to_parents ?? true}
+              onChange={e => setForm({ ...form, visible_to_parents: e.target.checked })}
+              className="w-5 h-5"
+            />
+            Eltern sehen diesen Termin
+          </label>
+          <label className="flex items-center gap-2 text-sm">
+            <input
+              type="checkbox"
+              checked={form.notify_parents ?? false}
+              onChange={e => setForm({ ...form, notify_parents: e.target.checked })}
+              className="w-5 h-5"
+            />
+            Eltern per Mail/Chat erinnern
+          </label>
+          <label className="flex items-center gap-2 text-sm">
+            <input
+              type="checkbox"
+              checked={form.notify_students ?? false}
+              onChange={e => setForm({ ...form, notify_students: e.target.checked })}
+              className="w-5 h-5"
+            />
+            Schueler per Chat erinnern
+          </label>
+        </div>
+
+        {error && (
+          <div className="p-2 rounded-lg bg-red-500/20 border border-red-500/40 text-red-300 text-sm">{error}</div>
+        )}
+
+        <div className="flex gap-2 pt-2">
+          <button
+            type="submit"
+            disabled={saving}
+            data-testid="event-save"
+            className="flex-1 px-4 py-2 rounded-lg bg-indigo-500 hover:bg-indigo-600 text-white font-medium disabled:opacity-50"
+          >
+            {saving ? 'Speichert…' : 'Anlegen'}
+          </button>
+          <button type="button" onClick={onClose} className={`px-4 py-2 rounded-lg ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-700'}`}>
+            Abbrechen
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}

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

@@ -2,15 +2,20 @@
 
 import { useMemo } from 'react'
 import { useTheme } from '@/lib/ThemeContext'
-import type { PublicEvent } from '@/app/schulkalender/types'
+import type { PublicEvent, SchoolEvent } from '@/app/schulkalender/types'
+import { EVENT_TYPE_COLOR } from '@/app/schulkalender/types'
 
 interface MonthViewProps {
   year: number
   month: number // 1-12
   holidays: PublicEvent[]
+  schoolEvents?: SchoolEvent[]
   onPrev: () => void
   onNext: () => void
   onToday: () => void
+  onDayClick?: (iso: string) => void
+  onAddEvent?: () => void
+  onRollover?: () => void
 }
 
 const WEEKDAYS_DE = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
@@ -59,10 +64,26 @@ function buildMonthGrid(year: number, month: number, holidays: PublicEvent[]): C
   return cells
 }
 
-export function MonthView({ year, month, holidays, onPrev, onNext, onToday }: MonthViewProps) {
+export function MonthView({ year, month, holidays, schoolEvents = [], onPrev, onNext, onToday, onDayClick, onAddEvent, onRollover }: MonthViewProps) {
   const { isDark } = useTheme()
   const cells = useMemo(() => buildMonthGrid(year, month, holidays), [year, month, holidays])
 
+  // School events per ISO date — quick lookup during cell render.
+  const schoolEventsByDate = useMemo(() => {
+    const map = new Map<string, SchoolEvent[]>()
+    for (const ev of schoolEvents) {
+      const start = new Date(ev.start_date)
+      const end = new Date(ev.end_date)
+      for (let d = new Date(start); d <= end; d.setUTCDate(d.getUTCDate() + 1)) {
+        const iso = d.toISOString().slice(0, 10)
+        const arr = map.get(iso) || []
+        arr.push(ev)
+        map.set(iso, arr)
+      }
+    }
+    return map
+  }, [schoolEvents])
+
   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'
@@ -79,6 +100,12 @@ export function MonthView({ year, month, holidays, onPrev, onNext, onToday }: Mo
           {MONTHS_DE[month - 1]} {year}
         </h2>
         <div className="flex gap-2">
+          {onAddEvent && (
+            <button onClick={onAddEvent} data-testid="add-event" className={`px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? 'bg-indigo-500 hover:bg-indigo-600 text-white' : 'bg-indigo-600 hover:bg-indigo-700 text-white'}`}>+ Termin</button>
+          )}
+          {onRollover && (
+            <button onClick={onRollover} data-testid="rollover-trigger" className={`px-3 py-1.5 rounded-lg text-sm font-medium ${isDark ? 'bg-amber-500/30 hover:bg-amber-500/50 text-amber-100' : 'bg-amber-100 hover:bg-amber-200 text-amber-900'}`}>Schuljahr wechseln</button>
+          )}
           <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>
@@ -102,11 +129,16 @@ export function MonthView({ year, month, holidays, onPrev, onNext, onToday }: Mo
           if (schoolHoliday) bg = isDark ? 'bg-amber-500/20' : 'bg-amber-100'
           if (publicHoliday) bg = isDark ? 'bg-rose-500/25' : 'bg-rose-100'
 
+          const dayEvents = schoolEventsByDate.get(iso) || []
+
           return (
             <div
               key={i}
               data-testid={`day-${iso}`}
+              onClick={() => c.inMonth && onDayClick?.(iso)}
               className={`relative aspect-square rounded-lg p-2 text-sm border ${
+                onDayClick && c.inMonth ? 'cursor-pointer hover:ring-2 hover:ring-indigo-300/50' : ''
+              } ${
                 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') : ''
@@ -137,6 +169,18 @@ export function MonthView({ year, month, holidays, onPrev, onNext, onToday }: Mo
                   )}
                 </div>
               )}
+              {dayEvents.length > 0 && (
+                <div className="absolute bottom-1 left-1 right-1 flex flex-wrap gap-0.5">
+                  {dayEvents.slice(0, 4).map(ev => (
+                    <span
+                      key={ev.id}
+                      title={ev.title}
+                      className="inline-block w-1.5 h-1.5 rounded-full"
+                      style={{ backgroundColor: EVENT_TYPE_COLOR[ev.event_type] }}
+                    />
+                  ))}
+                </div>
+              )}
             </div>
           )
         })}

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

@@ -0,0 +1,127 @@
+'use client'
+
+import { useState } from 'react'
+import { useTheme } from '@/lib/ThemeContext'
+import { calendarApi } from '@/lib/schulkalender/api'
+import type { SchoolYearRolloverResult } from '@/app/schulkalender/types'
+
+interface RolloverWizardProps {
+  onClose: () => void
+  onDone: () => void
+}
+
+function nextSchoolYearISO(): { start: string; end: string } {
+  const now = new Date()
+  let y = now.getFullYear()
+  if (now.getMonth() + 1 >= 8) y++ // Aug → bumped to next year
+  return { start: `${y}-08-01`, end: `${y + 1}-07-31` }
+}
+
+export function RolloverWizard({ onClose, onDone }: RolloverWizardProps) {
+  const { isDark } = useTheme()
+  const defaults = nextSchoolYearISO()
+  const [start, setStart] = useState(defaults.start)
+  const [end, setEnd] = useState(defaults.end)
+  const [confirm, setConfirm] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [result, setResult] = useState<SchoolYearRolloverResult | null>(null)
+
+  const expected = 'SCHULJAHR WECHSELN'
+
+  const handleSubmit = async () => {
+    setSaving(true)
+    setError(null)
+    try {
+      const r = await calendarApi.rolloverSchoolYear(start, end)
+      setResult(r)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Rollover fehlgeschlagen')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const cardClass = isDark ? 'bg-slate-900/95 border-white/20 text-white' : 'bg-white border-black/10 text-slate-900'
+  const inputClass = isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white border-slate-300 text-slate-900'
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur" data-testid="rollover-wizard">
+      <div className={`w-full max-w-xl rounded-2xl border p-6 space-y-4 max-h-[90vh] overflow-y-auto ${cardClass}`}>
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-semibold">Schuljahres-Wechsel</h2>
+          <button onClick={onClose} className="opacity-60 hover:opacity-100">✕</button>
+        </div>
+
+        {result ? (
+          <div className="space-y-3" data-testid="rollover-result">
+            <div className={`p-4 rounded-xl ${isDark ? 'bg-emerald-500/20 border border-emerald-500/40' : 'bg-emerald-50 border border-emerald-200'}`}>
+              <div className="font-medium mb-2">Rollover erfolgreich</div>
+              <ul className="text-sm space-y-1 opacity-90">
+                <li>{result.classes_promoted} Klassen um eine Stufe aufgerueckt</li>
+                <li>{result.classes_graduated} Abschlussklassen entfernt</li>
+                <li>Neues Schuljahr: {result.new_year_start} – {result.new_year_end}</li>
+              </ul>
+            </div>
+            <button onClick={onDone} className="w-full px-4 py-2 rounded-lg bg-indigo-500 hover:bg-indigo-600 text-white font-medium">
+              Schliessen
+            </button>
+          </div>
+        ) : (
+          <>
+            <div className={`p-3 rounded-lg text-sm ${isDark ? 'bg-amber-500/10 border border-amber-500/30 text-amber-100' : 'bg-amber-50 border border-amber-200 text-amber-900'}`}>
+              <p className="font-medium mb-1">Was passiert?</p>
+              <ul className="list-disc list-inside space-y-1 opacity-90">
+                <li>Alle Klassen ruecken eine Stufe hoeher (5a → 6, 6a → 7, …)</li>
+                <li>Abschlussklassen (Stufe 13) werden entfernt</li>
+                <li>Lehrer, Faecher, Raeume, Zeitraster bleiben unveraendert</li>
+                <li>Vorhandene Stundenplaene bleiben als Historie erhalten</li>
+              </ul>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-sm mb-1 opacity-70">Schuljahr-Beginn</label>
+                <input type="date" value={start} onChange={e => setStart(e.target.value)} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
+              </div>
+              <div>
+                <label className="block text-sm mb-1 opacity-70">Schuljahr-Ende</label>
+                <input type="date" value={end} onChange={e => setEnd(e.target.value)} className={`w-full px-3 py-2 rounded-lg border ${inputClass}`} />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-sm mb-1 opacity-70">
+                Bestaetigung — tippe <code className={`px-1 rounded ${isDark ? 'bg-white/10' : 'bg-slate-100'}`}>{expected}</code> zur Bestaetigung
+              </label>
+              <input
+                value={confirm}
+                onChange={e => setConfirm(e.target.value)}
+                data-testid="rollover-confirm"
+                className={`w-full px-3 py-2 rounded-lg border ${inputClass}`}
+              />
+            </div>
+
+            {error && (
+              <div className="p-2 rounded-lg bg-red-500/20 border border-red-500/40 text-red-300 text-sm">{error}</div>
+            )}
+
+            <div className="flex gap-2">
+              <button
+                onClick={handleSubmit}
+                disabled={saving || confirm !== expected}
+                data-testid="rollover-submit"
+                className="flex-1 px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600 text-white font-medium disabled:opacity-30"
+              >
+                {saving ? 'Wechselt…' : 'Schuljahr wechseln'}
+              </button>
+              <button onClick={onClose} className={`px-4 py-2 rounded-lg ${isDark ? 'bg-white/10 hover:bg-white/20' : 'bg-slate-100 hover:bg-slate-200'}`}>
+                Abbrechen
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}