feat: add Impressum and Datenschutz links in sidebar

Legal links at sidebar footer open content in an iframe dialog,
keeping users within the portal instead of navigating away.

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

frontend/src/components/layout/Sidebar.tsx

@@ -1,7 +1,11 @@
+import { useState } from 'react'
 import { NavLink } from 'react-router-dom'
 import { useAuth } from '@/context/AuthContext'
 import { cn } from '@/lib/utils'
 import { Separator } from '@/components/ui/separator'
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle,
+} from '@/components/ui/dialog'
 import dakLogo from '@/assets/DAK_Best-Practice-768x768.png'
 import {
   LayoutDashboard,
@@ -16,6 +20,8 @@ import {
   History,
   UserCog,
   ShieldCheck,
+  Scale,
+  ShieldAlert,
 } from 'lucide-react'
 
 interface NavItem {
@@ -68,8 +74,14 @@ function NavItemLink({ item }: { item: NavItem }) {
   )
 }
 
+const legalLinks = [
+  { label: 'Impressum', icon: Scale, url: 'https://complexcaresolutions.de/impressum/' },
+  { label: 'Datenschutz', icon: ShieldAlert, url: 'https://www.complexcaresolutions.de/datenschutzerklaerung/' },
+]
+
 export function Sidebar({ className }: { className?: string }) {
   const { user, isAdmin } = useAuth()
+  const [legalDialog, setLegalDialog] = useState<{ title: string; url: string } | null>(null)
 
   const filterItems = (items: NavItem[]) =>
     items.filter((item) => {
@@ -82,6 +94,7 @@ export function Sidebar({ className }: { className?: string }) {
   const visibleAccountItems = filterItems(accountNavItems)
 
   return (
+    <>
       <aside className={cn('flex h-full flex-col gap-4 p-4', className)}>
         <NavLink to="/dashboard" className="flex items-center justify-center px-3 py-2">
           <img src={dakLogo} alt="DAK Gesundheit" className="h-18 w-auto" />
@@ -115,6 +128,38 @@ export function Sidebar({ className }: { className?: string }) {
             </nav>
           </>
         )}
+
+        {/* Legal footer — pushed to bottom */}
+        <div className="mt-auto">
+          <Separator />
+          <nav className="flex flex-col gap-0.5 pt-2">
+            {legalLinks.map(({ label, icon: Icon, url }) => (
+              <button
+                key={label}
+                onClick={() => setLegalDialog({ title: label, url })}
+                className="flex items-center gap-3 rounded-lg px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors text-left"
+              >
+                <Icon className="h-3.5 w-3.5 shrink-0" />
+                <span>{label}</span>
+              </button>
+            ))}
+          </nav>
+        </div>
       </aside>
+
+      {/* Legal content dialog */}
+      <Dialog open={!!legalDialog} onOpenChange={(open) => { if (!open) setLegalDialog(null) }}>
+        <DialogContent className="max-w-4xl h-[85vh] flex flex-col p-0">
+          <DialogHeader className="px-6 pt-6 pb-2">
+            <DialogTitle>{legalDialog?.title}</DialogTitle>
+          </DialogHeader>
+          <iframe
+            src={legalDialog?.url}
+            className="flex-1 w-full border-0 rounded-b-lg"
+            title={legalDialog?.title}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }