Add detailed statistics help

frontend/src/views/StatisticsPage.tsx

@@ -304,17 +304,22 @@ function MetricCard({
   value,
   detail,
   icon: Icon,
-  valueClassName = ""
+  valueClassName = "",
+  helpAnchor,
+  helpLabel
 }: {
   label: string;
   value: string | number;
   detail?: ReactNode;
   icon: LucideIcon;
   valueClassName?: string;
+  helpAnchor?: string;
+  helpLabel?: string;
 }) {
   return (
-    <Card>
-      <CardContent className="flex items-center gap-3 p-3">
+    <Card className="relative">
+      {helpAnchor ? <HelpLink anchor={helpAnchor} label={helpLabel ?? `Hilfe zu ${label}`} className="absolute right-2 top-2" /> : null}
+      <CardContent className="flex items-center gap-3 p-3 pr-10">
         <div className="grid size-8 shrink-0 place-items-center rounded-lg border bg-muted/40 text-muted-foreground">
           <Icon className="size-3.5" />
         </div>
@@ -496,6 +501,8 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
           detail={`${totals?.sessions ?? 0} Session(s), ${totals?.tickets ?? 0} Ticket(s)`}
           icon={Clock3}
           valueClassName={trackedTextClass}
+          helpAnchor="statistik-getrackt"
+          helpLabel="Hilfe zur Kennzahl Getrackt"
         />
         <MetricCard
           label="Teamspace"
@@ -503,6 +510,8 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
           detail={<span className={deltaTextClass(totals?.crmDeltaMinutes ?? 0)}>Differenz {formatTeamspaceDelta(totals?.crmDeltaMinutes ?? 0)}</span>}
           icon={TrendingUp}
           valueClassName={teamspaceTextClass}
+          helpAnchor="statistik-teamspace"
+          helpLabel="Hilfe zur Kennzahl Teamspace"
         />
         <MetricCard
           label="Bewertet"
@@ -515,6 +524,8 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
           }
           icon={ListChecks}
           valueClassName={evaluatedTextClass}
+          helpAnchor="statistik-bewertet"
+          helpLabel="Hilfe zur Kennzahl Bewertet"
         />
         <MetricCard
           label="Offen"
@@ -527,18 +538,20 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
           }
           icon={CircleAlert}
           valueClassName={openTextClass}
+          helpAnchor="statistik-offen"
+          helpLabel="Hilfe zur Kennzahl Offen"
         />
       </div>
 
       <Card>
-        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
           <div>
             <CardTitle>Monatsverlauf und Abrechnungsqualität</CardTitle>
             <CardDescription>Getrackter Aufwand pro Tag, Teamspace-Linie und Bewertungsstand in einem Überblick.</CardDescription>
           </div>
           <div className="flex items-center gap-2">
             <Badge variant="outline">{crmCoverage}% Teamspace-Abdeckung</Badge>
-            <HelpLink anchor="statistiken" label="Hilfe zu Statistiken" />
+            <HelpLink anchor="statistik-verlauf" label="Hilfe zu Monatsverlauf und Abrechnungsqualität" />
           </div>
         </CardHeader>
         <CardContent className="grid gap-4 px-4 pb-4 xl:grid-cols-[1.55fr_1fr]">
@@ -612,7 +625,7 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
 
       <div className="grid gap-3 xl:grid-cols-[1.45fr_0.8fr]">
         <Card>
-          <CardHeader className="gap-3 p-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+          <CardHeader className="gap-3 p-4 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
             <div>
               <CardTitle>Statistik pro Organisation</CardTitle>
               <CardDescription>Kundenaufwand inklusive Teamspace-Differenz und Anteil am getrackten Monatsaufwand.</CardDescription>
@@ -621,7 +634,7 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
               <Badge variant="outline">
                 {organizationRangeStart}-{organizationRangeEnd} von {stats?.organizations.length ?? 0}
               </Badge>
-              <HelpLink anchor="statistiken" label="Hilfe zur Organisationsstatistik" />
+              <HelpLink anchor="statistik-organisationen" label="Hilfe zur Organisationsstatistik" />
             </div>
           </CardHeader>
           <CardContent className="px-4 pb-4">
@@ -714,7 +727,7 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
                 <CardTitle>Typen</CardTitle>
                 <CardDescription>Support und Consulting im direkten Vergleich.</CardDescription>
               </div>
-              <HelpLink anchor="statistiken" label="Hilfe zu Typenstatistiken" />
+              <HelpLink anchor="statistik-typen" label="Hilfe zu Typenstatistiken" />
             </div>
           </CardHeader>
           <CardContent className="space-y-3 px-4 pb-4">
@@ -745,17 +758,17 @@ export function StatisticsPage({ onNavigate }: StatisticsPageProps) {
       </div>
 
       <Card>
-        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
+        <CardHeader className="gap-3 p-4 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
           <div>
             <CardTitle>Ticket-Hotspots</CardTitle>
             <CardDescription>Die größten Zeitblöcke im Monat.</CardDescription>
           </div>
           <div className="flex items-center gap-2">
-            <HelpLink anchor="statistiken" label="Hilfe zu Ticket-Hotspots" />
             <Button variant="secondary" size="sm" onClick={() => onNavigate("/analysis")}>
               Auswertung öffnen
               <ExternalLink className="size-4" />
             </Button>
+            <HelpLink anchor="statistik-hotspots" label="Hilfe zu Ticket-Hotspots" />
           </div>
         </CardHeader>
         <CardContent className="space-y-2 px-4 pb-4">

frontend/src/views/TicketDetailPage.tsx

@@ -550,7 +550,6 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate }: T
             <CardDescription>Wähle für jede Session genau eine Bewertung aus oder lösche falsche Einträge.</CardDescription>
           </div>
           <div className="flex flex-wrap items-center gap-2">
-            <HelpLink anchor="ticketdetail" label="Hilfe zur Ticketdetailansicht" />
             <div className="flex items-center gap-2 rounded-md border bg-muted/30 px-3 py-2 text-sm">
               <span className="text-muted-foreground">{periodLabel} gesamt</span>
               <span className="font-semibold">{formatMinutes(periodTotalMinutes)}</span>
@@ -559,6 +558,7 @@ export function TicketDetailPage({ periodType, period, ticketId, onNavigate }: T
               <span className="text-muted-foreground">{periodType === "month" ? "Teamspace gesamt" : "Teamspace Tag"}</span>
               <span className="font-semibold">{formatMinutes(periodTeamspaceMinutes)}</span>
             </div>
+            <HelpLink anchor="ticketdetail" label="Hilfe zur Ticketdetailansicht" />
           </div>
         </CardHeader>
         <CardContent className="px-4 pb-4">