widerrufsbelehrung hinzugefügt und in den checkout mit eingebunden. refund ins backend eingebaut.

resources/js/guest/pages/UploadPage.tsx

@@ -185,6 +185,8 @@ const [canUpload, setCanUpload] = useState(true);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const liveRegionRef = useRef<HTMLDivElement | null>(null);
+  const cameraViewportRef = useRef<HTMLDivElement | null>(null);
+  const cameraShellRef = useRef<HTMLElement | null>(null);
 
   const streamRef = useRef<MediaStream | null>(null);
   const countdownTimerRef = useRef<number | null>(null);
@@ -481,6 +483,25 @@ const [canUpload, setCanUpload] = useState(true);
     setPreferences((prev) => ({ ...prev, flashPreferred: !prev.flashPreferred }));
   }, []);
 
+  const handleToggleImmersive = useCallback(async () => {
+    setImmersiveMode((prev) => !prev);
+    const shell = cameraShellRef.current;
+    if (!shell) return;
+    const prefersReducedMotion = typeof window !== 'undefined'
+      ? window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches
+      : false;
+    if (prefersReducedMotion) return;
+    try {
+      if (!document.fullscreenElement) {
+        await shell.requestFullscreen?.();
+      } else {
+        await document.exitFullscreen?.();
+      }
+    } catch (error) {
+      console.warn('Fullscreen toggle failed', error);
+    }
+  }, []);
+
   const triggerConfetti = useCallback(async () => {
     if (typeof window === 'undefined') return;
     const prefersReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
@@ -883,14 +904,14 @@ const [canUpload, setCanUpload] = useState(true);
   ) : null;
 
   const heroOverlay = !task && showHeroOverlay && mode !== 'uploading' ? (
-    <div className="absolute left-4 right-4 top-6 z-30 rounded-3xl border border-white/30 bg-black/60 p-4 text-white shadow-2xl backdrop-blur sm:left-6 sm:right-6 sm:top-8">
-      <div className="flex items-start justify-between gap-2">
-        <div>
-          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-white/70">Bereit für dein Foto?</p>
-          <p className="text-lg font-semibold leading-tight">Teile den Moment mit allen Gästen.</p>
-          <p className="text-sm text-white/80">Zieh dir eine Mission oder starte direkt mit der Kamera.</p>
+    <div className="absolute left-4 right-4 top-4 z-30 rounded-2xl border border-white/25 bg-black/60 px-4 py-3 text-white shadow-2xl backdrop-blur sm:left-6 sm:right-6 sm:top-5">
+      <div className="flex items-center justify-between gap-2">
+        <div className="space-y-1">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-white/70">Bereit für dein Foto?</p>
+          <p className="text-base font-semibold leading-tight">Teile den Moment mit allen Gästen.</p>
+          <p className="text-xs text-white/75">Zieh eine Mission oder starte direkt.</p>
         </div>
-        <Badge variant="secondary" className="rounded-full bg-white/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-white/90">
+        <Badge variant="secondary" className="rounded-full bg-white/15 px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-white/90">
           Live
         </Badge>
       </div>
@@ -898,7 +919,10 @@ const [canUpload, setCanUpload] = useState(true);
         <Button
           size="sm"
           className="rounded-full bg-white text-black shadow"
-          onClick={() => navigate(tasksUrl)}
+          onClick={() => {
+            setShowHeroOverlay(false);
+            navigate(tasksUrl);
+          }}
         >
           Mission ziehen
         </Button>
@@ -906,11 +930,14 @@ const [canUpload, setCanUpload] = useState(true);
           size="sm"
           variant="secondary"
           className="rounded-full border border-white/30 bg-white/10 text-white"
-          onClick={() => navigate(tasksUrl)}
+          onClick={() => {
+            setShowHeroOverlay(false);
+            navigate(tasksUrl);
+          }}
         >
           Stimmung wählen
         </Button>
-        <span className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/5 px-3 py-1 text-xs text-white/85">
+        <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-[11px] text-white/85">
           <Sparkles className="h-4 w-4 text-amber-200" />
           Mini-Mission: Fang ein Lachen ein
         </span>
@@ -1069,14 +1096,26 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
 
   return renderWithDialog(
     <>
-      <div className="relative flex min-h-screen flex-col gap-6 pt-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
+      <div
+        ref={cameraShellRef as unknown as React.RefObject<HTMLDivElement>}
+        className="relative flex min-h-screen flex-col gap-4 pb-[calc(env(safe-area-inset-bottom,0px)+12px)] pt-3"
+        style={bodyFont ? { fontFamily: bodyFont } : undefined}
+      >
         {taskFloatingCard}
         {heroOverlay}
         <section
-          className="relative flex min-h-[70vh] flex-col overflow-hidden border border-white/10 bg-black text-white shadow-2xl"
+          className="relative flex flex-col overflow-hidden border border-white/10 bg-black text-white shadow-2xl"
           style={{ borderRadius: radius }}
         >
-        <div className="relative aspect-[3/4] sm:aspect-video">
+        <div
+          ref={cameraViewportRef}
+          className="relative w-full"
+          style={{
+            height: 'calc(100vh - 160px)',
+            minHeight: '70vh',
+            maxHeight: '90vh',
+          }}
+        >
             <video
               ref={videoRef}
               className={cn(
@@ -1123,7 +1162,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
               </div>
             )}
 
-            <div className="pointer-events-none absolute inset-x-0 bottom-6 z-30 flex justify-center">
+            <div className="pointer-events-none absolute inset-x-0 bottom-4 z-30 flex justify-center">
               <div className="pointer-events-auto flex items-center gap-2 rounded-full border border-white/20 bg-black/40 px-3 py-2 backdrop-blur">
                 <Button
                   size="icon"
@@ -1197,7 +1236,7 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
                     controlIconButtonBase,
                     immersiveMode && 'border-white bg-white text-black'
                   )}
-                  onClick={() => setImmersiveMode((prev) => !prev)}
+                  onClick={handleToggleImmersive}
                   title={
                     immersiveMode
                       ? t('upload.controls.exitFullscreen', 'Menü einblenden')
@@ -1299,9 +1338,9 @@ const renderWithDialog = (content: ReactNode, wrapperClassName = 'space-y-6 pb-[
                   )}
                   {isCountdownActive && (
                     <div
-                      className="absolute inset-0 rounded-full"
+                      className="absolute inset-1 rounded-full"
                       style={{
-                        background: `conic-gradient(#fff ${countdownDegrees}deg, rgba(255,255,255,0.15) ${countdownDegrees}deg)`,
+                        background: `conic-gradient(#fff ${countdownDegrees}deg, rgba(255,255,255,0.12) ${countdownDegrees}deg)`,
                       }}
                     />
                   )}