RHL-046 feat(profile): add support contact section with email link and update layout

components/profile/ChangePasswordCard.jsx

@@ -292,7 +292,7 @@ export default function ChangePasswordCard({ onPasswordChangeSuccess }) {
 						/>
 					</div>
 
-					<CardFooter className="p-0 flex justify-end">
+					<CardFooter className="p-0 flex justify-start">
 						<Button
 							type="submit"
 							disabled={!isAuthenticated || isSubmitting}

components/profile/ProfilePage.jsx

@@ -1,11 +1,15 @@
 "use client";
 
 import React from "react";
+import { usePathname } from "next/navigation";
+import { LifeBuoy } from "lucide-react";
 import { useAuth } from "@/components/auth/authContext";
 
 import ChangePasswordCard from "@/components/profile/ChangePasswordCard";
+import { buildSupportMailto } from "@/lib/frontend/support/supportMailto";
 
 import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardHeader,
@@ -23,8 +27,10 @@ function formatRole(role) {
 }
 
 export default function ProfilePage() {
+	const pathname = usePathname() || "/profile";
 	const { status, user } = useAuth();
-	const [passwordChangedSuccess, setPasswordChangedSuccess] = React.useState(false);
+	const [passwordChangedSuccess, setPasswordChangedSuccess] =
+		React.useState(false);
 
 	const isAuthenticated = status === "authenticated" && user;
 
@@ -32,7 +38,19 @@ export default function ProfilePage() {
 	const branchLabel = isAuthenticated ? user.branchId || "—" : "—";
 	const emailLabel = isAuthenticated ? user.email || "—" : "—";
 	const userIdLabel = isAuthenticated ? user.userId || "—" : "—";
-	const mustChangePassword = isAuthenticated && user.mustChangePassword === true;
+	const mustChangePassword =
+		isAuthenticated && user.mustChangePassword === true;
+	const currentUrl = typeof window !== "undefined" ? window.location.href : "";
+	const userAgent = typeof navigator !== "undefined" ? navigator.userAgent : "";
+
+	const supportMailto = React.useMemo(() => {
+		return buildSupportMailto({
+			user: isAuthenticated ? user : null,
+			pathname,
+			currentUrl,
+			userAgent,
+		});
+	}, [isAuthenticated, user, pathname, currentUrl, userAgent]);
 
 	React.useEffect(() => {
 		if (mustChangePassword) {
@@ -41,7 +59,7 @@ export default function ProfilePage() {
 	}, [mustChangePassword]);
 
 	return (
-		<div className="space-y-4">
+		<div className="space-y-4 w-1/2 mx-auto">
 			<div className="space-y-1">
 				<h1 className="text-2xl font-semibold tracking-tight">Profil</h1>
 				<p className="text-sm text-muted-foreground">
@@ -106,6 +124,27 @@ export default function ProfilePage() {
 				onPasswordChangeSuccess={() => setPasswordChangedSuccess(true)}
 			/>
 
+			<Card>
+				<CardHeader>
+					<CardTitle>Support</CardTitle>
+					<CardDescription>
+						Bei Fragen oder Problemen können Sie direkt den Support
+						kontaktieren.
+					</CardDescription>
+				</CardHeader>
+
+				<CardContent>
+					<div className="flex justify-start">
+						<Button variant="outline" asChild>
+							<a href={supportMailto}>
+								<LifeBuoy className="h-4 w-4" aria-hidden="true" />
+								Support kontaktieren
+							</a>
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+
 			{!isAuthenticated ? (
 				<p className="text-xs text-muted-foreground">
 					Hinweis: Profilfunktionen sind nur verfügbar, wenn Sie angemeldet