From 91d3e61b0ede9980962a5010d6f545c9406d32a3 Mon Sep 17 00:00:00 2001
From: Codex Agent <codex-agent@example.com>
Date: Wed, 19 Nov 2025 13:30:42 +0100
Subject: [PATCH] =?UTF-8?q?weitere=20=C3=BCbersetzungen=20erg=C3=A4nzt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/lang/de/marketing.json             |  1 +
 public/lang/en/marketing.json             |  1 +
 resources/js/pages/marketing/Packages.tsx | 41 ++++++++++++++++-------
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/public/lang/de/marketing.json b/public/lang/de/marketing.json
index 0a13fca..cf2ae10 100644
--- a/public/lang/de/marketing.json
+++ b/public/lang/de/marketing.json
@@ -175,6 +175,7 @@
     "limits_label_hint": "Alle Kennzahlen auf einen Blick – ideal für Planung und Freigaben.",
     "for_endcustomers": "Für Endkunden",
     "for_resellers": "Für Reseller",
+    "view_details": "Details ansehen",
     "details_show": "Details anzeigen",
     "comparison_title": "Packages vergleichen",
     "comparison_subtitle": "Alle Limits und Features auf einen Blick.",
diff --git a/public/lang/en/marketing.json b/public/lang/en/marketing.json
index 0c06654..e9562a4 100644
--- a/public/lang/en/marketing.json
+++ b/public/lang/en/marketing.json
@@ -162,6 +162,7 @@
     "limits_label_hint": "Understand the exact limits for planning and approvals.",
     "for_endcustomers": "For End Customers",
     "for_resellers": "For Resellers",
+    "view_details": "View details",
     "details_show": "Show Details",
     "comparison_title": "Compare Packages",
     "comparison_subtitle": "Every limit and feature side by side.",
diff --git a/resources/js/pages/marketing/Packages.tsx b/resources/js/pages/marketing/Packages.tsx
index abf6a7a..e2e49ff 100644
--- a/resources/js/pages/marketing/Packages.tsx
+++ b/resources/js/pages/marketing/Packages.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useRef, useLayoutEffect } from 'react';
 import { Head, Link, usePage } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
@@ -210,6 +210,8 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
   const [open, setOpen] = useState(false);
   const [selectedPackage, setSelectedPackage] = useState<Package | null>(null);
   const [currentStep, setCurrentStep] = useState<'overview' | 'testimonials'>('overview');
+  const dialogScrollRef = useRef<HTMLDivElement | null>(null);
+  const dialogHeadingRef = useRef<HTMLDivElement | null>(null);
   const { props } = usePage();
   const { auth } = props as any;
   const { t } = useTranslation('marketing');
@@ -233,6 +235,12 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
     }
   }, [endcustomerPackages, resellerPackages]);
 
+  useLayoutEffect(() => {
+    if (open && dialogScrollRef.current) {
+      dialogScrollRef.current.scrollTo({ top: 0 });
+    }
+  }, [open, selectedPackage]);
+
 
   const testimonials = [
     { name: tCommon('testimonials.anna.name'), text: t('packages.testimonials.anna'), rating: 5 },
@@ -665,17 +673,26 @@ function PackageCard({
       {/* Modal */}
       {selectedPackage && (
         <Dialog open={open} onOpenChange={setOpen}>
-          <DialogContent className="max-w-6xl border border-gray-100 bg-white px-0 py-0 sm:rounded-[32px]">
-            <div className="max-h-[88vh] overflow-y-auto space-y-8 p-6 md:p-10">
-              <DialogHeader className="space-y-3 text-left">
-                <p className="text-xs font-semibold uppercase tracking-[0.3em] text-gray-400">
-                  {selectedVariant === 'reseller' ? t('packages.subscription') : t('packages.one_time')}
-                </p>
-                <DialogTitle className="text-3xl font-display text-gray-900">
-                  {selectedPackage.name}
-                </DialogTitle>
-                <p className="text-base text-gray-600">{selectedPackage.description}</p>
-              </DialogHeader>
+          <DialogContent
+            className="max-w-6xl border border-gray-100 bg-white px-0 py-0 sm:rounded-[32px]"
+            onOpenAutoFocus={(event) => {
+              event.preventDefault();
+              dialogScrollRef.current?.scrollTo({ top: 0 });
+              dialogHeadingRef.current?.focus();
+            }}
+          >
+            <div ref={dialogScrollRef} className="max-h-[88vh] overflow-y-auto space-y-8 p-6 md:p-10">
+              <div ref={dialogHeadingRef} tabIndex={-1} className="outline-none">
+                <DialogHeader className="space-y-3 text-left">
+                  <p className="text-xs font-semibold uppercase tracking-[0.3em] text-gray-400">
+                    {selectedVariant === 'reseller' ? t('packages.subscription') : t('packages.one_time')}
+                  </p>
+                  <DialogTitle className="text-3xl font-display text-gray-900">
+                    {selectedPackage.name}
+                  </DialogTitle>
+                  <p className="text-base text-gray-600">{selectedPackage.description}</p>
+                </DialogHeader>
+              </div>
               <div className="grid gap-8 lg:grid-cols-[320px,1fr]">
                 <div className="space-y-6">
                   <div className="rounded-2xl border border-gray-100 bg-gray-50 p-6">