weitere übersetzungen ergänzt

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.",

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.",

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,8 +673,16 @@ 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]">
+          <DialogContent
-            <div className="max-h-[88vh] overflow-y-auto space-y-8 p-6 md:p-10">
+            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')}
@@ -676,6 +692,7 @@ function PackageCard({
                   </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">