feat: responsive widgets, atemschutz permission UX, event hard-delete

- fix dashboard grid: use auto-fill instead of auto-fit for equal-width widgets
- atemschutz: skip stats/members API calls for non-privileged users, hide
  empty Aktionen column, add personal status subtitle
- kalender: add permanent delete option for events with confirmation dialog

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

frontend/src/pages/Kalender.tsx

@@ -51,6 +51,7 @@ import {
   ChevronLeft,
   ChevronRight,
   ContentCopy as CopyIcon,
+  DeleteForever as DeleteForeverIcon,
   DirectionsCar as CarIcon,
   Edit as EditIcon,
   Event as EventIcon,
@@ -453,11 +454,12 @@ interface DayPopoverProps {
   onClose: () => void;
   onTrainingClick: (id: string) => void;
   onEventEdit: (ev: VeranstaltungListItem) => void;
+  onEventDelete: (id: string) => void;
 }
 
 function DayPopover({
   anchorEl, day, trainingForDay, eventsForDay,
-  canWriteEvents, onClose, onTrainingClick, onEventEdit,
+  canWriteEvents, onClose, onTrainingClick, onEventEdit, onEventDelete,
 }: DayPopoverProps) {
   if (!day) return null;
   const hasContent = trainingForDay.length > 0 || eventsForDay.length > 0;
@@ -589,6 +591,15 @@ function DayPopover({
                     <EditIcon fontSize="small" />
                   </IconButton>
                 )}
+                {canWriteEvents && (
+                  <IconButton
+                    size="small"
+                    color="error"
+                    onClick={() => { onEventDelete(ev.id); onClose(); }}
+                  >
+                    <DeleteForeverIcon fontSize="small" />
+                  </IconButton>
+                )}
               </ListItem>
             ))}
           </List>
@@ -610,11 +621,12 @@ interface CombinedListViewProps {
   onTrainingClick: (id: string) => void;
   onEventEdit: (ev: VeranstaltungListItem) => void;
   onEventCancel: (id: string) => void;
+  onEventDelete: (id: string) => void;
 }
 
 function CombinedListView({
   trainingEvents, veranstaltungen, selectedKategorie,
-  canWriteEvents, onTrainingClick, onEventEdit, onEventCancel,
+  canWriteEvents, onTrainingClick, onEventEdit, onEventCancel, onEventDelete,
 }: CombinedListViewProps) {
   type ListEntry =
     | { kind: 'training'; item: UebungListItem }
@@ -742,6 +754,18 @@ function CombinedListView({
                   </IconButton>
                 </Box>
               )}
+              {!isTraining && canWriteEvents && (
+                <Box sx={{ display: 'flex', gap: 0.5, ml: item.abgesagt ? 1 : 0 }}>
+                  <IconButton
+                    size="small"
+                    color="error"
+                    onClick={() => onEventDelete(item.id)}
+                    title="Endgültig löschen"
+                  >
+                    <DeleteForeverIcon fontSize="small" />
+                  </IconButton>
+                </Box>
+              )}
             </ListItem>
           </Box>
         );
@@ -1141,6 +1165,8 @@ export default function Kalender() {
   const [cancelEventId, setCancelEventId] = useState<string | null>(null);
   const [cancelEventGrund, setCancelEventGrund] = useState('');
   const [cancelEventLoading, setCancelEventLoading] = useState(false);
+  const [deleteEventId, setDeleteEventId] = useState<string | null>(null);
+  const [deleteEventLoading, setDeleteEventLoading] = useState(false);
 
   // ── Bookings tab state ───────────────────────────────────────────────────────
   const [currentWeekStart, setCurrentWeekStart] = useState<Date>(() =>
@@ -1326,6 +1352,21 @@ export default function Kalender() {
     }
   };
 
+  const handleDeleteEvent = async () => {
+    if (!deleteEventId) return;
+    setDeleteEventLoading(true);
+    try {
+      await eventsApi.deleteEvent(deleteEventId);
+      notification.showSuccess('Veranstaltung wurde endgültig gelöscht');
+      setDeleteEventId(null);
+      loadCalendarData();
+    } catch (e: unknown) {
+      notification.showError((e as any)?.message || 'Fehler beim Löschen');
+    } finally {
+      setDeleteEventLoading(false);
+    }
+  };
+
   // ── Booking helpers ──────────────────────────────────────────────────────────
 
   const getBookingsForCell = (vehicleId: string, day: Date): FahrzeugBuchungListItem[] =>
@@ -1642,6 +1683,7 @@ export default function Kalender() {
                     setCancelEventId(id);
                     setCancelEventGrund('');
                   }}
+                  onEventDelete={(id) => setDeleteEventId(id)}
                 />
               </Paper>
             )}
@@ -1673,6 +1715,7 @@ export default function Kalender() {
                 setVeranstEditing(ev);
                 setVeranstFormOpen(true);
               }}
+              onEventDelete={(id) => setDeleteEventId(id)}
             />
 
             {/* Veranstaltung Form Dialog */}
@@ -1720,6 +1763,34 @@ export default function Kalender() {
               </DialogActions>
             </Dialog>
 
+            {/* Endgültig löschen Dialog */}
+            <Dialog
+              open={Boolean(deleteEventId)}
+              onClose={() => setDeleteEventId(null)}
+              maxWidth="xs"
+              fullWidth
+            >
+              <DialogTitle>Veranstaltung endgültig löschen?</DialogTitle>
+              <DialogContent>
+                <DialogContentText>
+                  Diese Veranstaltung wird endgültig gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.
+                </DialogContentText>
+              </DialogContent>
+              <DialogActions>
+                <Button onClick={() => setDeleteEventId(null)} disabled={deleteEventLoading}>
+                  Abbrechen
+                </Button>
+                <Button
+                  variant="contained"
+                  color="error"
+                  onClick={handleDeleteEvent}
+                  disabled={deleteEventLoading}
+                >
+                  {deleteEventLoading ? <CircularProgress size={20} /> : 'Endgültig löschen'}
+                </Button>
+              </DialogActions>
+            </Dialog>
+
             {/* iCal Event subscription dialog */}
             <Dialog open={icalEventOpen} onClose={() => setIcalEventOpen(false)} maxWidth="sm" fullWidth>
               <DialogTitle>Kalender abonnieren</DialogTitle>