diff --git a/resources/js/guest/pages/HomePage.tsx b/resources/js/guest/pages/HomePage.tsx
index 4a564d8..6bbc06f 100644
--- a/resources/js/guest/pages/HomePage.tsx
+++ b/resources/js/guest/pages/HomePage.tsx
@@ -534,7 +534,7 @@ function MissionActionCard({
               </div>
             </div>
 
-            <div className="flex items-center gap-1 rounded-full border border-white/70 bg-white/80 px-3 py-1 text-xs font-semibold text-slate-700 shadow-sm">
+            <div className="hidden items-center gap-1 rounded-full border border-white/70 bg-white/80 px-3 py-1 text-xs font-semibold text-slate-700 shadow-sm sm:flex">
               <Timer className="mr-1 h-3.5 w-3.5 text-slate-500" aria-hidden />
               <span>ca. {durationMinutes} min</span>
             </div>
@@ -543,7 +543,7 @@ function MissionActionCard({
           <div className="mt-4 text-center">
             {card ? (
               <p
-                className="text-2xl font-semibold leading-tight text-slate-900 line-clamp-3 min-h-[3.5rem] py-1"
+                className="text-xl font-semibold leading-snug text-slate-900 sm:text-2xl break-words py-1"
                 style={{ ...titleFont, textShadow: '0 6px 18px rgba(15,23,42,0.28)' }}
               >
                 {card.title}
@@ -603,7 +603,7 @@ function MissionActionCard({
               }}
             >
               <RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} aria-hidden />
-              Andere
+              <span className="hidden sm:inline">Andere</span>
             </Button>
           </div>
         </div>
diff --git a/resources/js/pages/marketing/Demo.tsx b/resources/js/pages/marketing/Demo.tsx
index 7bd8079..b392064 100644
--- a/resources/js/pages/marketing/Demo.tsx
+++ b/resources/js/pages/marketing/Demo.tsx
@@ -2,6 +2,7 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
 import { useLocale } from '@/hooks/useLocale';
 import MarketingLayout from '@/layouts/mainWebsite';
@@ -21,6 +22,7 @@ const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
     const { localizedPath } = useLocalizedRoutes();
     const locale = useLocale();
     const embedUrl = demoToken ? `/e/${demoToken}` : '/e/demo?demo=1';
+    const [isDemoOpen, setIsDemoOpen] = React.useState(false);
 
     const demo = t('demo_page', { returnObjects: true }) as {
         title: string;
@@ -31,14 +33,29 @@ const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
         openFull: string;
         features: DemoFeature[];
     };
+    const demoFeatures = Array.isArray(demo.features) ? demo.features : [];
+    const handleOpenDemo = (): void => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+
+        const isMobile = window.matchMedia('(max-width: 768px)').matches;
+
+        if (isMobile) {
+            window.open(embedUrl, '_blank', 'noopener,noreferrer');
+            return;
+        }
+
+        setIsDemoOpen(true);
+    };
 
     return (
         <MarketingLayout title={demo.title}>
             <Head title={demo.title} />
 
-            <section className="relative overflow-hidden bg-gradient-to-br from-pink-100 via-white to-white px-4 py-16 dark:from-pink-950/40 dark:via-gray-950 dark:to-gray-950">
+            <section className="relative overflow-hidden bg-gradient-to-br from-pink-100 via-white to-white px-4 py-16 lg:pb-16 lg:pt-6 dark:from-pink-950/40 dark:via-gray-950 dark:to-gray-950">
                 <div className="absolute -top-32 right-20 hidden h-72 w-72 rounded-full bg-pink-200/50 blur-3xl lg:block dark:bg-pink-900/30" />
-                <div className="relative z-10 container mx-auto flex max-w-5xl flex-col gap-10 lg:flex-row lg:items-center">
+                <div className="relative z-10 container mx-auto flex max-w-5xl flex-col gap-10 lg:flex-row lg:items-start">
                     <div className="flex-1 space-y-6">
                         <Badge variant="outline" className="border-pink-400 text-pink-600 dark:border-pink-500 dark:text-pink-300">
                             Demo Live
@@ -67,7 +84,7 @@ const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
                     <div className="flex-1">
                         {embedUrl ? (
                             <>
-                                <div className="relative mx-auto w-full max-w-[320px] rounded-[2.5rem] border border-gray-200 bg-gray-900 p-4 shadow-2xl md:max-w-[360px] dark:border-gray-700">
+                                <div className="relative mx-auto w-full max-w-[260px] rounded-[2.5rem] border border-gray-200 bg-gray-900 px-3 pb-3 pt-4 shadow-2xl sm:max-w-[300px] md:max-w-[320px] dark:border-gray-700">
                                     <div
                                         className="absolute top-2 left-1/2 h-1.5 w-16 -translate-x-1/2 rounded-full bg-gray-300 dark:bg-gray-600"
                                         aria-hidden
@@ -75,17 +92,20 @@ const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
                                     <iframe
                                         title="Fotospiel App Demo"
                                         src={embedUrl}
-                                        className="aspect-[9/16] w-full rounded-[1.75rem] border-0 bg-white shadow-inner dark:bg-gray-950"
+                                        className="aspect-[9/19] w-full rounded-[1.75rem] border-0 bg-white shadow-inner dark:bg-gray-950"
                                         loading="lazy"
                                         sandbox="allow-scripts allow-same-origin allow-forms"
                                     />
                                 </div>
                                 <div className="mt-4 flex flex-col items-center gap-1 text-center">
                                     <p className="text-sm text-gray-600 dark:text-gray-300">{demo.iframeNote}</p>
-                                    <Button asChild variant="link" className="text-pink-600 hover:text-pink-700 dark:text-pink-300">
-                                        <Link href={embedUrl} target="_blank" rel="noopener">
-                                            {demo.openFull}
-                                        </Link>
+                                    <Button
+                                        type="button"
+                                        variant="link"
+                                        className="text-pink-600 hover:text-pink-700 dark:text-pink-300"
+                                        onClick={handleOpenDemo}
+                                    >
+                                        {demo.openFull}
                                     </Button>
                                 </div>
                             </>
@@ -122,7 +142,7 @@ const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
             <section className="container mx-auto px-4 pb-16">
                 <div className="mx-auto max-w-5xl">
                     <div className="grid gap-6 md:grid-cols-3">
-                        {demo.features.map((feature) => (
+                        {demoFeatures.map((feature) => (
                             <Card key={feature.title} className="border-gray-100 shadow-sm dark:border-gray-800">
                                 <CardHeader>
                                     <CardTitle className="flex items-center gap-2 text-lg">
@@ -153,6 +173,23 @@ const DemoPage: React.FC<DemoPageProps> = ({ demoToken }) => {
                     </Alert>
                 </div>
             </section>
+            <Dialog open={isDemoOpen} onOpenChange={setIsDemoOpen}>
+                <DialogContent className="w-[388px] max-w-[90vw] border-0 bg-transparent p-0 shadow-none">
+                    <div className="relative w-full rounded-[2.5rem] border border-gray-200 bg-gray-900 p-3 shadow-2xl dark:border-gray-700">
+                        <div
+                            className="absolute top-2 left-1/2 h-1.5 w-16 -translate-x-1/2 rounded-full bg-gray-300 dark:bg-gray-600"
+                            aria-hidden
+                        />
+                        <iframe
+                            title="Fotospiel App Demo"
+                            src={embedUrl}
+                            className="aspect-[9/16] w-full rounded-[1.75rem] border-0 bg-white shadow-inner dark:bg-gray-950"
+                            loading="lazy"
+                            sandbox="allow-scripts allow-same-origin allow-forms"
+                        />
+                    </div>
+                </DialogContent>
+            </Dialog>
         </MarketingLayout>
     );
 };
