feat: add Anleitung page with step-by-step guides for all portal features

New guide page accessible via sidebar with accordion-based instructions
covering Dashboard, Cases, ICD input, Disclosures, Reports, Weekly
Overview, and Account management. Includes a glossary of key terms.

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

docs/plans/2026-02-28-anleitung-page-design.md

@@ -0,0 +1,39 @@
+# Design: Anleitungsseite für DAK-Portal
+
+## Zusammenfassung
+
+Statische Anleitungsseite (`/anleitung`) mit Akkordeon-basierten Schritt-für-Schritt-Anleitungen für alle wichtigen Funktionen des DAK-Portals. Sichtbar für alle eingeloggten Benutzer.
+
+## Dateien
+
+| Datei | Änderung |
+|-------|----------|
+| `frontend/src/pages/AnleitungPage.tsx` | Neue Seite |
+| `frontend/src/components/layout/Sidebar.tsx` | Neuer NavItem-Eintrag |
+| `frontend/src/App.tsx` | Route hinzufügen |
+
+## Sidebar-Eintrag
+
+- Position: In `accountNavItems`, nach "Meine Freigaben"
+- Icon: `BookOpen` (lucide-react)
+- Kein `adminOnly`/`mitarbeiterOnly` — für alle sichtbar
+
+## Seitenstruktur
+
+Header + 8 Akkordeon-Abschnitte:
+
+1. Dashboard verstehen
+2. Fälle suchen und filtern
+3. Falldetails anzeigen
+4. ICD-Codes eingeben
+5. Personendaten anfordern (Freigaben)
+6. Berichte herunterladen
+7. Wochenübersicht & ICD-Upload
+8. Konto & Sicherheit
+
+## Komponenten
+
+- shadcn/ui `Accordion` (bereits vorhanden)
+- shadcn/ui `Card` als Container
+- shadcn/ui `Badge` für Fachbegriffe
+- lucide-react Icons als visuelle Orientierung

frontend/src/App.tsx

@@ -20,6 +20,7 @@ import { AccountPage } from '@/pages/AccountPage'
 import { GutachtenStatistikPage } from '@/pages/GutachtenStatistikPage'
 import { MyDisclosuresPage } from '@/pages/MyDisclosuresPage'
 import { WochenuebersichtPage } from '@/pages/WochenuebersichtPage'
+import { AnleitungPage } from '@/pages/AnleitungPage'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -52,6 +53,7 @@ function App() {
               <Route path="gutachten-statistik" element={<GutachtenStatistikPage />} />
               <Route path="account" element={<AccountPage />} />
               <Route path="disclosures" element={<MyDisclosuresPage />} />
+              <Route path="anleitung" element={<AnleitungPage />} />
               <Route path="admin/users" element={<ProtectedRoute requireAdmin><AdminUsersPage /></ProtectedRoute>} />
               <Route path="admin/invitations" element={<ProtectedRoute requireAdmin><AdminInvitationsPage /></ProtectedRoute>} />
               <Route path="admin/audit" element={<ProtectedRoute requireAdmin><AdminAuditPage /></ProtectedRoute>} />

frontend/src/components/layout/Sidebar.tsx

@@ -20,6 +20,7 @@ import {
   History,
   UserCog,
   ShieldCheck,
+  BookOpen,
   Scale,
   ShieldAlert,
 } from 'lucide-react'
@@ -45,6 +46,7 @@ const mainNavItems: NavItem[] = [
 const accountNavItems: NavItem[] = [
   { label: 'Kontoverwaltung', to: '/account', icon: UserCog },
   { label: 'Meine Freigaben', to: '/disclosures', icon: ShieldCheck, mitarbeiterOnly: true },
+  { label: 'Anleitung', to: '/anleitung', icon: BookOpen },
 ]
 
 const adminNavItems: NavItem[] = [

frontend/src/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

frontend/src/pages/AnleitungPage.tsx

@@ -0,0 +1,376 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import {
+  LayoutDashboard,
+  Search,
+  FileText,
+  Stethoscope,
+  ShieldCheck,
+  FileBarChart,
+  FileOutput,
+  UserCog,
+} from 'lucide-react'
+
+function Term({ children }: { children: React.ReactNode }) {
+  return <Badge variant="secondary" className="font-mono text-xs">{children}</Badge>
+}
+
+function StepList({ children }: { children: React.ReactNode }) {
+  return <ol className="list-decimal list-inside space-y-2 text-sm leading-relaxed">{children}</ol>
+}
+
+export function AnleitungPage() {
+  return (
+    <div className="p-6 space-y-6 max-w-4xl">
+      <div>
+        <h1 className="text-2xl font-bold">Anleitung</h1>
+        <p className="text-muted-foreground mt-1">
+          So nutzen Sie das DAK-Portal — Schritt-für-Schritt-Anleitungen für die wichtigsten Funktionen.
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-lg">Funktionsübersicht</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Accordion type="multiple" className="w-full">
+            {/* 1. Dashboard */}
+            <AccordionItem value="dashboard">
+              <AccordionTrigger className="text-left">
+                <span className="flex items-center gap-2">
+                  <LayoutDashboard className="h-4 w-4 text-primary shrink-0" />
+                  Dashboard verstehen
+                </span>
+              </AccordionTrigger>
+              <AccordionContent className="space-y-3 text-sm leading-relaxed">
+                <p>
+                  Das Dashboard zeigt Ihnen eine Übersicht der wichtigsten Kennzahlen und Trends
+                  auf einen Blick.
+                </p>
+                <h4 className="font-semibold">Kennzahlen (KPI-Karten)</h4>
+                <ul className="list-disc list-inside space-y-1">
+                  <li><strong>Fälle gesamt</strong> — Gesamtzahl aller erfassten Fälle im gewählten Jahr. Klicken Sie darauf, um zur Fallliste zu navigieren.</li>
+                  <li><strong>Offene ICD</strong> — Fälle, denen noch ein <Term>ICD-10</Term> Diagnosecode zugewiesen werden muss. Klick führt zur ICD-Eingabe.</li>
+                  <li><strong>Gutachten gesamt</strong> — Anzahl der Fälle mit erstelltem medizinischem Gutachten.</li>
+                </ul>
+                <h4 className="font-semibold">Diagramme</h4>
+                <ul className="list-disc list-inside space-y-1">
+                  <li><strong>Wöchentliche Übersicht</strong> — Balkendiagramm mit Ablehnungen, fehlenden Rückmeldungen und Gutachten pro Kalenderwoche.</li>
+                  <li><strong>Fallgruppen</strong> — Kreisdiagramm mit der Verteilung der Fälle nach medizinischer Fachgruppe (Onkologie, Kardiologie, Intensivmedizin, Gallenblase, Schilddrüse).</li>
+                </ul>
+                <h4 className="font-semibold">Jahresfilter</h4>
+                <p>
+                  Über das Dropdown oben rechts können Sie das Jahr wechseln. Alle Kennzahlen und Diagramme
+                  passen sich automatisch an.
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* 2. Fälle suchen */}
+            <AccordionItem value="cases-search">
+              <AccordionTrigger className="text-left">
+                <span className="flex items-center gap-2">
+                  <Search className="h-4 w-4 text-primary shrink-0" />
+                  Fälle suchen und filtern
+                </span>
+              </AccordionTrigger>
+              <AccordionContent className="space-y-3 text-sm leading-relaxed">
+                <p>
+                  Auf der Seite <strong>Fälle</strong> sehen Sie alle erfassten Fälle in einer Tabelle.
+                  Nutzen Sie die Filter, um gezielt Fälle zu finden.
+                </p>
+                <h4 className="font-semibold">Verfügbare Filter</h4>
+                <ul className="list-disc list-inside space-y-1">
+                  <li><strong>Suchfeld</strong> — Suche nach <Term>Fall-ID</Term> oder <Term>KVNR</Term> (Krankenversichertennummer).</li>
+                  <li><strong>Jahr</strong> — Filtert Fälle nach Erfassungsjahr.</li>
+                  <li><strong>Fallgruppe</strong> — Filtert nach medizinischer Fachgruppe (z.B. Onkologie, Kardiologie).</li>
+                  <li><strong>ICD-Filter</strong> — Zeigt alle Fälle, nur Fälle mit ICD-Code oder nur Fälle ohne ICD-Code.</li>
+                </ul>
+                <h4 className="font-semibold">Tabellenspalten</h4>
+                <ul className="list-disc list-inside space-y-1">
+                  <li><Term>Fall-ID</Term> — Eindeutige Kennung im Format Jahr-KW-Fallgruppe-KVNR (z.B. 2026-06-onko-A123456789).</li>
+                  <li><Term>KVNR</Term> — Krankenversichertennummer des Versicherten.</li>
+                  <li><Term>ICD</Term> — ICD-10-Diagnosecode, falls bereits zugewiesen.</li>
+                  <li><strong>Gutachten</strong> — Grüner Haken wenn ein Gutachten vorliegt, graues X wenn nicht.</li>
+                  <li><strong>Status</strong> — Farbige Badges zeigen den Bearbeitungsstatus (Unterlagen, Gutachten, Abgerechnet, Abgelehnt, Abbruch).</li>
+                </ul>
+                <StepList>
+                  <li>Geben Sie einen Suchbegriff ein oder wählen Sie einen Filter aus.</li>
+                  <li>Die Tabelle aktualisiert sich automatisch.</li>
+                  <li>Blättern Sie mit <strong>Zurück</strong> / <strong>Weiter</strong> durch die Seiten.</li>
+                  <li>Klicken Sie auf eine Zeile, um die Falldetails zu öffnen.</li>
+                </StepList>
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* 3. Falldetails */}
+            <AccordionItem value="case-detail">
+              <AccordionTrigger className="text-left">
+                <span className="flex items-center gap-2">
+                  <FileText className="h-4 w-4 text-primary shrink-0" />
+                  Falldetails anzeigen
+                </span>
+              </AccordionTrigger>
+              <AccordionContent className="space-y-3 text-sm leading-relaxed">
+                <p>
+                  Wenn Sie auf einen Fall klicken, öffnet sich ein Detail-Panel auf der rechten Seite
+                  mit allen verfügbaren Informationen zum Fall.
+                </p>
+                <h4 className="font-semibold">Sichtbare Informationen</h4>
+                <ul className="list-disc list-inside space-y-1">
+                  <li><strong>Fall-ID</strong> und <strong>CRM-Ticket-ID</strong> — Eindeutige Kennungen.</li>
+                  <li><strong>Datum</strong>, <strong>Kalenderwoche</strong> und <strong>Jahr</strong> — Zeitliche Einordnung.</li>
+                  <li><strong>Status-Badges</strong> — Aktueller Bearbeitungsstatus mit farbigen Markierungen.</li>
+                  <li><strong>ICD-Code</strong> — Eingabefeld zum Zuweisen eines Diagnosecodes.</li>
+                </ul>
+                <h4 className="font-semibold">Personendaten</h4>
+                <p>
+                  Aus Datenschutzgründen sind Personendaten (Name, Geburtsdatum, Adresse) standardmäßig
+                  <strong> nicht sichtbar</strong>. Sie können eine zeitlich begrenzte Freigabe beantragen
+                  (siehe Abschnitt „Personendaten anfordern").
+                </p>
+                <h4 className="font-semibold">KVNR bearbeiten</h4>
+                <StepList>
+                  <li>Klicken Sie auf <strong>Bearbeiten</strong> im Detail-Panel.</li>
+                  <li>Ändern Sie die <Term>KVNR</Term> im entsprechenden Feld.</li>
+                  <li>Klicken Sie auf <strong>Speichern</strong>. Die Fall-ID wird automatisch aktualisiert.</li>
+                </StepList>
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* 4. ICD-Codes */}
+            <AccordionItem value="icd">
+              <AccordionTrigger className="text-left">
+                <span className="flex items-center gap-2">
+                  <Stethoscope className="h-4 w-4 text-primary shrink-0" />
+                  ICD-Codes eingeben
+                </span>
+              </AccordionTrigger>
+              <AccordionContent className="space-y-3 text-sm leading-relaxed">
+                <p>
+                  Die Seite <strong>ICD-Eingabe</strong> zeigt nur Fälle, denen noch kein
+                  <Term>ICD-10</Term> Diagnosecode zugewiesen wurde. Hier können Sie
+                  effizient alle offenen Fälle abarbeiten.
+                </p>
+                <h4 className="font-semibold">Was ist ein ICD-Code?</h4>
+                <p>
+                  <Term>ICD-10-GM</Term> ist die „Internationale statistische Klassifikation der Krankheiten
+                  und verwandter Gesundheitsprobleme". Beispiele: <Term>C50.9</Term> (Bösartige Neubildung
+                  der Brustdrüse), <Term>I25.1</Term> (Atherosklerotische Herzkrankheit).
+                </p>
+                <h4 className="font-semibold">ICD-Code zuweisen</h4>
+                <StepList>
+                  <li>Öffnen Sie die Seite <strong>ICD-Eingabe</strong> über die Sidebar.</li>
+                  <li>Klicken Sie auf einen Fall in der Liste.</li>
+                  <li>Im Detail-Panel finden Sie das Feld <strong>ICD-Code</strong>.</li>
+                  <li>Geben Sie den Diagnosecode ein (z.B. <Term>C50.9</Term>).</li>
+                  <li>Klicken Sie auf <strong>Speichern</strong>. Der Fall verschwindet aus der offenen Liste.</li>
+                </StepList>
+                <h4 className="font-semibold">Alternativer Weg: ICD-Upload</h4>
+                <p>
+                  Wenn Sie viele ICD-Codes auf einmal einpflegen möchten, nutzen Sie den
+                  Upload-Bereich auf der Seite <strong>Wochenübersicht</strong> (siehe Abschnitt weiter unten).
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* 5. Freigaben */}
+            <AccordionItem value="disclosures">
+              <AccordionTrigger className="text-left">
+                <span className="flex items-center gap-2">
+                  <ShieldCheck className="h-4 w-4 text-primary shrink-0" />
+                  Personendaten anfordern (Freigaben)
+                </span>
+              </AccordionTrigger>
+              <AccordionContent className="space-y-3 text-sm leading-relaxed">
+                <p>
+                  Zum Schutz der Patientendaten sind Personendaten (Name, Geburtsdatum, Kontaktdaten)
+                  standardmäßig ausgeblendet. Wenn Sie diese Daten benötigen, können Sie eine
+                  <strong> zeitlich begrenzte Freigabe</strong> beantragen.
+                </p>
+                <h4 className="font-semibold">Freigabe beantragen</h4>
+                <StepList>
+                  <li>Öffnen Sie die <strong>Falldetails</strong> eines Falls.</li>
+                  <li>Klicken Sie auf <strong>Personendaten anfordern</strong>.</li>
+                  <li>Geben Sie eine <strong>Begründung</strong> an (z.B. „KVNR-Fehler, Identifikation nötig").</li>
+                  <li>Senden Sie die Anfrage ab. Ein Administrator prüft Ihre Anfrage.</li>
+                </StepList>
+                <h4 className="font-semibold">Status Ihrer Freigaben</h4>
+                <p>
+                  Auf der Seite <strong>Meine Freigaben</strong> in der Sidebar sehen Sie alle Ihre Anfragen:
+                </p>
+                <ul className="list-disc list-inside space-y-1">
+                  <li><Badge className="bg-yellow-100 text-yellow-800 hover:bg-yellow-100">Ausstehend</Badge> — Ihre Anfrage wird vom Administrator geprüft.</li>
+                  <li><Badge className="bg-green-100 text-green-800 hover:bg-green-100">Genehmigt</Badge> — Personendaten sind <strong>24 Stunden</strong> sichtbar.</li>
+                  <li><Badge className="bg-red-100 text-red-800 hover:bg-red-100">Abgelehnt</Badge> — Der Administrator hat Ihre Anfrage abgelehnt.</li>
+                  <li><Badge className="bg-gray-100 text-gray-800 hover:bg-gray-100">Abgelaufen</Badge> — Die 24-Stunden-Frist ist abgelaufen.</li>
+                </ul>
+                <h4 className="font-semibold">Weitere Aktionen</h4>
+                <ul className="list-disc list-inside space-y-1">
+                  <li><strong>Als erledigt markieren</strong> — Freigabe vorzeitig beenden, Personendaten werden wieder ausgeblendet.</li>
+                  <li><strong>Erneute Anfrage</strong> — Bei Ablehnung oder Ablauf können Sie eine neue Anfrage mit geänderter Begründung stellen.</li>
+                  <li><strong>Verwerfen</strong> — Abgelehnte oder abgelaufene Anfragen aus Ihrer Liste entfernen.</li>
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* 6. Berichte */}
+            <AccordionItem value="reports">
+              <AccordionTrigger className="text-left">
+                <span className="flex items-center gap-2">
+                  <FileBarChart className="h-4 w-4 text-primary shrink-0" />
+                  Berichte herunterladen
+                </span>
+              </AccordionTrigger>
+              <AccordionContent className="space-y-3 text-sm leading-relaxed">
+                <p>
+                  Auf der Seite <strong>Berichte</strong> finden Sie fertige Auswertungen, die als
+                  Excel-Datei heruntergeladen werden können.
+                </p>
+                <h4 className="font-semibold">Verfügbare Berichtstypen</h4>
+                <ul className="list-disc list-inside space-y-1">
+                  <li><strong>Gesamt</strong> — Gesamtauswertung über alle Fallgruppen.</li>
+                  <li><strong>Onko-Intensiv</strong> — Auswertung für Onkologie und Intensivmedizin.</li>
+                  <li><strong>Galle-Schild</strong> — Auswertung für Gallenblase und Schilddrüse.</li>
+                </ul>
+                <h4 className="font-semibold">Bericht herunterladen</h4>
+                <StepList>
+                  <li>Öffnen Sie die Seite <strong>Berichte</strong> über die Sidebar.</li>
+                  <li>Finden Sie den gewünschten Bericht in der Tabelle (nach Datum, KW und Typ).</li>
+                  <li>Klicken Sie auf das <strong>Download-Symbol</strong> rechts in der Zeile.</li>
+                  <li>Die Excel-Datei (.xlsx) wird heruntergeladen.</li>
+                </StepList>
+                <h4 className="font-semibold">Vorschau</h4>
+                <p>
+                  Klicken Sie auf eine Zeile, um eine Vorschau der Berichtsdaten direkt im Browser anzuzeigen,
+                  ohne die Datei herunterladen zu müssen.
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* 7. Wochenübersicht */}
+            <AccordionItem value="weekly">
+              <AccordionTrigger className="text-left">
+                <span className="flex items-center gap-2">
+                  <FileOutput className="h-4 w-4 text-primary shrink-0" />
+                  Wochenübersicht & ICD-Upload
+                </span>
+              </AccordionTrigger>
+              <AccordionContent className="space-y-3 text-sm leading-relaxed">
+                <p>
+                  Die <strong>Wochenübersicht</strong> dient dem Austausch von Falldaten zwischen dem
+                  Portal und der DAK. Excel-Dateien mit Falldaten pro Kalenderwoche können heruntergeladen
+                  und nach Ergänzung der ICD-Codes wieder hochgeladen werden.
+                </p>
+                <h4 className="font-semibold">Wochenübersicht herunterladen</h4>
+                <StepList>
+                  <li>Öffnen Sie <strong>Wochenübersicht</strong> in der Sidebar.</li>
+                  <li>Finden Sie die gewünschte Übersicht in der Tabelle.</li>
+                  <li>Klicken Sie auf das <strong>Download-Symbol</strong>.</li>
+                  <li>Die Excel-Datei enthält Fälle mit <Term>KVNR</Term>, Datum, Status-Flags und eine leere ICD-Spalte.</li>
+                </StepList>
+                <h4 className="font-semibold">ICD-Codes per Upload einpflegen</h4>
+                <p>
+                  Wenn Sie die heruntergeladene Datei mit ICD-Codes ergänzt haben, können Sie sie wieder
+                  hochladen. Das System ordnet die Codes automatisch anhand der <Term>KVNR</Term> zu.
+                </p>
+                <StepList>
+                  <li>Scrollen Sie zum Bereich <strong>ICD-Codes importieren</strong>.</li>
+                  <li>Ziehen Sie die Excel-Datei in den Upload-Bereich oder klicken Sie auf <strong>Datei auswählen</strong>.</li>
+                  <li>Unterstützte Formate: <Term>.xlsx</Term> und <Term>.xls</Term>.</li>
+                  <li>Klicken Sie auf <strong>Hochladen</strong>.</li>
+                  <li>Nach dem Upload sehen Sie eine Zusammenfassung: Anzahl aktualisierter Codes und eventuelle Fehler.</li>
+                </StepList>
+                <h4 className="font-semibold">Fehlerbehandlung</h4>
+                <p>
+                  Falls einzelne Zeilen nicht zugeordnet werden können (z.B. unbekannte KVNR), wird eine
+                  Fehlerliste angezeigt. Klicken Sie auf <strong>Details</strong>, um die einzelnen Fehlermeldungen
+                  einzusehen.
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* 8. Konto */}
+            <AccordionItem value="account">
+              <AccordionTrigger className="text-left">
+                <span className="flex items-center gap-2">
+                  <UserCog className="h-4 w-4 text-primary shrink-0" />
+                  Konto & Sicherheit
+                </span>
+              </AccordionTrigger>
+              <AccordionContent className="space-y-3 text-sm leading-relaxed">
+                <p>
+                  Unter <strong>Kontoverwaltung</strong> in der Sidebar können Sie Ihr Profil,
+                  Ihr Passwort und die Zwei-Faktor-Authentifizierung verwalten.
+                </p>
+                <h4 className="font-semibold">Profil bearbeiten</h4>
+                <StepList>
+                  <li>Öffnen Sie <strong>Kontoverwaltung</strong> und wählen Sie den Tab <strong>Profil</strong>.</li>
+                  <li>Ändern Sie Name, Anzeigename, Benutzername oder E-Mail.</li>
+                  <li>Optional: Laden Sie ein Profilbild hoch (JPEG oder PNG).</li>
+                  <li>Klicken Sie auf <strong>Speichern</strong>.</li>
+                </StepList>
+                <h4 className="font-semibold">Passwort ändern</h4>
+                <StepList>
+                  <li>Wechseln Sie zum Tab <strong>Sicherheit</strong>.</li>
+                  <li>Geben Sie Ihr <strong>aktuelles Passwort</strong> ein.</li>
+                  <li>Geben Sie das <strong>neue Passwort</strong> ein und bestätigen Sie es. Mindestlänge: 8 Zeichen.</li>
+                  <li>Klicken Sie auf <strong>Passwort ändern</strong>.</li>
+                </StepList>
+                <h4 className="font-semibold">Zwei-Faktor-Authentifizierung (2FA)</h4>
+                <p>
+                  2FA bietet zusätzlichen Schutz für Ihr Konto. Nach der Aktivierung benötigen Sie
+                  neben Ihrem Passwort einen 6-stelligen Code aus einer Authenticator-App.
+                </p>
+                <StepList>
+                  <li>Wechseln Sie zum Tab <strong>Zwei-Faktor</strong>.</li>
+                  <li>Klicken Sie auf <strong>2FA aktivieren</strong>.</li>
+                  <li>Scannen Sie den angezeigten <strong>QR-Code</strong> mit Ihrer Authenticator-App (z.B. Google Authenticator, Authy).</li>
+                  <li>Geben Sie den 6-stelligen Code aus der App ein und klicken Sie auf <strong>Bestätigen</strong>.</li>
+                </StepList>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </CardContent>
+      </Card>
+
+      {/* Glossary */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-lg">Glossar — Wichtige Begriffe</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm">
+            <dt><Term>Fall-ID</Term></dt>
+            <dd>Eindeutige Kennung eines Falls im Format Jahr-KW-Fallgruppe-KVNR.</dd>
+
+            <dt><Term>KVNR</Term></dt>
+            <dd>Krankenversichertennummer — die eindeutige Nummer des Versicherten bei der DAK.</dd>
+
+            <dt><Term>ICD-10</Term></dt>
+            <dd>Internationale Klassifikation der Krankheiten, 10. Revision, German Modification. Beispiel: C50.9.</dd>
+
+            <dt><Term>Fallgruppe</Term></dt>
+            <dd>Medizinische Fachgruppe: Onkologie, Kardiologie, Intensivmedizin, Gallenblase oder Schilddrüse.</dd>
+
+            <dt><Term>Gutachten</Term></dt>
+            <dd>Schriftliche medizinische Stellungnahme eines Facharztes zu einem Fall.</dd>
+
+            <dt><Term>KW</Term></dt>
+            <dd>Kalenderwoche — ISO-Wochennummer (1–53) zur zeitlichen Einordnung von Fällen.</dd>
+
+            <dt><Term>Freigabe</Term></dt>
+            <dd>Zeitlich begrenzte (24h) Genehmigung zur Einsicht in Personendaten eines Falls.</dd>
+          </dl>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}