resolve issues with new features

frontend/src/components/atemschutz/AtemschutzDashboardCard.tsx

@@ -12,6 +12,7 @@ import {
 import { Link as RouterLink } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { atemschutzApi } from '../../services/atemschutz';
+import { useCountUp } from '../../hooks/useCountUp';
 import type { AtemschutzStats } from '../../types/atemschutz.types';
 
 interface AtemschutzDashboardCardProps {
@@ -26,6 +27,9 @@ const AtemschutzDashboardCard: React.FC<AtemschutzDashboardCardProps> = ({
     queryFn: () => atemschutzApi.getStats(),
   });
 
+  const animatedReady = useCountUp(stats?.einsatzbereit ?? 0);
+  const animatedTotal = useCountUp(stats?.total ?? 0);
+
   if (isLoading) {
     return (
       <Card>
@@ -72,7 +76,7 @@ const AtemschutzDashboardCard: React.FC<AtemschutzDashboardCardProps> = ({
 
         {/* Main metric */}
         <Typography variant="h4" fontWeight={700} color={allGood ? 'success.main' : 'text.primary'}>
-          {stats.einsatzbereit}/{stats.total}
+          {animatedReady}/{animatedTotal}
         </Typography>
         <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
           einsatzbereit