Added a guest haptics preference and surfaced it in both the settings sheet and /settings, with safe device detection

and a reduced‑motion guard. Haptics now honor the toggle and still fall back gracefully on iOS (switch disabled when
  navigator.vibrate isn’t available).

  What changed

  - Haptics preference storage + gating: resources/js/guest/lib/haptics.ts
  - Preference hook: resources/js/guest/hooks/useHapticsPreference.ts
  - Settings UI toggle in sheet + page: resources/js/guest/components/settings-sheet.tsx, resources/js/guest/pages/
    SettingsPage.tsx
  - i18n labels: resources/js/guest/i18n/messages.ts
  - Tests: resources/js/guest/lib/__tests__/haptics.test.ts

resources/js/guest/components/PullToRefresh.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ArrowDown, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { triggerHaptic } from '../lib/haptics';
 
 const MAX_PULL = 96;
 const TRIGGER_PULL = 72;
@@ -28,6 +29,7 @@ export default function PullToRefresh({
   const containerRef = React.useRef<HTMLDivElement | null>(null);
   const startYRef = React.useRef<number | null>(null);
   const pullDistanceRef = React.useRef(0);
+  const readyRef = React.useRef(false);
   const [pullDistance, setPullDistance] = React.useState(0);
   const [dragging, setDragging] = React.useState(false);
   const [refreshing, setRefreshing] = React.useState(false);
@@ -70,6 +72,13 @@ export default function PullToRefresh({
       event.preventDefault();
       const next = Math.min(MAX_PULL, delta * DAMPING);
       updatePull(next);
+      const isReady = next >= TRIGGER_PULL;
+      if (isReady && !readyRef.current) {
+        readyRef.current = true;
+        triggerHaptic('selection');
+      } else if (!isReady && readyRef.current) {
+        readyRef.current = false;
+      }
     };
 
     const handleEnd = async () => {
@@ -78,8 +87,10 @@ export default function PullToRefresh({
       }
       startYRef.current = null;
       setDragging(false);
+      readyRef.current = false;
 
       if (pullDistanceRef.current >= TRIGGER_PULL) {
+        triggerHaptic('medium');
         setRefreshing(true);
         updatePull(TRIGGER_PULL);
         try {

resources/js/guest/components/settings-sheet.tsx

@@ -14,12 +14,15 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
 import { Settings, ArrowLeft, FileText, RefreshCcw, ChevronRight, UserCircle, LifeBuoy } from 'lucide-react';
 import { useOptionalGuestIdentity } from '../context/GuestIdentityContext';
 import { LegalMarkdown } from './legal-markdown';
 import { useLocale, type LocaleContextValue } from '../i18n/LocaleContext';
 import { useTranslation } from '../i18n/useTranslation';
 import type { LocaleCode } from '../i18n/messages';
+import { useHapticsPreference } from '../hooks/useHapticsPreference';
+import { triggerHaptic } from '../lib/haptics';
 
 const legalPages = [
   { slug: 'impressum', translationKey: 'settings.legal.section.impressum' },
@@ -262,6 +265,7 @@ function HomeView({
   helpHref,
 }: HomeViewProps) {
   const { t } = useTranslation();
+  const { enabled: hapticsEnabled, setEnabled: setHapticsEnabled, supported: hapticsSupported } = useHapticsPreference();
   const legalLinks = React.useMemo(
     () =>
       legalPages.map((page) => ({
@@ -355,6 +359,32 @@ function HomeView({
         </Card>
       )}
 
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle>{t('settings.haptics.title')}</CardTitle>
+          <CardDescription>{t('settings.haptics.description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div className="flex items-center justify-between gap-4">
+            <span className="text-sm font-medium">{t('settings.haptics.label')}</span>
+            <Switch
+              checked={hapticsEnabled}
+              onCheckedChange={(checked) => {
+                setHapticsEnabled(checked);
+                if (checked) {
+                  triggerHaptic('selection');
+                }
+              }}
+              disabled={!hapticsSupported}
+              aria-label={t('settings.haptics.label')}
+            />
+          </div>
+          {!hapticsSupported && (
+            <div className="text-xs text-muted-foreground">{t('settings.haptics.unsupported')}</div>
+          )}
+        </CardContent>
+      </Card>
+
       <Card>
         <CardHeader className="pb-3">
           <CardTitle>