feat(admin): Seite Wachstum – neue Halter, Aktivierung und Bindung pro Woche (Phase 0 D11)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.env.example

@@ -66,11 +66,6 @@ ADMIN_OWNER_ID="user_xxxxxxxxxxxxxxxxxxxx"
 # Local dev:   run `docker run -d -p 6379:6379 redis:7-alpine` or install Redis locally.
 REDIS_URL="redis://localhost:6379"
 
-# ── Invite Gate ───────────────────────────────────────────────
-# Set to "false" to disable the invite requirement after the Alpha/Beta phase.
-# Default: "true" (invite required — enforced in proxy.ts)
-INVITE_REQUIRED="true"
-
 # ── Error Monitoring (Sentry) ───────────────────────────────────
 # Sentry Dashboard -> Settings -> Projects -> <project> -> Client Keys (DSN)
 # Same DSN value in both — server-side (src/instrumentation.ts) and

.gitignore

@@ -55,3 +55,6 @@ next-env.d.ts
 
 # clerk configuration (can include secrets)
 /.clerk/
+
+# local marketing plans (not part of the app)
+/marketing/

CLAUDE.md

@@ -44,25 +44,25 @@ The client-side "which pet is currently active" state lives in `src/context/Acti
 ### tRPC layer
 
 - `src/trpc/init.ts` — context is `{ userId, prisma }` (userId from Clerk `auth()`); `protectedProcedure` throws `UNAUTHORIZED` if `userId` is null and narrows it to non-null in `ctx` for everything downstream.
-- `src/trpc/routers/_app.ts` — aggregates ~20 domain routers (pets, posts, stories, milestones, follows, blocks, reports, feed, reactions, comments, reposts, explore, search, notifications, videos, conversations/messages, health, admin, invites, ads). One router file per domain in `src/trpc/routers/`.
+- `src/trpc/routers/_app.ts` — aggregates ~20 domain routers (pets, posts, stories, milestones, follows, blocks, reports, feed, reactions, comments, reposts, explore, search, notifications, videos, conversations/messages, health, admin, referrals, referralAdmin, ads). One router file per domain in `src/trpc/routers/`.
 - `src/trpc/server.ts` exposes a server-side caller (`createTRPCCaller()`) used inside Server Components/layouts to prefetch without an HTTP round-trip (see `src/app/(app)/layout.tsx`). `src/trpc/client.tsx` + `query-client.ts` wire up the browser-side TanStack Query client.
 - Pet-ownership checks go through the shared `assertPetOwnership(prisma, petId, userId)` helper in `src/lib/assert-pet-ownership.ts` — don't reintroduce a local copy of this check in a new router.
 
 ### Denormalized engagement counters
 
-`Post.reactionCount/commentCount/repostCount` and `Advertisement.adReactionCount/adCommentCount/adRepostCount` are maintained transactionally at every create/delete site (reactions, comments, reposts, ads routers, and `admin.ts` moderation deletes) instead of computed via live `_count`/`count()` on read. Feed/explore/posts/admin reads use these columns directly. If you add a new mutation that creates or deletes a reaction/comment/repost, you must increment/decrement the matching counter in the same transaction — there is no background reconciliation job.
+`Post.reactionCount/commentCount/repostCount` and `Advertisement.adReactionCount/adCommentCount/adRepostCount` are maintained transactionally at every create/delete site (reactions, comments, reposts, ads routers, and the admin moderation deletes in `admin-procedures/`) instead of computed via live `_count`/`count()` on read. Feed/explore/posts/admin reads use these columns directly. If you add a new mutation that creates or deletes a reaction/comment/repost, you must increment/decrement the matching counter in the same transaction — there is no background reconciliation job.
 
 ### Routing structure
 
 - `(auth)` route group — sign-up/log-in/password reset, unauthenticated.
-- `(app)` route group — the authenticated shell (`layout.tsx` does a belt-and-suspenders `auth()` check, redirects to onboarding if the owner has zero pets, redirects banned owners to `/banned`, and consumes a pending invite cookie).
+- `(app)` route group — the authenticated shell (`layout.tsx` does a belt-and-suspenders `auth()` check, redirects to onboarding if the owner has zero pets, and redirects banned owners to `/banned`).
 - `/p/[secret]/...` — the admin/moderation panel. The path segment itself is the secret (`ADMIN_SECRET` env var); wrong or missing secret returns a bare `404`, not `403`, so the panel's existence isn't revealed.
 - `/health-card/[token]` — public, tokenized, no auth (shareable vet record).
 - Root-level `/impressum`, `/datenschutz`, `/nutzungsbedingungen` — German legal pages, not under `(app)`, not localized (this is a `next-intl` project but these three routes are fixed-language).
 
 ### `src/proxy.ts` (not `middleware.ts`)
 
-Next.js 16 renamed `middleware.ts` to `proxy.ts` — this **is** the middleware; don't go looking for a `middleware.ts` that doesn't exist. It layers three concerns in one Clerk middleware: (1) invite gate — blocks `/sign-up` unless a `pf_invite` cookie is present, unless `INVITE_REQUIRED=false`; (2) admin secret gate — 404s `/p/*` unless the path segment matches `ADMIN_SECRET`; (3) `auth.protect()` for everything else not in the public route matcher.
+Next.js 16 renamed `middleware.ts` to `proxy.ts` — this **is** the middleware; don't go looking for a `middleware.ts` that doesn't exist. It layers two concerns in one Clerk middleware: (1) admin secret gate — 404s `/p/*` unless the path segment matches `ADMIN_SECRET`; (2) `auth.protect()` for everything else not in the public route matcher. (The old invite gate on `/sign-up` — `pf_invite` cookie, `INVITE_REQUIRED` — was removed with the referral program; sign-up is open.)
 
 ### Media & storage — code has diverged from the original stack plan
 
@@ -84,11 +84,25 @@ All uploads are presigned/direct-to-storage — media bytes never pass through t
 
 ### Admin / moderation panel
 
-Gated by path secret (see `proxy.ts` above) *and* by role at the tRPC layer: `src/trpc/routers/admin.ts`'s `assertAdmin()` allows either `ADMIN_OWNER_ID` (env-configured super-admin bootstrap) or an `AdminRole` row (`SUPER_ADMIN` / `MODERATOR`). Actions are written to `ModerationLog`. Pages live under `src/app/p/[secret]/{users,moderators,posts,reports,ads,invites}`.
+Gated by path secret (see `proxy.ts` above) *and* by role at the tRPC layer: `assertAdmin()` (`src/trpc/routers/admin-procedures/guards.ts`, re-exported from `admin.ts`) allows either `ADMIN_OWNER_ID` (env-configured super-admin bootstrap) or an `AdminRole` row (`SUPER_ADMIN` / `MODERATOR`). Actions are written to `ModerationLog` via `modLog()` (`src/lib/admin/mod-log.ts`). `trpc.admin.*` is assembled in `src/trpc/routers/admin.ts` from per-area procedure objects in `src/trpc/routers/admin-procedures/` (posts, users, reports, ads, …) — add new admin procedures there, not in `admin.ts`. Every admin page reloads its visible data after any successful mutation (`AdminAutoRefresh` in the admin layout), so admin pages need no manual `invalidateQueries`. Pages live under `src/app/p/[secret]/{users,pets,moderators,posts,reports,ads,referrals,curator,…}`. The dashboard has a collapsible "Tierarten" card (`SpeciesDistributionCard`, `petAdmin.speciesDistribution`: pets per species incl. empty species and per breed, curator pet excluded). The "Tiere" page (`pets`, router `pet-admin.ts`) manages single pets: verified/founding toggles, clearing profile content, deleting a pet (reason is sent to the owner as a team DM on another of their pets, or by e-mail if it was their only pet) and the owner's referral ranks.
 
-### Invite system
+**Report statistics (`ReportDecision`, `src/lib/report-decisions.ts`):** every moderator decision on a report is stored as an append-only row (UPHELD/DISMISSED) before the `Report` itself is deleted — shown on the users page, the pet detail sheet and the "Auswertung" tab of `/p/[secret]/reports`. A new path that resolves reports by moderator decision must run `reportDecisionOps()` in the same transaction (current: `dismissReport`, `upholdReport`, `deletePostAsModerator` in `admin-procedures/`, `petAdmin.delete`). Rows have no FKs: `deletePetCompletely` nulls the pet's ids, `deleteOwnerAccount` anonymizes the owner's ids — never delete the rows, other owners' counts depend on them.
 
-`InviteCode` model (word-prefix + 4-char code, e.g. `PAWS-7K3M`, generated in `src/lib/invite-codes.ts`) gates sign-up via a `pf_invite` cookie set by `/join` and consumed by `/api/auth/consume-invite` right after sign-up (the `(app)` layout redirects there if the cookie is still present). `INVITE_REQUIRED=false` turns the whole gate off for post-beta public launch.
+**Never delete a pet with a bare `prisma.pet.delete`** — use `deletePetCompletely()` (`src/lib/delete-pet.ts`). `StoryView` (D-08), `Report.reporter` and `Repost.originalPost` have no cascade and would block the delete, and the denormalized counters on *other* pets' posts/stories must drop by this pet's paws/comments/paw-backs. `pets.delete`, `deleteOwnerAccount` and the admin delete all go through it.
+
+### Download redirect `/app`
+
+`src/app/app/route.ts` (public in `proxy.ts`) is the target for flyers/QR codes: Android → Play Store with sanitized `utm_*` passed as Play `referrer`, iOS → `APP_STORE_URL` in `src/lib/app-links.ts` (App Store, live since 2026-10-08), everything else → web start page; `?ref=<code>` → `/r/<code>`. Logic is pure in `src/lib/app-redirect.ts`; clicks are counted per day/source/platform in Redis (`appredirect:<date>` hashes, `src/lib/app-redirect-stats.ts`) and shown in the admin referral overview. Redis on the NAS is the `pawfeed-redis` container (not `glitchtip-redis`), password in `docker/.env` `REDIS_PASSWORD`.
+
+### New-pet welcome & founding members
+
+`pets.create` fires `welcomeNewPet()` (`src/lib/new-pet-welcome.ts`) in the background — it must never block pet creation. It (1) sets `Pet.isFoundingMember` via one guarded SQL update for the first 250 pets by `createdAt` (never revoked; badge = Sprout icon next to the name, web + mobile), (2) lets the curator pet "PawFeed Team" (`ensureTeamPet` in `src/lib/team-pet.ts`) follow the new pet, and (3) sends a welcome DM via `sendTeamMessage`. (2) and (3) are switchable and the DE/EN text (mandatory `{name}` placeholder) is editable in the admin panel under "Begrüßung" (`/p/[secret]/curator`, `CuratorSettings` id = 1, `curator-admin.ts`). Replies to the welcome DM land in the admin "Messages" team inbox.
+
+### Referral program (Empfehlungsprogramm)
+
+Registration is open; invites are a **Clerk-independent** referral layer on top. Every owner has one permanent, unlimited `Owner.referralCode` (e.g. `BUBI-7K3M`, prefix from the first pet's name — `src/lib/referral-code.ts`). A code is never part of the Clerk sign-up: it is redeemed **after** sign-up, in the onboarding step "Wie hast du von PawFeed erfahren?" (`AcquisitionStep`, web + mobile) or later on `/einladen` (mobile: `/invite`) within `ReferralSettings.redeemWindowDays`. `/r/[code]` is the public landing page (sets a `pf_ref` cookie only to prefill the web onboarding); old `/join?code=` links redirect there. Logic lives in `src/lib/referrals.ts`: redeem sets `Owner.invitedById` and makes both first pets follow each other; an invite **counts** (`referralQualifiedAt`, inviter's denormalized `qualifiedReferralCount` +1) only once the invitee has a pet **and** a first real post — `maybeQualifyReferral()` is called from `posts.create` and the Mux webhook on `READY`; a new post-creating mutation must call it too.
+
+Ranks (`ReferralRank`) are data, fully editable in the admin panel (`/p/[secret]/referrals`, `referral-admin.ts`); only the perk catalog (`ReferralPerk`, `IMPLEMENTED_REFERRAL_PERKS` in `src/lib/referral-ranks.ts`) needs code. Perks are cumulative. Reached ranks are **grandfathered** via `ReferralRankAchievement` — raising a threshold never removes a rank. An admin can revoke a rank permanently (`revokedAt` on the achievement row — the row stays so award/recompute never re-grant it; it is ignored for badges/perks until "Freigeben") or grant one manually (`grantedManually`). `Owner.referralRankId`/`referralPerks` are a cache maintained only by `src/lib/referrals.ts` and the set-based `recomputeReferralRanks()` (`src/lib/referral-recompute.ts`, run after every admin rank change); feed cards read them via `petCardSelect`. The legacy `InviteCode` table is history only — nothing writes to it anymore. One-time setup after the schema push: `npx tsx prisma/scripts/referral-setup.ts` (+ `prisma/enable_rls_referrals.sql`).
 
 ### Testing
 
@@ -102,7 +116,7 @@ Despite `next.config.ts`'s `output: "standalone"` and the original stack researc
 
 **Runs as 3 load-balanced replicas, not a single container (since 2026-08-16, Gitea #26).** `docker/docker-compose.yml` defines `pawfeed-1`/`pawfeed-2`/`pawfeed-3` (via the `x-pawfeed-common` YAML anchor) instead of one `pawfeed` service — Next.js standalone output is single-process (`node server.js`), so one container only ever used one CPU core regardless of how many the NAS has. A load test on 2026-08-15 hit a hard ceiling at ~60–65 req/sec with one core pegged at 133% while 3 cores sat idle; splitting into 3 replicas fixed it (confirmed via a follow-up load test showing ~100% CPU spread evenly across all three). Nginx Proxy Manager (container `nginx-app-1` on this NAS, admin UI at `192.168.1.222:81`) load-balances across them via a `least_conn` upstream block — that block lives in `/Docker-Data/nginxproxymanager/data/nginx/custom/http_top.conf` on the NAS host (an nginx `upstream {}` is only valid in the `http{}` context, which NPM's per-host "Custom Nginx Configuration" field can't reach — that field only writes into the `server{}`/`location{}` context, and holds the `proxy_pass http://pawfeed_upstream;` override for the `pawfeed.org` Proxy Host instead). Full runbook, decisions, and risk notes: `docker/SCALING-ROADMAP.md`. **Deploying a config or code change means rebuilding all 3 replicas** — there is no separate single-container path anymore, and NPM's proxy target is `pawfeed_upstream`, not a bare `pawfeed:3000` hostname. Use `./docker/rolling-deploy.sh` for deploys against the live site — it rebuilds the shared `pawfeed:latest` image once, then restarts `pawfeed-1`/`2`/`3` one at a time, gated on each becoming `healthy` per the Docker `healthcheck` (`GET /api/health`, a dependency-free liveness check — see `src/app/api/health/route.ts`) before moving to the next, so at least 2 replicas always serve traffic. Verified zero-downtime on 2026-08-16 (continuous curl monitoring showed unbroken HTTP 200 through a full rolling deploy). `docker compose up -d --build` (`start.sh`) still works but restarts all 3 at once — only use it for first-time setup or when a brief outage is acceptable. `src/lib/prisma.ts`'s Prisma pg pool size is capped per-replica via `DB_POOL_MAX` (compose sets `10`) so 3 replicas stay well under the Supabase pooler's client-connection limit.
 
-`src/app/api/cron/trim-feeds/route.ts` trims each pet's Redis feed sorted set to the 90-day retention window and expects a `CRON_SECRET` bearer token. `vercel.json`'s `crons` array that points at it is **inert** on this self-hosted deployment — nothing calls this route yet. It needs an external trigger (e.g. a NAS-side cron job hitting the route with the secret header) before it actually runs.
+**Cron jobs run from the NAS crontab** (user `daniel`, `crontab -l`), (there is no `vercel.json` — it was removed as inert). Every cron route checks the bearer token via `isCronAuthorized()` (`src/lib/timing-safe-compare.ts`). Each entry calls `docker/run-cron.sh /api/cron/<name>`, which reads `CRON_SECRET` from `docker/.env`, hits the route with the bearer token via the DDNS host (`--resolve` to localhost — plain `pawfeed.org` fails TLS from the NAS) and logs every run with status + body to `docker/cron.log`. Current schedule: `trim-feeds` 04:00 (Redis feeds → 90 days), `cleanup-stories` 04:30 (deletes stories older than 7 days incl. views, paws, comments, Supabase image and Mux asset — `src/lib/story-cleanup.ts`, max 200 per run), `anniversaries` 08:00, `vaccine-reminders` 08:15 (one-time reminder + push 30 days before `Vaccine.nextDueDate`, `src/lib/vaccine-reminders.ts`, guarded by `Vaccine.reminderSentAt`), `pet-suggestions` Mondays 09:00, plus `docker/backup-db.sh` 03:00. A new cron route needs a new crontab line on the NAS — it does not run otherwise.
 
 ### Directories that are not app code
 

DESIGN.md

@@ -129,7 +129,7 @@ A quiet, mostly neutral palette with one warm, confident accent — the accent i
 
 ## Typography
 
-**Display/Body Font:** Inter (Google Font, `latin` subset, loaded via `next/font`), with a `system-ui` fallback stack. One family for the entire product — there is no separate display or mono face in active use.
+**Display/Body Font:** Inter (variable weight, `latin` subset, self-hosted from `src/app/fonts/` via `next/font/local` — no requests to Google, not even at build time), with a `system-ui` fallback stack. One family for the entire product — there is no separate display or mono face in active use.
 
 **Character:** Confident but unfussy — a standard humanist grotesque doing hierarchy through weight and scale rather than personality. It reads as approachable and modern, never corporate-cold or ornamental.
 

README.md

@@ -310,7 +310,7 @@ In Mux Dashboard -> Settings -> Webhooks, add an endpoint pointing to `https://y
 
 ### 6. Cron jobs (production only)
 
-There is no serverless cron here — `vercel.json`'s `crons` array is inert on a self-hosted deployment. Trigger the cron routes externally (e.g. a NAS-side crontab hitting them with a bearer token):
+There is no serverless cron here (and no `vercel.json`). Trigger the cron routes externally (e.g. a NAS-side crontab hitting them with a bearer token):
 
 ```bash
 curl -H "Authorization: Bearer $CRON_SECRET" https://your-domain.com/api/cron/anniversaries     # daily 08:00

messages/de.json

@@ -116,7 +116,8 @@
     "zoom": "Zoom",
     "cropCancel": "Abbrechen",
     "cropSave": "Übernehmen",
-    "cropSaving": "Wird verarbeitet…"
+    "cropSaving": "Wird verarbeitet…",
+    "heicUnsupported": "Dieser Browser kann HEIC-Fotos nicht lesen. Öffne PawFeed in Safari oder speichere das Foto als JPG."
   },
   "Onboarding": {
     "addFirstPet": "Füge dein erstes Tier hinzu",
@@ -124,7 +125,12 @@
     "addPhoto": "Profilfoto hinzufügen",
     "addPhotoDesc": "Gib deinem Tier ein Gesicht auf PawFeed. Du kannst das jederzeit ändern.",
     "done": "Fertig",
-    "skipForNow": "Jetzt überspringen"
+    "skipForNow": "Jetzt überspringen",
+    "loading": "Wird geladen",
+    "caretakerSwitch": "Ich betreue ein Tier mit",
+    "caretakerTitle": "Ein Tier mitbetreuen",
+    "caretakerDesc": "Gib den Einladungscode ein, den du vom Haupt-Besitzer bekommen hast. Sobald er deine Anfrage freigibt, kannst du loslegen.",
+    "caretakerBack": "Doch ein eigenes Tier anlegen"
   },
   "Language": {
     "switch": "Sprache",
@@ -258,7 +264,8 @@
     "postError": "Kommentar konnte nicht gepostet werden. Bitte versuche es erneut.",
     "deleteError": "Kommentar konnte nicht gelöscht werden. Bitte versuche es erneut.",
     "countSingular": "1 Kommentar",
-    "countPlural": "{count} Kommentare"
+    "countPlural": "{count} Kommentare",
+    "readOnlyExpired": "Die Story ist abgelaufen. Kommentare kannst du noch lesen, aber nicht mehr schreiben."
   },
   "RelativeTime": {
     "justNow": "gerade eben",
@@ -477,7 +484,18 @@
     "typePawBack": "hat deinen Post geteilt (Paw-Back)",
     "typeBirthday": "🎂 Alles Gute zum Geburtstag! Erstelle einen Jubiläums-Post.",
     "typeAdoptionDay": "🏠 Heute ist der Adoptionstag! Feiere den Jahrestag.",
-    "typePetSuggestion": "könnte dir gefallen"
+    "typePetSuggestion": "könnte dir gefallen",
+    "typeReferralJoined": "ist über deine Einladung zu PawFeed gekommen",
+    "typeReferralRankUp": "Du hast einen neuen Empfehlungsrang erreicht. Schau ihn dir an!",
+    "typeVaccineDue": "💉 Die Impfung „{name}“ ist am {date} fällig – Zeit, einen Termin zu vereinbaren.",
+    "typeStoryMention": "hat dich in einer Story markiert.",
+    "typeStoryComment": "hat deine Story kommentiert.",
+    "typeStoryReaction": "hat deiner Story eine Pfote gegeben.",
+    "typeUnknown": "hat eine neue Mitteilung für dich.",
+    "typePetDeceased": "ist über die Regenbogenbrücke gegangen. In liebevoller Erinnerung 🤍",
+    "typePetLost": "wird vermisst. Vielleicht kannst du helfen – tippe für alle Infos.",
+    "typePetFound": "ist wieder sicher zu Hause. Danke fürs Mithelfen! 🎉",
+    "typeCaretakerRequest": "Jemand möchte dein Tier mitbetreuen – bitte prüfe die Anfrage."
   },
   "PhotoPostForm": {
     "captionPlaceholder": "Bildunterschrift schreiben…",
@@ -507,7 +525,8 @@
     "videoTooLong": "Story-Videos dürfen höchstens {max} Sekunden lang sein.",
     "videoUnreadable": "Videolänge konnte nicht gelesen werden — bitte versuch eine andere Datei.",
     "musicLabel": "Musik hinzufügen (optional)",
-    "muteOriginalLabel": "Original-Ton stummschalten, stattdessen Musik abspielen"
+    "muteOriginalLabel": "Original-Ton stummschalten, stattdessen Musik abspielen",
+    "heicUnsupported": "Dieser Browser kann HEIC-Fotos nicht lesen. Öffne PawFeed in Safari oder speichere das Foto als JPG."
   },
   "MilestoneForm": {
     "questionLabel": "Was ist der Meilenstein?",
@@ -527,7 +546,8 @@
     "errorToast": "Meilenstein konnte nicht geteilt werden. Bitte versuch es erneut.",
     "fileTooLarge": "Foto muss unter 10 MB sein.",
     "invalidType": "Lade ein JPG-, PNG- oder WebP-Bild hoch.",
-    "uploadFailed": "Upload fehlgeschlagen — bitte versuch es erneut."
+    "uploadFailed": "Upload fehlgeschlagen — bitte versuch es erneut.",
+    "heicUnsupported": "Dieser Browser kann HEIC-Fotos nicht lesen. Öffne PawFeed in Safari oder speichere das Foto als JPG."
   },
   "MilestoneTypes": {
     "BIRTHDAY": "Geburtstag",
@@ -575,12 +595,22 @@
     "mute": "Stummschalten",
     "unmute": "Ton einschalten",
     "videoError": "Video konnte nicht verarbeitet werden.",
-    "openComments": "Kommentare öffnen"
+    "openComments": "Kommentare öffnen",
+    "deleteStory": "Story löschen",
+    "deleteStoryTitle": "Story löschen?",
+    "deleteStoryDescription": "Die Story wird mit allen Aufrufen, Pfoten und Kommentaren endgültig gelöscht.",
+    "deleteStoryCancel": "Abbrechen",
+    "deleteStoryConfirm": "Löschen",
+    "storyDeleted": "Story gelöscht",
+    "storyDeleteError": "Die Story konnte nicht gelöscht werden. Bitte versuch es noch einmal.",
+    "expiredOwnerOnly": "Abgelaufen – nur für dich sichtbar",
+    "pawCount": "{count, plural, one {# Pfote} other {# Pfoten}}"
   },
   "StoryTray": {
     "storiesAriaLabel": "Storys",
     "addStory": "Story hinzufügen",
-    "newStoryTitle": "Neue Story"
+    "newStoryTitle": "Neue Story",
+    "yourStory": "Deine Story"
   },
   "RepostCard": {
     "pawedBackBy": "Paw-Back von"
@@ -621,7 +651,8 @@
     "title": "Meine Tiere",
     "addPet": "Tier anlegen",
     "emptyTitle": "Füge dein erstes Tier hinzu",
-    "emptyDesc": "Gib deinem Tier ein eigenes Profil auf PawFeed."
+    "emptyDesc": "Gib deinem Tier ein eigenes Profil auf PawFeed.",
+    "caretakerHeading": "Ich betreue ein Tier mit"
   },
   "PetProfile": {
     "editProfile": "Profil bearbeiten",
@@ -632,7 +663,8 @@
     "statsFollowers": "Follower",
     "statsFollowing": "Folgt",
     "adoptionStory": "Adoptionsgeschichte",
-    "verified": "Verifiziert"
+    "verified": "Verifiziert",
+    "invitedBy": "Eingeladen von <link>{name}</link>"
   },
   "EditPet": {
     "title": "{name} bearbeiten",
@@ -650,9 +682,9 @@
     "onlyMe": "Nur ich",
     "followerVisibilitySaved": "Follower-Sichtbarkeit gespeichert",
     "followerVisibilitySaveFailed": "Follower-Sichtbarkeit konnte nicht gespeichert werden",
-    "followerEveryoneHint": "Jeder kann die Follower- und Folgt-Listen von {name} sehen.",
-    "followerFollowersOnlyHint": "Nur Tiere, die {name} folgen, können die Follower- und Folgt-Listen sehen.",
-    "followerNobodyHint": "Nur du kannst die Follower- und Folgt-Listen von {name} sehen.",
+    "followerEveryoneHint": "Jeder kann die Follower- und Folgt-Listen von {name} sehen und {name} in Storys markieren.",
+    "followerFollowersOnlyHint": "Nur Tiere, die {name} folgen, können die Follower- und Folgt-Listen sehen und {name} in Storys markieren.",
+    "followerNobodyHint": "Nur du kannst die Follower- und Folgt-Listen von {name} sehen — markieren in Storys kann {name} niemand.",
     "verificationHeading": "Verifizierung",
     "verifiedStatus": "Dieses Tier ist verifiziert.",
     "pendingStatus": "Dein Verifizierungsantrag wird noch geprüft.",
@@ -729,6 +761,7 @@
     "footerAgb": "AGB",
     "navHome": "Home",
     "navAbout": "Über uns",
+    "footerPress": "Presse",
     "navLogin": "Anmelden",
     "navSignUp": "Registrieren",
     "heroBadge1": "Neuer Beitrag von Bubi",
@@ -742,7 +775,12 @@
     "detailPoint2": "Gesundheitsdaten bleiben privat, außer du teilst sie bewusst per Link",
     "footerTagline": "Wo Haustiere die Stars sind.",
     "footerDesignedBy": "Designed & Powered by PawFeed",
-    "footerSecurityBadge": "Sicherheits-Check: Note A+"
+    "footerSecurityBadge": "Sicherheits-Check: Note A+",
+    "heroAndroidHint": "Auch als App für iPhone und Android",
+    "playStoreAlt": "Jetzt bei Google Play",
+    "appStoreAlt": "Laden im App Store",
+    "appHeading": "PawFeed für die Hosentasche",
+    "appBody": "Die App für iPhone und Android bringt Feed, Storys und Nachrichten direkt aufs Handy — mit Push-Benachrichtigungen, wenn dein Tier ein neues Like oder einen neuen Follower bekommt."
   },
   "AboutPage": {
     "metaTitle": "Über uns — PawFeed",
@@ -761,5 +799,185 @@
     "statSponsors": "Unterstützer:innen",
     "ctaHeading": "Lust, dabei zu sein?",
     "ctaButton": "Jetzt starten"
+  },
+  "Referrals": {
+    "title": "Freunde einladen",
+    "subtitle": "Teile deinen Link. Jedes Tier, das über deine Einladung kommt und seinen ersten Beitrag postet, bringt dich einen Rang weiter.",
+    "programPaused": "Das Empfehlungsprogramm ist gerade pausiert. Dein Link funktioniert, neue Einladungen werden aber im Moment nicht gezählt.",
+    "shareHeading": "Dein Einladungslink",
+    "shareSubtitle": "Unbegrenzt oft nutzbar. Wer sich ohne Link registriert, kann deinen Code auch im Onboarding eingeben.",
+    "yourCode": "Dein Code",
+    "share": "Teilen",
+    "copyLink": "Link kopieren",
+    "copied": "Kopiert",
+    "copiedToast": "Link kopiert",
+    "shareTitle": "Komm zu PawFeed",
+    "shareText": "Mein Tier ist auf PawFeed, dem sozialen Netzwerk für Haustiere. Mit meinem Code {code} sind wir direkt verbunden:",
+    "ranksHeading": "Deine Ränge",
+    "countedInvites": "{count, plural, =0 {Noch keine gezählte Einladung} one {# gezählte Einladung} other {# gezählte Einladungen}}",
+    "nextRank": "Noch {remaining, plural, one {# Einladung} other {# Einladungen}} bis {name}",
+    "allRanksReached": "Du hast alle Ränge erreicht. Danke!",
+    "achieved": "Erreicht",
+    "threshold": "{count, plural, one {# Einladung} other {# Einladungen}}",
+    "inviteesHeading": "Über dich gekommen",
+    "inviteesEmpty": "Noch niemand. Teile deinen Link mit Freunden, die selbst ein Tier haben.",
+    "inviteeNoPet": "Noch kein Tier angelegt",
+    "statusCounted": "Zählt",
+    "statusWaiting": "Wartet auf ersten Beitrag",
+    "statusInReview": "Wird geprüft",
+    "statusRevoked": "Aberkannt",
+    "redeemHeading": "Wurdest du eingeladen?",
+    "redeemSubtitle": "Gib den Code der Person ein, die dich eingeladen hat. Das geht nur in den ersten Tagen nach der Registrierung.",
+    "redeemLabel": "Einladungscode",
+    "redeemCta": "Einlösen",
+    "redeemedToast": "Eingelöst. Du und {name} folgt euch jetzt.",
+    "redeemedToastGeneric": "Code eingelöst.",
+    "errorPaused": "Das Empfehlungsprogramm ist gerade pausiert.",
+    "errorInvalid": "Diesen Code gibt es nicht. Prüf die Schreibweise, z. B. BUBI-7K3M.",
+    "errorOwnCode": "Das ist dein eigener Code. Gib den Code der Person ein, die dich eingeladen hat.",
+    "errorAlreadyRedeemed": "Du hast schon einen Einladungscode eingelöst.",
+    "errorWindowExpired": "Einladungscodes können nur in den ersten Tagen nach der Registrierung eingelöst werden.",
+    "errorNoPet": "Leg zuerst ein Tier an, dann kannst du den Code einlösen.",
+    "errorTooMany": "Zu viele Versuche. Bitte warte ein paar Minuten.",
+    "errorGeneric": "Das hat nicht geklappt. Bitte versuch es noch einmal.",
+    "rulesNote": "Eine Einladung zählt, sobald das eingeladene Tier angelegt ist und seinen ersten Beitrag veröffentlicht hat. Ränge sind digitale Auszeichnungen ohne Geldwert. Einmal erreichte Ränge bleiben erhalten, außer bei Missbrauch."
+  },
+  "ReferralOnboarding": {
+    "title": "Wie hast du von PawFeed erfahren?",
+    "subtitle": "Freiwillig. Es hilft uns zu verstehen, wo wir neue Tierfreunde erreichen.",
+    "source_FRIENDS": "Freunde oder Familie",
+    "source_TIKTOK": "TikTok",
+    "source_INSTAGRAM": "Instagram",
+    "source_YOUTUBE": "YouTube",
+    "source_FACEBOOK": "Facebook",
+    "source_SHELTER_OR_PARTNER": "Tierheim, Verein oder Laden",
+    "source_STORE_SEARCH": "App Store oder Google Play",
+    "source_PRESS": "Zeitung, Radio oder Blog",
+    "source_OTHER": "Anders",
+    "redeemed": "Eingelöst. Du und {name} folgt euch jetzt.",
+    "redeemedGeneric": "Code eingelöst.",
+    "continue": "Weiter",
+    "skip": "Überspringen"
+  },
+  "ReferralLanding": {
+    "titleWithPet": "{name} lädt dich zu PawFeed ein",
+    "titleGeneric": "Du bist zu PawFeed eingeladen",
+    "subtitle": "PawFeed ist das soziale Netzwerk, in dem dein Tier das Profil hat: Fotos, Kurzvideos, Storys und Impfpass an einem Ort.",
+    "codeLabel": "Einladungscode",
+    "codeHint": "Gib den Code nach der Registrierung im Onboarding ein, dann seid ihr direkt verbunden.",
+    "webSignUp": "Im Browser registrieren"
+  },
+  "FoundingMember": {
+    "label": "Gründungsmitglied",
+    "tooltip": "Gründungsmitglied – eines der ersten 250 Tiere auf PawFeed"
+  },
+  "InMemory": {
+    "label": "In Erinnerung",
+    "tooltip": "In liebevoller Erinnerung",
+    "banner": "In liebevoller Erinnerung an {name} · {date}",
+    "settingsHeading": "Gedenkmodus",
+    "settingsHint": "Wenn dein Tier über die Regenbogenbrücke gegangen ist, kannst du sein Profil als liebevolle Erinnerung bewahren. Alle Beiträge bleiben erhalten, und du kannst weiterhin Erinnerungen teilen. Geburtstags- und Impf-Erinnerungen pausieren dann, damit dich nichts unvermittelt trifft.",
+    "activeHint": "Das Profil von {name} wird als Erinnerung bewahrt. Du kannst das Datum jederzeit anpassen oder den Gedenkmodus wieder beenden.",
+    "dateLabel": "Tag des Abschieds",
+    "activate": "Profil als Erinnerung bewahren",
+    "saveDate": "Datum speichern",
+    "remove": "Gedenkmodus beenden",
+    "confirmTitle": "Das Profil von {name} als Erinnerung bewahren?",
+    "confirmDescription": "Es tut uns sehr leid. Das Profil von {name} bekommt eine Erinnerungsschleife, und alles, was ihr geteilt habt, bleibt erhalten. Wer {name} folgt, erfährt es einmal ganz in Ruhe über die Mitteilungen – ohne Push. Du kannst das jederzeit rückgängig machen.",
+    "confirm": "Ja, bewahren",
+    "cancel": "Noch nicht",
+    "saved": "Das Profil wird nun als Erinnerung bewahrt.",
+    "removed": "Gedenkmodus beendet.",
+    "saveFailed": "Das hat leider nicht geklappt. Bitte versuch es noch einmal."
+  },
+  "LostPublic": {
+    "badge": "Vermisst",
+    "heading": "Hast du {name} gesehen?",
+    "metaTitle": "Vermisst: {name} – hast du dieses Tier gesehen?",
+    "metaDescription": "Zuletzt gesehen: {place}. Jeder Hinweis hilft – bitte teilen.",
+    "lastSeenPlace": "Zuletzt gesehen",
+    "lastSeenAt": "Wann",
+    "details": "Erkennungsmerkmale & Hinweise",
+    "contactHeading": "Bitte melde dich, wenn du {name} siehst",
+    "messageInPawFeed": "Nachricht über PawFeed schreiben",
+    "mailSubject": "Hinweis zu {name}",
+    "approachHint": "Bitte das Tier nicht verfolgen oder einfangen wollen – verängstigte Tiere laufen sonst oft weiter weg. Ruhig beobachten, Ort und Zeit merken und Bescheid geben.",
+    "photosHeading": "Weitere Fotos",
+    "photoAlt": "Foto von {name}",
+    "share": "Seite teilen – jede Weitergabe hilft",
+    "copied": "Link kopiert",
+    "foundTitle": "{name} ist wieder sicher zu Hause 🎉",
+    "foundText": "Danke an alle, die geteilt und mitgesucht haben!",
+    "openInPawFeed": "{name} auf PawFeed besuchen",
+    "rateLimited": "Zu viele Anfragen – bitte versuch es in einer Minute erneut."
+  },
+  "LostReport": {
+    "badge": "Wird vermisst",
+    "teaser": "Ist {name} entlaufen? Hier kannst du sofort eine Vermisst-Meldung starten.",
+    "open": "Vermisst melden",
+    "formHeading": "{name} als vermisst melden",
+    "formHint": "Wir drücken dir fest die Daumen. Alle, die {name} folgen oder denen {name} folgt, bekommen sofort eine Push-Mitteilung, und du erhältst eine Seite zum Teilen – auch für Menschen ohne PawFeed.",
+    "activeHeading": "{name} wird vermisst",
+    "activeHint": "Teile den Link, so oft du kannst – zum Beispiel in WhatsApp-Gruppen aus deiner Nachbarschaft. Du kannst die Angaben jederzeit ergänzen.",
+    "lastSeenAt": "Zuletzt gesehen am",
+    "lastSeenPlace": "Wo zuletzt gesehen?",
+    "lastSeenPlacePlaceholder": "z. B. Stadtpark Nord, Nähe Spielplatz",
+    "description": "Erkennungsmerkmale & Hinweise",
+    "descriptionPlaceholder": "z. B. rotes Halsband, gechippt, eher scheu – bitte nicht rufen",
+    "contactHint": "Kontaktdaten sind freiwillig – bitte nur deine eigenen eintragen. Sie erscheinen nur auf der Teilen-Seite dieser Meldung und werden gelöscht, sobald die Meldung beendet ist. Eine Nachricht über PawFeed ist immer möglich.",
+    "contactPhone": "Telefonnummer (optional)",
+    "contactEmail": "E-Mail (optional)",
+    "allowIndexing": "Seite darf über Suchmaschinen gefunden werden",
+    "allowIndexingHint": "Mehr Reichweite, aber auch Fremde finden die Seite. Ohne Haken ist sie nur über den Link erreichbar.",
+    "submit": "Vermisst-Meldung starten",
+    "cancel": "Abbrechen",
+    "saveChanges": "Änderungen speichern",
+    "notifyFound": "Allen Bescheid geben, dass {name} wieder da ist",
+    "markFound": "{name} ist wieder da!",
+    "share": "Link teilen",
+    "shareTitle": "Vermisst: {name}",
+    "copied": "Link kopiert",
+    "created": "Die Meldung ist raus. Wir drücken die Daumen, dass {name} schnell nach Hause findet.",
+    "updated": "Angaben gespeichert.",
+    "foundToast": "Wie schön – willkommen zurück, {name}! 🎉",
+    "saveFailed": "Das hat leider nicht geklappt. Bitte versuch es noch einmal.",
+    "bannerTitle": "{name} wird vermisst",
+    "bannerText": "Zuletzt gesehen: {place} · {date}",
+    "bannerLink": "Alle Infos & Seite teilen"
+  },
+  "Caretaker": {
+    "heading": "Mitbetreuer",
+    "intro": "Kümmert sich noch jemand um {name}? Lade eine zweite Person ein – sie nutzt ihr eigenes Konto und kann als {name} posten, Nachrichten beantworten und die Gesundheitsdaten sehen.",
+    "createInvite": "Mitbetreuer einladen",
+    "inviteHint": "Gib diesen Code an die Person weiter. Sie gibt ihn in der App unter „Meine Tiere“ oder bei der Anmeldung ein. Danach entscheidest du, ob du die Anfrage freigibst.",
+    "copy": "Code kopieren",
+    "copyLink": "Link kopieren",
+    "copied": "Kopiert",
+    "validUntil": "Gültig bis {date}",
+    "newCode": "Neuen Code erzeugen",
+    "revokeInvite": "Einladung zurückziehen",
+    "requestFrom": "Anfrage zur Mitbetreuung von {who}",
+    "requestHint": "Gibst du frei, kann diese Person als {name} handeln. Löschen, Privatsphäre und Gedenkmodus bleiben bei dir.",
+    "approve": "Freigeben",
+    "reject": "Ablehnen",
+    "approved": "Freigegeben – ihr kümmert euch jetzt gemeinsam.",
+    "activeWith": "{who} betreut {name} mit dir.",
+    "remove": "Mitbetreuer entfernen",
+    "removeConfirm": "Soll die Person {name} nicht mehr mitbetreuen? Ihre bisherigen Beiträge als {name} bleiben erhalten.",
+    "youCoCare": "Du betreust {name} mit.",
+    "caretakerLimits": "Löschen, Privatsphäre und Gedenkmodus verwaltet der Haupt-Besitzer.",
+    "leave": "Mitbetreuung beenden",
+    "leaveConfirm": "Möchtest du {name} nicht mehr mitbetreuen? Du kannst später wieder eingeladen werden.",
+    "left": "Du betreust {name} nicht mehr mit.",
+    "cancel": "Abbrechen",
+    "unknownAccount": "einem anderen Konto",
+    "failed": "Das hat leider nicht geklappt.",
+    "codeLabel": "Einladungscode",
+    "codeHint": "Den Code bekommst du vom Haupt-Besitzer des Tiers. Er ist 7 Tage gültig.",
+    "redeem": "Einlösen",
+    "requestSent": "Anfrage gesendet – sobald sie freigegeben ist, findest du {name} unter „Meine Tiere“.",
+    "waiting": "Deine Anfrage für {name} wartet auf Freigabe.",
+    "checkAgain": "Erneut prüfen",
+    "withdraw": "Zurückziehen"
   }
 }

messages/en.json

@@ -116,7 +116,8 @@
     "zoom": "Zoom",
     "cropCancel": "Cancel",
     "cropSave": "Apply",
-    "cropSaving": "Processing…"
+    "cropSaving": "Processing…",
+    "heicUnsupported": "This browser cannot read HEIC photos. Open PawFeed in Safari or save the photo as JPG."
   },
   "Onboarding": {
     "addFirstPet": "Add your first pet",
@@ -124,7 +125,12 @@
     "addPhoto": "Add a profile photo",
     "addPhotoDesc": "Give your pet a face on PawFeed. You can always change this later.",
     "done": "Done",
-    "skipForNow": "Skip for now"
+    "skipForNow": "Skip for now",
+    "loading": "Loading",
+    "caretakerSwitch": "I co-care for a pet",
+    "caretakerTitle": "Co-care for a pet",
+    "caretakerDesc": "Enter the invitation code you got from the main owner. As soon as they approve your request, you're all set.",
+    "caretakerBack": "Create my own pet instead"
   },
   "Language": {
     "switch": "Language",
@@ -258,7 +264,8 @@
     "postError": "Couldn't post comment. Please try again.",
     "deleteError": "Couldn't delete comment. Please try again.",
     "countSingular": "1 comment",
-    "countPlural": "{count} comments"
+    "countPlural": "{count} comments",
+    "readOnlyExpired": "This story has expired. You can still read comments but not add new ones."
   },
   "RelativeTime": {
     "justNow": "now",
@@ -477,7 +484,18 @@
     "typePawBack": "shared your post (Paw-Back)",
     "typeBirthday": "🎂 Happy Birthday! Create an anniversary post.",
     "typeAdoptionDay": "🏠 Today is adoption day! Celebrate the anniversary.",
-    "typePetSuggestion": "might be a good match"
+    "typePetSuggestion": "might be a good match",
+    "typeReferralJoined": "joined PawFeed through your invite",
+    "typeReferralRankUp": "You reached a new referral rank. Take a look!",
+    "typeVaccineDue": "💉 The \"{name}\" vaccination is due on {date} – time to book an appointment.",
+    "typeStoryMention": "tagged you in a story.",
+    "typeStoryComment": "commented on your story.",
+    "typeStoryReaction": "gave your story a paw.",
+    "typeUnknown": "has a new notification for you.",
+    "typePetDeceased": "has crossed the rainbow bridge. In loving memory 🤍",
+    "typePetLost": "is missing. Maybe you can help – tap for all details.",
+    "typePetFound": "is safely back home. Thanks for helping! 🎉",
+    "typeCaretakerRequest": "Someone would like to co-care for your pet – please review the request."
   },
   "PhotoPostForm": {
     "captionPlaceholder": "Write a caption…",
@@ -507,7 +525,8 @@
     "videoTooLong": "Story videos can be at most {max} seconds long.",
     "videoUnreadable": "Couldn't read the video length — please try a different file.",
     "musicLabel": "Add music (optional)",
-    "muteOriginalLabel": "Mute original audio, play this track instead"
+    "muteOriginalLabel": "Mute original audio, play this track instead",
+    "heicUnsupported": "This browser cannot read HEIC photos. Open PawFeed in Safari or save the photo as JPG."
   },
   "MilestoneForm": {
     "questionLabel": "What's the milestone?",
@@ -527,7 +546,8 @@
     "errorToast": "Couldn't share this milestone. Please try again.",
     "fileTooLarge": "Photo must be under 10 MB.",
     "invalidType": "Upload a JPG, PNG, or WebP image.",
-    "uploadFailed": "Upload failed — please try again."
+    "uploadFailed": "Upload failed — please try again.",
+    "heicUnsupported": "This browser cannot read HEIC photos. Open PawFeed in Safari or save the photo as JPG."
   },
   "MilestoneTypes": {
     "BIRTHDAY": "Birthday",
@@ -575,12 +595,22 @@
     "mute": "Mute",
     "unmute": "Unmute",
     "videoError": "Video could not be processed.",
-    "openComments": "Open comments"
+    "openComments": "Open comments",
+    "deleteStory": "Delete story",
+    "deleteStoryTitle": "Delete story?",
+    "deleteStoryDescription": "The story and all its views, paws and comments will be deleted permanently.",
+    "deleteStoryCancel": "Cancel",
+    "deleteStoryConfirm": "Delete",
+    "storyDeleted": "Story deleted",
+    "storyDeleteError": "The story could not be deleted. Please try again.",
+    "expiredOwnerOnly": "Expired – only visible to you",
+    "pawCount": "{count, plural, one {# paw} other {# paws}}"
   },
   "StoryTray": {
     "storiesAriaLabel": "Stories",
     "addStory": "Add story",
-    "newStoryTitle": "New Story"
+    "newStoryTitle": "New Story",
+    "yourStory": "Your story"
   },
   "RepostCard": {
     "pawedBackBy": "Pawed-back by"
@@ -621,7 +651,8 @@
     "title": "My Pets",
     "addPet": "Add Pet",
     "emptyTitle": "Add your first pet",
-    "emptyDesc": "Give your pet their own profile on PawFeed."
+    "emptyDesc": "Give your pet their own profile on PawFeed.",
+    "caretakerHeading": "I co-care for a pet"
   },
   "PetProfile": {
     "editProfile": "Edit profile",
@@ -632,7 +663,8 @@
     "statsFollowers": "followers",
     "statsFollowing": "following",
     "adoptionStory": "Adoption story",
-    "verified": "Verified"
+    "verified": "Verified",
+    "invitedBy": "Invited by <link>{name}</link>"
   },
   "EditPet": {
     "title": "Edit {name}",
@@ -650,9 +682,9 @@
     "onlyMe": "Only me",
     "followerVisibilitySaved": "Follower privacy setting saved",
     "followerVisibilitySaveFailed": "Failed to save follower privacy setting",
-    "followerEveryoneHint": "Anyone can see {name}'s followers and following lists.",
-    "followerFollowersOnlyHint": "Only pets that follow {name} can see the followers and following lists.",
-    "followerNobodyHint": "Only you can see {name}'s followers and following lists.",
+    "followerEveryoneHint": "Anyone can see {name}'s followers and following lists and tag {name} in stories.",
+    "followerFollowersOnlyHint": "Only pets that follow {name} can see the followers and following lists and tag {name} in stories.",
+    "followerNobodyHint": "Only you can see {name}'s followers and following lists — nobody can tag {name} in stories.",
     "verificationHeading": "Verification",
     "verifiedStatus": "This pet is verified.",
     "pendingStatus": "Your verification request is pending review.",
@@ -729,6 +761,7 @@
     "footerAgb": "Terms",
     "navHome": "Home",
     "navAbout": "About",
+    "footerPress": "Press",
     "navLogin": "Log in",
     "navSignUp": "Sign up",
     "heroBadge1": "New post from Bubi",
@@ -742,7 +775,12 @@
     "detailPoint2": "Health data stays private unless you deliberately share it via link",
     "footerTagline": "Where pets are the stars.",
     "footerDesignedBy": "Designed & Powered by PawFeed",
-    "footerSecurityBadge": "Security check: Grade A+"
+    "footerSecurityBadge": "Security check: Grade A+",
+    "heroAndroidHint": "Also available as an app for iPhone and Android",
+    "playStoreAlt": "Get it on Google Play",
+    "appStoreAlt": "Download on the App Store",
+    "appHeading": "PawFeed in your pocket",
+    "appBody": "The iPhone and Android app puts the feed, stories, and messages right on your phone — with push notifications when your pet gets a new like or follower."
   },
   "AboutPage": {
     "metaTitle": "About us — PawFeed",
@@ -761,5 +799,185 @@
     "statSponsors": "Supporters",
     "ctaHeading": "Want to be part of it?",
     "ctaButton": "Get started"
+  },
+  "Referrals": {
+    "title": "Invite friends",
+    "subtitle": "Share your link. Every pet that joins through your invite and publishes its first post moves you up a rank.",
+    "programPaused": "The referral program is paused right now. Your link still works, but new invites are not counted at the moment.",
+    "shareHeading": "Your invite link",
+    "shareSubtitle": "Use it as often as you like. People who sign up without the link can still enter your code during onboarding.",
+    "yourCode": "Your code",
+    "share": "Share",
+    "copyLink": "Copy link",
+    "copied": "Copied",
+    "copiedToast": "Link copied",
+    "shareTitle": "Join PawFeed",
+    "shareText": "My pet is on PawFeed, the social network for pets. Use my code {code} and we are connected right away:",
+    "ranksHeading": "Your ranks",
+    "countedInvites": "{count, plural, =0 {No counted invites yet} one {# counted invite} other {# counted invites}}",
+    "nextRank": "{remaining, plural, one {# more invite} other {# more invites}} until {name}",
+    "allRanksReached": "You reached every rank. Thank you!",
+    "achieved": "Reached",
+    "threshold": "{count, plural, one {# invite} other {# invites}}",
+    "inviteesHeading": "Joined through you",
+    "inviteesEmpty": "Nobody yet. Share your link with friends who have a pet.",
+    "inviteeNoPet": "No pet created yet",
+    "statusCounted": "Counts",
+    "statusWaiting": "Waiting for first post",
+    "statusInReview": "Under review",
+    "statusRevoked": "Revoked",
+    "redeemHeading": "Were you invited?",
+    "redeemSubtitle": "Enter the code of the person who invited you. This only works during the first days after signing up.",
+    "redeemLabel": "Invite code",
+    "redeemCta": "Redeem",
+    "redeemedToast": "Redeemed. You and {name} now follow each other.",
+    "redeemedToastGeneric": "Code redeemed.",
+    "errorPaused": "The referral program is paused right now.",
+    "errorInvalid": "That code does not exist. Check the spelling, e.g. BUBI-7K3M.",
+    "errorOwnCode": "That is your own code. Enter the code of the person who invited you.",
+    "errorAlreadyRedeemed": "You already redeemed an invite code.",
+    "errorWindowExpired": "Invite codes can only be redeemed during the first days after signing up.",
+    "errorNoPet": "Create a pet first, then you can redeem the code.",
+    "errorTooMany": "Too many attempts. Please wait a few minutes.",
+    "errorGeneric": "That did not work. Please try again.",
+    "rulesNote": "An invite counts once the invited pet is created and has published its first post. Ranks are digital awards without monetary value. Ranks you reach stay with you unless the program is abused."
+  },
+  "ReferralOnboarding": {
+    "title": "How did you hear about PawFeed?",
+    "subtitle": "Optional. It helps us understand where we reach new pet lovers.",
+    "source_FRIENDS": "Friends or family",
+    "source_TIKTOK": "TikTok",
+    "source_INSTAGRAM": "Instagram",
+    "source_YOUTUBE": "YouTube",
+    "source_FACEBOOK": "Facebook",
+    "source_SHELTER_OR_PARTNER": "Shelter, club or shop",
+    "source_STORE_SEARCH": "App Store or Google Play",
+    "source_PRESS": "Newspaper, radio or blog",
+    "source_OTHER": "Other",
+    "redeemed": "Redeemed. You and {name} now follow each other.",
+    "redeemedGeneric": "Code redeemed.",
+    "continue": "Continue",
+    "skip": "Skip"
+  },
+  "ReferralLanding": {
+    "titleWithPet": "{name} invites you to PawFeed",
+    "titleGeneric": "You are invited to PawFeed",
+    "subtitle": "PawFeed is the social network where your pet has the profile: photos, short videos, stories and vaccination record in one place.",
+    "codeLabel": "Invite code",
+    "codeHint": "Enter the code during onboarding after signing up and you are connected right away.",
+    "webSignUp": "Sign up in the browser"
+  },
+  "FoundingMember": {
+    "label": "Founding member",
+    "tooltip": "Founding member – one of the first 250 pets on PawFeed"
+  },
+  "InMemory": {
+    "label": "In memory",
+    "tooltip": "In loving memory",
+    "banner": "In loving memory of {name} · {date}",
+    "settingsHeading": "Memorial mode",
+    "settingsHint": "If your pet has crossed the rainbow bridge, you can keep their profile as a loving memorial. All posts stay, and you can keep sharing memories. Birthday and vaccine reminders pause so nothing catches you off guard.",
+    "activeHint": "{name}'s profile is kept as a memorial. You can adjust the date or end memorial mode at any time.",
+    "dateLabel": "Day of farewell",
+    "activate": "Keep profile as a memorial",
+    "saveDate": "Save date",
+    "remove": "End memorial mode",
+    "confirmTitle": "Keep {name}'s profile as a memorial?",
+    "confirmDescription": "We're so sorry. {name}'s profile gets a memorial ribbon, and everything you've shared stays. Those who follow {name} will be told once, quietly in their notifications – no push. You can undo this at any time.",
+    "confirm": "Yes, keep it",
+    "cancel": "Not yet",
+    "saved": "The profile is now kept as a memorial.",
+    "removed": "Memorial mode ended.",
+    "saveFailed": "That didn't work, sorry. Please try again."
+  },
+  "LostPublic": {
+    "badge": "Missing",
+    "heading": "Have you seen {name}?",
+    "metaTitle": "Missing: {name} – have you seen this pet?",
+    "metaDescription": "Last seen: {place}. Every tip helps – please share.",
+    "lastSeenPlace": "Last seen",
+    "lastSeenAt": "When",
+    "details": "Distinguishing features & notes",
+    "contactHeading": "Please get in touch if you see {name}",
+    "messageInPawFeed": "Send a message on PawFeed",
+    "mailSubject": "A tip about {name}",
+    "approachHint": "Please don't chase or try to catch the pet – frightened animals often run further away. Watch calmly, note the place and time and let us know.",
+    "photosHeading": "More photos",
+    "photoAlt": "Photo of {name}",
+    "share": "Share this page – every share helps",
+    "copied": "Link copied",
+    "foundTitle": "{name} is safely back home 🎉",
+    "foundText": "Thank you to everyone who shared and helped search!",
+    "openInPawFeed": "Visit {name} on PawFeed",
+    "rateLimited": "Too many requests – please try again in a minute."
+  },
+  "LostReport": {
+    "badge": "Missing",
+    "teaser": "Has {name} run away? Start a missing report right here.",
+    "open": "Report missing",
+    "formHeading": "Report {name} as missing",
+    "formHint": "We're keeping our fingers crossed. Everyone who follows {name} or whom {name} follows gets a push notification right away, and you get a page to share – even with people who aren't on PawFeed.",
+    "activeHeading": "{name} is missing",
+    "activeHint": "Share the link as often as you can – for example in neighbourhood WhatsApp groups. You can add details at any time.",
+    "lastSeenAt": "Last seen on",
+    "lastSeenPlace": "Where last seen?",
+    "lastSeenPlacePlaceholder": "e.g. North City Park, near the playground",
+    "description": "Distinguishing features & notes",
+    "descriptionPlaceholder": "e.g. red collar, microchipped, rather shy – please don't call out",
+    "contactHint": "Contact details are optional – please only enter your own. They only appear on this report's share page and are deleted once the report ends. A message via PawFeed is always possible.",
+    "contactPhone": "Phone number (optional)",
+    "contactEmail": "Email (optional)",
+    "allowIndexing": "Allow search engines to find this page",
+    "allowIndexingHint": "More reach, but strangers can find it too. Unchecked, the page is only reachable via the link.",
+    "submit": "Start missing report",
+    "cancel": "Cancel",
+    "saveChanges": "Save changes",
+    "notifyFound": "Let everyone know {name} is back",
+    "markFound": "{name} is back!",
+    "share": "Share link",
+    "shareTitle": "Missing: {name}",
+    "copied": "Link copied",
+    "created": "Your report is out. We're keeping our fingers crossed that {name} finds the way home soon.",
+    "updated": "Details saved.",
+    "foundToast": "How wonderful – welcome back, {name}! 🎉",
+    "saveFailed": "That didn't work, sorry. Please try again.",
+    "bannerTitle": "{name} is missing",
+    "bannerText": "Last seen: {place} · {date}",
+    "bannerLink": "All details & share page"
+  },
+  "Caretaker": {
+    "heading": "Co-caretaker",
+    "intro": "Does someone else look after {name} too? Invite a second person – they use their own account and can post as {name}, answer messages and see the health records.",
+    "createInvite": "Invite a co-caretaker",
+    "inviteHint": "Share this code with that person. They enter it under “My pets” or during sign-up. You then decide whether to approve the request.",
+    "copy": "Copy code",
+    "copyLink": "Copy link",
+    "copied": "Copied",
+    "validUntil": "Valid until {date}",
+    "newCode": "Create new code",
+    "revokeInvite": "Withdraw invitation",
+    "requestFrom": "Co-care request from {who}",
+    "requestHint": "If you approve, this person can act as {name}. Deleting, privacy and memorial mode stay with you.",
+    "approve": "Approve",
+    "reject": "Decline",
+    "approved": "Approved – you now care for this pet together.",
+    "activeWith": "{who} co-cares for {name} with you.",
+    "remove": "Remove co-caretaker",
+    "removeConfirm": "Should this person stop co-caring for {name}? Their posts as {name} stay.",
+    "youCoCare": "You co-care for {name}.",
+    "caretakerLimits": "Deleting, privacy and memorial mode are managed by the main owner.",
+    "leave": "Stop co-caring",
+    "leaveConfirm": "Do you want to stop co-caring for {name}? You can be invited again later.",
+    "left": "You no longer co-care for {name}.",
+    "cancel": "Cancel",
+    "unknownAccount": "another account",
+    "failed": "Sorry, that didn't work.",
+    "codeLabel": "Invitation code",
+    "codeHint": "You get the code from the pet's main owner. It is valid for 7 days.",
+    "redeem": "Redeem",
+    "requestSent": "Request sent – once approved, you'll find {name} under “My pets”.",
+    "waiting": "Your request for {name} is waiting for approval.",
+    "checkAgain": "Check again",
+    "withdraw": "Withdraw"
   }
 }

mobile/.gitignore

@@ -48,3 +48,6 @@ yarn-error.*
 # generated native folders
 /ios
 /android
+
+# Local tester/debug screenshots (e.g. from appetize.io) — not app assets
+/debug

mobile/app.json

@@ -8,8 +8,13 @@
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",
     "ios": {
-      "supportsTablet": true,
-      "bundleIdentifier": "org.pawfeed.app"
+      "supportsTablet": false,
+      "bundleIdentifier": "org.pawfeed.app",
+      "buildNumber": "4",
+      "usesAppleSignIn": true,
+      "infoPlist": {
+        "ITSAppUsesNonExemptEncryption": false
+      }
     },
     "android": {
       "package": "org.pawfeed.app",
@@ -64,7 +69,16 @@
         }
       ],
       "expo-web-browser",
-      "@sentry/react-native"
+      "expo-apple-authentication",
+      "@sentry/react-native",
+      [
+        "expo-build-properties",
+        {
+          "ios": {
+            "deploymentTarget": "17.0"
+          }
+        }
+      ]
     ],
     "extra": {
       "router": {},

mobile/app/(app)/(tabs)/_layout.tsx

@@ -152,13 +152,28 @@ function SettingsHeaderButton() {
   );
 }
 
+// found.md: a push for a new message arrived but the speech bubble showed
+// nothing. Polling keeps the badge current while the app stays open; reading
+// a conversation invalidates conversations.* (see messages/[conversationId]).
+const UNREAD_MESSAGES_POLL_MS = 30 * 1000;
+
 function MessagesHeaderButton() {
   const router = useRouter();
+  const trpc = useTRPC();
+  const { activePetId } = useActivePet();
   const { colors } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
+  const { data } = useQuery({
+    ...trpc.conversations.unreadCount.queryOptions({ petId: activePetId ?? "" }),
+    enabled: !!activePetId,
+    refetchInterval: UNREAD_MESSAGES_POLL_MS,
+  });
   return (
     <Pressable onPress={() => router.push("/messages")} hitSlop={8} style={styles.headerButton}>
-      <MessageCircle color={colors.ink} size={22} />
+      <View>
+        <MessageCircle color={colors.ink} size={22} />
+        <UnreadBadge count={data?.count ?? 0} styles={styles} />
+      </View>
     </Pressable>
   );
 }
@@ -172,16 +187,20 @@ function NotificationsTabIcon({ color, size }: { color: ColorValue; size: number
     ...trpc.notifications.unreadCount.queryOptions({ petId: activePetId ?? "" }),
     enabled: !!activePetId,
   });
-  const count = data?.count ?? 0;
 
   return (
     <View>
       <Bell color={color} size={size} />
-      {count > 0 && (
-        <View style={styles.badge}>
-          <Text style={styles.badgeText}>{count > 9 ? "9+" : count}</Text>
-        </View>
-      )}
+      <UnreadBadge count={data?.count ?? 0} styles={styles} />
+    </View>
+  );
+}
+
+function UnreadBadge({ count, styles }: { count: number; styles: ReturnType<typeof makeStyles> }) {
+  if (count <= 0) return null;
+  return (
+    <View style={styles.badge}>
+      <Text style={styles.badgeText}>{count > 9 ? "9+" : count}</Text>
     </View>
   );
 }

mobile/app/(app)/(tabs)/explore.tsx

@@ -164,7 +164,7 @@ function ExplorePetCard({ pet }: { pet: ExplorePet }) {
   return (
     <Pressable style={styles.cardPress} onPress={() => router.push(`/pets/${pet.id}`)}>
       <Card style={styles.card}>
-        <PetAvatar name={pet.name} avatarKey={pet.avatarKey} size="lg" />
+        <PetAvatar name={pet.name} avatarKey={pet.avatarKey} size="lg" owner={pet.owner} />
         <Text style={styles.name} numberOfLines={1}>
           {formatPetName(pet)}
         </Text>
@@ -184,13 +184,13 @@ function makeStyles(colors: ColorTokens) {
     center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24, backgroundColor: colors.porchWhite },
     errorText: { ...typography.body, color: colors.alertRed },
     name: { ...typography.body, fontFamily: typography.title.fontFamily },
-    followers: { ...typography.label, textTransform: "none", letterSpacing: 0 },
+    followers: { ...typography.caption },
     footer: { marginVertical: 16 },
     filters: { gap: 10, marginBottom: 12 },
     speciesTabs: { gap: 8 },
     tab: { paddingHorizontal: 14, height: 36, borderRadius: radii.lg, justifyContent: "center", backgroundColor: colors.whisperGray },
     tabActive: { backgroundColor: colors.marigoldOrange },
-    tabText: { ...typography.label, textTransform: "none", letterSpacing: 0, color: colors.ink },
+    tabText: { ...typography.caption, color: colors.ink },
     tabTextActive: { color: colors.pureWhite },
     breedFilter: { width: 220 },
   });

mobile/app/(app)/(tabs)/notifications.tsx

@@ -9,6 +9,8 @@ import { useActivePet } from "../../../src/context/ActivePetContext";
 import { useTheme } from "../../../src/context/ThemeContext";
 import { PetAvatar } from "../../../src/components/PetAvatar";
 import { formatPetName, formatRelativeTime } from "../../../src/lib/format";
+import { isoToDisplayDate } from "../../../src/lib/date-format";
+import { notificationRoute } from "../../../src/lib/notification-route";
 import { getTypography, type ColorTokens, type Typography } from "../../../src/theme/tokens";
 import type { NotificationItem } from "../../../src/api/types";
 
@@ -20,6 +22,13 @@ const ACTOR_MESSAGE_KEYS: Partial<Record<NotificationItem["type"], string>> = {
   MENTION: "notifications.mention",
   PAW_BACK: "notifications.pawBack",
   PET_SUGGESTION: "notifications.petSuggestion",
+  REFERRAL_JOINED: "notifications.referralJoined",
+  STORY_MENTION: "notifications.storyMention",
+  STORY_COMMENT: "notifications.storyComment",
+  STORY_REACTION: "notifications.storyReaction",
+  PET_DECEASED: "notifications.petDeceased",
+  PET_LOST: "notifications.petLost",
+  PET_FOUND: "notifications.petFound",
 };
 
 // BIRTHDAY/ADOPTION_DAY are self-referential ("your pet's day today") — the
@@ -28,6 +37,8 @@ const ACTOR_MESSAGE_KEYS: Partial<Record<NotificationItem["type"], string>> = {
 const SELF_MESSAGE_KEYS: Partial<Record<NotificationItem["type"], string>> = {
   BIRTHDAY: "notifications.birthday",
   ADOPTION_DAY: "notifications.adoptionDay",
+  REFERRAL_RANK_UP: "notifications.referralRankUp",
+  CARETAKER_REQUEST: "notifications.caretakerRequest",
 };
 
 // Suffix only — the actor's name is rendered separately as its own tappable
@@ -35,41 +46,51 @@ const SELF_MESSAGE_KEYS: Partial<Record<NotificationItem["type"], string>> = {
 // independently of the row's own tap target, ported from web's
 // notifications/page.tsx (name as a <Link>, rest as plain text).
 function getNotificationSuffix(item: NotificationItem, t: TFunction): string {
+  if (item.type === "VACCINE_DUE") {
+    if (!item.vaccine?.nextDueDate) return t("notifications.vaccineDueGeneric");
+    const iso = new Date(item.vaccine.nextDueDate).toISOString().slice(0, 10);
+    return t("notifications.vaccineDue", { name: item.vaccine.name, date: isoToDisplayDate(iso) });
+  }
   const selfKey = SELF_MESSAGE_KEYS[item.type];
   if (selfKey) return t(selfKey);
   const actorKey = ACTOR_MESSAGE_KEYS[item.type];
   if (actorKey && item.actorPet) return t(actorKey);
-  return item.type;
+  // Nie den Code-Namen zeigen (z. B. neuer Typ vom Server, den diese App-Version noch nicht kennt).
+  return t("notifications.unknown");
 }
 
+const SELF_ICONS: Partial<Record<NotificationItem["type"], string>> = {
+  BIRTHDAY: "🎂",
+  VACCINE_DUE: "💉",
+};
+
 /**
- * Port of web's notifications/page.tsx getHref()/getPostId(): FOLLOW goes to
- * the actor's profile, BIRTHDAY/ADOPTION_DAY to this pet's own health page
- * (the anniversary is about *this* pet, there's no other actor to visit),
- * and REACTION/COMMENT/MENTION/PAW_BACK go to the post. Web opens the post
- * in an inline dialog; mobile has no such dialog, so this goes to the
- * comments screen instead — the closest existing route to "the post".
- * MESSAGE has no target here either, matching web (it doesn't handle it
- * there so this doesn't try to be smarter about it).
+ * Ziel einer Mitteilung — gemeinsame Regel mit dem Antippen von Push-Mitteilungen
+ * (src/lib/notification-route.ts): Nachricht → Gespräch, Kommentar/Pfote/Erwähnung
+ * → Beitrag, Story-Mitteilungen → die Story, Follow/Vorschlag → Profil,
+ * Geburtstag/Impfung → Gesundheit. Nur in Event-Handlern aufrufen (Date.now()).
  */
 function getNotificationRoute(item: NotificationItem): string | null {
-  switch (item.type) {
-    case "FOLLOW":
-    case "PET_SUGGESTION":
-      return item.actorPet ? `/pets/${item.actorPet.id}` : null;
-    case "BIRTHDAY":
-    case "ADOPTION_DAY":
-      return item.recipientPetId ? `/pets/${item.recipientPetId}/health` : null;
-    case "REACTION":
-    case "COMMENT":
-    case "MENTION":
-    case "PAW_BACK":
-      return item.post?.id ? `/posts/${item.post.id}/comments` : null;
-    default:
-      return null;
-  }
+  return notificationRoute(
+    {
+      type: item.type,
+      recipientPetId: item.recipientPetId,
+      actorPetId: item.actorPet?.id ?? null,
+      postId: item.post?.id ?? null,
+      conversationId: item.conversationId,
+      storyId: item.story?.id ?? null,
+      storyPetId: item.story?.petId ?? null,
+      storyPetName: item.story?.pet.name ?? null,
+      storyPetAvatarKey: item.story?.pet.avatarKey ?? null,
+      storyExpiresAt: item.story?.expiresAt ?? null,
+    },
+    Date.now()
+  );
 }
 
+/** Bei diesen Typen führt auch der Name direkt zum Ziel (nicht zum Profil-Umweg). */
+const NAME_OPENS_TARGET = new Set(["MESSAGE", "STORY_MENTION", "STORY_COMMENT", "STORY_REACTION"]);
+
 /** Port of web's notifications list — tapping a row marks it read and navigates to its target (post/pet). */
 export default function NotificationsScreen() {
   const { t } = useTranslation();
@@ -152,16 +173,28 @@ export default function NotificationsScreen() {
           }}
         >
           {item.actorPet ? (
-            <PetAvatar name={item.actorPet.name} avatarKey={item.actorPet.avatarKey} />
+            <PetAvatar name={item.actorPet.name} avatarKey={item.actorPet.avatarKey} owner={item.actorPet.owner} />
           ) : (
             <View style={styles.selfIcon}>
-              <Text style={styles.selfIconText}>{item.type === "BIRTHDAY" ? "🎂" : "🏠"}</Text>
+              <Text style={styles.selfIconText}>{SELF_ICONS[item.type] ?? "🏠"}</Text>
             </View>
           )}
           <View style={styles.rowText}>
             <Text style={styles.bodyText}>
               {item.actorPet && (
-                <Text style={styles.actorName} onPress={() => router.push(`/pets/${item.actorPet!.id}`)}>
+                <Text
+                  style={styles.actorName}
+                  onPress={() => {
+                    // Bei Nachrichten und Storys führt auch der Name direkt zum Ziel.
+                    const targetRoute = NAME_OPENS_TARGET.has(item.type) ? getNotificationRoute(item) : null;
+                    if (targetRoute) {
+                      if (!item.read) markRead.mutate({ notificationId: item.id });
+                      router.push(targetRoute);
+                    } else {
+                      router.push(`/pets/${item.actorPet!.id}`);
+                    }
+                  }}
+                >
                   {formatPetName(item.actorPet)}{" "}
                 </Text>
               )}
@@ -196,7 +229,7 @@ function makeStyles(colors: ColorTokens) {
     row: { flexDirection: "row", gap: 12, padding: 12, borderRadius: 12 },
     rowUnread: { backgroundColor: colors.marigoldTint },
     rowText: { flex: 1, gap: 2 },
-    timestamp: { ...typography.label, textTransform: "none", letterSpacing: 0 },
+    timestamp: { ...typography.caption },
     footer: { marginVertical: 16 },
     selfIcon: {
       width: 40,

mobile/app/(app)/(tabs)/pets.tsx

@@ -11,6 +11,7 @@ import { Card } from "../../../src/components/Card";
 import { formatPetName } from "../../../src/lib/format";
 import { getTypography, type ColorTokens, type Typography } from "../../../src/theme/tokens";
 import type { Pet } from "../../../src/api/types";
+import { CaretakerRedeem } from "../../../src/components/caretaker/CaretakerRedeem";
 
 /**
  * List of the owner's own pets (pets.list()). Tapping a row opens that
@@ -60,6 +61,15 @@ export default function PetsScreen() {
           <Text style={getTypography(colors).body}>{t("pets.empty")}</Text>
         </View>
       }
+      // Mitbetreuer: Einladungscode eines anderen Kontos einlösen
+      ListFooterComponent={
+        <View style={styles.caretaker}>
+          <Text style={styles.caretakerHeading}>{t("caretaker.redeemHeading")}</Text>
+          <CaretakerRedeem />
+        </View>
+      }
+      automaticallyAdjustKeyboardInsets
+      keyboardShouldPersistTaps="handled"
     />
   );
 }
@@ -80,11 +90,11 @@ function PetRow({
   return (
     <Pressable onPress={onPress}>
       <Card style={styles.row}>
-        <PetAvatar name={pet.name} avatarKey={pet.avatarKey} size="lg" />
+        <PetAvatar name={pet.name} avatarKey={pet.avatarKey} size="lg" owner={pet.owner} />
         <View style={styles.rowText}>
           <View style={styles.nameRow}>
             <Text style={styles.name}>{formatPetName(pet)}</Text>
-            <PetIdentityBadges isVerified={pet.isVerified} />
+            <PetIdentityBadges isLost={!!pet.lostSince} isDeceased={!!pet.deceasedAt} isVerified={pet.isVerified} />
           </View>
           <Text style={styles.breed}>{pet.breed?.name ?? pet.species.name}</Text>
         </View>
@@ -112,6 +122,8 @@ function makeStyles(colors: ColorTokens) {
   return StyleSheet.create({
     list: { padding: 16, flexGrow: 1, backgroundColor: colors.porchWhite },
     separator: { height: 12 },
+    caretaker: { marginTop: 32, gap: 8 },
+    caretakerHeading: { ...typography.title, fontSize: 16 },
     center: { flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: colors.porchWhite },
     row: { flexDirection: "row", alignItems: "center", gap: 12 },
     rowText: { flex: 1, gap: 2 },

mobile/app/(app)/_layout.tsx

@@ -4,6 +4,7 @@ import { X } from "lucide-react-native";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../../src/context/ThemeContext";
 import { fontFamily } from "../../src/theme/tokens";
+import { useNotificationTapRouting } from "../../src/hooks/useNotificationTapRouting";
 
 function CloseModalButton() {
   const router = useRouter();
@@ -17,6 +18,8 @@ function CloseModalButton() {
 
 export default function AppLayout() {
   const { t } = useTranslation();
+  // Push-Mitteilung angetippt → direkt zum Ziel (Gespräch, Beitrag, Story …)
+  useNotificationTapRouting();
   const { colors } = useTheme();
   // Plain prop objects, not StyleSheet.create — safe to recompute on every
   // render, unlike the module-level StyleSheet.create calls most other
@@ -31,6 +34,9 @@ export default function AppLayout() {
     // found.md: "kein Zurückbutton" on the health screen wasn't a missing
     // button, it was a black-on-black one).
     headerTintColor: colors.ink,
+    // iOS labels the back button with the previous screen's title — here the
+    // untitled `(tabs)` group, so it literally read "< (tabs)". Chevron only.
+    headerBackButtonDisplayMode: "minimal",
   } as const;
 
   return (
@@ -43,10 +49,13 @@ export default function AppLayout() {
       <Stack.Screen name="pets/[petId]/following" options={{ ...headerOptions, title: t("screens.following") }} />
       <Stack.Screen name="pets/[petId]/health/index" options={{ ...headerOptions, title: t("screens.health") }} />
       <Stack.Screen name="pets/[petId]/milestones" options={{ ...headerOptions, title: t("screens.milestones") }} />
+      <Stack.Screen name="lost/[petId]" options={{ ...headerOptions, title: t("screens.lost") }} />
       <Stack.Screen name="posts/[postId]/comments" options={{ ...headerOptions, title: t("screens.comments") }} />
       <Stack.Screen name="messages/[conversationId]" options={{ ...headerOptions, title: t("screens.conversation") }} />
       <Stack.Screen name="search" options={{ ...headerOptions, title: t("screens.search") }} />
       <Stack.Screen name="settings" options={{ ...headerOptions, title: t("screens.settings") }} />
+      <Stack.Screen name="invite" options={{ ...headerOptions, title: t("screens.invite") }} />
+      <Stack.Screen name="delete-account" options={{ ...headerOptions, title: t("screens.deleteAccount") }} />
       <Stack.Screen
         name="post-new"
         options={{
@@ -65,6 +74,11 @@ export default function AppLayout() {
           headerLeft: () => <CloseModalButton />,
         }}
       />
+      {/* Story-Editor: eigener Vollbild-Screen, ohne Wisch-zum-Schließen (Ziehgesten der Overlays). */}
+      <Stack.Screen
+        name="story-editor"
+        options={{ headerShown: false, presentation: "fullScreenModal", animation: "fade", gestureEnabled: false }}
+      />
       <Stack.Screen
         name="milestone-new"
         options={{

mobile/app/(app)/delete-account.tsx

@@ -0,0 +1,142 @@
+import { useMemo, useState } from "react";
+import { View, Text, ScrollView, Alert, KeyboardAvoidingView, Platform, StyleSheet } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useAuth } from "@clerk/expo";
+import { useQueryClient } from "@tanstack/react-query";
+import { TriangleAlert } from "lucide-react-native";
+import * as Sentry from "@sentry/react-native";
+import { useActivePet } from "../../src/context/ActivePetContext";
+import { useTheme } from "../../src/context/ThemeContext";
+import { Button } from "../../src/components/Button";
+import { TextField } from "../../src/components/TextField";
+import { env } from "../../src/lib/env";
+import { getTypography, radii, type ColorTokens, type Typography } from "../../src/theme/tokens";
+import { useBottomSafePadding } from "../../src/hooks/useBottomSafePadding";
+
+const DELETED_ITEMS = ["itemPets", "itemPosts", "itemMedia", "itemMessages", "itemHealth", "itemAccount"] as const;
+
+/**
+ * In-app account deletion — required by App Store Guideline 5.1.1(v) for any
+ * app that lets users create an account. Port of web's
+ * src/components/account/DeleteAccountDialog.tsx: same warning list, same
+ * "type one of your pets' names" confirmation, and the same backend route
+ * (POST /api/account/delete → deleteOwnerAccount(), which also deletes the
+ * Clerk user). That route reads Clerk's auth() like tRPC does, so the mobile
+ * session token in the Authorization header authenticates it.
+ */
+export default function DeleteAccountScreen() {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const bottomPadding = useBottomSafePadding();
+  const { getToken, signOut } = useAuth();
+  const { pets, clearActivePetId } = useActivePet();
+  const queryClient = useQueryClient();
+  const [petName, setPetName] = useState("");
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isValidName = pets.some((pet) => pet.name.toLowerCase() === petName.trim().toLowerCase());
+
+  const deleteAccount = async () => {
+    setIsDeleting(true);
+    setError(null);
+    try {
+      const token = await getToken();
+      const res = await fetch(`${env.apiUrl}/api/account/delete`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(token ? { authorization: `Bearer ${token}` } : {}),
+        },
+        body: JSON.stringify({ petNameConfirmation: petName.trim() }),
+      });
+      if (!res.ok) {
+        const data = (await res.json().catch(() => ({}))) as { error?: string };
+        throw new Error(data.error ?? t("deleteAccount.genericError"));
+      }
+    } catch (err) {
+      Sentry.captureException(err);
+      setError(err instanceof Error ? err.message : t("deleteAccount.genericError"));
+      setIsDeleting(false);
+      return;
+    }
+
+    // The Clerk user no longer exists server-side, so signOut() may reject —
+    // either way the local session is cleared and useProtectedRoute() sends
+    // the user back to sign-in.
+    queryClient.clear();
+    clearActivePetId();
+    Alert.alert(t("deleteAccount.doneTitle"));
+    await signOut().catch(() => undefined);
+  };
+
+  const confirmDelete = () => {
+    Alert.alert(t("deleteAccount.finalConfirmTitle"), t("deleteAccount.finalConfirmMessage"), [
+      { text: t("common.cancel"), style: "cancel" },
+      { text: t("deleteAccount.confirmDelete"), style: "destructive", onPress: () => void deleteAccount() },
+    ]);
+  };
+
+  return (
+    <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === "ios" ? "padding" : undefined}>
+      <ScrollView contentContainerStyle={[styles.content, bottomPadding]} keyboardShouldPersistTaps="handled">
+        <View style={styles.titleRow}>
+          <TriangleAlert color={colors.alertRed} size={22} />
+          <Text style={styles.title}>{t("deleteAccount.warningTitle")}</Text>
+        </View>
+        <Text style={styles.intro}>{t("deleteAccount.warningIntro")}</Text>
+
+        <View style={styles.card}>
+          {DELETED_ITEMS.map((item) => (
+            <Text key={item} style={styles.item}>
+              <Text style={styles.itemMark}>✕  </Text>
+              {t(`deleteAccount.${item}`)}
+            </Text>
+          ))}
+        </View>
+
+        <Text style={styles.intro}>{t("deleteAccount.confirmIntro")}</Text>
+        <TextField
+          placeholder={t("deleteAccount.inputPlaceholder")}
+          value={petName}
+          onChangeText={setPetName}
+          autoCapitalize="none"
+          autoCorrect={false}
+          editable={!isDeleting}
+        />
+        {error ? <Text style={styles.error}>{error}</Text> : null}
+
+        <Button
+          title={isDeleting ? t("deleteAccount.deleting") : t("deleteAccount.confirmDelete")}
+          disabled={!isValidName || isDeleting}
+          onPress={confirmDelete}
+          style={styles.deleteButton}
+        />
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography: Typography = getTypography(colors);
+  return StyleSheet.create({
+    flex: { flex: 1, backgroundColor: colors.porchWhite },
+    content: { padding: 20, gap: 12, flexGrow: 1, backgroundColor: colors.porchWhite },
+    titleRow: { flexDirection: "row", alignItems: "center", gap: 8 },
+    title: { ...typography.title, fontSize: 18, color: colors.alertRed },
+    intro: { ...typography.body, color: colors.quietGray },
+    card: {
+      gap: 8,
+      padding: 14,
+      borderRadius: radii.xl,
+      borderWidth: 1,
+      borderColor: colors.hairlineGray,
+      backgroundColor: colors.pureWhite,
+    },
+    item: { ...typography.body },
+    itemMark: { color: colors.alertRed, fontWeight: "700" },
+    error: { ...typography.body, color: colors.alertRed },
+    deleteButton: { marginTop: 8, backgroundColor: colors.alertRed },
+  });
+}

mobile/app/(app)/invite.tsx

@@ -0,0 +1,153 @@
+import { useMemo } from "react";
+import { ActivityIndicator, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronRight, PawPrint } from "lucide-react-native";
+import { useTRPC } from "../../src/api/trpc";
+import { useTheme } from "../../src/context/ThemeContext";
+import { useBottomSafePadding } from "../../src/hooks/useBottomSafePadding";
+import { useReferralRanks } from "../../src/hooks/useReferralRanks";
+import { PetAvatar } from "../../src/components/PetAvatar";
+import { Reveal } from "../../src/components/Reveal";
+import { InviteCard } from "../../src/components/referrals/InviteCard";
+import { RankLadder } from "../../src/components/referrals/RankLadder";
+import { RedeemCodeForm } from "../../src/components/referrals/RedeemCodeForm";
+import { fontFamily, getTypography, type ColorTokens } from "../../src/theme/tokens";
+
+type InviteeStatus = "counted" | "waiting" | "in-review" | "revoked";
+
+const STATUS_KEYS: Record<InviteeStatus, string> = {
+  counted: "referrals.statusCounted",
+  waiting: "referrals.statusWaiting",
+  "in-review": "referrals.statusInReview",
+  revoked: "referrals.statusRevoked",
+};
+
+/**
+ * Port of web's /einladen in the same look as the settings card: InviteCard
+ * on top (rank, code, progress, native share — no extra native module, OTA-
+ * safe), rank timeline, invited pets with status pills, late code entry.
+ */
+export default function InviteScreen() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const trpc = useTRPC();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const bottomPadding = useBottomSafePadding();
+  const { ranks } = useReferralRanks();
+  const { data, isLoading } = useQuery(trpc.referrals.me.queryOptions());
+
+  if (isLoading || !data) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={colors.marigoldOrange} />
+      </View>
+    );
+  }
+
+  const statusColor: Record<InviteeStatus, string> = {
+    counted: "#059669",
+    waiting: colors.marigoldOrange,
+    "in-review": colors.quietGray,
+    revoked: colors.alertRed,
+  };
+
+  return (
+    <ScrollView
+      contentContainerStyle={[styles.content, bottomPadding]}
+      automaticallyAdjustKeyboardInsets
+      keyboardShouldPersistTaps="handled"
+    >
+      <Text style={styles.intro}>{t("referrals.subtitle")}</Text>
+
+      {!data.programActive && <Text style={styles.notice}>{t("referrals.programPaused")}</Text>}
+
+      <InviteCard />
+
+      <Reveal index={2}>
+        <RankLadder
+          ranks={ranks}
+          achievedRankIds={new Set(data.achievedRankIds)}
+          qualifiedCount={data.qualifiedCount}
+          nextRankId={data.nextRankId}
+        />
+      </Reveal>
+
+      <Reveal index={3}>
+        <View style={styles.card}>
+          <Text style={styles.heading}>{t("referrals.inviteesHeading")}</Text>
+          {data.invitees.length === 0 ? (
+            <View style={styles.empty}>
+              <View style={styles.emptyIcon}>
+                <PawPrint color={colors.marigoldOrange} size={22} />
+              </View>
+              <Text style={styles.emptyText}>{t("referrals.inviteesEmpty")}</Text>
+            </View>
+          ) : (
+            data.invitees.map((invitee, index) => {
+              const status = invitee.status as InviteeStatus;
+              return (
+                <Pressable
+                  key={invitee.pet?.id ?? `invitee-${index}`}
+                  style={({ pressed }) => [styles.inviteeRow, pressed && invitee.pet && styles.pressed]}
+                  disabled={!invitee.pet}
+                  onPress={() => invitee.pet && router.push(`/pets/${invitee.pet.id}`)}
+                >
+                  {invitee.pet ? (
+                    <PetAvatar name={invitee.pet.name} avatarKey={invitee.pet.avatarKey} size="sm" />
+                  ) : (
+                    <View style={styles.noPetAvatar} />
+                  )}
+                  <Text style={styles.inviteeName} numberOfLines={1}>
+                    {invitee.pet?.name ?? t("referrals.inviteeNoPet")}
+                  </Text>
+                  <View style={[styles.statusPill, { borderColor: statusColor[status] }]}>
+                    <Text style={[styles.statusText, { color: statusColor[status] }]}>{t(STATUS_KEYS[status])}</Text>
+                  </View>
+                  {invitee.pet ? <ChevronRight size={16} color={colors.quietGray} /> : null}
+                </Pressable>
+              );
+            })
+          )}
+        </View>
+      </Reveal>
+
+      {data.canRedeem && (
+        <Reveal index={4}>
+          <View style={styles.card}>
+            <Text style={styles.heading}>{t("referrals.redeemHeading")}</Text>
+            <Text style={styles.muted}>{t("referrals.redeemSubtitle")}</Text>
+            <RedeemCodeForm />
+          </View>
+        </Reveal>
+      )}
+
+      <Text style={styles.footnote}>{t("referrals.rulesNote")}</Text>
+    </ScrollView>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    center: { flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: colors.porchWhite },
+    content: { padding: 16, gap: 16, flexGrow: 1, backgroundColor: colors.porchWhite },
+    intro: { ...typography.body, fontSize: 15, lineHeight: 22, color: colors.quietGray },
+    notice: { ...typography.body, fontSize: 13, padding: 12, borderRadius: 14, backgroundColor: colors.marigoldTint, color: colors.ink },
+    card: { gap: 12, padding: 18, borderRadius: 22, borderWidth: 1, borderColor: colors.hairlineGray, backgroundColor: colors.pureWhite },
+    heading: { ...typography.title, fontSize: 16 },
+    muted: { ...typography.body, fontSize: 13, color: colors.quietGray },
+    empty: { flexDirection: "row", alignItems: "center", gap: 12 },
+    emptyIcon: { width: 44, height: 44, borderRadius: 13, backgroundColor: colors.marigoldTint, alignItems: "center", justifyContent: "center" },
+    emptyText: { ...typography.body, flex: 1, fontSize: 13.5, lineHeight: 19, color: colors.quietGray },
+    inviteeRow: { flexDirection: "row", alignItems: "center", gap: 10, paddingVertical: 6 },
+    pressed: { opacity: 0.7 },
+    noPetAvatar: { width: 32, height: 32, borderRadius: 16, borderWidth: 1.5, borderStyle: "dashed", borderColor: colors.hairlineGray },
+    inviteeName: { flex: 1, fontFamily: fontFamily.semiBold, fontSize: 14.5, color: colors.ink },
+    statusPill: { paddingHorizontal: 9, paddingVertical: 3, borderRadius: 999, borderWidth: 1 },
+    statusText: { fontFamily: fontFamily.semiBold, fontSize: 11.5 },
+    footnote: { ...typography.body, fontSize: 12, lineHeight: 18, color: colors.quietGray },
+  });
+}

mobile/app/(app)/lost/[petId].tsx

@@ -0,0 +1,242 @@
+import { useMemo } from "react";
+import { View, Text, ScrollView, Pressable, Image, ActivityIndicator, Linking, Share, StyleSheet } from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Clock, Info, Mail, MapPin, MessageCircle, Phone, Share2, Siren } from "lucide-react-native";
+import { useTRPC } from "../../../src/api/trpc";
+import { useActivePet } from "../../../src/context/ActivePetContext";
+import { useTheme } from "../../../src/context/ThemeContext";
+import { Button } from "../../../src/components/Button";
+import { env } from "../../../src/lib/env";
+import { getMediaUrl, getAvatarUrl } from "../../../src/lib/media-url";
+import { isoToDisplayDate } from "../../../src/lib/date-format";
+import { useBottomSafePadding } from "../../../src/hooks/useBottomSafePadding";
+import { radii, getTypography, type ColorTokens, type Typography } from "../../../src/theme/tokens";
+
+const RED = "#dc2626";
+
+function pad(n: number): string {
+  return String(n).padStart(2, "0");
+}
+
+/** „04.10.2026, 14:30“ in Ortszeit des Geräts. */
+function formatDateTime(value: Date | string): string {
+  const d = new Date(value);
+  const iso = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+  return `${isoToDisplayDate(iso)}, ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+/**
+ * Vermisst-Ansicht in der App — dieselben Angaben wie die öffentliche Seite
+ * /vermisst/<code>, ohne die App zu verlassen. Ziel des Profil-Banners und des
+ * Antippens einer PET_LOST-Mitteilung (src/lib/notification-route.ts).
+ */
+export default function LostPetScreen() {
+  const { petId } = useLocalSearchParams<{ petId: string }>();
+  const { t } = useTranslation();
+  const trpc = useTRPC();
+  const router = useRouter();
+  const { activePetId, pets } = useActivePet();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const bottomPadding = useBottomSafePadding();
+
+  const { data: report, isLoading } = useQuery(trpc.lostReports.byPet.queryOptions({ petId }));
+  const openConversation = useMutation(
+    trpc.conversations.getOrCreate.mutationOptions({
+      onSuccess: (conversation) => router.push(`/messages/${conversation.id}`),
+    })
+  );
+
+  if (isLoading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={colors.marigoldOrange} />
+      </View>
+    );
+  }
+
+  if (!report) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.emptyTitle}>{t("lostView.notActiveTitle")}</Text>
+        <Text style={styles.muted}>{t("lostView.notActiveText")}</Text>
+        <Button title={t("lostView.toProfile")} variant="outline" onPress={() => router.replace(`/pets/${petId}`)} />
+      </View>
+    );
+  }
+
+  const { pet } = report;
+  const isOwnPet = pets.some((p) => p.id === pet.id);
+  const heroUrl = getAvatarUrl(pet.avatarKey) ?? (report.photos[0] ? getMediaUrl(report.photos[0].storageKey) : undefined);
+  const photoUrls = report.photos.map((p) => getMediaUrl(p.storageKey));
+  const publicUrl = `${env.apiUrl}/vermisst/${report.code}`;
+
+  return (
+    <ScrollView contentContainerStyle={[styles.container, bottomPadding]}>
+      <View style={styles.header}>
+        <View style={styles.badge}>
+          <Siren size={13} color="#fff" />
+          <Text style={styles.badgeText}>{t("lostView.badge")}</Text>
+        </View>
+        <Text style={styles.heading}>{t("lostView.heading", { name: pet.name })}</Text>
+        <Text style={styles.muted}>
+          {pet.speciesName}
+          {pet.breedName ? ` · ${pet.breedName}` : ""}
+        </Text>
+      </View>
+
+      {heroUrl ? <Image source={{ uri: heroUrl }} style={styles.hero} alt={pet.name} /> : null}
+
+      <View style={styles.card}>
+        <Fact icon={<MapPin size={16} color={colors.quietGray} />} label={t("lostView.lastSeenPlace")} value={report.lastSeenPlace} styles={styles} />
+        <Fact icon={<Clock size={16} color={colors.quietGray} />} label={t("lostView.lastSeenAt")} value={formatDateTime(report.lastSeenAt)} styles={styles} />
+        {report.description ? (
+          <Fact icon={<Info size={16} color={colors.quietGray} />} label={t("lostView.details")} value={report.description} styles={styles} />
+        ) : null}
+      </View>
+
+      {!isOwnPet && (
+        <View style={styles.contactCard}>
+          <Text style={styles.contactHeading}>{t("lostView.contactHeading", { name: pet.name })}</Text>
+          {report.contactPhone ? (
+            <ContactButton
+              icon={<Phone size={18} color={colors.ink} />}
+              label={report.contactPhone}
+              onPress={() => void Linking.openURL(`tel:${report.contactPhone!.replace(/[^+0-9]/g, "")}`)}
+              styles={styles}
+            />
+          ) : null}
+          {report.contactEmail ? (
+            <ContactButton
+              icon={<Mail size={18} color={colors.ink} />}
+              label={report.contactEmail}
+              onPress={() =>
+                void Linking.openURL(
+                  `mailto:${report.contactEmail}?subject=${encodeURIComponent(t("lostView.mailSubject", { name: pet.name }))}`
+                )
+              }
+              styles={styles}
+            />
+          ) : null}
+          {activePetId ? (
+            <ContactButton
+              icon={<MessageCircle size={18} color={colors.ink} />}
+              label={t("lostView.message")}
+              onPress={() => openConversation.mutate({ senderPetId: activePetId, recipientPetId: pet.id })}
+              styles={styles}
+            />
+          ) : null}
+          <Text style={styles.hint}>{t("lostView.approachHint")}</Text>
+        </View>
+      )}
+
+      {photoUrls.length > 0 && (
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>{t("lostView.photosHeading")}</Text>
+          <View style={styles.grid}>
+            {photoUrls.map((url, index) => (
+              <Pressable
+                key={report.photos[index].postId}
+                style={styles.gridItem}
+                onPress={() =>
+                  router.push({ pathname: "/image-viewer", params: { images: JSON.stringify(photoUrls), index: String(index) } })
+                }
+              >
+                <Image source={{ uri: url }} style={styles.gridImage} alt={t("lostView.photoAlt", { name: pet.name })} />
+              </Pressable>
+            ))}
+          </View>
+        </View>
+      )}
+
+      <Pressable
+        style={styles.shareButton}
+        accessibilityRole="button"
+        onPress={() => void Share.share({ message: `${t("lostView.shareText", { name: pet.name })} ${publicUrl}` })}
+      >
+        <Share2 size={18} color={colors.ink} />
+        <Text style={styles.shareText}>{t("lostView.share")}</Text>
+      </Pressable>
+      <Button title={t("lostView.toProfile")} variant="outline" onPress={() => router.push(`/pets/${pet.id}`)} />
+    </ScrollView>
+  );
+}
+
+type Styles = ReturnType<typeof makeStyles>;
+
+function Fact({ icon, label, value, styles }: { icon: React.ReactNode; label: string; value: string; styles: Styles }) {
+  return (
+    <View style={styles.fact}>
+      <View style={styles.factIcon}>{icon}</View>
+      <View style={styles.flex}>
+        <Text style={styles.factLabel}>{label}</Text>
+        <Text style={styles.factValue}>{value}</Text>
+      </View>
+    </View>
+  );
+}
+
+function ContactButton({ icon, label, onPress, styles }: { icon: React.ReactNode; label: string; onPress: () => void; styles: Styles }) {
+  return (
+    <Pressable style={styles.contactButton} onPress={onPress} accessibilityRole="button">
+      {icon}
+      <Text style={styles.contactButtonText} numberOfLines={1}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography: Typography = getTypography(colors);
+  return StyleSheet.create({
+    container: { padding: 16, gap: 16, backgroundColor: colors.porchWhite, flexGrow: 1 },
+    center: { flex: 1, alignItems: "center", justifyContent: "center", gap: 12, padding: 24, backgroundColor: colors.porchWhite },
+    emptyTitle: { ...typography.title, fontSize: 18, textAlign: "center" },
+    header: { alignItems: "center", gap: 6 },
+    badge: { flexDirection: "row", alignItems: "center", gap: 4, backgroundColor: RED, borderRadius: 999, paddingHorizontal: 10, paddingVertical: 4 },
+    badgeText: { ...typography.label, color: "#fff", letterSpacing: 0.6 },
+    heading: { ...typography.title, fontSize: 24, textAlign: "center" },
+    muted: { ...typography.body, color: colors.quietGray, textAlign: "center" },
+    hero: { width: "100%", aspectRatio: 1, borderRadius: radii.lg, backgroundColor: colors.whisperGray },
+    card: { gap: 12, padding: 14, borderRadius: radii.lg, borderWidth: 1, borderColor: colors.hairlineGray, backgroundColor: colors.pureWhite },
+    fact: { flexDirection: "row", gap: 10 },
+    factIcon: { paddingTop: 2 },
+    flex: { flex: 1 },
+    factLabel: { ...typography.caption },
+    factValue: { ...typography.body },
+    contactCard: { gap: 8, padding: 14, borderRadius: radii.lg, borderWidth: 1, borderColor: colors.alertRedTint, backgroundColor: colors.alertRedTint },
+    contactHeading: { ...typography.title, fontSize: 16 },
+    contactButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 10,
+      height: 48,
+      paddingHorizontal: 14,
+      borderRadius: radii.lg,
+      backgroundColor: colors.pureWhite,
+      borderWidth: 1,
+      borderColor: colors.hairlineGray,
+    },
+    contactButtonText: { ...typography.body, fontFamily: typography.title.fontFamily, flexShrink: 1 },
+    hint: { ...typography.caption, marginTop: 4 },
+    section: { gap: 8 },
+    sectionTitle: { ...typography.title, fontSize: 15 },
+    grid: { flexDirection: "row", flexWrap: "wrap", gap: 6 },
+    gridItem: { width: "32%", aspectRatio: 1 },
+    gridImage: { width: "100%", height: "100%", borderRadius: 8, backgroundColor: colors.whisperGray },
+    shareButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      height: 48,
+      borderRadius: radii.lg,
+      borderWidth: 1,
+      borderColor: colors.hairlineGray,
+    },
+    shareText: { ...typography.body, fontFamily: typography.title.fontFamily },
+  });
+}

mobile/app/(app)/messages/[conversationId].tsx

@@ -132,7 +132,7 @@ function makeStyles(colors: ColorTokens, insetsBottom: number) {
     bubbleOwn: { backgroundColor: colors.marigoldOrange, borderBottomRightRadius: 4 },
     bubbleText: { ...typography.body },
     bubbleTextOwn: { color: colors.pureWhite },
-    timestamp: { ...typography.label, textTransform: "none", letterSpacing: 0, fontSize: 10 },
+    timestamp: { ...typography.caption, fontSize: 10 },
     inputRow: {
       flexDirection: "row",
       alignItems: "center",

mobile/app/(app)/messages/index.tsx

@@ -10,6 +10,7 @@ import { PetAvatar } from "../../../src/components/PetAvatar";
 import { formatPetName, formatRelativeTime } from "../../../src/lib/format";
 import { getTypography, type ColorTokens, type Typography } from "../../../src/theme/tokens";
 import type { Conversation } from "../../../src/api/types";
+import { useBottomSafePadding } from "../../../src/hooks/useBottomSafePadding";
 
 /** Conversations list (conversations.list) — taps a row to open the chat detail/compose screen. */
 export default function MessagesScreen() {
@@ -19,6 +20,7 @@ export default function MessagesScreen() {
   const { activePetId } = useActivePet();
   const { colors } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
+  const bottomPadding = useBottomSafePadding();
 
   const { data, isLoading, error } = useQuery({
     ...trpc.conversations.list.queryOptions({ petId: activePetId ?? "" }),
@@ -45,7 +47,7 @@ export default function MessagesScreen() {
     <FlatList
       data={data ?? []}
       keyExtractor={(item) => item.id}
-      contentContainerStyle={styles.list}
+      contentContainerStyle={[styles.list, bottomPadding]}
       ItemSeparatorComponent={() => <View style={styles.separator} />}
       renderItem={({ item }) => (
         <ConversationRow conversation={item} onPress={() => router.push(`/messages/${item.id}`)} />
@@ -64,7 +66,7 @@ function ConversationRow({ conversation, onPress }: { conversation: Conversation
   const styles = useMemo(() => makeStyles(colors), [colors]);
   return (
     <Pressable style={styles.row} onPress={onPress}>
-      <PetAvatar name={conversation.otherPet.name} avatarKey={conversation.otherPet.avatarKey} />
+      <PetAvatar name={conversation.otherPet.name} avatarKey={conversation.otherPet.avatarKey} owner={conversation.otherPet.owner} />
       <View style={styles.rowText}>
         <View style={styles.nameRow}>
           <Text style={styles.name}>{formatPetName(conversation.otherPet)}</Text>
@@ -98,7 +100,7 @@ function makeStyles(colors: ColorTokens) {
     nameRow: { flexDirection: "row", alignItems: "center", gap: 6 },
     name: { ...typography.body, fontFamily: typography.title.fontFamily },
     preview: { ...typography.body, color: colors.quietGray },
-    timestamp: { ...typography.label, textTransform: "none", letterSpacing: 0 },
+    timestamp: { ...typography.caption },
     unreadDot: {
       backgroundColor: colors.marigoldOrange,
       borderRadius: 8,

mobile/app/(app)/milestone-new.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from "react";
-import { View, Text, Image as RNImage, Pressable, ScrollView, ActivityIndicator, StyleSheet, Alert } from "react-native";
+import { View, Text, Image as RNImage, Pressable, ScrollView, ActivityIndicator, StyleSheet } from "react-native";
 import { useRouter } from "expo-router";
 import * as ImagePicker from "expo-image-picker";
 import { useTranslation } from "react-i18next";
@@ -8,8 +8,7 @@ import { ImagePlus } from "lucide-react-native";
 import { useTRPC } from "../../src/api/trpc";
 import { useActivePet } from "../../src/context/ActivePetContext";
 import { useTheme } from "../../src/context/ThemeContext";
-import { uploadImageToSupabase } from "../../src/lib/upload";
-import { resizeForUpload } from "../../src/lib/resize-image";
+import { uploadPickedImage } from "../../src/lib/upload";
 import { MILESTONE_META, USER_INITIATED_MILESTONE_TYPES, type CreatableMilestoneType } from "../../src/lib/milestone-meta";
 import { TextField } from "../../src/components/TextField";
 import { Button } from "../../src/components/Button";
@@ -49,11 +48,8 @@ export default function NewMilestoneScreen() {
   );
 
   const pickImage = useCallback(async () => {
-    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
-    if (!permission.granted) {
-      Alert.alert(t("onboarding.galleryPermissionDenied"));
-      return;
-    }
+    // Kein Berechtigungsdialog: der System-Bildwähler (iOS PHPicker, Android Photo Picker)
+    // braucht keine Freigabe der Fotomediathek (Apple 5.1.1(iv), 07.10.).
     const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ["images"], quality: 0.8 });
     if (!result.canceled) setAsset(result.assets[0]);
   }, []);
@@ -65,13 +61,7 @@ export default function NewMilestoneScreen() {
     try {
       let imageKey: string | undefined;
       if (asset) {
-        const resized = await resizeForUpload(asset.uri, asset.width, asset.height);
-        const { presignedUrl, key } = await getPresignedUrlMutation.mutateAsync({
-          petId: activePetId,
-          contentType: resized.mimeType,
-          fileSize: resized.fileSize,
-        });
-        await uploadImageToSupabase(resized.uri, presignedUrl, resized.mimeType);
+        const { key } = await uploadPickedImage(asset, (file) => getPresignedUrlMutation.mutateAsync({ petId: activePetId, ...file }));
         imageKey = key;
       }
       createMutation.mutate({
@@ -88,7 +78,11 @@ export default function NewMilestoneScreen() {
   const isSubmitting = getPresignedUrlMutation.isPending || createMutation.isPending;
 
   return (
-    <ScrollView contentContainerStyle={styles.container}>
+    <ScrollView
+      contentContainerStyle={styles.container}
+      automaticallyAdjustKeyboardInsets
+      keyboardShouldPersistTaps="handled"
+    >
       <Text style={styles.label}>{t("milestones.typeLabel")}</Text>
       <View style={styles.chipRow}>
         {USER_INITIATED_MILESTONE_TYPES.map((type) => {
@@ -141,7 +135,7 @@ function makeStyles(colors: ColorTokens) {
   const typography = getTypography(colors);
   return StyleSheet.create({
   container: { padding: 16, gap: 14, backgroundColor: colors.porchWhite, flexGrow: 1 },
-  label: { ...typography.label, textTransform: "none", letterSpacing: 0 },
+  label: { ...typography.caption },
   chipRow: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
   chip: {
     flexDirection: "row",
@@ -167,7 +161,7 @@ function makeStyles(colors: ColorTokens) {
   },
   pickerText: { ...typography.body, color: colors.ink },
   preview: { width: "100%", height: 220, borderRadius: radii.md, backgroundColor: colors.hairlineGray },
-  previewHint: { ...typography.label, textTransform: "none", letterSpacing: 0, textAlign: "center", marginTop: 6 },
+  previewHint: { ...typography.caption, textAlign: "center", marginTop: 6 },
   notes: { height: 88, textAlignVertical: "top", paddingTop: 12 },
   error: { ...typography.body, color: colors.alertRed },
   });

mobile/app/(app)/pets/[petId]/edit.tsx

@@ -8,15 +8,22 @@ import { useTRPC } from "../../../../src/api/trpc";
 import { useActivePet } from "../../../../src/context/ActivePetContext";
 import { useTheme } from "../../../../src/context/ThemeContext";
 import { TextField } from "../../../../src/components/TextField";
+import { DateField } from "../../../../src/components/DateField";
 import { Button } from "../../../../src/components/Button";
 import { BreedPicker } from "../../../../src/components/pet/BreedPicker";
+import { PrivacySettings } from "../../../../src/components/pet/PrivacySettings";
+import { MemorialSettings } from "../../../../src/components/pet/MemorialSettings";
+import { LostReportSettings } from "../../../../src/components/lost/LostReportSettings";
+import { CaretakerSettings } from "../../../../src/components/caretaker/CaretakerSettings";
 import { radii, getTypography, type ColorTokens, type Typography } from "../../../../src/theme/tokens";
 import { displayDateToIso, isoToDisplayDate } from "../../../../src/lib/date-format";
+import { useBottomSafePadding } from "../../../../src/hooks/useBottomSafePadding";
 
 /**
  * Edit form (name, nickname, breed, bio, adoption story, birthday, adoption
  * date) — a subset of web's src/app/(app)/pets/[petId]/edit/page.tsx.
- * DM-policy/follower-visibility/avatar upload aren't editable here yet.
+ * Privacy (DM policy, follower visibility) lives in PrivacySettings and saves
+ * on its own; avatar upload isn't editable here yet.
  * Species itself stays fixed (only its breed is re-selectable) — found.md
  * asked specifically for breed correction, not a full species change.
  */
@@ -29,6 +36,7 @@ export default function EditPetScreen() {
   const { activePetId, clearActivePetId } = useActivePet();
   const { colors } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
+  const bottomPadding = useBottomSafePadding();
 
   const { data: pet, isLoading } = useQuery(trpc.pets.byId.queryOptions({ petId }));
 
@@ -114,6 +122,9 @@ export default function EditPetScreen() {
     );
   }
 
+  // Ältere Server ohne Mitbetreuer liefern keine Rolle → wie bisher Haupt-Besitzer.
+  const isMainOwner = pet.role !== "CARETAKER";
+
   return (
     // FlatList, not ScrollView — kept from the original nested-ScrollView
     // fix (see onboarding/pet.tsx's comment); OptionPicker's dropdown now
@@ -122,9 +133,14 @@ export default function EditPetScreen() {
     <FlatList
       data={EMPTY_DATA}
       renderItem={null}
-      contentContainerStyle={styles.container}
+      contentContainerStyle={[styles.container, bottomPadding]}
+      automaticallyAdjustKeyboardInsets
+      keyboardShouldPersistTaps="handled"
       ListHeaderComponent={
         <>
+          {/* Vermisst-Meldung ganz oben: im Ernstfall sofort auffindbar */}
+          <LostReportSettings petId={pet.id} petName={pet.name} isDeceased={pet.deceasedAt != null} />
+
           <Text style={styles.label}>{t("editPet.nameLabel")}</Text>
           <TextField value={name} onChangeText={setName} maxLength={30} />
 
@@ -154,19 +170,37 @@ export default function EditPetScreen() {
           />
 
           <Text style={styles.label}>{t("editPet.birthdayLabel")}</Text>
-          <TextField placeholder={t("health.weightDatePlaceholder")} value={birthday} onChangeText={setBirthday} />
+          <DateField placeholder={t("health.weightDatePlaceholder")} value={birthday} onChangeText={setBirthday} />
 
           <Text style={styles.label}>{t("editPet.adoptedAtLabel")}</Text>
-          <TextField placeholder={t("health.weightDatePlaceholder")} value={adoptedAt} onChangeText={setAdoptedAt} />
+          <DateField placeholder={t("health.weightDatePlaceholder")} value={adoptedAt} onChangeText={setAdoptedAt} />
 
           {error ? <Text style={styles.error}>{error}</Text> : null}
 
           <Button title={t("common.save")} disabled={updateMutation.isPending} onPress={handleSave} />
 
-          <Pressable style={styles.deleteRow} onPress={confirmDelete} disabled={deleteMutation.isPending}>
-            <Trash2 color={colors.alertRed} size={18} />
-            <Text style={styles.deleteText}>{t("editPet.deletePet")}</Text>
-          </Pressable>
+          {/* Privatsphäre, Gedenkmodus, Löschen: nur der Haupt-Besitzer */}
+          {isMainOwner && (
+            <PrivacySettings
+              petId={pet.id}
+              petName={pet.name}
+              dmPolicy={pet.dmPolicy}
+              followerVisibility={pet.followerVisibility}
+            />
+          )}
+
+          <CaretakerSettings petId={pet.id} petName={pet.name} />
+
+          {isMainOwner && (
+            <>
+              <MemorialSettings petId={pet.id} petName={pet.name} deceasedAt={pet.deceasedAt} />
+
+              <Pressable style={styles.deleteRow} onPress={confirmDelete} disabled={deleteMutation.isPending}>
+                <Trash2 color={colors.alertRed} size={18} />
+                <Text style={styles.deleteText}>{t("editPet.deletePet")}</Text>
+              </Pressable>
+            </>
+          )}
         </>
       }
     />
@@ -180,7 +214,7 @@ function makeStyles(colors: ColorTokens) {
   return StyleSheet.create({
     container: { padding: 16, gap: 8, backgroundColor: colors.porchWhite, flexGrow: 1 },
     center: { flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: colors.porchWhite },
-    label: { ...typography.label, textTransform: "none", letterSpacing: 0, marginTop: 12 },
+    label: { ...typography.caption, marginTop: 12 },
     multiline: { height: 88, textAlignVertical: "top", paddingTop: 12 },
     error: { ...typography.body, color: colors.alertRed, marginTop: 8 },
     deleteRow: {

mobile/app/(app)/pets/[petId]/followers.tsx

@@ -9,6 +9,7 @@ import { useTheme } from "../../../../src/context/ThemeContext";
 import { PetAvatar } from "../../../../src/components/PetAvatar";
 import { formatPetName } from "../../../../src/lib/format";
 import { type ColorTokens } from "../../../../src/theme/tokens";
+import { useBottomSafePadding } from "../../../../src/hooks/useBottomSafePadding";
 
 export default function FollowersScreen() {
   const { t } = useTranslation();
@@ -17,6 +18,7 @@ export default function FollowersScreen() {
   const trpc = useTRPC();
   const { colors, typography } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
+  const bottomPadding = useBottomSafePadding();
   const { data, isLoading } = useQuery(trpc.follows.listFollowers.queryOptions({ petId }));
 
   if (isLoading) {
@@ -31,11 +33,11 @@ export default function FollowersScreen() {
     <FlatList
       data={data?.items ?? []}
       keyExtractor={(item) => item.follower.id}
-      contentContainerStyle={styles.list}
+      contentContainerStyle={[styles.list, bottomPadding]}
       ItemSeparatorComponent={() => <View style={styles.separator} />}
       renderItem={({ item }) => (
         <Pressable style={styles.row} onPress={() => router.push(`/pets/${item.follower.id}`)}>
-          <PetAvatar name={item.follower.name} avatarKey={item.follower.avatarKey} />
+          <PetAvatar name={item.follower.name} avatarKey={item.follower.avatarKey} owner={item.follower.owner} />
           <Text style={typography.body}>{formatPetName(item.follower)}</Text>
         </Pressable>
       )}

mobile/app/(app)/pets/[petId]/following.tsx

@@ -9,6 +9,7 @@ import { useTheme } from "../../../../src/context/ThemeContext";
 import { PetAvatar } from "../../../../src/components/PetAvatar";
 import { formatPetName } from "../../../../src/lib/format";
 import { type ColorTokens } from "../../../../src/theme/tokens";
+import { useBottomSafePadding } from "../../../../src/hooks/useBottomSafePadding";
 
 export default function FollowingScreen() {
   const { t } = useTranslation();
@@ -17,6 +18,7 @@ export default function FollowingScreen() {
   const trpc = useTRPC();
   const { colors, typography } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
+  const bottomPadding = useBottomSafePadding();
   const { data, isLoading } = useQuery(trpc.follows.listFollowing.queryOptions({ petId }));
 
   if (isLoading) {
@@ -31,11 +33,11 @@ export default function FollowingScreen() {
     <FlatList
       data={data?.items ?? []}
       keyExtractor={(item) => item.followee.id}
-      contentContainerStyle={styles.list}
+      contentContainerStyle={[styles.list, bottomPadding]}
       ItemSeparatorComponent={() => <View style={styles.separator} />}
       renderItem={({ item }) => (
         <Pressable style={styles.row} onPress={() => router.push(`/pets/${item.followee.id}`)}>
-          <PetAvatar name={item.followee.name} avatarKey={item.followee.avatarKey} />
+          <PetAvatar name={item.followee.name} avatarKey={item.followee.avatarKey} owner={item.followee.owner} />
           <Text style={typography.body}>{formatPetName(item.followee)}</Text>
         </Pressable>
       )}

mobile/app/(app)/pets/[petId]/health/index.tsx

@@ -7,6 +7,7 @@ import { VetVisitSection } from "../../../../../src/components/health/VetVisitSe
 import { VaccineSection } from "../../../../../src/components/health/VaccineSection";
 import { useTheme } from "../../../../../src/context/ThemeContext";
 import { type ColorTokens } from "../../../../../src/theme/tokens";
+import { useBottomSafePadding } from "../../../../../src/hooks/useBottomSafePadding";
 
 /**
  * Port of web's src/app/(app)/pets/[petId]/health/page.tsx, scoped to the
@@ -18,9 +19,14 @@ export default function PetHealthScreen() {
   const { petId } = useLocalSearchParams<{ petId: string }>();
   const { colors } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
+  const bottomPadding = useBottomSafePadding();
 
   return (
-    <ScrollView contentContainerStyle={styles.container}>
+    <ScrollView
+      contentContainerStyle={[styles.container, bottomPadding]}
+      automaticallyAdjustKeyboardInsets
+      keyboardShouldPersistTaps="handled"
+    >
       <HealthConsentGate petId={petId}>
         <WeightLogSection petId={petId} />
         <VetVisitSection petId={petId} />

mobile/app/(app)/pets/[petId]/index.tsx

@@ -1,21 +1,26 @@
-import { useMemo } from "react";
-import { View, Text, FlatList, Pressable, ActivityIndicator, StyleSheet } from "react-native";
-import { useLocalSearchParams, useRouter } from "expo-router";
+import { useMemo, useState } from "react";
+import { View, Text, FlatList, Pressable, ActivityIndicator, Alert, StyleSheet } from "react-native";
+import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { useQuery, useMutation } from "@tanstack/react-query";
-import { HeartPulse, Trophy, MessageCircle } from "lucide-react-native";
+import { HeartPulse, Trophy, MessageCircle, MoreHorizontal, Ribbon, Siren } from "lucide-react-native";
 import { useTRPC } from "../../../../src/api/trpc";
 import { useActivePet } from "../../../../src/context/ActivePetContext";
 import { useTheme } from "../../../../src/context/ThemeContext";
 import { PetAvatar } from "../../../../src/components/PetAvatar";
+import { ReferralAvatarRing } from "../../../../src/components/referrals/ReferralAvatarRing";
 import { PetIdentityBadges } from "../../../../src/components/PetIdentityBadges";
 import { PostCard } from "../../../../src/components/PostCard";
 import { Button } from "../../../../src/components/Button";
 import { FollowButton } from "../../../../src/components/FollowButton";
+import { ReportSheet } from "../../../../src/components/ReportSheet";
+import { useBlockPet } from "../../../../src/hooks/useBlockPet";
 import { useVisiblePostIds } from "../../../../src/hooks/useVisiblePostIds";
 import { formatPetName } from "../../../../src/lib/format";
+import { isoToDisplayDate } from "../../../../src/lib/date-format";
 import { getAvatarUrl } from "../../../../src/lib/media-url";
 import { getTypography, type ColorTokens, type Typography } from "../../../../src/theme/tokens";
+import { useBottomSafePadding } from "../../../../src/hooks/useBottomSafePadding";
 
 /**
  * Port of web's src/app/(app)/pets/[petId]/page.tsx: identity, bio/adoption
@@ -29,9 +34,10 @@ export default function PetProfileScreen() {
   const { petId } = useLocalSearchParams<{ petId: string }>();
   const router = useRouter();
   const trpc = useTRPC();
-  const { activePetId } = useActivePet();
+  const { activePetId, pets: ownPets } = useActivePet();
   const { colors, typography } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
+  const bottomPadding = useBottomSafePadding();
   const { visibleIds, viewabilityConfigCallbackPairs } = useVisiblePostIds();
 
   const { data: pet, isLoading, error } = useQuery(trpc.pets.getProfile.queryOptions({ petId }));
@@ -40,6 +46,11 @@ export default function PetProfileScreen() {
   const { data: postsPage } = useQuery(trpc.posts.byPetId.queryOptions({ petId }));
 
   const isOwnPet = activePetId === petId;
+  // Any of the owner's pets, not just the active one — blocking/reporting
+  // your own other pet makes no sense.
+  const isOwnedByMe = ownPets.some((ownPet) => ownPet.id === petId);
+  const [reportOpen, setReportOpen] = useState(false);
+  const { confirmBlock } = useBlockPet(() => router.back());
 
   const getOrCreateConversation = useMutation(
     trpc.conversations.getOrCreate.mutationOptions({
@@ -64,99 +75,177 @@ export default function PetProfileScreen() {
   }
 
   const posts = postsPage?.posts ?? [];
+  const canModerate = !isOwnedByMe && !!activePetId;
+
+  // Report + block for other pets (App Store Guideline 1.2), matching web's
+  // ProfileActions "..." menu.
+  const openMoreMenu = () => {
+    if (!activePetId) return;
+    Alert.alert(formatPetName(pet), undefined, [
+      { text: t("petProfile.reportPet"), onPress: () => setReportOpen(true) },
+      {
+        text: t("block.menuItem", { petName: pet.name }),
+        style: "destructive",
+        onPress: () => confirmBlock(activePetId, { id: pet.id, name: pet.name }),
+      },
+      { text: t("common.cancel"), style: "cancel" },
+    ]);
+  };
 
   return (
-    <FlatList
-      data={posts}
-      keyExtractor={(post) => post.id}
-      contentContainerStyle={styles.list}
-      renderItem={({ item }) => (
-        <PostCard post={item} actingPetId={activePetId ?? petId} isVisible={visibleIds.has(item.id)} />
+    <>
+      {canModerate && (
+        <>
+          <Stack.Screen
+            options={{
+              headerRight: () => (
+                <Pressable onPress={openMoreMenu} hitSlop={12} accessibilityLabel={t("petProfile.moreActions")}>
+                  <MoreHorizontal color={colors.ink} size={22} />
+                </Pressable>
+              ),
+            }}
+          />
+          <ReportSheet
+            visible={reportOpen}
+            onClose={() => setReportOpen(false)}
+            reporterPetId={activePetId}
+            targetPetId={pet.id}
+          />
+        </>
       )}
-      viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs}
-      ItemSeparatorComponent={() => (
-        <View style={styles.postSeparatorWrap}>
-          <View style={styles.postSeparatorLine} />
-        </View>
-      )}
-      ListHeaderComponent={
-        <View style={styles.header}>
-          {pet.avatarKey ? (
-            <Pressable
-              onPress={() =>
-                router.push({
-                  pathname: "/image-viewer",
-                  params: { images: JSON.stringify([getAvatarUrl(pet.avatarKey)]), index: "0" },
-                })
-              }
-            >
-              <PetAvatar name={pet.name} avatarKey={pet.avatarKey} size="lg" />
-            </Pressable>
-          ) : (
-            <PetAvatar name={pet.name} avatarKey={pet.avatarKey} size="lg" />
-          )}
-          <View style={styles.nameRow}>
-            <Text style={styles.name}>{formatPetName(pet)}</Text>
-            <PetIdentityBadges isVerified={pet.isVerified} sponsor={pet.owner} />
+      <FlatList
+        data={posts}
+        keyExtractor={(post) => post.id}
+        contentContainerStyle={[styles.list, bottomPadding]}
+        renderItem={({ item }) => (
+          <PostCard post={item} actingPetId={activePetId ?? petId} isVisible={visibleIds.has(item.id)} />
+        )}
+        viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs}
+        ItemSeparatorComponent={() => (
+          <View style={styles.postSeparatorWrap}>
+            <View style={styles.postSeparatorLine} />
           </View>
-          <Text style={styles.species}>{pet.species.name}</Text>
-
-          <View style={styles.statsRow}>
-            <Pressable style={styles.stat} onPress={() => router.push(`/pets/${petId}/followers`)}>
-              <Text style={styles.statCount}>{followers?.items.length ?? 0}</Text>
-              <Text style={styles.statLabel}>{t("petProfile.followerStat")}</Text>
-            </Pressable>
-            <Pressable style={styles.stat} onPress={() => router.push(`/pets/${petId}/following`)}>
-              <Text style={styles.statCount}>{following?.items.length ?? 0}</Text>
-              <Text style={styles.statLabel}>{t("petProfile.followingStat")}</Text>
-            </Pressable>
-          </View>
-
-          {isOwnPet ? (
-            <Button title={t("common.edit")} variant="outline" onPress={() => router.push(`/pets/${petId}/edit`)} />
-          ) : (
-            activePetId && <FollowButton followerPetId={activePetId} followeePetId={petId} />
-          )}
-
-          <View style={styles.iconRow}>
-            {isOwnPet && (
-              <Pressable style={styles.iconButton} onPress={() => router.push(`/pets/${petId}/health`)}>
-                <HeartPulse color={colors.ink} size={18} />
-                <Text style={styles.iconButtonText}>{t("petProfile.healthButton")}</Text>
-              </Pressable>
-            )}
-            <Pressable style={styles.iconButton} onPress={() => router.push(`/pets/${petId}/milestones`)}>
-              <Trophy color={colors.ink} size={18} />
-              <Text style={styles.iconButtonText}>{t("petProfile.milestonesButton")}</Text>
-            </Pressable>
-            {!isOwnPet && activePetId && (
+        )}
+        ListHeaderComponent={
+          <View style={styles.header}>
+            <ReferralAvatarRing owner={pet.owner}>
+            {pet.avatarKey ? (
               <Pressable
-                style={styles.iconButton}
-                onPress={() => getOrCreateConversation.mutate({ senderPetId: activePetId, recipientPetId: petId })}
+                onPress={() =>
+                  router.push({
+                    pathname: "/image-viewer",
+                    params: { images: JSON.stringify([getAvatarUrl(pet.avatarKey)]), index: "0" },
+                  })
+                }
               >
-                <MessageCircle color={colors.ink} size={18} />
-                <Text style={styles.iconButtonText}>{t("petProfile.messageButton")}</Text>
+                <PetAvatar name={pet.name} avatarKey={pet.avatarKey} size="lg" />
+              </Pressable>
+            ) : (
+              <PetAvatar name={pet.name} avatarKey={pet.avatarKey} size="lg" />
+            )}
+            </ReferralAvatarRing>
+            <View style={styles.nameRow}>
+              <Text style={styles.name}>{formatPetName(pet)}</Text>
+              <PetIdentityBadges isLost={!!pet.lostSince} isDeceased={!!pet.deceasedAt} isVerified={pet.isVerified} isFoundingMember={pet.isFoundingMember} sponsor={pet.owner} referral={pet.owner} />
+            </View>
+            {pet.lostReport && (
+              <Pressable
+                style={styles.lostBanner}
+                accessibilityRole="link"
+                onPress={() => router.push(`/lost/${pet.id}`)}
+              >
+                <View style={styles.lostTitleRow}>
+                  <Siren size={15} color="#dc2626" />
+                  <Text style={styles.lostTitle}>{t("lostReport.bannerTitle", { name: pet.name })}</Text>
+                </View>
+                <Text style={styles.lostText}>
+                  {t("lostReport.bannerText", {
+                    place: pet.lostReport.lastSeenPlace,
+                    date: isoToDisplayDate(new Date(pet.lostReport.lastSeenAt).toISOString().slice(0, 10)),
+                  })}
+                </Text>
+                <Text style={styles.lostLink}>{t("lostReport.bannerLink")}</Text>
               </Pressable>
             )}
-          </View>
+            {pet.deceasedAt && (
+              <View style={styles.memorialBanner}>
+                <Ribbon size={13} color={colors.ink} fill={colors.ink} />
+                <Text style={styles.memorialText}>
+                  {t("inMemory.banner", {
+                    name: pet.name,
+                    date: isoToDisplayDate(new Date(pet.deceasedAt).toISOString().slice(0, 10)),
+                  })}
+                </Text>
+              </View>
+            )}
+            {pet.isFoundingMember && <Text style={styles.foundingHint}>{t("foundingMember.tooltip")}</Text>}
+            <Text style={styles.species}>{pet.species.name}</Text>
+            {pet.invitedByPet && (
+              <Text style={styles.invitedBy}>
+                {t("referrals.invitedBy")}{" "}
+                <Text style={styles.invitedByName} onPress={() => router.push(`/pets/${pet.invitedByPet?.id}`)}>
+                  {pet.invitedByPet.name}
+                </Text>
+              </Text>
+            )}
 
-          {pet.bio ? <Text style={styles.section}>{pet.bio}</Text> : null}
-          {pet.adoptionStory ? (
-            <View>
-              <Text style={styles.sectionTitle}>{t("petProfile.adoptionStoryTitle")}</Text>
-              <Text style={styles.section}>{pet.adoptionStory}</Text>
+            <View style={styles.statsRow}>
+              <Pressable style={styles.stat} onPress={() => router.push(`/pets/${petId}/followers`)}>
+                <Text style={styles.statCount}>{followers?.items.length ?? 0}</Text>
+                <Text style={styles.statLabel}>{t("petProfile.followerStat")}</Text>
+              </Pressable>
+              <Pressable style={styles.stat} onPress={() => router.push(`/pets/${petId}/following`)}>
+                <Text style={styles.statCount}>{following?.items.length ?? 0}</Text>
+                <Text style={styles.statLabel}>{t("petProfile.followingStat")}</Text>
+              </Pressable>
             </View>
-          ) : null}
 
-          <View style={styles.divider} />
-        </View>
-      }
-      ListEmptyComponent={
-        <View style={styles.center}>
-          <Text style={typography.body}>{t("petProfile.noPosts")}</Text>
-        </View>
-      }
-    />
+            {isOwnPet ? (
+              <Button title={t("common.edit")} variant="outline" onPress={() => router.push(`/pets/${petId}/edit`)} />
+            ) : (
+              activePetId && <FollowButton followerPetId={activePetId} followeePetId={petId} />
+            )}
+
+            <View style={styles.iconRow}>
+              {isOwnPet && (
+                <Pressable style={styles.iconButton} onPress={() => router.push(`/pets/${petId}/health`)}>
+                  <HeartPulse color={colors.ink} size={18} />
+                  <Text style={styles.iconButtonText}>{t("petProfile.healthButton")}</Text>
+                </Pressable>
+              )}
+              <Pressable style={styles.iconButton} onPress={() => router.push(`/pets/${petId}/milestones`)}>
+                <Trophy color={colors.ink} size={18} />
+                <Text style={styles.iconButtonText}>{t("petProfile.milestonesButton")}</Text>
+              </Pressable>
+              {!isOwnPet && activePetId && (
+                <Pressable
+                  style={styles.iconButton}
+                  onPress={() => getOrCreateConversation.mutate({ senderPetId: activePetId, recipientPetId: petId })}
+                >
+                  <MessageCircle color={colors.ink} size={18} />
+                  <Text style={styles.iconButtonText}>{t("petProfile.messageButton")}</Text>
+                </Pressable>
+              )}
+            </View>
+
+            {pet.bio ? <Text style={styles.section}>{pet.bio}</Text> : null}
+            {pet.adoptionStory ? (
+              <View>
+                <Text style={styles.sectionTitle}>{t("petProfile.adoptionStoryTitle")}</Text>
+                <Text style={styles.section}>{pet.adoptionStory}</Text>
+              </View>
+            ) : null}
+
+            <View style={styles.divider} />
+          </View>
+        }
+        ListEmptyComponent={
+          <View style={styles.center}>
+            <Text style={typography.body}>{t("petProfile.noPosts")}</Text>
+          </View>
+        }
+      />
+    </>
   );
 }
 
@@ -170,13 +259,42 @@ function makeStyles(colors: ColorTokens) {
     nameRow: { flexDirection: "row", alignItems: "center", marginTop: 8 },
     name: { ...typography.title },
     species: { ...typography.body, color: colors.quietGray },
+    invitedBy: { ...typography.body, fontSize: 12, color: colors.quietGray },
+    foundingHint: { ...typography.body, fontSize: 12, color: "#059669" },
+    memorialBanner: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 6,
+      paddingHorizontal: 12,
+      paddingVertical: 4,
+      borderRadius: 999,
+      borderWidth: 1,
+      borderColor: colors.hairlineGray,
+      backgroundColor: colors.whisperGray,
+    },
+    memorialText: { ...typography.body, fontSize: 12, color: colors.quietGray },
+    lostBanner: {
+      alignSelf: "stretch",
+      alignItems: "center",
+      gap: 2,
+      padding: 12,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: colors.alertRedTint,
+      backgroundColor: colors.alertRedTint,
+    },
+    lostTitleRow: { flexDirection: "row", alignItems: "center", gap: 6 },
+    lostTitle: { ...typography.body, fontFamily: typography.title.fontFamily, color: "#b91c1c" },
+    lostText: { ...typography.body, fontSize: 13, color: colors.ink, textAlign: "center" },
+    lostLink: { ...typography.body, fontSize: 12, textDecorationLine: "underline", color: colors.ink },
+    invitedByName: { color: colors.ink, fontWeight: "600" },
     statsRow: { flexDirection: "row", gap: 32, marginVertical: 12 },
     stat: { alignItems: "center" },
     statCount: { ...typography.title, fontSize: 18 },
-    statLabel: { ...typography.label, textTransform: "none", letterSpacing: 0 },
+    statLabel: { ...typography.caption },
     iconRow: { flexDirection: "row", gap: 20, marginTop: 14 },
     iconButton: { alignItems: "center", gap: 4 },
-    iconButtonText: { ...typography.label, textTransform: "none", letterSpacing: 0, fontSize: 11 },
+    iconButtonText: { ...typography.caption, fontSize: 11 },
     section: { ...typography.body, alignSelf: "stretch", marginTop: 12 },
     sectionTitle: { ...typography.title, fontSize: 15, alignSelf: "stretch", marginTop: 16 },
     divider: { height: 1, backgroundColor: colors.hairlineGray, alignSelf: "stretch", marginTop: 16 },

mobile/app/(app)/pets/[petId]/milestones.tsx

@@ -12,6 +12,7 @@ import { getMediaUrl } from "../../../../src/lib/media-url";
 import { MILESTONE_META, type MilestoneType } from "../../../../src/lib/milestone-meta";
 import { radii, getTypography, type ColorTokens, type Typography } from "../../../../src/theme/tokens";
 import type { MilestonePost } from "../../../../src/api/types";
+import { useBottomSafePadding } from "../../../../src/hooks/useBottomSafePadding";
 
 /**
  * Port of web's Milestones profile tab (milestones.listByPet). Structured
@@ -25,6 +26,7 @@ export default function MilestonesScreen() {
   const trpc = useTRPC();
   const { colors, typography } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
+  const bottomPadding = useBottomSafePadding();
   const isOwnPet = activePetId === petId;
 
   const { data: milestones = [], isLoading } = useQuery(trpc.milestones.listByPet.queryOptions({ petId }));
@@ -41,7 +43,7 @@ export default function MilestonesScreen() {
     <FlatList
       data={milestones}
       keyExtractor={(item) => item.id}
-      contentContainerStyle={styles.list}
+      contentContainerStyle={[styles.list, bottomPadding]}
       ItemSeparatorComponent={() => <View style={styles.separator} />}
       renderItem={({ item }) => <MilestoneRow post={item} />}
       ListEmptyComponent={
@@ -102,7 +104,7 @@ function makeStyles(colors: ColorTokens) {
   },
   rowText: { flex: 1, gap: 2 },
   rowTitle: { ...typography.body, fontFamily: typography.title.fontFamily },
-  rowDate: { ...typography.label, textTransform: "none", letterSpacing: 0 },
+  rowDate: { ...typography.caption },
   rowNotes: { ...typography.body, fontSize: 13 },
   thumb: { width: 48, height: 48, borderRadius: radii.md },
   addButton: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8, height: 48, marginTop: 8 },

mobile/app/(app)/post-new.tsx

@@ -8,13 +8,15 @@ import { X, ImagePlus, Camera } from "lucide-react-native";
 import { useTRPC } from "../../src/api/trpc";
 import { useActivePet } from "../../src/context/ActivePetContext";
 import { useTheme } from "../../src/context/ThemeContext";
-import { uploadImageToSupabase } from "../../src/lib/upload";
-import { resizeForUpload } from "../../src/lib/resize-image";
+import { uploadPickedImage } from "../../src/lib/upload";
 import { TextField } from "../../src/components/TextField";
 import { Button } from "../../src/components/Button";
 import { radii, getTypography, type ColorTokens } from "../../src/theme/tokens";
 
-const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/webp"];
+// HEIC/HEIF (iPhone, manche Android-Kameras) ist hier ausdrücklich erlaubt:
+// resizeForUpload() wandelt jedes Bild vor dem Upload in JPEG um, der Server
+// sieht also nie HEIC. Vorher wurden solche Fotos hier still aussortiert.
+const ALLOWED_MIME_TYPES = ["image/jpeg", "image/png", "image/webp", "image/heic", "image/heif"];
 const MAX_IMAGES = 10;
 
 type PickedImage = {
@@ -61,13 +63,7 @@ export default function NewPostScreen() {
   const uploadAsset = useCallback(
     async (asset: ImagePicker.ImagePickerAsset, index: number) => {
       try {
-        const resized = await resizeForUpload(asset.uri, asset.width, asset.height);
-        const { presignedUrl, key } = await getPresignedUrlMutation.mutateAsync({
-          petId: activePetId!,
-          contentType: resized.mimeType,
-          fileSize: resized.fileSize,
-        });
-        await uploadImageToSupabase(resized.uri, presignedUrl, resized.mimeType);
+        const { key } = await uploadPickedImage(asset, (file) => getPresignedUrlMutation.mutateAsync({ petId: activePetId!, ...file }));
         setImages((prev) => {
           const updated = [...prev];
           updated[index] = { ...updated[index], status: "done", key };
@@ -92,9 +88,13 @@ export default function NewPostScreen() {
         return;
       }
 
-      const accepted = assets
-        .filter((asset) => ALLOWED_MIME_TYPES.includes(asset.mimeType ?? "image/jpeg"))
-        .slice(0, available);
+      const supported = assets.filter((asset) =>
+        ALLOWED_MIME_TYPES.includes((asset.mimeType ?? "image/jpeg").toLowerCase())
+      );
+      if (supported.length < assets.length) {
+        Alert.alert(t("post.unsupportedFormat"));
+      }
+      const accepted = supported.slice(0, available);
 
       if (accepted.length === 0) return;
 
@@ -112,11 +112,8 @@ export default function NewPostScreen() {
   );
 
   const pickFromGallery = useCallback(async () => {
-    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
-    if (!permission.granted) {
-      Alert.alert(t("onboarding.galleryPermissionDenied"));
-      return;
-    }
+    // Kein Berechtigungsdialog: der System-Bildwähler (iOS PHPicker, Android Photo Picker)
+    // braucht keine Freigabe der Fotomediathek (Apple 5.1.1(iv), 07.10.).
     const result = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: ["images"],
       allowsMultipleSelection: true,
@@ -155,7 +152,11 @@ export default function NewPostScreen() {
   };
 
   return (
-    <ScrollView contentContainerStyle={styles.container}>
+    <ScrollView
+      contentContainerStyle={styles.container}
+      automaticallyAdjustKeyboardInsets
+      keyboardShouldPersistTaps="handled"
+    >
       {images.length > 0 && (
         <View style={styles.grid}>
           {images.map((img, i) => (

mobile/app/(app)/posts/[postId]/comments.tsx

@@ -154,7 +154,7 @@ function CommentRow({ comment, isOwn, onDelete, onPressPet }: CommentRowProps) {
   return (
     <View style={styles.row}>
       <Pressable onPress={onPressPet}>
-        <PetAvatar name={comment.pet.name} avatarKey={comment.pet.avatarKey} size="sm" />
+        <PetAvatar name={comment.pet.name} avatarKey={comment.pet.avatarKey} size="sm" owner={comment.pet.owner} />
       </Pressable>
       <View style={styles.rowBody}>
         <View style={styles.rowHeader}>
@@ -187,8 +187,8 @@ function makeStyles(colors: ColorTokens, insetsBottom: number) {
     rowHeader: { flexDirection: "row", alignItems: "baseline", gap: 8 },
     bodyText: { ...typography.body },
     petName: { ...typography.body, fontFamily: typography.title.fontFamily, fontSize: 13 },
-    timestamp: { ...typography.label, textTransform: "none", letterSpacing: 0, fontSize: 11 },
-    pendingLabel: { ...typography.label, textTransform: "none", letterSpacing: 0, fontSize: 11 },
+    timestamp: { ...typography.caption, fontSize: 11 },
+    pendingLabel: { ...typography.caption, fontSize: 11 },
     deleteButton: { alignSelf: "flex-start", padding: 4 },
     inputRow: {
       flexDirection: "row",

mobile/app/(app)/search.tsx

@@ -14,6 +14,8 @@ import { PetAvatar } from "../../src/components/PetAvatar";
 import { FollowButton } from "../../src/components/FollowButton";
 import { getMediaUrl } from "../../src/lib/media-url";
 import { radii, getTypography, type ColorTokens } from "../../src/theme/tokens";
+import { useBottomSafePadding } from "../../src/hooks/useBottomSafePadding";
+import type { ReferralOwnerFields } from "../../src/hooks/useReferralRanks";
 
 type Tab = "pets" | "people" | "tags";
 type Styles = ReturnType<typeof makeStyles>;
@@ -24,6 +26,7 @@ type SearchPet = {
   avatarKey: string | null;
   species: { name: string };
   breed: { name: string } | null;
+  owner?: ReferralOwnerFields | null;
 };
 
 /**
@@ -39,6 +42,7 @@ export default function SearchScreen() {
   const { activePetId } = useActivePet();
   const { colors } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
+  const bottomPadding = useBottomSafePadding();
 
   const [query, setQuery] = useState("");
   const [tab, setTab] = useState<Tab>("pets");
@@ -88,7 +92,7 @@ export default function SearchScreen() {
           <FlatList
             data={petResults?.pets ?? []}
             keyExtractor={(pet) => pet.id}
-            contentContainerStyle={styles.list}
+            contentContainerStyle={[styles.list, bottomPadding]}
             ListEmptyComponent={<EmptyState styles={styles} text={t("search.noPetsFor", { query: trimmed })} />}
             renderItem={({ item }) => (
               <PetRow styles={styles} pet={item} activePetId={activePetId} onPress={() => router.push(`/pets/${item.id}`)} />
@@ -105,7 +109,7 @@ export default function SearchScreen() {
           <FlatList
             data={ownerResults?.owners ?? []}
             keyExtractor={(owner) => owner.id}
-            contentContainerStyle={styles.list}
+            contentContainerStyle={[styles.list, bottomPadding]}
             ListEmptyComponent={<EmptyState styles={styles} text={t("search.noPeopleFor", { query: trimmed })} />}
             renderItem={({ item: owner }) => {
               const displayName = owner.username
@@ -205,7 +209,7 @@ function PetRow({
   return (
     <View style={[styles.petRow, indented && styles.petRowIndented]}>
       <Pressable style={styles.petRowMain} onPress={onPress}>
-        <PetAvatar name={pet.name} avatarKey={pet.avatarKey} size="sm" />
+        <PetAvatar name={pet.name} avatarKey={pet.avatarKey} size="sm" owner={pet.owner} />
         <View style={styles.petRowText}>
           <Text style={styles.petName}>{pet.name}</Text>
           <Text style={styles.petSpecies}>{pet.breed?.name ?? pet.species.name}</Text>
@@ -244,7 +248,7 @@ function makeStyles(colors: ColorTokens) {
     tabs: { flexDirection: "row", gap: 8, paddingHorizontal: 16, paddingVertical: 12 },
     tabButton: { paddingHorizontal: 14, height: 36, borderRadius: radii.lg, justifyContent: "center", backgroundColor: colors.whisperGray },
     tabButtonActive: { backgroundColor: colors.marigoldOrange },
-    tabButtonText: { ...typography.label, textTransform: "none", letterSpacing: 0, color: colors.ink },
+    tabButtonText: { ...typography.caption, color: colors.ink },
     tabButtonTextActive: { color: colors.pureWhite },
     list: { padding: 16, flexGrow: 1 },
     center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24 },
@@ -254,7 +258,7 @@ function makeStyles(colors: ColorTokens) {
     petRowMain: { flex: 1, flexDirection: "row", alignItems: "center", gap: 10 },
     petRowText: { flex: 1 },
     petName: { ...typography.body, fontFamily: typography.title.fontFamily },
-    petSpecies: { ...typography.label, textTransform: "none", letterSpacing: 0 },
+    petSpecies: { ...typography.caption },
     ownerBlock: { marginBottom: 16 },
     ownerName: { ...typography.body, fontFamily: typography.title.fontFamily, marginBottom: 4 },
     tagGrid: { padding: 2 },

mobile/app/(app)/settings.tsx

@@ -4,10 +4,13 @@ import { useTheme } from "../../src/context/ThemeContext";
 import { AppearanceSection } from "../../src/components/settings/AppearanceSection";
 import { LanguageSection } from "../../src/components/settings/LanguageSection";
 import { PetSuggestionsSection } from "../../src/components/settings/PetSuggestionsSection";
+import { InviteFriendsSection } from "../../src/components/settings/InviteFriendsSection";
 import { LegalSection } from "../../src/components/settings/LegalSection";
 import { LogoutSection } from "../../src/components/settings/LogoutSection";
+import { DeleteAccountSection } from "../../src/components/settings/DeleteAccountSection";
 import { FooterErrorBoundary } from "../../src/components/settings/FooterErrorBoundary";
 import type { ColorTokens } from "../../src/theme/tokens";
+import { useBottomSafePadding } from "../../src/hooks/useBottomSafePadding";
 
 /**
  * Dedicated Settings screen, reached via the gear icon in every tab's header
@@ -34,15 +37,18 @@ import type { ColorTokens } from "../../src/theme/tokens";
 export default function SettingsScreen() {
   const { colors } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
+  const bottomPadding = useBottomSafePadding();
 
   return (
     <FooterErrorBoundary>
-      <ScrollView contentContainerStyle={styles.content}>
+      <ScrollView contentContainerStyle={[styles.content, bottomPadding]}>
+        <InviteFriendsSection />
         <AppearanceSection />
         <LanguageSection />
         <PetSuggestionsSection />
         <LegalSection />
         <LogoutSection />
+        <DeleteAccountSection />
       </ScrollView>
     </FooterErrorBoundary>
   );

mobile/app/(app)/story-editor.tsx

@@ -0,0 +1,176 @@
+import { useState, useCallback, useMemo } from "react";
+import { View, Text, Image as RNImage, StyleSheet } from "react-native";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTRPC } from "../../src/api/trpc";
+import { useActivePet } from "../../src/context/ActivePetContext";
+import { uploadFileToUrl, uploadPickedImage } from "../../src/lib/upload";
+import { StoryEditor, type EditorMedia, type EditorResult } from "../../src/components/story-editor/StoryEditor";
+import { fontFamily } from "../../src/theme/tokens";
+
+type Params = { kind: "image" | "video" | "text"; uri?: string; width?: string; height?: string; mimeType?: string };
+
+/** Echte Pixelmaße der (verkleinerten) Datei — der Picker meldet bei gedrehten Handyfotos teils vertauschte Werte. */
+function imageSize(uri: string): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => RNImage.getSize(uri, (width, height) => resolve({ width, height }), reject));
+}
+
+function mediaFromParams(params: Params): EditorMedia | null {
+  if (params.kind === "text") return { kind: "text" };
+  const width = Number(params.width);
+  const height = Number(params.height);
+  if (!params.uri || !width || !height) return null;
+  return params.kind === "video"
+    ? { kind: "video", uri: params.uri, width, height, mimeType: params.mimeType || undefined }
+    : { kind: "image", uri: params.uri, width, height };
+}
+
+/**
+ * Story-Editor als eigener Vollbild-Screen (fullScreenModal, ohne Kopfzeile,
+ * ohne Wisch-zum-Schließen). Vorher lief er innerhalb des Auswahl-Screens
+ * story-new, der auf iOS ein Sheet ist — dort das Umschalten der Kopfzeile und
+ * ein weiteres Modal führten dazu, dass alles verschwand und nur das X kurz
+ * aufleuchtete (Tester-Feedback 04.10.). Das Medium kommt als Route-Parameter.
+ *
+ * Upload wie bisher: Foto verkleinert zu Supabase, Video direkt zu Mux
+ * (createVideoUpload legt die PROCESSING-Story an), Text-Story ohne Datei.
+ */
+export default function StoryEditorScreen() {
+  const params = useLocalSearchParams<Params>();
+  const { t } = useTranslation();
+  const router = useRouter();
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const { activePetId } = useActivePet();
+  const media = useMemo(() => mediaFromParams(params), [params]);
+
+  const { data: flags } = useQuery({ ...trpc.stories.featureFlags.queryOptions(), staleTime: 60_000 });
+  const [error, setError] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadPercent, setUploadPercent] = useState<number | null>(null);
+
+  const getPresignedUrlMutation = useMutation(trpc.stories.getPresignedUrl.mutationOptions());
+  const createMutation = useMutation(trpc.stories.create.mutationOptions());
+  const createTextMutation = useMutation(trpc.stories.createText.mutationOptions());
+  const createVideoUploadMutation = useMutation(trpc.stories.createVideoUpload.mutationOptions());
+
+  const finish = useCallback(async () => {
+    await queryClient.invalidateQueries(trpc.follows.pathFilter());
+    await queryClient.invalidateQueries(trpc.stories.pathFilter());
+    // Editor + Auswahl-Screen schließen → zurück dorthin, wo die Story gestartet wurde.
+    router.dismissAll();
+  }, [queryClient, trpc, router]);
+
+  const handleSubmit = useCallback(
+    async ({ overlays, background }: EditorResult) => {
+      if (!media || !activePetId) return;
+      setError(null);
+      const editorFields = overlays.length > 0 ? { overlays } : {};
+
+      try {
+        if (media.kind === "text") {
+          await createTextMutation.mutateAsync({ petId: activePetId, background: background ?? "sunset", overlays });
+          await finish();
+          return;
+        }
+
+        if (media.kind === "video") {
+          const { uploadUrl } = await createVideoUploadMutation.mutateAsync({
+            petId: activePetId,
+            aiDisclosure: "NONE",
+            ...editorFields,
+            mediaWidth: media.width,
+            mediaHeight: media.height,
+          });
+          setIsUploading(true);
+          setUploadPercent(0);
+          await uploadFileToUrl(media.uri, uploadUrl ?? "", media.mimeType ?? "video/mp4", (fraction) => {
+            const pct = Math.round(fraction * 100);
+            setUploadPercent((prev) => (prev === pct ? prev : pct));
+          });
+          await finish();
+          return;
+        }
+
+        setIsUploading(true);
+        const uploaded = await uploadPickedImage(media, (file) => getPresignedUrlMutation.mutateAsync({ petId: activePetId, ...file }));
+        const size = await imageSize(uploaded.uri).catch(() => ({ width: media.width, height: media.height }));
+        await createMutation.mutateAsync({
+          petId: activePetId,
+          storageKey: uploaded.key,
+          blurhash: null,
+          ...editorFields,
+          mediaWidth: size.width,
+          mediaHeight: size.height,
+        });
+        await finish();
+      } catch (err) {
+        setError(err instanceof Error && err.message ? err.message : t("onboarding.uploadError"));
+      } finally {
+        setIsUploading(false);
+        setUploadPercent(null);
+      }
+    },
+    [media, activePetId, createTextMutation, createVideoUploadMutation, getPresignedUrlMutation, createMutation, finish, t]
+  );
+
+  const isSubmitting =
+    isUploading ||
+    getPresignedUrlMutation.isPending ||
+    createMutation.isPending ||
+    createTextMutation.isPending ||
+    createVideoUploadMutation.isPending;
+
+  if (!media || !activePetId) {
+    return (
+      <View style={styles.missing}>
+        <Text style={styles.missingText}>{t("onboarding.uploadError")}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <StoryEditor
+      media={media}
+      petId={activePetId}
+      toolsEnabled={flags?.storyEditor ?? false}
+      isSubmitting={isSubmitting}
+      submitLabel={isSubmitting ? t("milestones.sharing") : t("story.shareButton")}
+      onSubmit={handleSubmit}
+      onCancel={() => {
+        if (!isSubmitting) router.back();
+      }}
+      progress={
+        <>
+          {error ? <Text style={styles.error}>{error}</Text> : null}
+          {isSubmitting && media.kind === "video" ? <UploadProgress percent={uploadPercent} /> : null}
+        </>
+      }
+    />
+  );
+}
+
+/** Video-Upload zu Mux: erst „wird vorbereitet“, dann echter Fortschritt (expo-file-system onProgress). */
+function UploadProgress({ percent }: { percent: number | null }) {
+  const { t } = useTranslation();
+  const label = percent === null ? t("story.preparingUpload") : t("story.uploadingVideo", { percent });
+  return (
+    <View style={styles.progressWrap} accessibilityRole="progressbar" accessibilityValue={{ min: 0, max: 100, now: percent ?? 0 }} accessibilityLabel={label}>
+      <View style={styles.progressTrack}>
+        <View style={[styles.progressFill, { width: `${percent ?? 0}%` }]} />
+      </View>
+      <Text style={styles.progressLabel}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  missing: { flex: 1, backgroundColor: "#111111", alignItems: "center", justifyContent: "center", padding: 24 },
+  missingText: { color: "#ffffff", fontFamily: fontFamily.regular, fontSize: 15, textAlign: "center" },
+  error: { color: "#f87171", fontFamily: fontFamily.regular, fontSize: 14, textAlign: "center" },
+  progressWrap: { gap: 6 },
+  progressTrack: { height: 6, borderRadius: 3, backgroundColor: "rgba(255,255,255,0.2)", overflow: "hidden" },
+  progressFill: { height: "100%", borderRadius: 3, backgroundColor: "#f97316" },
+  progressLabel: { color: "#ffffff", fontFamily: fontFamily.semiBold, fontSize: 12, textAlign: "center" },
+});

mobile/app/(app)/story-new.tsx

@@ -1,58 +1,70 @@
-import { useState, useCallback, useMemo } from "react";
-import { View, Text, Image as RNImage, Pressable, ActivityIndicator, StyleSheet, Alert } from "react-native";
+import { useCallback, useMemo } from "react";
+import { View, Text, Pressable, StyleSheet, Alert } from "react-native";
 import { useRouter } from "expo-router";
 import * as ImagePicker from "expo-image-picker";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTranslation } from "react-i18next";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { ImagePlus, Camera } from "lucide-react-native";
+import { useQuery } from "@tanstack/react-query";
+import { ImagePlus, Camera, Type } from "lucide-react-native";
 import { useTRPC } from "../../src/api/trpc";
-import { useActivePet } from "../../src/context/ActivePetContext";
 import { useTheme } from "../../src/context/ThemeContext";
-import { uploadImageToSupabase } from "../../src/lib/upload";
-import { resizeForUpload } from "../../src/lib/resize-image";
-import { Button } from "../../src/components/Button";
+import { MAX_STORY_VIDEO_DURATION_SECS } from "../../src/lib/story-video-limits";
 import { radii, getTypography, type ColorTokens } from "../../src/theme/tokens";
 
 /**
- * Photo-only story creation (matches web's own "Phase 2" note in
- * stories.ts: "Photo-only in Phase 2" — video stories are a Mux upload
- * flow web itself only added later, not carried over here). Single image,
- * unlike post-new.tsx's multi-image picker — a story is one photo.
+ * Story erstellen — Schritt 1: Foto, kurzes Video oder Text-Story wählen.
+ * Bearbeiten und Teilen passieren im eigenen Vollbild-Screen story-editor.tsx
+ * (dieser Screen ist auf iOS ein Sheet; den Editor darin einzublenden führte
+ * dazu, dass alles verschwand — siehe story-editor.tsx). Ist der Notschalter
+ * (Admin) aus, gibt es keine Text-Story und der Editor zeigt nur Vorschau + Teilen.
  */
 export default function NewStoryScreen() {
   const { t } = useTranslation();
   const router = useRouter();
   const trpc = useTRPC();
-  const queryClient = useQueryClient();
-  const { activePetId } = useActivePet();
   const { colors } = useTheme();
-  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const insets = useSafeAreaInsets();
+  const styles = useMemo(() => makeStyles(colors, insets.bottom), [colors, insets.bottom]);
 
-  const [asset, setAsset] = useState<ImagePicker.ImagePickerAsset | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const { data: flags } = useQuery({ ...trpc.stories.featureFlags.queryOptions(), staleTime: 60_000 });
+  const editorEnabled = flags?.storyEditor ?? false;
 
-  const getPresignedUrlMutation = useMutation(trpc.stories.getPresignedUrl.mutationOptions());
-
-  const createMutation = useMutation(
-    trpc.stories.create.mutationOptions({
-      onSuccess: async () => {
-        await queryClient.invalidateQueries(trpc.follows.pathFilter());
-        await queryClient.invalidateQueries(trpc.stories.pathFilter());
-        router.back();
-      },
-      onError: (err) => setError(err.message),
-    })
+  const openEditor = useCallback(
+    (params: { kind: "image" | "video" | "text"; uri?: string; width?: number; height?: number; mimeType?: string | null }) => {
+      router.push({
+        pathname: "/story-editor",
+        params: {
+          kind: params.kind,
+          uri: params.uri ?? "",
+          width: String(params.width ?? 0),
+          height: String(params.height ?? 0),
+          mimeType: params.mimeType ?? "",
+        },
+      });
+    },
+    [router]
   );
 
   const pickFromGallery = useCallback(async () => {
-    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
-    if (!permission.granted) {
-      Alert.alert(t("onboarding.galleryPermissionDenied"));
+    // Kein Berechtigungsdialog: der System-Bildwähler (iOS PHPicker, Android Photo Picker)
+    // braucht keine Freigabe der Fotomediathek (Apple 5.1.1(iv), 07.10.).
+    const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ["images", "videos"], quality: 0.8 });
+    if (result.canceled) return;
+
+    // expo-image-picker meldet `duration` (ms) nur bei Videos — verlässlicher als ein MIME-Typ.
+    const picked = result.assets[0];
+    if (picked.duration != null && picked.duration / 1000 > MAX_STORY_VIDEO_DURATION_SECS) {
+      Alert.alert(t("story.videoTooLong", { max: MAX_STORY_VIDEO_DURATION_SECS }));
       return;
     }
-    const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ["images"], quality: 0.8 });
-    if (!result.canceled) setAsset(result.assets[0]);
-  }, []);
+    openEditor({
+      kind: picked.duration != null ? "video" : "image",
+      uri: picked.uri,
+      width: picked.width,
+      height: picked.height,
+      mimeType: picked.mimeType,
+    });
+  }, [t, openEditor]);
 
   const takePhoto = useCallback(async () => {
     const permission = await ImagePicker.requestCameraPermissionsAsync();
@@ -61,65 +73,44 @@ export default function NewStoryScreen() {
       return;
     }
     const result = await ImagePicker.launchCameraAsync({ quality: 0.8 });
-    if (!result.canceled) setAsset(result.assets[0]);
-  }, []);
-
-  const handleSubmit = useCallback(async () => {
-    if (!asset || !activePetId) return;
-    setError(null);
-
-    try {
-      const resized = await resizeForUpload(asset.uri, asset.width, asset.height);
-      const { presignedUrl, key } = await getPresignedUrlMutation.mutateAsync({
-        petId: activePetId,
-        contentType: resized.mimeType,
-        fileSize: resized.fileSize,
-      });
-      await uploadImageToSupabase(resized.uri, presignedUrl, resized.mimeType);
-      createMutation.mutate({ petId: activePetId, storageKey: key, blurhash: null });
-    } catch {
-      setError(t("onboarding.uploadError"));
+    if (!result.canceled) {
+      const photo = result.assets[0];
+      openEditor({ kind: "image", uri: photo.uri, width: photo.width, height: photo.height });
     }
-  }, [asset, activePetId, getPresignedUrlMutation, createMutation]);
-
-  const isSubmitting = getPresignedUrlMutation.isPending || createMutation.isPending;
+  }, [t, openEditor]);
 
   return (
     <View style={styles.container}>
-      {asset ? (
-        <Pressable style={styles.preview} onPress={() => setAsset(null)}>
-          <RNImage source={{ uri: asset.uri }} style={styles.previewImage} />
-          <Text style={styles.previewHint}>{t("story.changePhotoHint")}</Text>
+      <View style={styles.pickerRow}>
+        <Pressable style={styles.pickerButton} onPress={pickFromGallery}>
+          <ImagePlus color={colors.marigoldOrange} size={22} />
+          <Text style={styles.pickerText}>{t("onboarding.galleryButton")}</Text>
+        </Pressable>
+        <Pressable style={styles.pickerButton} onPress={takePhoto}>
+          <Camera color={colors.marigoldOrange} size={22} />
+          <Text style={styles.pickerText}>{t("onboarding.cameraButton")}</Text>
+        </Pressable>
+      </View>
+      {editorEnabled && (
+        <Pressable style={styles.textStoryButton} onPress={() => openEditor({ kind: "text" })}>
+          <Type color={colors.pureWhite} size={22} />
+          <Text style={styles.textStoryText}>{t("storyEditor.textStory")}</Text>
         </Pressable>
-      ) : (
-        <View style={styles.pickerRow}>
-          <Pressable style={styles.pickerButton} onPress={pickFromGallery}>
-            <ImagePlus color={colors.marigoldOrange} size={22} />
-            <Text style={styles.pickerText}>{t("onboarding.galleryButton")}</Text>
-          </Pressable>
-          <Pressable style={styles.pickerButton} onPress={takePhoto}>
-            <Camera color={colors.marigoldOrange} size={22} />
-            <Text style={styles.pickerText}>{t("onboarding.cameraButton")}</Text>
-          </Pressable>
-        </View>
       )}
-
-      {error ? <Text style={styles.error}>{error}</Text> : null}
-
-      <Button
-        title={isSubmitting ? t("milestones.sharing") : t("story.shareButton")}
-        onPress={handleSubmit}
-        disabled={!asset || isSubmitting}
-      />
-      {isSubmitting && <ActivityIndicator color={colors.marigoldOrange} />}
     </View>
   );
 }
 
-function makeStyles(colors: ColorTokens) {
+function makeStyles(colors: ColorTokens, bottomInset: number) {
   const typography = getTypography(colors);
   return StyleSheet.create({
-    container: { flex: 1, padding: 16, gap: 12, backgroundColor: colors.porchWhite },
+    container: {
+      flex: 1,
+      padding: 16,
+      paddingBottom: Math.max(16, bottomInset + 12),
+      gap: 12,
+      backgroundColor: colors.porchWhite,
+    },
     pickerRow: { flexDirection: "row", gap: 12 },
     pickerButton: {
       flex: 1,
@@ -133,9 +124,15 @@ function makeStyles(colors: ColorTokens) {
       borderColor: colors.hairlineGray,
     },
     pickerText: { ...typography.body, color: colors.ink },
-    preview: { flex: 1, borderRadius: radii.md, overflow: "hidden", backgroundColor: colors.hairlineGray, gap: 8 },
-    previewImage: { width: "100%", flex: 1 },
-    previewHint: { ...typography.label, textTransform: "none", letterSpacing: 0, textAlign: "center", paddingVertical: 6 },
-    error: { ...typography.body, color: colors.alertRed },
+    textStoryButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      height: 48,
+      borderRadius: radii.lg,
+      backgroundColor: colors.marigoldOrange,
+    },
+    textStoryText: { ...typography.body, color: colors.pureWhite, fontFamily: typography.title.fontFamily },
   });
 }

mobile/app/(app)/story-viewer.tsx

@@ -1,52 +1,151 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { View, Text, Pressable, StyleSheet } from "react-native";
+import { View, Text, Pressable, StyleSheet, Alert, ActivityIndicator, type LayoutChangeEvent } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useLocalSearchParams, useRouter } from "expo-router";
+import { useFocusEffect, useLocalSearchParams, useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { X } from "lucide-react-native";
+import { useVideoPlayer, VideoView } from "expo-video";
+import { useEventListener } from "expo";
+import { AlertCircle, Clock, Eye, MessageCircle, PawPrint, Trash2, X } from "lucide-react-native";
 import { useTRPC } from "../../src/api/trpc";
 import { useActivePet } from "../../src/context/ActivePetContext";
 import { PetAvatar } from "../../src/components/PetAvatar";
+import { StoryPawButton } from "../../src/components/stories/StoryPawButton";
+import { StoryCommentsSheet } from "../../src/components/stories/StoryCommentsSheet";
+import { StoryViewersSheet } from "../../src/components/stories/StoryViewersSheet";
 import { getMediaUrl } from "../../src/lib/media-url";
+import { StoryOverlayLayer } from "../../src/components/story-editor/StoryOverlayLayer";
+import { StoryBackground } from "../../src/components/story-editor/StoryBackground";
+import { containRect, storyMediaSize } from "../../src/lib/story-overlays";
 import { colors } from "../../src/theme/tokens";
 
-const STORY_DURATION_MS = 5000;
+const IMAGE_STORY_DURATION_MS = 5000;
+
+// "away" = über eine Markierung ins Tierprofil gewechselt — Story pausiert bis zur Rückkehr.
+type Sheet = "comments" | "viewers" | "confirm-delete" | "away" | null;
 
 /**
- * Port of web's src/components/stories/StoryViewer.tsx, scoped to photo
- * stories only (no Mux video story playback — see story-new.tsx). Also
- * drops the owner-only viewer-count/list Sheet and the paw-reaction/comment
- * overlay (Gitea #29 additions on web) — fast-follows, not core to "view a
- * story". Tap the left third to go back a story, the rest to skip ahead;
- * a fixed timer still auto-advances either way.
+ * Port of web's src/components/stories/StoryViewer.tsx. Tap the left third
+ * to go back a story, the rest to skip ahead. Foto-Storys laufen über einen
+ * festen 5-s-Timer; Video-Storys folgen der echten Wiedergabe (expo-video
+ * `timeUpdate`) und springen bei `playToEnd` weiter, wie im Web. Pfote, Kommentare (Bottom-Sheet) und — nur für die eigene
+ * Story — die Zuschauerliste und Löschen wie im Web; solange ein Sheet oder
+ * die Lösch-Rückfrage offen ist, hält der Timer an.
  */
 export default function StoryViewerScreen() {
-  const { petId, petName, petAvatarKey } = useLocalSearchParams<{
+  const { petId, petName: petNameParam, petAvatarKey: petAvatarKeyParam, storyId: initialStoryId } = useLocalSearchParams<{
     petId: string;
     petName: string;
     petAvatarKey?: string;
+    /** Aus einer Mitteilung: direkt diese Story zeigen statt der ersten. */
+    storyId?: string;
   }>();
+  const { t } = useTranslation();
   const router = useRouter();
   const trpc = useTRPC();
   const queryClient = useQueryClient();
   const { activePetId } = useActivePet();
   const insets = useSafeAreaInsets();
+  const isOwnStory = activePetId === petId;
+  // Über eine Push-Mitteilung geöffnet → nur petId bekannt, Name/Bild nachladen.
+  const { data: storyPet } = useQuery({ ...trpc.pets.getProfile.queryOptions({ petId }), enabled: !petNameParam });
+  const petName = petNameParam || storyPet?.name || "";
+  const petAvatarKey = petAvatarKeyParam || storyPet?.avatarKey || undefined;
 
-  const { data: stories = [] } = useQuery(trpc.stories.listActive.queryOptions({ petId }));
+  const listQuery = trpc.stories.listActive.queryOptions({ petId, viewerPetId: activePetId ?? undefined });
+  const { data: stories = [], isSuccess: storiesLoaded } = useQuery(listQuery);
   const [index, setIndex] = useState(0);
+  const jumpedToInitialRef = useRef(false);
   const [progress, setProgress] = useState(0);
+  const [openSheet, setOpenSheet] = useState<Sheet>(null);
   const advancedRef = useRef(false);
+  const elapsedRef = useRef(0); // bereits abgelaufene Zeit der aktuellen Story (für Pause/Weiter)
 
   const currentStory = stories[index];
+  const isPaused = openSheet !== null;
+  const isVideo = currentStory?.mediaType === "VIDEO";
+  const isText = currentStory?.mediaType === "TEXT";
+  const [screen, setScreen] = useState({ width: 0, height: 0 });
+  const { data: flags } = useQuery({ ...trpc.stories.featureFlags.queryOptions(), staleTime: 60_000 });
+  // Notschalter: Overlays nur zeigen, wenn der Story-Editor im Admin an ist.
+  const showOverlays = flags?.storyEditor ?? false;
+
+  // Zurück aus dem Tierprofil (über eine Markierung) → Story läuft weiter.
+  useFocusEffect(
+    useCallback(() => {
+      setOpenSheet((sheet) => (sheet === "away" ? null : sheet));
+    }, [])
+  );
   const recordViewMutation = useMutation(trpc.stories.recordView.mutationOptions());
 
+  const deleteMutation = useMutation(
+    trpc.stories.delete.mutationOptions({
+      onSuccess: () => {
+        const remaining = stories.length - 1;
+        setOpenSheet(null);
+        void queryClient.invalidateQueries(trpc.stories.pathFilter());
+        void queryClient.invalidateQueries(trpc.follows.pathFilter());
+        if (remaining <= 0) router.back();
+        else setIndex((i) => Math.min(i, remaining - 1));
+      },
+      onError: () => {
+        setOpenSheet(null);
+        Alert.alert(t("storyViewer.deleteError"));
+      },
+    })
+  );
+
+  // Story-ID beim Antippen festhalten: gelöscht wird genau die angezeigte Story.
+  const confirmDelete = (storyId: string) => {
+    setOpenSheet("confirm-delete");
+    Alert.alert(
+      t("storyViewer.deleteTitle"),
+      t("storyViewer.deleteDescription"),
+      [
+        { text: t("common.cancel"), style: "cancel", onPress: () => setOpenSheet(null) },
+        { text: t("storyViewer.deleteConfirm"), style: "destructive", onPress: () => deleteMutation.mutate({ storyId }) },
+      ],
+      { cancelable: true, onDismiss: () => setOpenSheet(null) }
+    );
+  };
+
+  // Solange ein Video noch verarbeitet wird, Status abfragen (Self-Heal wie VideoPlayer.tsx).
+  const { data: videoStatusData } = useQuery({
+    ...trpc.stories.getVideoStatus.queryOptions({ storyId: currentStory?.id ?? "" }),
+    enabled: !!currentStory && isVideo && currentStory.videoStatus === "PROCESSING",
+    refetchInterval: (query) => (query.state.data?.videoStatus === "PROCESSING" ? 3000 : false),
+  });
+  const videoStatus = videoStatusData?.videoStatus ?? currentStory?.videoStatus;
+  const videoPlaybackId = videoStatusData?.muxPlaybackId ?? currentStory?.muxPlaybackId;
+
+  const { data: viewers = [] } = useQuery({
+    ...trpc.stories.getViewers.queryOptions({ storyId: currentStory?.id ?? "" }),
+    enabled: isOwnStory && !!currentStory,
+  });
+
   const close = useCallback(() => {
     queryClient.invalidateQueries(trpc.stories.hasActiveStory.queryOptions({ petId }));
     queryClient.invalidateQueries(trpc.follows.pathFilter());
     router.back();
   }, [queryClient, trpc, petId, router]);
 
+  const openPet = useCallback(
+    (targetPetId: string) => {
+      setOpenSheet(null);
+      router.push(`/pets/${targetPetId}`);
+    },
+    [router]
+  );
+
+  const openMentionedPet = useCallback(
+    (targetPetId: string) => {
+      setOpenSheet("away");
+      router.push(`/pets/${targetPetId}`);
+    },
+    [router]
+  );
+
   const advance = useCallback(() => {
     if (advancedRef.current) return;
     advancedRef.current = true;
@@ -70,16 +169,25 @@ export default function StoryViewerScreen() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentStory?.id, activePetId]);
 
-  // Fixed-duration progress bar, auto-advances/closes when it fills.
+  // Neue Story → Fortschritt zurücksetzen.
   useEffect(() => {
-    if (!currentStory) return;
-    setProgress(0);
+    elapsedRef.current = 0;
     advancedRef.current = false;
-    const startTime = Date.now();
+    setProgress(0);
+  }, [currentStory?.id]);
+
+  // Fester Timer nur für Foto-Storys; pausiert, solange ein Sheet offen ist.
+  // Video-Storys steuern Fortschritt und Weiterspringen selbst (ReadyVideoStory).
+  useEffect(() => {
+    if (!currentStory || isVideo || isPaused) return;
+    const resumedAt = Date.now();
+    const elapsedBefore = elapsedRef.current;
     let rafId: number;
 
     function tick() {
-      const pct = Math.min(((Date.now() - startTime) / STORY_DURATION_MS) * 100, 100);
+      const elapsed = elapsedBefore + (Date.now() - resumedAt);
+      elapsedRef.current = elapsed;
+      const pct = Math.min((elapsed / IMAGE_STORY_DURATION_MS) * 100, 100);
       setProgress(pct);
       if (pct < 100) rafId = requestAnimationFrame(tick);
       else advance();
@@ -87,14 +195,36 @@ export default function StoryViewerScreen() {
 
     rafId = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(rafId);
-  }, [currentStory, advance]);
+  }, [currentStory, isVideo, isPaused, advance]);
+
+  // Aus einer Mitteilung geöffnet → einmalig zur genannten Story springen.
+  useEffect(() => {
+    if (jumpedToInitialRef.current || !initialStoryId || stories.length === 0) return;
+    jumpedToInitialRef.current = true;
+    const target = stories.findIndex((s) => s.id === initialStoryId);
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- einmaliger Sprung, sobald die Liste da ist
+    if (target > 0) setIndex(target);
+  }, [initialStoryId, stories]);
+
+  // Keine (laufende) Story mehr, z. B. über eine alte Mitteilung geöffnet → zurück statt schwarzem Bildschirm.
+  useEffect(() => {
+    if (storiesLoaded && stories.length === 0) router.back();
+  }, [storiesLoaded, stories.length, router]);
 
   if (!currentStory) return null;
 
   const mediaUrl = currentStory.storageKey ? getMediaUrl(currentStory.storageKey) : null;
+  const refreshStories = () => void queryClient.invalidateQueries({ queryKey: listQuery.queryKey });
+  // Medienfläche wie bei contentFit="contain" — darauf beziehen sich die Overlays.
+  const mediaSize = storyMediaSize(currentStory);
+  const rect = mediaSize ? containRect(screen.width, screen.height, mediaSize.width, mediaSize.height) : null;
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setScreen((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));
+  };
 
   return (
-    <View style={styles.backdrop}>
+    <View style={styles.backdrop} onLayout={onLayout}>
       <View style={[styles.progressRow, { top: insets.top + 12 }]}>
         {stories.map((s, i) => (
           <View key={s.id} style={styles.progressTrack}>
@@ -108,28 +238,210 @@ export default function StoryViewerScreen() {
         ))}
       </View>
 
-      {mediaUrl && <Image source={{ uri: mediaUrl }} style={styles.media} contentFit="contain" />}
+      {isVideo ? (
+        <VideoStory
+          key={currentStory.id}
+          status={videoStatus}
+          playbackId={videoPlaybackId}
+          paused={isPaused}
+          onProgress={setProgress}
+          onEnded={advance}
+        />
+      ) : isText ? (
+        rect && (
+          <View style={{ position: "absolute", left: rect.x, top: rect.y }}>
+            <StoryBackground backgroundKey={currentStory.background ?? "sunset"} width={rect.width} height={rect.height} />
+          </View>
+        )
+      ) : (
+        mediaUrl && <Image source={{ uri: mediaUrl }} style={styles.media} contentFit="contain" />
+      )}
 
       <View style={styles.tapZones}>
         <Pressable style={styles.tapZoneLeft} onPress={goBack} />
         <Pressable style={styles.tapZoneRight} onPress={advance} />
       </View>
 
+      {showOverlays && rect && (
+        <StoryOverlayLayer
+          overlays={currentStory.overlays}
+          rect={rect}
+          mentionedPets={currentStory.mentionedPets}
+          onPressMention={openMentionedPet}
+        />
+      )}
+
       <View style={[styles.petInfo, { bottom: insets.bottom + 24 }]}>
         <PetAvatar name={petName} avatarKey={petAvatarKey || null} size="sm" />
         <Text style={styles.petName}>{petName}</Text>
       </View>
 
+      {currentStory.isExpired && (
+        <View style={[styles.expiredRow, { top: insets.top + 56 }]} pointerEvents="none">
+          <View style={styles.expiredBadge}>
+            <Clock size={14} color={colors.pureWhite} />
+            <Text style={styles.expiredText}>{t("storyViewer.expiredOwnerOnly")}</Text>
+          </View>
+        </View>
+      )}
+
+      {isOwnStory && (
+        <View style={[styles.ownerActions, { top: insets.top + 8 }]}>
+          <Pressable
+            style={styles.viewerCount}
+            onPress={() => setOpenSheet("viewers")}
+            accessibilityRole="button"
+            accessibilityLabel={t("storyViewer.viewersTitle", { count: viewers.length })}
+          >
+            <Eye size={16} color={colors.pureWhite} />
+            <Text style={styles.viewerCountText}>{viewers.length}</Text>
+          </Pressable>
+          <Pressable
+            style={styles.deleteButton}
+            onPress={() => confirmDelete(currentStory.id)}
+            disabled={deleteMutation.isPending}
+            accessibilityRole="button"
+            accessibilityLabel={t("storyViewer.deleteStory")}
+            hitSlop={8}
+          >
+            {deleteMutation.isPending ? <ActivityIndicator color={colors.pureWhite} size="small" /> : <Trash2 size={16} color={colors.pureWhite} />}
+          </Pressable>
+        </View>
+      )}
+
+      {activePetId && (
+        <View style={[styles.actions, { bottom: insets.bottom + 24 }]}>
+          {currentStory.isExpired ? (
+            <View style={styles.actionWrap} accessibilityLabel={t("storyViewer.pawCount", { count: currentStory.reactionCount })}>
+              <View style={styles.actionCircle}>
+                <PawPrint size={20} color={colors.pureWhite} />
+              </View>
+              {currentStory.reactionCount > 0 && <Text style={styles.actionCount}>{currentStory.reactionCount}</Text>}
+            </View>
+          ) : (
+            <StoryPawButton
+              key={currentStory.id}
+              storyId={currentStory.id}
+              petId={activePetId}
+              initialCount={currentStory.reactionCount}
+              initialReacted={currentStory.reactedByViewer}
+            />
+          )}
+          <Pressable
+            onPress={() => setOpenSheet("comments")}
+            accessibilityRole="button"
+            accessibilityLabel={t("storyViewer.openComments")}
+            hitSlop={8}
+            style={styles.actionWrap}
+          >
+            <View style={styles.actionCircle}>
+              <MessageCircle size={20} color={colors.pureWhite} />
+            </View>
+            {currentStory.commentCount > 0 && <Text style={styles.actionCount}>{currentStory.commentCount}</Text>}
+          </Pressable>
+        </View>
+      )}
+
       <Pressable style={[styles.closeButton, { top: insets.top + 8 }]} onPress={close} hitSlop={12}>
         <X color={colors.pureWhite} size={22} />
       </Pressable>
+
+      {activePetId && (
+        <StoryCommentsSheet
+          storyId={currentStory.id}
+          activePetId={activePetId}
+          visible={openSheet === "comments"}
+          onClose={() => setOpenSheet(null)}
+          onChanged={refreshStories}
+          onPressPet={openPet}
+          readOnly={currentStory.isExpired}
+        />
+      )}
+      {isOwnStory && (
+        <StoryViewersSheet
+          storyId={currentStory.id}
+          visible={openSheet === "viewers"}
+          onClose={() => setOpenSheet(null)}
+          onPressPet={openPet}
+        />
+      )}
     </View>
   );
 }
 
+type VideoStatusValue = "PROCESSING" | "READY" | "ERROR";
+
+interface VideoStoryProps {
+  status: VideoStatusValue | null | undefined;
+  playbackId: string | null | undefined;
+  paused: boolean;
+  onProgress: (pct: number) => void;
+  onEnded: () => void;
+}
+
+/** Zeigt den Verarbeitungs-/Fehlerzustand; der Player wird erst bei READY gemountet (wie VideoPlayer.tsx). */
+function VideoStory({ status, playbackId, ...playerProps }: VideoStoryProps) {
+  const { t } = useTranslation();
+
+  if (status === "READY" && playbackId) {
+    return <ReadyVideoStory playbackId={playbackId} {...playerProps} />;
+  }
+
+  return (
+    <View style={styles.statusBox}>
+      {status === "ERROR" ? (
+        <>
+          <AlertCircle color={colors.alertRed} size={28} />
+          <Text style={styles.statusLabel}>{t("video.error")}</Text>
+        </>
+      ) : (
+        <>
+          <ActivityIndicator color={colors.marigoldOrange} />
+          <Text style={styles.statusLabel}>{t("video.processing")}</Text>
+        </>
+      )}
+    </View>
+  );
+}
+
+/**
+ * Spielt einmal ab (kein Loop) und springt bei `playToEnd` weiter.
+ * `play()` erst bei `readyToPlay` — vorher ist `duration` 0 und `playToEnd`
+ * feuerte sofort (Viewer schloss sich nach < 1 s, auf Emulator und Gerät
+ * beobachtet). Offenes Sheet pausiert das Video wie den Foto-Timer.
+ */
+function ReadyVideoStory({ playbackId, paused, onProgress, onEnded }: Omit<VideoStoryProps, "status" | "playbackId"> & { playbackId: string }) {
+  const player = useVideoPlayer(`https://stream.mux.com/${playbackId}.m3u8`, (p) => {
+    p.loop = false;
+    p.timeUpdateEventInterval = 0.25;
+  });
+  const pausedRef = useRef(paused);
+
+  useEffect(() => {
+    pausedRef.current = paused;
+    if (paused) player.pause();
+    else if (player.status === "readyToPlay") player.play();
+  }, [player, paused]);
+
+  useEventListener(player, "statusChange", ({ status }) => {
+    if (status === "readyToPlay" && !pausedRef.current) player.play();
+  });
+  useEventListener(player, "timeUpdate", ({ currentTime }) => {
+    if (player.duration > 0) onProgress((currentTime / player.duration) * 100);
+  });
+  useEventListener(player, "playToEnd", () => {
+    onProgress(100);
+    onEnded();
+  });
+
+  return <VideoView player={player} style={styles.media} contentFit="contain" nativeControls={false} />;
+}
+
 const styles = StyleSheet.create({
   backdrop: { flex: 1, backgroundColor: colors.ink },
   media: { flex: 1, width: "100%" },
+  statusBox: { flex: 1, width: "100%", alignItems: "center", justifyContent: "center", gap: 8 },
+  statusLabel: { color: colors.pureWhite, fontSize: 14 },
   tapZones: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, flexDirection: "row" },
   tapZoneLeft: { flex: 1 },
   tapZoneRight: { flex: 2 },
@@ -145,6 +457,33 @@ const styles = StyleSheet.create({
     zIndex: 2,
   },
   petName: { color: colors.pureWhite, fontWeight: "600", fontSize: 14 },
+  actions: { position: "absolute", right: 16, alignItems: "center", gap: 16, zIndex: 2 },
+  actionWrap: { alignItems: "center", gap: 2 },
+  actionCircle: { width: 44, height: 44, borderRadius: 22, backgroundColor: "rgba(0,0,0,0.4)", alignItems: "center", justifyContent: "center" },
+  actionCount: { color: colors.pureWhite, fontSize: 12, fontWeight: "600", textShadowColor: "rgba(0,0,0,0.6)", textShadowRadius: 3 },
+  expiredRow: { position: "absolute", left: 0, right: 0, alignItems: "center", zIndex: 2 },
+  expiredBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 999,
+    backgroundColor: "rgba(0,0,0,0.6)",
+  },
+  expiredText: { color: colors.pureWhite, fontSize: 12, fontWeight: "600" },
+  ownerActions: { position: "absolute", left: 16, flexDirection: "row", alignItems: "center", gap: 8, zIndex: 2 },
+  deleteButton: { width: 36, height: 36, borderRadius: 18, backgroundColor: "rgba(0,0,0,0.4)", alignItems: "center", justifyContent: "center" },
+  viewerCount: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: "rgba(0,0,0,0.4)",
+  },
+  viewerCountText: { color: colors.pureWhite, fontSize: 13, fontWeight: "600" },
   closeButton: {
     position: "absolute",
     right: 16,

mobile/app/(auth)/sign-in.tsx

@@ -1,13 +1,16 @@
 import { useMemo, useState } from "react";
-import { View, Text, Pressable, StyleSheet, KeyboardAvoidingView, ScrollView, Platform } from "react-native";
+import { Animated, Text, StyleSheet, Platform } from "react-native";
 import { useSignIn } from "@clerk/expo";
 import { useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
 import { Button } from "../../src/components/Button";
-import { TextField } from "../../src/components/TextField";
-import { PasswordField } from "../../src/components/PasswordField";
-import { LanguageSwitcher } from "../../src/components/LanguageSwitcher";
+import { KeyRound, Lock, Mail } from "lucide-react-native";
 import { GoogleSignInButton } from "../../src/components/GoogleSignInButton";
+import { AppleSignInButton } from "../../src/components/AppleSignInButton";
+import { AuthDivider, AuthFooterLink, AuthShell } from "../../src/components/auth/AuthShell";
+import { AuthField } from "../../src/components/auth/AuthField";
+import { Reveal } from "../../src/components/Reveal";
+import { useShake } from "../../src/hooks/useShake";
 import { useTheme } from "../../src/context/ThemeContext";
 import { getTypography, type ColorTokens, type Typography } from "../../src/theme/tokens";
 
@@ -34,6 +37,9 @@ export default function SignInScreen() {
   const [code, setCode] = useState("");
   const [step, setStep] = useState<"credentials" | "verify-device">("credentials");
   const [error, setError] = useState<string | null>(null);
+  const [isCredentialError, setIsCredentialError] = useState(false);
+  const { shakeStyle, shake } = useShake();
+  const isBusy = fetchStatus === "fetching";
 
   const finalizeIfComplete = async () => {
     if (signIn.status !== "complete") {
@@ -49,6 +55,8 @@ export default function SignInScreen() {
     const { error: signInError } = await signIn.password({ identifier: emailAddress, password });
     if (signInError) {
       setError(signInError.longMessage ?? signInError.message);
+      setIsCredentialError(true);
+      shake();
       return;
     }
 
@@ -70,6 +78,7 @@ export default function SignInScreen() {
     const { error: verifyError } = await signIn.mfa.verifyEmailCode({ code });
     if (verifyError) {
       setError(verifyError.longMessage ?? verifyError.message);
+      shake();
       return;
     }
     await finalizeIfComplete();
@@ -77,85 +86,110 @@ export default function SignInScreen() {
 
   if (step === "verify-device") {
     return (
-      <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === "ios" ? "padding" : undefined}>
-        <ScrollView contentContainerStyle={styles.container} keyboardShouldPersistTaps="handled">
-          <View style={styles.form}>
-            <Text style={styles.title}>{t("auth.verifyDeviceTitle")}</Text>
-            <Text style={styles.hint}>{t("auth.verifyDeviceHint", { email: emailAddress })}</Text>
-            <TextField
-              autoCapitalize="none"
-              keyboardType="number-pad"
-              placeholder={t("auth.codePlaceholder")}
-              value={code}
-              onChangeText={setCode}
-            />
-            {error ? <Text style={styles.error}>{error}</Text> : null}
-            <Button title={t("auth.confirmButton")} disabled={fetchStatus === "fetching"} onPress={onVerifyPress} />
-          </View>
-        </ScrollView>
-      </KeyboardAvoidingView>
+      <AuthShell>
+        <Reveal index={3}>
+          <Text style={styles.title}>{t("auth.verifyDeviceTitle")}</Text>
+        </Reveal>
+        <Reveal index={4}>
+          <Text style={styles.hint}>{t("auth.verifyDeviceHint", { email: emailAddress })}</Text>
+        </Reveal>
+        <Animated.View style={shakeStyle}>
+          <AuthField
+            icon={KeyRound}
+            autoCapitalize="none"
+            keyboardType="number-pad"
+            placeholder={t("auth.codePlaceholder")}
+            value={code}
+            onChangeText={setCode}
+          />
+        </Animated.View>
+        {error ? <Text style={styles.error}>{error}</Text> : null}
+        <Button title={t("auth.confirmButton")} isLoading={isBusy} onPress={onVerifyPress} style={styles.submit} />
+      </AuthShell>
     );
   }
 
+  const onCredentialChange = (setter: (value: string) => void) => (value: string) => {
+    setter(value);
+    setIsCredentialError(false);
+  };
+
   return (
-    <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === "ios" ? "padding" : undefined}>
-      <ScrollView contentContainerStyle={styles.container} keyboardShouldPersistTaps="handled">
-      <View style={styles.form}>
-        <LanguageSwitcher />
-        <Text style={styles.title}>{t("auth.signInTitle")}</Text>
+    <AuthShell
+      footer={
+        <Reveal index={11}>
+          <AuthFooterLink
+            prompt={t("auth.noAccountPrompt")}
+            action={t("auth.signUpButton")}
+            onPress={() => router.replace("/(auth)/sign-up")}
+          />
+        </Reveal>
+      }
+    >
+      <Reveal index={3}>
+        <Text style={styles.title}>{t("auth.welcomeBack")}</Text>
+      </Reveal>
+      <Reveal index={4}>
+        <Text style={styles.hint}>{t("auth.welcomeBackHint")}</Text>
+      </Reveal>
+      <Animated.View style={[styles.fields, shakeStyle]}>
+        <Reveal index={5}>
+          <AuthField
+            icon={Mail}
+            autoCapitalize="none"
+            autoComplete="email"
+            keyboardType="email-address"
+            placeholder={t("auth.emailPlaceholder")}
+            value={emailAddress}
+            onChangeText={onCredentialChange(setEmailAddress)}
+            isInvalid={isCredentialError}
+          />
+        </Reveal>
+        <Reveal index={6}>
+          <AuthField
+            icon={Lock}
+            isSecure
+            autoComplete="password"
+            placeholder={t("auth.passwordPlaceholder")}
+            value={password}
+            onChangeText={onCredentialChange(setPassword)}
+            isInvalid={isCredentialError}
+          />
+        </Reveal>
+      </Animated.View>
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+      <Reveal index={7}>
+        <Button title={t("auth.signInButton")} isLoading={isBusy} onPress={onSignInPress} style={styles.submit} />
+      </Reveal>
+      <Reveal index={8}>
+        <AuthDivider label={t("auth.continueWith")} />
+      </Reveal>
+      {/* Apple renders nothing on Android — skip its Reveal so no empty gap remains. */}
+      {Platform.OS === "ios" ? (
+        <Reveal index={9}>
+          <AppleSignInButton
+            onError={setError}
+            onNeedsConsent={() => setError(t("auth.appleNeedsSignUpError"))}
+          />
+        </Reveal>
+      ) : null}
+      <Reveal index={10}>
         <GoogleSignInButton
           onError={setError}
           onNeedsConsent={() => setError(t("auth.googleNeedsSignUpError"))}
         />
-        <Text style={styles.divider}>{t("auth.orDivider")}</Text>
-        <TextField
-          autoCapitalize="none"
-          keyboardType="email-address"
-          placeholder={t("auth.emailPlaceholder")}
-          value={emailAddress}
-          onChangeText={setEmailAddress}
-        />
-        <PasswordField
-          placeholder={t("auth.passwordPlaceholder")}
-          value={password}
-          onChangeText={setPassword}
-        />
-        {error ? <Text style={styles.error}>{error}</Text> : null}
-        <Button
-          title={t("auth.signInButton")}
-          disabled={fetchStatus === "fetching"}
-          onPress={onSignInPress}
-        />
-        <Pressable onPress={() => router.replace("/(auth)/sign-up")} hitSlop={8}>
-          <Text style={styles.link}>{t("auth.noAccountLink")}</Text>
-        </Pressable>
-      </View>
-      </ScrollView>
-    </KeyboardAvoidingView>
+      </Reveal>
+    </AuthShell>
   );
 }
 
 function makeStyles(colors: ColorTokens) {
   const typography: Typography = getTypography(colors);
   return StyleSheet.create({
-    flex: { flex: 1, backgroundColor: colors.porchWhite },
-    container: {
-      flexGrow: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      padding: 24,
-      backgroundColor: colors.porchWhite,
-    },
-    // Capped so the form stays a readable phone-width column instead of
-    // stretching full-bleed edge-to-edge on tablets (reported: "die gesamte
-    // App sieht sehr großgezogen aus" on a tablet login screenshot) — the
-    // container above had no maxWidth, so flex "stretch" filled the entire
-    // screen width on large devices.
-    form: { width: "100%", maxWidth: 420, gap: 12 },
-    title: { ...typography.headline, marginBottom: 16 },
-    divider: { ...typography.label, textAlign: "center", textTransform: "none" as const },
-    hint: { ...typography.body, color: colors.quietGray, marginBottom: 8 },
+    title: { ...typography.headline, fontSize: 22 },
+    hint: { ...typography.body, color: colors.quietGray, marginTop: -6, marginBottom: 6 },
+    fields: { gap: 10 },
     error: { ...typography.body, color: colors.alertRed },
-    link: { ...typography.body, color: colors.marigoldDeep, textAlign: "center", marginTop: 8 },
+    submit: { height: 52, borderRadius: 14 },
   });
 }

mobile/app/(auth)/sign-up.tsx

@@ -1,14 +1,16 @@
 import { useMemo, useState } from "react";
-import { View, Text, Pressable, Linking, StyleSheet, KeyboardAvoidingView, ScrollView, Platform } from "react-native";
+import { Animated, View, Text, Pressable, Linking, StyleSheet, Platform } from "react-native";
 import { useSignUp } from "@clerk/expo";
 import { useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
-import { Check } from "lucide-react-native";
+import { Check, KeyRound, Lock, Mail, User } from "lucide-react-native";
 import { Button } from "../../src/components/Button";
-import { TextField } from "../../src/components/TextField";
-import { PasswordField } from "../../src/components/PasswordField";
-import { LanguageSwitcher } from "../../src/components/LanguageSwitcher";
 import { GoogleSignInButton } from "../../src/components/GoogleSignInButton";
+import { AppleSignInButton } from "../../src/components/AppleSignInButton";
+import { AuthDivider, AuthFooterLink, AuthShell } from "../../src/components/auth/AuthShell";
+import { AuthField } from "../../src/components/auth/AuthField";
+import { Reveal } from "../../src/components/Reveal";
+import { useShake } from "../../src/hooks/useShake";
 import { useTheme } from "../../src/context/ThemeContext";
 import { env } from "../../src/lib/env";
 import { getTypography, type ColorTokens, type Typography } from "../../src/theme/tokens";
@@ -16,8 +18,9 @@ import { getTypography, type ColorTokens, type Typography } from "../../src/them
 /**
  * Email/password sign-up — the mobile app's other half of sign-in.tsx (that
  * screen only ever covered login, per its own comment "sign-up screens are
- * follow-up work"). No invite-code step: INVITE_REQUIRED is globally off on
- * the backend since launch (post-beta), unlike web's /join gate.
+ * follow-up work"). No invite-code step here: registration is open, and a
+ * referral code is redeemed later in onboarding (AcquisitionStep), never
+ * as part of the Clerk sign-up itself.
  *
  * Uses Clerk's "Futures" API (signUp.password(), signUp.verifications,
  * signUp.finalize()), matching sign-in.tsx's pattern — see AGENTS.md before
@@ -48,6 +51,12 @@ export default function SignUpScreen() {
   const [code, setCode] = useState("");
   const [step, setStep] = useState<"credentials" | "verify-email">("credentials");
   const [error, setError] = useState<string | null>(null);
+  const { shakeStyle, shake } = useShake();
+  const { shakeStyle: consentShakeStyle, shake: shakeConsent } = useShake();
+  // Set when someone taps Google/Apple before ticking the consent box.
+  const [isConsentNudged, setIsConsentNudged] = useState(false);
+  const showConsentHint = isConsentNudged && !legalAccepted;
+  const isBusy = fetchStatus === "fetching";
 
   const canSubmit =
     firstName.trim().length > 0 && lastName.trim().length > 0 && emailAddress.trim().length > 0 && password.length > 0 && legalAccepted;
@@ -72,6 +81,7 @@ export default function SignUpScreen() {
     });
     if (signUpError) {
       setError(signUpError.longMessage ?? signUpError.message);
+      shake();
       return;
     }
 
@@ -93,6 +103,7 @@ export default function SignUpScreen() {
     const { error: verifyError } = await signUp.verifications.verifyEmailCode({ code });
     if (verifyError) {
       setError(verifyError.longMessage ?? verifyError.message);
+      shake();
       return;
     }
     await finalizeIfComplete();
@@ -100,111 +111,165 @@ export default function SignUpScreen() {
 
   if (step === "verify-email") {
     return (
-      <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === "ios" ? "padding" : undefined}>
-        <ScrollView contentContainerStyle={styles.container} keyboardShouldPersistTaps="handled">
-          <View style={styles.form}>
-            <Text style={styles.title}>{t("auth.verifyEmailTitle")}</Text>
-            <Text style={styles.hint}>{t("auth.verifyEmailHint", { email: emailAddress })}</Text>
-            <TextField
-              autoCapitalize="none"
-              keyboardType="number-pad"
-              placeholder={t("auth.codePlaceholder")}
-              value={code}
-              onChangeText={setCode}
-            />
-            {error ? <Text style={styles.error}>{error}</Text> : null}
-            <Button title={t("auth.confirmButton")} disabled={fetchStatus === "fetching"} onPress={onVerifyPress} />
-          </View>
-        </ScrollView>
-      </KeyboardAvoidingView>
+      <AuthShell>
+        <Reveal index={3}>
+          <Text style={styles.title}>{t("auth.verifyEmailTitle")}</Text>
+        </Reveal>
+        <Reveal index={4}>
+          <Text style={styles.hint}>{t("auth.verifyEmailHint", { email: emailAddress })}</Text>
+        </Reveal>
+        <Animated.View style={shakeStyle}>
+          <AuthField
+            icon={KeyRound}
+            autoCapitalize="none"
+            keyboardType="number-pad"
+            placeholder={t("auth.codePlaceholder")}
+            value={code}
+            onChangeText={setCode}
+          />
+        </Animated.View>
+        {error ? <Text style={styles.error}>{error}</Text> : null}
+        <Button title={t("auth.confirmButton")} isLoading={isBusy} onPress={onVerifyPress} style={styles.submit} />
+      </AuthShell>
     );
   }
 
+  const nudgeConsent = () => {
+    setIsConsentNudged(true);
+    shakeConsent();
+  };
+
   return (
-    <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === "ios" ? "padding" : undefined}>
-      <ScrollView contentContainerStyle={styles.container} keyboardShouldPersistTaps="handled">
-      <View style={styles.form}>
-        <LanguageSwitcher />
-        <Text style={styles.title}>{t("auth.signUpTitle")}</Text>
-        <GoogleSignInButton onError={setError} legalAccepted={legalAccepted} disabled={!legalAccepted} />
-        <Text style={styles.divider}>{t("auth.orDivider")}</Text>
-        <TextField
-          placeholder={t("auth.firstNamePlaceholder")}
-          value={firstName}
-          onChangeText={setFirstName}
-        />
-        <TextField
-          placeholder={t("auth.lastNamePlaceholder")}
-          value={lastName}
-          onChangeText={setLastName}
-        />
-        <TextField
-          autoCapitalize="none"
-          keyboardType="email-address"
-          placeholder={t("auth.emailPlaceholder")}
-          value={emailAddress}
-          onChangeText={setEmailAddress}
-        />
-        <PasswordField
-          placeholder={t("auth.passwordPlaceholder")}
-          value={password}
-          onChangeText={setPassword}
-        />
-        <Pressable style={styles.checkboxRow} onPress={() => setLegalAccepted((v) => !v)}>
-          <View style={[styles.checkbox, legalAccepted && styles.checkboxChecked]}>
-            {legalAccepted && <Check color={colors.pureWhite} size={14} />}
+    <AuthShell
+      footer={
+        <Reveal index={13}>
+          <AuthFooterLink
+            prompt={t("auth.hasAccountPrompt")}
+            action={t("auth.signInButton")}
+            onPress={() => router.replace("/(auth)/sign-in")}
+          />
+        </Reveal>
+      }
+    >
+      <Reveal index={3}>
+        <Text style={styles.title}>{t("auth.signUpHeading")}</Text>
+      </Reveal>
+      <Reveal index={4}>
+        <Text style={styles.hint}>{t("auth.signUpHint")}</Text>
+      </Reveal>
+      <Animated.View style={[styles.fields, shakeStyle]}>
+        <Reveal index={5} style={styles.nameRow}>
+          <View style={styles.nameField}>
+            <AuthField
+              icon={User}
+              autoComplete="given-name"
+              placeholder={t("auth.firstNamePlaceholder")}
+              value={firstName}
+              onChangeText={setFirstName}
+            />
           </View>
-          <Text style={styles.checkboxLabel}>{t("auth.legalConsentLabel")}</Text>
-        </Pressable>
+          <View style={styles.nameField}>
+            <AuthField
+              autoComplete="family-name"
+              placeholder={t("auth.lastNamePlaceholder")}
+              value={lastName}
+              onChangeText={setLastName}
+            />
+          </View>
+        </Reveal>
+        <Reveal index={6}>
+          <AuthField
+            icon={Mail}
+            autoCapitalize="none"
+            autoComplete="email"
+            keyboardType="email-address"
+            placeholder={t("auth.emailPlaceholder")}
+            value={emailAddress}
+            onChangeText={setEmailAddress}
+          />
+        </Reveal>
+        <Reveal index={7}>
+          <AuthField
+            icon={Lock}
+            isSecure
+            autoComplete="new-password"
+            placeholder={t("auth.passwordPlaceholder")}
+            value={password}
+            onChangeText={setPassword}
+          />
+        </Reveal>
+      </Animated.View>
+      <Reveal index={8}>
+        <Animated.View style={consentShakeStyle}>
+          <Pressable style={styles.checkboxRow} onPress={() => setLegalAccepted((v) => !v)} hitSlop={6}>
+            <View
+              style={[styles.checkbox, showConsentHint && styles.checkboxNudged, legalAccepted && styles.checkboxChecked]}
+            >
+              {legalAccepted && <Check color={colors.pureWhite} size={14} />}
+            </View>
+            <Text style={styles.checkboxLabel}>{t("auth.legalConsentLabel")}</Text>
+          </Pressable>
+        </Animated.View>
+        {showConsentHint ? <Text style={styles.consentHint}>{t("auth.consentFirstHint")}</Text> : null}
         <View style={styles.legalLinksRow}>
-          <Pressable onPress={() => Linking.openURL(`${env.apiUrl}/nutzungsbedingungen`)}>
+          <Pressable onPress={() => Linking.openURL(`${env.apiUrl}/nutzungsbedingungen`)} hitSlop={8}>
             <Text style={styles.link}>{t("pets.legalTerms")}</Text>
           </Pressable>
-          <Pressable onPress={() => Linking.openURL(`${env.apiUrl}/datenschutz`)}>
+          <Pressable onPress={() => Linking.openURL(`${env.apiUrl}/datenschutz`)} hitSlop={8}>
             <Text style={styles.link}>{t("pets.legalPrivacy")}</Text>
           </Pressable>
         </View>
-        {error ? <Text style={styles.error}>{error}</Text> : null}
+      </Reveal>
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+      <Reveal index={9}>
         <Button
           title={t("auth.signUpButton")}
-          disabled={fetchStatus === "fetching" || !canSubmit}
+          disabled={!canSubmit}
+          isLoading={isBusy}
           onPress={onSignUpPress}
+          style={styles.submit}
         />
-        <Pressable onPress={() => router.replace("/(auth)/sign-in")} hitSlop={8}>
-          <Text style={styles.link}>{t("auth.hasAccountLink")}</Text>
-        </Pressable>
+      </Reveal>
+      <Reveal index={10}>
+        <AuthDivider label={t("auth.continueWith")} />
+      </Reveal>
+      {/* Buttons stay visually active: a greyed-out Google button without any
+          explanation confused users. Before consent, a tap lands on the overlay
+          and points at the checkbox instead of starting the SSO flow. */}
+      <View style={styles.ssoGroup}>
+        {/* Apple renders nothing on Android — skip its Reveal so no empty gap remains. */}
+        {Platform.OS === "ios" ? (
+          <Reveal index={11}>
+            <AppleSignInButton onError={setError} legalAccepted={legalAccepted} />
+          </Reveal>
+        ) : null}
+        <Reveal index={12}>
+          <GoogleSignInButton onError={setError} legalAccepted={legalAccepted} />
+        </Reveal>
+        {!legalAccepted ? (
+          <Pressable
+            style={StyleSheet.absoluteFill}
+            onPress={nudgeConsent}
+            accessibilityRole="button"
+            accessibilityHint={t("auth.consentFirstHint")}
+          />
+        ) : null}
       </View>
-      </ScrollView>
-    </KeyboardAvoidingView>
+    </AuthShell>
   );
 }
 
 function makeStyles(colors: ColorTokens) {
   const typography: Typography = getTypography(colors);
   return StyleSheet.create({
-    flex: { flex: 1, backgroundColor: colors.porchWhite },
-    // flexGrow (not flex) on a ScrollView's contentContainerStyle — still
-    // centers short content but lets the view actually scroll once the
-    // keyboard pushes content taller than the screen (found.md: password
-    // field and submit button were getting hidden behind the keyboard).
-    container: {
-      flexGrow: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      padding: 24,
-      backgroundColor: colors.porchWhite,
-    },
-    // Capped so the form stays a readable phone-width column instead of
-    // stretching full-bleed edge-to-edge on tablets (reported: "die gesamte
-    // App sieht sehr großgezogen aus" on a tablet login screenshot) — the
-    // container above had no maxWidth, so flex "stretch" filled the entire
-    // screen width on large devices.
-    form: { width: "100%", maxWidth: 420, gap: 12 },
-    title: { ...typography.headline, marginBottom: 16 },
-    divider: { ...typography.label, textAlign: "center", textTransform: "none" as const },
-    hint: { ...typography.body, color: colors.quietGray, marginBottom: 8 },
+    title: { ...typography.headline, fontSize: 22 },
+    hint: { ...typography.body, color: colors.quietGray, marginTop: -6, marginBottom: 6 },
+    fields: { gap: 10 },
+    nameRow: { flexDirection: "row", gap: 10 },
+    nameField: { flex: 1 },
     error: { ...typography.body, color: colors.alertRed },
-    link: { ...typography.body, color: colors.marigoldDeep, textAlign: "center", marginTop: 8 },
+    submit: { height: 52, borderRadius: 14 },
+    link: { ...typography.body, fontSize: 13, color: colors.marigoldDeep },
     checkboxRow: { flexDirection: "row", alignItems: "flex-start", gap: 10, marginTop: 4 },
     checkbox: {
       width: 20,
@@ -217,7 +282,10 @@ function makeStyles(colors: ColorTokens) {
       marginTop: 2,
     },
     checkboxChecked: { backgroundColor: colors.marigoldOrange, borderColor: colors.marigoldOrange },
+    checkboxNudged: { borderColor: colors.alertRed, borderWidth: 2 },
+    consentHint: { ...typography.body, fontSize: 13, color: colors.alertRed, marginTop: 6 },
+    ssoGroup: { gap: 10 },
     checkboxLabel: { ...typography.body, flex: 1, fontSize: 13, lineHeight: 19 },
-    legalLinksRow: { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: 16 },
+    legalLinksRow: { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: 16, marginTop: 6 },
   });
 }

mobile/app/onboarding/_layout.tsx

@@ -1,42 +1,13 @@
-import { Pressable } from "react-native";
-import { Stack, useRouter } from "expo-router";
-import { X } from "lucide-react-native";
-import { useTranslation } from "react-i18next";
-import { useTheme } from "../../src/context/ThemeContext";
-import { fontFamily } from "../../src/theme/tokens";
+import { Stack } from "expo-router";
 
 /**
- * Always closes back to /(app), never router.back() — this screen is
- * reached two ways: OnboardingRedirect's replace() (no meaningful back
- * history) for a zero-pet owner, and the Pets tab's "+" button (real back
- * history) for an existing owner adding another pet. A zero-pet owner who
- * closes gets bounced right back here by OnboardingRedirect — that's
- * correct, not a bug: they can't use the app without a first pet, but they
- * get an obvious "why am I back here" instead of a dead-end screen with no
- * way to leave at all.
+ * No native header: the onboarding draws its own top bar (back, progress,
+ * close) in pet.tsx. Close always goes to /(app), never router.back() — this
+ * screen is reached via OnboardingRedirect's replace() (zero pets, no back
+ * history) and via the Pets tab's "+" (another pet). A zero-pet owner who
+ * closes gets bounced right back by OnboardingRedirect — intended: they can't
+ * use the app without a first pet.
  */
-function CloseButton() {
-  const router = useRouter();
-  const { colors } = useTheme();
-  return (
-    <Pressable onPress={() => router.replace("/(app)")} hitSlop={12} style={{ marginLeft: 8 }}>
-      <X color={colors.ink} size={22} />
-    </Pressable>
-  );
-}
-
 export default function OnboardingLayout() {
-  const { t } = useTranslation();
-  const { colors } = useTheme();
-  return (
-    <Stack
-      screenOptions={{
-        headerStyle: { backgroundColor: colors.pureWhite },
-        headerTitleStyle: { fontFamily: fontFamily.bold, color: colors.ink },
-        headerLeft: () => <CloseButton />,
-      }}
-    >
-      <Stack.Screen name="pet" options={{ title: t("onboarding.addPetTitle") }} />
-    </Stack>
-  );
+  return <Stack screenOptions={{ headerShown: false }} />;
 }

mobile/app/onboarding/pet.tsx

@@ -1,66 +1,251 @@
-import { useState } from "react";
-import { FlatList } from "react-native";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { ActivityIndicator, BackHandler, KeyboardAvoidingView, StyleSheet, View } from "react-native";
 import { useRouter } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useActivePet } from "../../src/context/ActivePetContext";
-import { OnboardingGuidelines } from "../../src/components/onboarding/OnboardingGuidelines";
-import { UploadConsent } from "../../src/components/onboarding/UploadConsent";
-import { ArachnophobiaOptIn } from "../../src/components/onboarding/ArachnophobiaOptIn";
-import { PetCreateForm } from "../../src/components/onboarding/PetCreateForm";
-import { AvatarStep } from "../../src/components/onboarding/AvatarStep";
+import { useTRPC } from "../../src/api/trpc";
 import { useTheme } from "../../src/context/ThemeContext";
+import type { PickerOption } from "../../src/components/OptionPicker";
+import { ArachnophobiaOptIn } from "../../src/components/onboarding/ArachnophobiaOptIn";
+import { AvatarStep } from "../../src/components/onboarding/AvatarStep";
+import { AcquisitionStep } from "../../src/components/onboarding/AcquisitionStep";
+import { CaretakerOnboarding } from "../../src/components/caretaker/CaretakerOnboarding";
+import { OnboardingTopBar } from "../../src/components/onboarding/flow/OnboardingTopBar";
+import { StepSlide } from "../../src/components/onboarding/flow/StepSlide";
+import { WelcomeStep } from "../../src/components/onboarding/flow/WelcomeStep";
+import { NameStep } from "../../src/components/onboarding/flow/NameStep";
+import { SpeciesStep } from "../../src/components/onboarding/flow/SpeciesStep";
+import { AboutStep } from "../../src/components/onboarding/flow/AboutStep";
+import { DoneStep } from "../../src/components/onboarding/flow/DoneStep";
+
+type StepId = "welcome" | "name" | "species" | "about" | "photo" | "spiders" | "source" | "done";
+
+// ponytail: matched by name because pets.listSpecies has no canonical key; the
+// taxonomy only has en/de. Add a key to listSpecies once a third locale exists.
+const SPIDER_NAMES = new Set(["spider", "spinne"]);
 
 /**
- * Port of web's src/app/onboarding/pet/page.tsx — same five-step flow and
- * step order: community guidelines -> upload-rights/data-processing consent
- * -> Arachnophobie-Helfer opt-in -> pet profile -> avatar photo. Lives as
- * its own top-level route (not under (auth) or (app)) so app/_layout.tsx's
- * "zero pets -> redirect here" check (see OnboardingRedirect) doesn't loop.
+ * Onboarding as short steps (web's order kept where it matters): welcome
+ * (rules + both declarations) -> name -> species/breed -> bio/story (creates
+ * the pet) -> photo -> spider filter -> "Wie hast du von PawFeed erfahren?"
+ * -> closing moment. Lives as its own top-level route (not under (auth) or
+ * (app)) so app/_layout.tsx's "zero pets -> redirect here" check doesn't loop.
+ *
+ * The legal queries are read once (staleTime Infinity) and only invalidated
+ * when leaving: refetching mid-flow (e.g. after the camera backgrounds the
+ * app) would drop the welcome step and shift the progress bar.
  */
 export default function OnboardingPetScreen() {
   const router = useRouter();
+  const insets = useSafeAreaInsets();
   const { colors } = useTheme();
-  const { setActivePetId } = useActivePet();
-  const [guidelinesAcknowledged, setGuidelinesAcknowledged] = useState(false);
-  const [uploadConsentGiven, setUploadConsentGiven] = useState(false);
-  const [arachnophobiaStepDone, setArachnophobiaStepDone] = useState(false);
+  const { pets, setActivePetId } = useActivePet();
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+
+  const [isFirstPet] = useState(() => pets.length === 0);
+  const [stepId, setStepId] = useState<StepId>("welcome");
+  const [direction, setDirection] = useState<1 | -1>(1);
+  const [isCaretakerPath, setIsCaretakerPath] = useState(false);
+
+  const [name, setName] = useState("");
+  const [nickname, setNickname] = useState("");
+  const [species, setSpecies] = useState<PickerOption | null>(null);
+  const [breed, setBreed] = useState<PickerOption | null>(null);
+  const [bio, setBio] = useState("");
+  const [adoptionStory, setAdoptionStory] = useState("");
   const [createdPet, setCreatedPet] = useState<{ id: string; name: string } | null>(null);
+  const [createError, setCreateError] = useState<string | null>(null);
+  const [photoUri, setPhotoUri] = useState<string | undefined>(undefined);
 
-  const finish = () => router.replace("/(app)");
+  const pendingLegal = useQuery({ ...trpc.legal.getPendingUpdate.queryOptions(), staleTime: Infinity });
+  const consentStatus = useQuery({ ...trpc.legal.getUploadConsentStatus.queryOptions(), staleTime: Infinity });
+  const { data: referralState } = useQuery({
+    ...trpc.referrals.onboardingState.queryOptions(),
+    // Only after the pet exists — before that the Owner row may not exist yet.
+    enabled: !!createdPet,
+  });
 
-  let content: React.ReactNode;
-  if (!guidelinesAcknowledged) {
-    content = <OnboardingGuidelines onContinue={() => setGuidelinesAcknowledged(true)} />;
-  } else if (!uploadConsentGiven) {
-    content = <UploadConsent onContinue={() => setUploadConsentGiven(true)} />;
-  } else if (!arachnophobiaStepDone) {
-    content = <ArachnophobiaOptIn onContinue={() => setArachnophobiaStepDone(true)} />;
-  } else if (createdPet) {
-    content = <AvatarStep petId={createdPet.id} petName={createdPet.name} onDone={finish} />;
-  } else {
+  const needsLegal = (pendingLegal.data?.length ?? 0) > 0;
+  const needsConsent = consentStatus.data ? !consentStatus.data.hasConsented : false;
+  const isSpider = !!species && SPIDER_NAMES.has(species.name.toLowerCase());
+
+  const steps: StepId[] = [
+    ...(needsLegal || needsConsent ? (["welcome"] as const) : []),
+    "name",
+    "species",
+    "about",
+    "photo",
+    // Shown for every new pet: the app has no other place to change it (web: /pets).
+    ...(isSpider ? [] : (["spiders"] as const)),
+    ...(isFirstPet ? (["source"] as const) : []),
+  ];
+  const current: StepId = stepId === "welcome" && !steps.includes("welcome") ? "name" : stepId;
+  const index = steps.indexOf(current);
+
+  const go = useCallback((target: StepId, dir: 1 | -1) => {
+    setDirection(dir);
+    setStepId(target);
+  }, []);
+  const next = () => go(steps[index + 1] ?? "done", 1);
+  // No way back past pet creation — the pet exists, going back would create a second one.
+  const back = index > 0 && !createdPet ? () => go(steps[index - 1], -1) : undefined;
+
+  const leave = () => {
+    queryClient.invalidateQueries({ queryKey: trpc.legal.getPendingUpdate.queryOptions().queryKey });
+    queryClient.invalidateQueries({ queryKey: trpc.legal.getUploadConsentStatus.queryOptions().queryKey });
+    router.replace("/(app)");
+  };
+
+  // Android back gesture: one step back instead of leaving the onboarding.
+  const goBackInFlow = isCaretakerPath ? () => setIsCaretakerPath(false) : back;
+  const goBackRef = useRef(goBackInFlow);
+  useEffect(() => {
+    goBackRef.current = goBackInFlow;
+  });
+  useEffect(() => {
+    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+      if (!goBackRef.current) return false;
+      goBackRef.current();
+      return true;
+    });
+    return () => subscription.remove();
+  }, []);
+
+  const createMutation = useMutation(
+    trpc.pets.create.mutationOptions({
+      onSuccess: (pet) => {
+        // Without this, ActivePetContext keeps "no pets" and OnboardingRedirect
+        // bounces straight back here once the flow ends.
+        queryClient.invalidateQueries({ queryKey: trpc.pets.list.queryOptions().queryKey });
+        setActivePetId(pet.id);
+        setCreatedPet({ id: pet.id, name: pet.name });
+        go("photo", 1);
+      },
+      onError: (err) => setCreateError(err.message),
+    }),
+  );
+
+  const createPet = () => {
+    if (!species) return;
+    setCreateError(null);
+    createMutation.mutate({
+      name: name.trim(),
+      nickname: nickname.trim() || undefined,
+      speciesId: species.id,
+      breedId: breed?.id,
+      bio: bio.trim() || undefined,
+      adoptionStory: adoptionStory.trim() || undefined,
+    });
+  };
+
+  const petName = createdPet?.name ?? (name.trim() || "?");
+  const isLoadingLegal = pendingLegal.isLoading || consentStatus.isLoading;
+
+  let content: ReactNode;
+  if (isLoadingLegal) {
+    content = <Centered color={colors.marigoldOrange} />;
+  } else if (isCaretakerPath) {
+    content = <CaretakerOnboarding onApproved={leave} onBack={() => setIsCaretakerPath(false)} />;
+  } else if (current === "welcome") {
+    content = <WelcomeStep needsLegal={needsLegal} needsConsent={needsConsent} onContinue={next} />;
+  } else if (current === "name") {
     content = (
-      <PetCreateForm
-        onSuccess={(pet) => {
-          setActivePetId(pet.id);
-          setCreatedPet(pet);
+      <NameStep
+        name={name}
+        nickname={nickname}
+        onChangeName={setName}
+        onChangeNickname={setNickname}
+        onNext={next}
+        onCaretaker={() => setIsCaretakerPath(true)}
+      />
+    );
+  } else if (current === "species") {
+    content = (
+      <SpeciesStep
+        petName={petName}
+        speciesId={species?.id ?? null}
+        breedName={breed?.name ?? null}
+        onSelectSpecies={(option) => {
+          setSpecies(option);
+          setBreed(null);
+        }}
+        onSelectBreed={setBreed}
+        onNext={next}
+      />
+    );
+  } else if (current === "about") {
+    content = (
+      <AboutStep
+        petName={petName}
+        bio={bio}
+        adoptionStory={adoptionStory}
+        onChangeBio={setBio}
+        onChangeAdoptionStory={setAdoptionStory}
+        error={createError}
+        isCreating={createMutation.isPending}
+        onCreate={createPet}
+      />
+    );
+  } else if (current === "photo" && createdPet) {
+    content = (
+      <AvatarStep
+        petId={createdPet.id}
+        petName={createdPet.name}
+        onDone={(uri) => {
+          setPhotoUri(uri);
+          next();
         }}
       />
     );
+  } else if (current === "spiders") {
+    content = <ArachnophobiaOptIn onContinue={next} />;
+  } else if (current === "source") {
+    content = !referralState ? (
+      <Centered color={colors.marigoldOrange} />
+    ) : referralState.showStep ? (
+      <AcquisitionStep canRedeem={referralState.canRedeem} onDone={next} />
+    ) : (
+      <AutoAdvance onAdvance={next} />
+    );
+  } else {
+    content = <DoneStep petName={petName} photoUri={photoUri} onFinish={leave} />;
   }
 
   return (
-    // FlatList, not ScrollView, as the scroll container — kept from the
-    // original nested-ScrollView fix (see git history) even though
-    // OptionPicker's dropdown now renders in a Modal instead of nesting a
-    // ScrollView here, so it's no longer strictly required for that
-    // specific reason; still the established, working scroll container for
-    // this screen.
-    <FlatList
-      data={EMPTY_DATA}
-      renderItem={null}
-      contentContainerStyle={{ flexGrow: 1, backgroundColor: colors.porchWhite }}
-      ListHeaderComponent={<>{content}</>}
-    />
+    // "padding" on Android too: edge-to-edge means the window no longer resizes for the keyboard.
+    <KeyboardAvoidingView style={[styles.flex, { backgroundColor: colors.porchWhite }]} behavior="padding">
+      <View style={[styles.flex, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+        {current !== "done" && !isCaretakerPath ? (
+          <OnboardingTopBar count={steps.length} filled={index + 1} onBack={back} onClose={leave} />
+        ) : null}
+        <StepSlide key={isCaretakerPath ? "caretaker" : current} direction={direction}>
+          {content}
+        </StepSlide>
+      </View>
+    </KeyboardAvoidingView>
   );
 }
 
-const EMPTY_DATA: never[] = [];
+function Centered({ color }: { color: string }) {
+  return (
+    <View style={styles.center}>
+      <ActivityIndicator color={color} />
+    </View>
+  );
+}
+
+/** "Wie hast du von PawFeed erfahren?" is once per owner — skip straight on when the server says it's done. */
+function AutoAdvance({ onAdvance }: { onAdvance: () => void }) {
+  useEffect(() => {
+    onAdvance();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return null;
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  center: { flex: 1, alignItems: "center", justifyContent: "center" },
+});

mobile/eas.json

@@ -20,6 +20,12 @@
       },
       "channel": "preview"
     },
+    "preview-simulator": {
+      "extends": "preview",
+      "ios": {
+        "simulator": true
+      }
+    },
     "production": {
       "android": {
         "buildType": "app-bundle"
@@ -35,6 +41,11 @@
     }
   },
   "submit": {
-    "production": {}
+    "production": {
+      "ios": {
+        "appleTeamId": "C72YB42R2D",
+        "ascAppId": "6816366478"
+      }
+    }
   }
 }

mobile/found.md

@@ -22,8 +22,9 @@ TODO Neu2:
       → Zurück-Pfeil war nur unsichtbar (schwarz auf schwarzem Header im Dark Mode), jetzt auf allen Unterseiten sichtbar. Speicherproblem lag am Datumsformat (nächster Punkt) plus fehlender Fehlermeldung bei ungültiger Eingabe — beides behoben, End-to-End getestet.
 - [x] Datum wird Korrekt dargestellt, die eingabe ist aber, aktuelle ansicht JJJJ-MM-DD // korrekt wäre DD-MM-JJJJ
       → Eingabefelder akzeptieren jetzt TT-MM-JJJJ, werden intern korrekt umgewandelt; ungültige Eingaben zeigen eine Fehlermeldung.
-- [ ] Gewichtsdaten werden nicht als Diagramm angezeigt (feature)
+- [x] Gewichtsdaten werden nicht als Diagramm angezeigt (feature)
       → Echtes Feature, kein Bug — noch offen, Rückmeldung ob/wann gewünscht.
+      → **Umgesetzt (04.10.):** Neues `WeightChart` (`src/components/health/WeightChart.tsx`, Port des Web-Diagramms mit `react-native-svg`) erscheint ab 2 Einträgen über der Gewichtsliste. Die x-Achse ist zeitproportional (unregelmäßige Wiegetermine werden nicht verzerrt), die y-Achse hat runde Werte, Datumslabels überlappen nicht (bei über einem Jahr „Feb. 25“). Antippen wählt die nächste Messung, Wert + Datum stehen im Kopf; rechts die Veränderung seit der ersten Messung. Linienfarbe als neues Token `chartLine` (#ea580c), mit dem Dataviz-Validator gegen helle und dunkle Flächen geprüft (Kontrast ≥ 3:1). Geometrie in `src/lib/weight-chart.ts` mit 11 Tests; die Darstellung habe ich als Vorschau mit der echten Geometrie in Hell + Dunkel gerendert und geprüft. Commit `e60abba`, OTA Runtime 1.0.6: Android `16d95168-caf2-4c0d-a0c7-730acd1bfb96`, iOS `d8e82f19-2a66-4f21-9558-b16296a7ba3f`. Nicht auf einem Gerät getestet.
 - [x] Technische Frage, was wird beim Feed abgerufen? Zum vergleich in der Web umgebung wird mein feed(followerbezogen) und der trend (könnte dir auch gefallen) seperat eingeblendet, wird in der App eine kombination daraus gemacht ? falls ja super.
       → Nein: Mobile Feed zeigt ausschließlich den chronologischen Follower-Feed (feed.getFeed, mode "chrono"). Web's separater "Trending"-Tab (explore.getTrending, "könnte dir auch gefallen") ist in der App noch gar nicht gebaut — bekannte Lücke, bereits in der README dokumentiert.
 - [x] unter meine Tiere, bitte Impressum datenschutz und agbs als link einbinden. sowie eine Versionsnummer der App
@@ -38,7 +39,7 @@ TODO Neu2:
       → Bei eigenem Beitrag öffnet "⋮" jetzt einen Lösch-Bestätigungsdialog statt der Report-Ansicht, bei fremden Beiträgen bleibt Report wie gewohnt; beides live bestätigt.
 - [x] im Feed fehlt ein Indikator wenn in einem Post mehrere Bilder hinterlegt sind. das wischen funktioniert, aber nur wenn man weiß das dort mehrere bilder hinterlegt sind. unwissende würde nur ein bild sehen können.
       → Zähler-Badge oben rechts ("1 / 3") plus Punkte-Indikator unter dem Bild ergänzt (analog zur Web-Version), live bestätigt.
-- [x] Kommentar Fenster ist nicht im Darkmode 
+- [x] Kommentar Fenster ist nicht im Darkmode
 - [x] Tier Anlegen ist nicht im Darkmode + Rassen werden als Dropdown angezeigt lassen sich aber nicht scrollen.
       → Darkmode: PetCreateForm.tsx + onboarding/pet.tsx nutzten noch die statischen (Hell-only) `colors`/`typography` statt `useTheme()` — umgestellt auf das gleiche Muster wie sign-up.tsx/OptionPicker.tsx. Scroll-Bug: onboarding/pet.tsx nutzte als äußeren Container ein normales `ScrollView`, darin verschachtelt der Rassen-Dropdown (OptionPicker) sein eigenes `ScrollView` — zwei gleichachsige ScrollViews ineinander verschlucken auf Android die Scroll-Geste des inneren, auch mit `nestedScrollEnabled`. Fix: äußeren Container auf `FlatList` (leere Liste + `ListHeaderComponent`) umgestellt, exakt das bereits funktionierende Muster aus explore.tsx für dieselbe OptionPicker-Komponente. Typecheck + Lint sauber, i18n-Parität unverändert (243/243) — nicht live auf Android getestet (kein Emulator in dieser Session), nur strukturell gegen den bekannten Explore-Fix abgeglichen.
 - [x] Nach dem Speichern des ersten Tiers, und dem Hochladen des Profilfotos, wird man wieder zurück geworfen auf Tier erstellen. erst ein neustart der app lässt einen auf den feed zugreifen. (BUG)
@@ -110,15 +111,16 @@ ErrorRecovery: exception encountered: Error: Missing required env var EXPO_PUBLI
 
 **✅ Am Gerät bestätigt: Logout-Button erscheint, funktioniert.** Das OTA-Update kommt jetzt tatsächlich an und startet erfolgreich — die fehlenden EAS-Server-Env-Vars waren die echte, vollständige Ursache der gesamten Update-Odyssee dieser Session. `expo-dev-client`-Entfernung bleibt trotzdem sinnvoll (gehört nicht in Production), war aber nicht der entscheidende Fix. **TODO Neu6 damit abgeschlossen.**
 
-Neu 7: 
-- [ ] Datums eingabe unüblich mit - getrennt statt mit . ansicht am Handy wird meist durch die tastatur überblendet. können wir für die mobile eine data wheel picker nutzen ? 
+Neu 7:
+- [ ] Datums eingabe unüblich mit - getrennt statt mit . ansicht am Handy wird meist durch die tastatur überblendet. können wir für die mobile eine data wheel picker nutzen ?
       → Analyse erledigt, betrifft 4 Dateien (edit.tsx Geburtstag/Adoptionsdatum + 3 Health-Sektionen). Wheel-Picker braucht ein natives Modul (`@react-native-community/datetimepicker`) → kein einzelner Build nur dafür, stattdessen auf `PENDING-NATIVE-BUILD.md` verschoben und wird mit dem nächsten ohnehin anstehenden nativen Build mitgenommen. Der reine Trennzeichen-Fix ("-" → ".") ist davon unabhängig und OTA-fähig, sobald gewünscht.
-- [x] Ein User bemängelt, das die Regisrierung gut ist, aber beim eingeben des Passworts diese hinter der "Bildschrimtastatur" verschwindet, ausserdem gibt es keine Möglichkeit für den User die korrekte eingabe nochmal zu prüfen. 
+      → **Trennzeichen erledigt (04.10.)**, siehe iOS-Abschnitt unten (`DateField`, TT.MM.JJJJ). Wheel-Picker weiter offen (nativer Build).
+- [x] Ein User bemängelt, das die Regisrierung gut ist, aber beim eingeben des Passworts diese hinter der "Bildschrimtastatur" verschwindet, ausserdem gibt es keine Möglichkeit für den User die korrekte eingabe nochmal zu prüfen.
       → Beides im Code bestätigt (`app/(auth)/sign-up.tsx`, gleiches Muster auch in `sign-in.tsx` gefunden und mitbehoben): (1) Der Screen nutzte nur ein einfaches `View` als äußeren Container, kein `ScrollView`/`KeyboardAvoidingView` — auf kleinen Screens schob sich die Tastatur einfach über die unteren Felder. Fix: äußerer Container jetzt `KeyboardAvoidingView` (iOS: `padding`) + `ScrollView` (`keyboardShouldPersistTaps="handled"`, `contentContainerStyle` mit `flexGrow` statt `flex`, damit weiterhin zentriert bleibt aber scrollbar wird). (2) Neue geteilte `PasswordField`-Komponente (`src/components/PasswordField.tsx`) mit Auge/Auge-durchgestrichen-Toggle (lucide `Eye`/`EyeOff`) ersetzt das nackte `secureTextEntry`-`TextField` in beiden Screens. Kein natives Modul, OTA-fähig. Typecheck sauber (Mobile).
-- [x] Ein anderer User, meinte wäre es nicht schöner und aufgeräumter wenn die App Settings nicht unter MyPets stehen würden sondern einen eigenen Tab erhalten. 
+- [x] Ein anderer User, meinte wäre es nicht schöner und aufgeräumter wenn die App Settings nicht unter MyPets stehen würden sondern einen eigenen Tab erhalten.
       → Umgesetzt (Plan: `~/.claude/plans/mobile-settings-tab-extraction.md`, Gitea-Issue #36, Branch `feature/settings-header-icon`). Statt eines 5. Bottom-Tabs (ursprünglich vorgeschlagene Variante, siehe Mockup `mobile-settings-tab-mockup.png` im Plan-Ordner) wurde ein **Zahnrad-Icon im Header** gewählt, neben der Mailbox — auf Wunsch des Users, da Settings realistisch nur 1–2× im Halbjahr geöffnet wird und ein permanenter 5. Tab dafür unnötig Platz kostet (Mockup: `mobile-settings-header-icon-mockup.png`). Neuer Screen `app/(app)/settings.tsx` (Stack-Push wie "Suche", kein Modal, keine Tab-Bar sichtbar währenddessen), erreichbar über `SettingsHeaderButton` in `(tabs)/_layout.tsx` — erscheint auf allen 4 Tabs neben `MessagesHeaderButton`. Die 5 Footer-Sektionen aus `pets.tsx` (Darstellung/Sprache/Tier-Vorschläge/Rechtliches/Logout) wurden nach `src/components/settings/*.tsx` extrahiert (DRY, je eigene Datei). `pets.tsx` ist jetzt reine Tierliste. Nebenbei behoben: `FooterErrorBoundary` schützt jetzt den **gesamten** Settings-Screen statt nur den Logout-Button (Lücke aus der Code-Review beim OTA-Indikator-Feature). Typecheck + Lint sauber, i18n-Parität geprüft.
       **Gemerged nach `main` in Commit `30c57b6`** (Merge von `feature/settings-header-icon`, Issue #36 geschlossen), end-to-end auf einem Android-Emulator verifiziert (Zahnrad öffnet Einstellungen korrekt, Zurück-Navigation funktioniert, keine Tab-Bar sichtbar währenddessen, "Meine Tiere" zeigt nur noch die Tierliste) und per OTA live veröffentlicht (Update-Group `f31e3b54`).
-  - [x] Ein user hat die meldung erhalten, "you do not have premission to access this pet" - kannst du mir erklären woher das kommen könnte ? 
+  - [x] Ein user hat die meldung erhalten, "you do not have premission to access this pet" - kannst du mir erklären woher das kommen könnte ?
         → Ursache im Code gefunden (Web-seitig, nicht Mobile): Der Fehlertext kommt exakt aus `assertPetOwnership` (`src/lib/assert-pet-ownership.ts:19`), dem gemeinsamen Ownership-Check, den praktisch jede pet-bezogene Mutation zuerst durchläuft. Web speicherte die "aktive Tier"-ID in `localStorage["active_pet_id"]` (`src/context/ActivePetContext.tsx`) — anders als Mobile (siehe TODO Neu6: `LogoutSection` ruft dort bewusst `clearActivePetId()` auf) wurde dieser Wert auf Web **nirgends geleert**, auch nicht beim Sign-out über Clerks `<UserButton />`. `ActivePetInitializer` setzt nur dann einen Wert, wenn `activePetId` leer ist — er prüfte nie, ob die gespeicherte ID überhaupt noch zum aktuell eingeloggten Owner gehört. Konkretes Szenario: Nutzer A meldet sich ab, Nutzer B meldet sich im selben Browser an (gemeinsamer Rechner, oder A erstellt ein zweites Konto) — B's Session lud weiterhin A's alte `active_pet_id`, und jede Aktion schickte diese fremde Pet-ID ans Backend, das sie zu Recht mit genau dieser Fehlermeldung ablehnte. Gleiche Bug-Klasse wie der bereits auf Mobile behobene Logout-Fund, hier aber nie für Web nachgezogen.
         Fix: `clearActivePetId()` in `src/context/ActivePetContext.tsx` ergänzt (Pendant zu Mobile). Da `ActivePetProvider` im Root-Layout **außerhalb** von `ClerkThemeProvider` sitzt (Clerk-Hooks dort nicht verfügbar — bewusste Architektur laut `(app)/layout.tsx`-Kommentar, um den Clerk-Bundle aus öffentlichen Routen rauszuhalten), kein direkter `useAuth()`-Zugriff im Context selbst möglich. Stattdessen neue `SignOutCleanup`-Komponente (`src/components/layout/SignOutCleanup.tsx`), mounted in `(app)/layout.tsx` neben `ActivePetInitializer` — beobachtet `useAuth().isSignedIn` und ruft `clearActivePetId()` beim Wechsel von `true` auf `false`, statt einen Klick-Handler an Clerks `<UserButton/>` zu hängen (die bietet dafür keinen sauberen Hook-Punkt). Deckt damit jeden Sign-out ab, unabhängig vom Auslöser. Typecheck + voller Testlauf (209/210, 1 skip wie zuvor) sauber, keine neuen Lint-Fehler.
 - [x] Nutzer Feedback - DarkMode - Neuer Beitrag - Text die getippt werden sind weiß auf weißem grund.
@@ -129,8 +131,93 @@ Neu 7:
 - [x] Google-SSO-Login ging nicht mehr, obwohl das schon mal gelöst war ("The current redirect url passed in the sign in or sign up request does not match an authorized redirect URI for this instance... pawfeed://sso-callback").
       → **Kein Code-Bug** — `GoogleSignInButton.tsx`/`useWarmUpBrowser.ts` (Commit `99575dd`) waren unverändert korrekt. Ursache lag außerhalb des Repos: Clerk führt pro Instanz eine eigene, serverseitige Allowlist autorisierter Redirect-URLs (`GET/POST https://api.clerk.com/v1/redirect_urls`, Auth via `CLERK_SECRET_KEY`) — komplett getrennt vom App-Code, kann also unabhängig vom letzten "war doch schon gelöst"-Stand geändert/geleert worden sein. Registriert war nur ein falscher/veralteter Eintrag `clerk://org.pawfeed.app2.callback` (vermutlich Rest einer früheren Bundle-ID-Iteration mit einer "2" drin) — `pawfeed://sso-callback` (aus `app.json`s `"scheme": "pawfeed"`) fehlte komplett.
       Fix: fehlenden Eintrag per Clerk Backend API ergänzt (`POST /v1/redirect_urls`, `{"url":"pawfeed://sso-callback"}`) — live sofort wirksam, kein App-Deploy/Rebuild nötig. Am Emulator bis zum Google-Consent-Screen verifiziert (öffnet korrekt, leitet zu pawfeed.org weiter), kompletten Rücksprung dann vom User auf echtem Gerät bestätigt.
-      **Merke für künftige Sessions:** wenn SSO trotz unverändertem Code plötzlich bricht, zuerst die Clerk-Redirect-URL-Allowlist prüfen, bevor im App-Code gesucht wird — die liegt nicht in git und kann von außerhalb dieser Session geändert worden sein. 
-- Story Ring - ist abgeschnitten in der Mobil-App. 
+      **Merke für künftige Sessions:** wenn SSO trotz unverändertem Code plötzlich bricht, zuerst die Clerk-Redirect-URL-Allowlist prüfen, bevor im App-Code gesucht wird — die liegt nicht in git und kann von außerhalb dieser Session geändert worden sein.
+- [x] Story Ring - ist abgeschnitten in der Mobil-App.
+      → Ursache: Die zwei mittleren "Zehen" der Pfote (`cy: 1, r: 10`) ragen in der 0–100-viewBox bis y = -9. Web zeichnet das SVG mit `overflow: visible`, `react-native-svg` schneidet dagegen an der viewBox ab. Fix in `src/components/PawRing.tsx`: viewBox nach oben erweitert (`0 -10 100 110`), Box entsprechend höher (`getPawRingBox()`); der "Story hinzufügen"-Knopf in `StoryTray.tsx` nutzt dieselbe Box und sitzt jetzt auf gleicher Höhe. Commit `2ef439c`, per OTA für Android veröffentlicht (Update-Group `4dc6f797`), noch nicht am Gerät bestätigt.
 - [x] Mehrere Nutzer melden nach Google-Login die Meldung "Unmatched Route pawfeed://sso-callback".
       → Anderer Bug als der frühere Clerk-Redirect-URL-Allowlist-Fund oben (der Eintrag ist weiterhin korrekt registriert) — diesmal ein echter Code-Bug, spezifisch Android. `useSSO()` (`@clerk/expo`) baut die Redirect-URI selbst via `AuthSession.makeRedirectUri({ path: "sso-callback" })` → `pawfeed://sso-callback`, und `WebBrowser.openAuthSessionAsync()` fängt die Rückleitung normalerweise über eine eigene Custom-Tab-Session ab (das ist der Zweck von `WebBrowser.maybeCompleteAuthSession()` in `app/_layout.tsx`). Auf Android liefert das OS den Redirect-Intent aber zusätzlich als normalen Deep-Link an die App — den sieht auch Expo Routers eigener Linking-Listener, und weil es dafür keine passende Route gab, zeigte Expo Router kurz seinen eingebauten "Unmatched Route"-Fehlerschirm, bevor `GoogleSignInButton`s `router.replace("/(app)")` (nach erfolgreichem `setActive()`) übernahm — bei langsameren Geräten/Netzwerken blieb der Fehlerschirm sichtbar hängen statt wegzuflippen. Bekanntes Muster bei Clerk+Expo-Router (u. a. expo/expo#22662, mehrere Community-Fixes mit identischer Lösung).
-      Fix: neue Datei `app/sso-callback.tsx` — reiner Lade-Spinner (kein eigenes Redirect/Auth-Logic), gibt Expo Router für dieses kurze Zeitfenster ein gültiges Ziel. Die bestehende `useProtectedRoute()`-Umleitung in `app/_layout.tsx` übernimmt danach wie gewohnt (leitet nicht-eingeloggte Nutzer automatisch weiter, sobald sie außerhalb der `(auth)`-Gruppe landen), `GoogleSignInButton` navigiert bei Erfolg wie bisher aktiv weiter. Reine JS/TSX-Änderung, kein natives Modul betroffen → OTA-fähig, kein neuer Store-Build nötig. Typecheck + Lint sauber.
+      Fix: neue Datei `app/sso-callback.tsx` — reiner Lade-Spinner (kein eigenes Redirect/Auth-Logic), gibt Expo Router für dieses kurze Zeitfenster ein gültiges Ziel. Die bestehende `useProtectedRoute()`-Umleitung in `app/_layout.tsx` übernimmt danach wie gewohnt (leitet nicht-eingeloggte Nutzer automatisch weiter, sobald sie außerhalb der `(auth)`-Gruppe landen), `GoogleSignInButton` navigiert bei Erfolg wie bisher aktiv weiter. Reine JS/TSX-Änderung, kein natives Modul betroffen → OTA-fähig, kein neuer Store-Build nötig. Typecheck + Lint sauber (kein Live-Test auf Emulator/Gerät möglich in dieser Session).
+      **Gemerged nach `main`** (Fast-Forward von `fix/sso-callback-unmatched-route`, Commit `17a17bd`, unabhängig von der noch offenen `feature/mobile-video-stories`-Merge-Entscheidung) und **per OTA live veröffentlicht** (`npx eas-cli update --branch production --environment production --platform android`, Update-Group `df2a3ce9-7eba-4cb8-bf10-7d478a4a8a60`, Runtime-Version `1.0.6`). Installierte Apps ziehen das automatisch beim nächsten Start.
+      **Stolperstein beim Publish:** Das lokale (gitignorete) `mobile/android/`-Verzeichnis vom Device-Test der letzten Session ließ `eas update` das Projekt fälschlich als "Bare Workflow" erkennen (`CommandError: runtime version policies are not supported` statt der konfigurierten `"policy": "appVersion"`) — Fix war, `android/` kurz umzubenennen/wegzuschieben, Update zu publishen, danach zurückzubenennen. Für künftige OTA-Publishes nach einem lokalen `expo run:android`-Test: dasselbe Problem erwarten.
+- [x] Im Pet-Profil ist der Erste Post nicht Klickbar da er in die Gesten-Steuerung rein ragt.
+      → Ursache: Android läuft edge-to-edge, und die Stack-Screens (ohne Tab-Leiste darunter) hatten unten keinen Safe-Area-Abstand — der letzte Inhalt lag unter der Gesten-Leiste. Fix: neuer Hook `src/hooks/useBottomSafePadding.ts` (paddingBottom = 16 + insets.bottom), eingebaut in Tierprofil, Follower, Folgt, Gesundheit, Meilensteine, Profil bearbeiten, Einstellungen, Suche, Nachrichten-Liste und Konto löschen. Commit `de237f1`, per OTA für Android veröffentlicht (Update-Group `4dc6f797`), noch nicht am Gerät bestätigt. Gilt automatisch auch für iOS (Home-Indicator).
+- [x] Nutzer-Feedback: Nach dem Posten einer Story erscheint man selbst nicht als Ring — man kann die eigene Story nicht ansehen.
+      → Ursache (Web **und** App gleich): Die Story-Leiste zeigt nur die „+“-Kachel und Storys gefolgter Tiere (`follows.getPetsWithActiveStories`); das eigene aktive Tier ist darin nie enthalten. Fix: zusätzlicher Ring „Deine Story“ direkt nach der „+“-Kachel, solange das aktive Tier eine aktive Story hat (`stories.hasActiveStory`, wird nach dem Posten schon invalidiert). Web: `src/components/stories/StoryTray.tsx` (öffnet den StoryViewer — dort sieht der Owner auch die Zuschauerliste); App: `src/components/StoryTray.tsx`. Commit `204d5f6`, live (Web + OTA Android `58e99a29`, iOS `2aaa3975`). Typecheck/Tests/Build grün; die 2 Lint-Fehler „Cannot access refs during render“ in der Web-StoryTray bestanden schon vorher (horizontales Scrollen).
+      **Story-Kommentare:** Backend (`stories.addComment/listComments/deleteComment`, `toggleReaction`, `getViewers`) und Web-UI (`StoryCommentsOverlay`) existieren bereits — nur der App-Viewer (`app/(app)/story-viewer.tsx`) hat Kommentare, Reaktionen und Zuschauerliste beim Portieren bewusst ausgelassen. Offen als eigener Punkt.
+- [x] Story-Kommentare, Pfoten-Reaktionen und Zuschauerliste in der App (Folge-Punkt zum Story-Feedback).
+      → Neuer App-Viewer (`app/(app)/story-viewer.tsx`) mit Pfote (`src/components/stories/StoryPawButton.tsx`), Kommentar-Bottom-Sheet (`StoryCommentsSheet.tsx`, Schreiben + eigene löschen) und — nur bei der eigenen Story — Zuschauerliste (`StoryViewersSheet.tsx`, Augen-Symbol oben links). Solange ein Sheet offen ist, pausiert der Story-Timer (anders als im Web, damit die Story beim Tippen nicht weiterspringt). Nutzt die vorhandenen Server-Prozeduren; einzige Server-Änderung: `stories.listActive` nimmt optional `viewerPetId` und liefert `reactedByViewer`, damit die Pfote gefüllt startet, wenn man schon reagiert hat — abwärtskompatibel, und der Web-Viewer nutzt es jetzt auch (bekannte Einschränkung "Pfote startet immer leer" behoben). Tests in `src/__tests__/stories.test.ts`, alle 268 Tests + Build + App-Typecheck grün. Nicht auf einem Gerät getestet; Tastaturverhalten im Kommentar-Sheet (Android `KeyboardAvoidingView` behavior "height" im Modal) bitte bei Testern beobachten. Weiterhin offen: keine Benachrichtigung bei Story-Kommentaren/-Pfoten (Notification hat keine `storyId`, bräuchte Schemaänderung); Video-Storys spielt der App-Viewer weiterhin nicht ab. Commit `ccebfa4`, live (Web + OTA Runtime 1.0.6: Android `a3941052-a3ec-4c3c-a875-24ad3dcd1c98`, iOS `5e855c5b-f6db-44d0-8350-6b0b91308804`).
+-
+
+
+
+!!! iOS - Founds beginnen hier - nicht mit Android vertauschen !!!
+
+- [x] Nutzer-Feedback: Storys und Beiträge mit Bildern im HEIF/HEIC-Format (Apple) lassen sich nicht erstellen.
+      → **Kein reines Serverproblem.** Der Server nimmt bewusst nur JPEG/PNG/WebP an (`ALLOWED_CONTENT_TYPES` in `src/lib/supabase-storage.ts`), und die Bytes gehen direkt vom Client zu Supabase — umgewandelt wurde HEIC nirgends. Zwei Fundstellen:
+      1. **App, Beiträge:** `app/(app)/post-new.tsx` filterte gewählte Fotos nach ihrem *Original*-MIME-Typ (`image/jpeg|png|webp`) und warf `image/heic`/`image/heif` still raus — obwohl `resizeForUpload()` danach sowieso jedes Bild in JPEG umwandelt. Storys/Meilensteine/Avatar in der App filtern nicht und waren nicht betroffen.
+      2. **Web, alle Bild-Uploads** (Beiträge, Storys, Meilensteine, Tierbild): nur JPEG/PNG/WebP erlaubt; ein `.heic` vom Mac oder eine rohe HEIC-Datei aus iOS-Safari (Storys nutzen `accept="image/*,video/*"`, das Safaris automatische HEIC→JPEG-Umwandlung aushebelt) wurde abgelehnt.
+      Fix: App — HEIC/HEIF in `post-new.tsx` zugelassen, plus Hinweis-Alert, falls doch einmal Bilder übersprungen werden (`post.unsupportedFormat`). Web — neues `src/lib/heic-to-jpeg.ts` wandelt HEIC vor dem Upload per Browser-Dekodierung (Canvas → JPEG 0,9) um, eingebaut in `MultiImageUpload`, `StoryForm`, `MilestoneForm`, `AvatarUpload`; `accept` um HEIC ergänzt, damit der Mac-Dateidialog sie anbietet. Bewusst **ohne** Zusatzbibliothek (heic-to: LGPL-3.0, ~26 MB; heic2any: seit 2023 ungepflegt): Safari (iOS 17+/macOS 14+) dekodiert HEIC selbst; Browser ohne HEIC-Support (z. B. Chrome/Windows) bekommen eine klare Meldung „Öffne PawFeed in Safari oder speichere das Foto als JPG“ (`heicUnsupported`). Tests in `src/__tests__/heic-to-jpeg.test.ts`, alle 266 Tests + Build grün. Nicht auf einem echten iPhone getestet. Commit `1bf0f92`, Web per Rolling-Deploy live, OTA Runtime 1.0.6: Android `1b4baa80-a35a-49b7-ac6e-f44ebe93b4db`, iOS `c31382ee-83b7-4a81-a06d-1a2e53180d7d`. **Vom Nutzer bestätigt (02.10.2026): funktioniert.**
+
+- [x] Nutzerfeedback - Story löschbar ? wie kann man die story löschen, falls man mal was falsches in die story geladen hat ?
+      → Gab es bisher nirgends. Neu: Server `stories.delete` (nur Owner; löscht Aufrufe — `StoryView` hat bewusst kein Cascade —, dann die Story, Pfoten/Kommentare per Cascade; danach Bild in Supabase Storage bzw. Mux-Asset best-effort). Web: Papierkorb neben der Zuschauerzahl in der eigenen Story + Rückfrage (`AlertDialog`), Bild-Timer pausiert während der Rückfrage, gelöscht wird die beim Antippen gemerkte Story-ID. App: gleicher Papierkorb + native Rückfrage, Timer pausiert. Nach dem Löschen springt der Viewer zur nächsten Story bzw. schließt, wenn keine mehr da ist. 5 neue Tests in `src/__tests__/stories.test.ts`. Nicht auf einem Gerät getestet. Commit `81d9c6d`, live (Web + OTA Runtime 1.0.6: Android `49757586-c443-4952-a679-c66a4225ef82`, iOS `48d22b11-abc9-4c75-be52-a122b0130c5e`).
+- [x] Storys nur für Ersteller länger einsehbar wegen den Kommentaren (7Tage)
+      → **Umgesetzt (02.10.):** Der Ersteller sieht seine Storys 7 Tage lang (danach löscht der Aufräum-Job sie), alle anderen weiterhin nur 24 Stunden. Server: `stories.listActive` liefert dem Owner die Storys der letzten 7 Tage mit `isExpired`; `stories.hasActiveStory` meldet mit `includeOwnRecent` (nur die Story-Leiste setzt das) einen grauen Ring `expiredOnly`, damit Profilbilder im Feed nicht ebenfalls grau umrandet werden. Web + App: grauer Ring „Deine Story“, Hinweis „Abgelaufen – nur für dich sichtbar“ im Viewer, Kommentare bei abgelaufenen Storys nur lesbar, Pfote nur als Zähler; Zuschauerliste und Löschen bleiben. Keine Schemaänderung. 4 neue Tests. Nicht auf einem Gerät getestet. Commit `2c0680c`, live (Web + OTA Runtime 1.0.6: Android `5b324ee8-4821-4ca5-b6e7-6a02635a41f7`, iOS `a430ccd0-f2bb-452f-b3cd-45e94910901b`).
+      → Noch offen. Befund: abgelaufene Storys werden nie gelöscht (Einträge, Bilder, Mux-Videos bleiben liegen) — Vorschlag: grauer Ring "Deine Story" 7 Tage für den Ersteller, danach Aufräum-Cron (braucht einen Auslöser auf dem NAS, die bestehenden Cron-Routen haben keinen) + Satz unter "Speicherdauer" in der Datenschutzerklärung. **Teil erledigt (02.10.):** Aufräum-Job gebaut — `/api/cron/cleanup-stories` löscht Storys älter als 7 Tage komplett (Aufrufe, Pfoten, Kommentare, Bild, Mux-Video; gemeinsame Funktion `src/lib/story-cleanup.ts`, auch von „Story löschen“ genutzt), täglich 04:30 über die bestehende NAS-Crontab (`docker/run-cron.sh`, Log in `docker/cron.log`); Datenschutzerklärung Abschnitt 6 ergänzt. Offen bleibt nur die 7-Tage-Ansicht für den Ersteller.
+
+
+ 
+- [x] Video-Storys in der App (Upload + Wiedergabe)
+      → **Umgesetzt (03.10.):** Branch `feature/mobile-video-stories` (Gitea #37, 20.09. auf Emulator + Gerät getestet) auf den seit 02.10. umgebauten Story-Viewer portiert. Galerie-Picker nimmt Fotos und Videos (max. 30 s, Prüfung vor dem Upload), Upload direkt zu Mux über `stories.createVideoUpload`; Viewer spielt READY-Videos über `expo-video` ab (Fortschritt aus `timeUpdate`, weiter bei `playToEnd`, `play()` erst bei `readyToPlay`), zeigt „wird verarbeitet“/Fehler und pausiert das Video, solange Kommentare/Zuschauer/Löschen offen sind. Nur JS (`expo-video` ist seit dem 1.0.6-Build nativ drin). App-Typecheck grün; der Port selbst (Pause bei offenem Sheet) **nicht auf einem Gerät getestet**. Kamera nimmt weiterhin nur Fotos auf (Video-Aufnahme bräuchte Mikrofon-Berechtigung = neuer Build). Commit `69e2c13`, OTA Runtime 1.0.6: Android `665f2bf0-7e19-4b38-a07f-5da03459a55c`, iOS `963e721c-3c7c-4d45-b08a-b3c49969e5a2`.
+- [x] Nutzer-Feedback: Beim Video-Story-Upload sieht man nur einen Spinner — Fortschritt nicht erkennbar.
+      → **Umgesetzt (03.10.):** Beim Video zuerst „Upload wird vorbereitet …“, dann Fortschrittsbalken mit Prozent („Video wird hochgeladen … 45 %“) aus `File.upload` `onProgress` (expo-file-system 57.0.7, nativ im 1.0.6-Build — Android meldet alle 100 ms). Vorschau während des Uploads gesperrt. Fotos behalten den Spinner (Upload dauert dort nur Sekundenbruchteile). App-Typecheck grün, nicht auf einem Gerät getestet. Commit `5606a81`, OTA Runtime 1.0.6: Android `000908ec-4aac-4bc3-80c7-a86ea438d1c2`, iOS `cd0481b9-84d3-4734-987b-c1b418d51c61`.
+
+- [x] Feedback kam über iOS, betrifft aber das System, bei Impfungen die man anlegt, sollte ein Wiederholungstermin nach dem Abklingen der Impfung eingebunden werden, mit einem Reminder -1Monat vor ablauf damit man einen neuen Termin vereinbaren kann zum Impfen.
+      → **Umgesetzt und live (04.10.).** Den Folgetermin gab es schon (`Vaccine.nextDueDate`, Web + App), es fehlte nur die Erinnerung. Neu: täglicher Cron `/api/cron/vaccine-reminders` (`src/lib/vaccine-reminders.ts`) erinnert **einmalig 30 Tage vor** dem Folgetermin per Mitteilung `VACCINE_DUE` + Push („Die Impfung „Tollwut“ für Bubi ist am 01.11.2026 fällig …“). Bereits überfällige Termine werden nicht nachträglich erinnert (die zeigt die Gesundheitsseite als „überfällig“). Schema: `NotificationType.VACCINE_DUE`, `Notification.vaccineId` (Cascade), `Vaccine.reminderSentAt` (Schutz gegen doppelten Versand, wird bei Fehler wieder freigegeben). Web + App zeigen die Mitteilung mit 💉, Tippen öffnet die Gesundheitsseite. App: Schnellauswahl „+1 Jahr / +3 Jahre“ für den Folgetermin plus Hinweis „Mit Folgetermin erinnern wir dich 30 Tage vorher“. 8 neue Tests, Typecheck Web + App grün. Commit `c74bbff`, App-Teil per OTA Runtime 1.0.6: Android `64144379-e335-45ca-bb05-bc12155da54c`, iOS `b8f31fed-aa02-41a2-97c3-3707d02857ce`. Schema per `db push` auf dem NAS (rein additiv), Rolling-Deploy (`7ab74f8`; der erste Versuch brach ab, weil ein Test aus `src/__tests__` nach `mobile/` importierte, das im Docker-Build fehlt — Test liegt jetzt in `mobile/src/lib/date-format.test.ts`), Crontab täglich 08:15. Testaufruf: HTTP 200, `sent: 0` (derzeit nichts fällig). Der echte Versand inkl. Push ist noch nicht mit einer fälligen Impfung beobachtet, die App nicht auf einem Gerät getestet.
+- [x] Feedback iOS Datums eingabe läuft noch mittels - Trennung statt . ( option für iOS - Data Wheel Picker)
+      → **Trennzeichen umgesetzt (04.10.):** Neue `DateField`-Komponente (`src/components/DateField.tsx`) für alle Datumsfelder (Geburtstag, Adoptionstag, Gewicht, Tierarzt, Impfungen): Zifferntastatur, die Punkte setzt die App beim Tippen selbst (TT.MM.JJJJ; die iOS-Zifferntastatur hat keinen Punkt). Ältere Eingaben mit „-“ oder „/“ und einstellige Tage/Monate werden weiter akzeptiert. Tests in `src/__tests__/mobile-date-format.test.ts`. Commit `c74bbff`, OTA wie oben. Nicht auf einem Gerät getestet. **Wheel-Picker weiterhin offen** — braucht ein natives Modul, steht in `PENDING-NATIVE-BUILD.md` für den nächsten Build.
+- [x] Nutzer-Feedback iOS (Screenshot `feedback-ios/WhatsApp Image 2026-10-04 at 12.50.58.jpeg`): Beim Antippen eines Datumsfelds in „Profil bearbeiten“ verdeckt die Tastatur das Feld, die Eingabe ist nicht zu sehen.
+      → **Behoben (04.10.):** Der Screen hatte keinen Tastatur-Ausgleich (nur `FlatList`, kein `KeyboardAvoidingView`). Neu: `automaticallyAdjustKeyboardInsets` (iOS: unterer Inset in Tastaturhöhe **und** automatisches Scrollen zum aktiven Feld, im RN-Quellcode `RCTScrollViewComponentView.mm` geprüft) plus `keyboardShouldPersistTaps="handled"`. Gleiche Lücke auch in Gesundheit (Gewicht/Impfung/Tierarzt), Neuer Beitrag, Neuer Meilenstein, Tier anlegen/Onboarding und Einladen gefunden und mitbehoben. Android unverändert (Prop gilt nur für iOS, dort nicht gemeldet). Typecheck sauber. Commit `333ba16`, OTA nur iOS Runtime 1.0.6 `718ede5a-91c4-4e4e-b444-174ab3af66a2`. Nicht auf einem Gerät getestet.
+- [x] Feedback iOS - Rassen suche ist als Dropdown, ohne Suchfunktion. Bei Hunden und Katzen ist die Liste lang, die Suche würde verkürzt werden, wenn man eintippen könnte um das Dropdown zu kürzen.
+      → **Umgesetzt (04.10.):** `OptionPicker` zeigt ab 10 Einträgen oben ein Suchfeld („Suchen …“), das beim Tippen filtert — ohne Groß-/Kleinschreibung und Akzente („frise“ findet „Bichon Frisé“, `src/lib/filter-options.ts` + Tests). Öffnet sich die Tastatur, rückt die Liste nach oben, damit sie nicht verdeckt wird. Wirkt in Tier anlegen, Profil bearbeiten und Explore-Filter; die kurze Tierarten-Liste bleibt ohne Suchfeld. Typecheck sauber. Commit `01459c7`, OTA Runtime 1.0.6: Android `02f677cc-406b-4475-9601-e61b8a4b963a`, iOS `708be8d6-9786-44ad-a3c9-c305a3f93dd2`. Nicht auf einem Gerät getestet — bitte besonders das Hochrücken über der Tastatur prüfen.
+- [x] Feature: Storie-Edit Modus, mittels Overlays eigene Storys hübsch machen, durch Texteingaben in das Bild oder Effekte oder Gifs. (Analog zu Instagram) ->Branch
+      → **Umgesetzt und live (04.10.)** als Story-Editor (Branch `feature/story-editor`, nach `main` gemergt): In der App nach Foto/Video oder als **Text-Story auf Farbverlauf**: Text (3 Stile, 8 Farben, 2 Schriften), **@-Markierungen** anderer Tiere, **GIFs** (GIPHY, nur jugendfrei), **8 Sticker** — verschieben, mit zwei Fingern zoomen/drehen, zum Löschen auf den Papierkorb ziehen. Markieren richtet sich nach „Wer darf die Follower sehen?“ (Alle / nur Follower / niemand), markierte Tiere und Story-Besitzer bekommen Mitteilungen (Markierung, Kommentar, Pfote). Web zeigt alles an, erstellt aber nicht. Overlays sind Daten über dem Bild (nicht eingerechnet), daher alles per OTA, kein Store-Build. **Notschalter** im Admin-Dashboard („Story-Editor“), blendet Editor und Overlays ohne Update aus. 20 neue Tests, alle 376 grün, Produktions-Build ok, gerenderte Vorschau geprüft. db push + RLS, Rolling-Deploy, OTA Runtime 1.0.6: Android `8a1a12cb-d61a-4d14-91ab-391396781d87`, iOS `fe114163-abea-4ccc-ad19-cd1f8ccc7532`. **Nicht am Gerät getestet** — besonders Zwei-Finger-Gesten und Tastatur im Texteditor prüfen.
+
+- [x] Admin-Dashboard -> Zurückgewiesene Reports, als Meldung an den Melder mit einer Begründung warum abgewiesen wurde. Sowie Meldung bei bestätigter Report löschung, z.b mit Danksagung für die Meldung.
+      → **Umgesetzt und live (04.10.), als Team-Nachricht.** Admin → Reports: „Report ignorieren“ hat jetzt ein Feld „Begründung für den Melder“; der Melder bekommt vom PawFeed-Team „Danke für deine Meldung zum Beitrag/Profil von X … kein Verstoß … Begründung: …“ (Begründung steht zusätzlich im Moderations-Log). „Post löschen“ dankt jedem Melder des Beitrags einmal („… Inhalt entfernt. Danke, dass du hilfst …“); die interne Lösch-Begründung geht bewusst nicht an den Melder. Beides per Schalter im Dialog abschaltbar, Versand erst nach erfolgreicher Moderation und ohne sie bei einem Fehler zu kippen. **Nebenbei behoben:** Beim Löschen eines gemeldeten Beitrags blieben dessen Reports verwaist in der Liste (`targetPostId` ist keine Relation) — werden jetzt mitgelöscht. 7 neue Tests (`admin-report-feedback.test.ts`), alle 336 Tests grün. Commit `f51b158`, Rolling-Deploy auf dem NAS. Kein App-Update nötig. Im Live-Admin noch nicht mit einem echten Report ausprobiert.
+
+
+- [x] Feedback - iOS & Andriod, Story-Bilder und Videos mit Overlays bearbeiten direkt in der App. Text hinzufügen, Gifs einbinden, Markierungen auf andere Pets setzten (Analog zu Instagram) bitte als neues Branch anlegen. 
+      → **Umgesetzt und live (04.10.)** als Story-Editor (Branch `feature/story-editor`, nach `main` gemergt): In der App nach Foto/Video oder als **Text-Story auf Farbverlauf**: Text (3 Stile, 8 Farben, 2 Schriften), **@-Markierungen** anderer Tiere, **GIFs** (GIPHY, nur jugendfrei), **8 Sticker** — verschieben, mit zwei Fingern zoomen/drehen, zum Löschen auf den Papierkorb ziehen. Markieren richtet sich nach „Wer darf die Follower sehen?“ (Alle / nur Follower / niemand), markierte Tiere und Story-Besitzer bekommen Mitteilungen (Markierung, Kommentar, Pfote). Web zeigt alles an, erstellt aber nicht. Overlays sind Daten über dem Bild (nicht eingerechnet), daher alles per OTA, kein Store-Build. **Notschalter** im Admin-Dashboard („Story-Editor“), blendet Editor und Overlays ohne Update aus. 20 neue Tests, alle 376 grün, Produktions-Build ok, gerenderte Vorschau geprüft. db push + RLS, Rolling-Deploy, OTA Runtime 1.0.6: Android `8a1a12cb-d61a-4d14-91ab-391396781d87`, iOS `fe114163-abea-4ccc-ad19-cd1f8ccc7532`. **Nicht am Gerät getestet** — besonders Zwei-Finger-Gesten und Tastatur im Texteditor prüfen.
+
+- [x] Admin-Dashboard - Tiere zeigt aktuell neben dem Namen nur einen Rang an, zur besseren übersicht sollten alle erlangten Ränge angezeigt werden in der Liste.
+      → **Umgesetzt und live (04.10.):** Die Liste zeigte nur den höchsten Rang (Cache `referralRankId`) und nur mit Vorteil NAME_BADGE. Jetzt lädt `petAdmin.list` alle Rang-Einträge des Besitzers (nach Schwelle sortiert) und zeigt jedes Rangsymbol (`AchievedRankBadges`), unabhängig von NAME_BADGE. Entzogene Ränge erscheinen ausgegraut, Tooltip mit „manuell vergeben“ / „entzogen“. Commit `dbc416c`, Rolling-Deploy.
+
+- [x] Feedback - iOS, wenn man Nachrichten erhält bekommt man zwar eine Benachrichtung aber in der App wird bei der Sprechblase kein Indicator angezeigt z.b. ein Orangener Punkt der auf eine ungelesene nachricht hindeutet.
+      → **Umgesetzt (04.10.):** Die Sprechblase oben zeigt jetzt wie die Glocke einen orangen Zähler mit der Zahl ungelesener Nachrichten (`conversations.unreadCount`, gab es serverseitig schon). Aktualisiert sich alle 30 s, solange die App offen ist, und verschwindet nach dem Lesen des Chats. Commit `2bd4b2d`, OTA Runtime 1.0.6: Android `70b064d1-3424-44af-b834-7e77a60475e6`, iOS `e0993ecc-0961-4270-8876-a999e8339ba3`. Nicht auf einem Gerät getestet.
+
+- [x] Testuser hat Goldene Pfote als Rang erhalten, im Rang habe ich Profil_RING mit eingesetzt damit sich der Profil-Ring mit färbt. aber das passiert nicht.
+      → **Ursache:** Kein Datenfehler — der Testnutzer („Krypton“) hatte PROFILE_RING korrekt im Cache. Der Ring war bewusst **nur im Tierprofil oben** zu sehen, nicht im Feed oder an Storys. **Auf Wunsch erweitert und live (04.10.):** (1) Ring in Rangfarbe jetzt **überall am Tierbild** — Feed, Kommentare, Suche, Explore, Nachrichten, Mitteilungen, Follower-Listen, Meilenstein-/Repost-Karten, Story-Kommentare/-Zuschauer (Web + App). Dafür liefert die gemeinsame Tier-Abfrage (`petIdentitySelect`) die Rangdaten jetzt mit. Der Ring liegt außen um das Bild, Listen verrutschen nicht. (2) **Story-Ring:** Bei ungesehener Story leuchtet die Pfote in der Rangfarbe statt Orange; ohne Story gibt es einen schlichten Ring in Rangfarbe; gesehene Storys bleiben grau. 6 neue Tests, alle 353 Tests grün. Commit `c7c1473`, Rolling-Deploy + OTA (wie oben). Nicht auf einem Gerät getestet. 
+
+- [x] Prüfung ob es möglich wäre, wenn ein Haushalt mit 2 Accounts, aber dem gleichen Tier. sich beide um das gleich tier kümmern können??? reiner research auf machbarkeit. pro / kontra liste erstellen
+      → **Research erledigt (04.10.)** — ausführlich in Obsidian: `PawFeed/Punkte/Gemeinsame Tierhalter – Machbarkeit`. Kurz: Heute hat ein Tier genau einen Account (`Pet.ownerId`). Möglich wären (A) gemeinsamer Login — geht schon, aber Push nur aufs zuletzt angemeldete Handy; (B) echte Mitbetreuer mit eigenen Accounts — passt gut zum tierzentrierten Konzept, ist aber ein großer Umbau (zentrale Rechteprüfung + ~22 Dateien, Einladungsablauf, Regeln für Empfehlungsrang, Gesundheitsdaten/DSGVO, Konto-Löschung), grob 4–6 Tage, ohne Store-Build; (C) Tier übertragen — klein, löst die Frage aber nicht. Empfehlung: erst „Push an mehrere Geräte“ bauen (½–1 Tag, hilft sofort), B nur bei häufigerem Wunsch und nach Klärung der offenen Regeln. 
+
+- [x] Tester-Feedback 04.10. zum Story-Editor: **Android** — Farbwahl im Texteditor liegt im Gesten-/Schutzbereich. **iOS** — „Text-Story“ lässt sich nicht öffnen (stattdessen „klickt es auf das X“), Foto aus der Galerie: alles verschwindet, das X leuchtet kurz auf.
+      → **Behoben (04.10.):** Ursache iOS: Der Editor lief im Auswahl-Screen „Neue Story“, der auf iOS ein Sheet ist — beim Öffnen wurde dessen Kopfzeile ausgeblendet (das aufleuchtende X) und zusätzlich ein natives Fenster (Texteditor) eingeblendet, was iOS während einer laufenden Präsentation verweigert. Jetzt eigener Vollbild-Screen `story-editor` (ohne Kopfzeile, ohne Wisch-zum-Schließen), Texteditor und Auswahlfenster sind Ebenen statt nativer Fenster (`EditorLayer`, Android-Zurück schließt sie). Android: echte Safe-Area-Abstände oben/unten. Neu: Tippen auf eine freie Stelle öffnet den Texteditor. **Am Android-Emulator durchgeklickt** (Text-Story, Texteditor, Verschieben, GIF-Suche live, Sticker, X zurück) — iOS hier nicht testbar, bitte am iPhone prüfen. Commit `6d31367`, OTA Runtime 1.0.6: Android `da1a187e-5032-4e4e-8401-43ba167e9fd5`, iOS `c90c270f-8c89-42fa-ae11-5202163f3f80`.
+
+- [x] Tester-Feedback 04.10.: Mitteilung „STORY_MENTION“ — anklickbar, aber man landet auf dem Profil statt auf der Story; der Text ist nicht korrekt.
+      → **Behoben (04.10.):** Web öffnet die Story jetzt direkt als Overlay an der markierten Story (vorher bewusst Profil — unnötiger Umweg), die App öffnet sie über den ganzen Eintrag inkl. Namen und springt im Viewer direkt zur richtigen Story. Der rohe Text „STORY_MENTION“ kam von einem Gerät mit älterem App-Stand, der den neuen Typ noch nicht kannte — künftig zeigen App und Web für unbekannte Typen einen neutralen Text statt des Code-Namens. Zusätzlich: keine Markier-Mitteilung mehr an eigene Tiere. Commit `8aca1bc`, Rolling-Deploy, OTA Runtime 1.0.6: Android `da0b5a30-6a00-47f7-8c2f-91274f2629ec`, iOS `18681e15-dadf-46f4-b3cf-b44aab78fe42`. Bitte die App zweimal komplett neu starten.
+
+- [x] Wunsch 04.10.: Eine Nachrichten-Mitteilung soll beim Antippen direkt zur Nachricht führen (wie bei Kommentaren) — für alle Funktionen: „Benachrichtigung bringt dich auf kürzestem Weg dorthin, wo es wichtig ist.“
+      → **Umgesetzt (04.10.):** Gemeinsame Zielregel für Mitteilungsliste und Push (`mobile/src/lib/notification-route.ts`, mit Tests): **Nachricht → Gespräch**, Kommentar/Pfote/Erwähnung/Paw-Back → Beitrag, Story-Mitteilungen → die Story, Follow/Vorschlag/Einladung → Profil, Rang → Einladen, Geburtstag/Adoptionstag/Impfung → Gesundheit. Neu: **Antippen einer Push-Mitteilung** führt direkt dorthin (vorher öffnete sich nur die App), auch beim Kaltstart; gilt sie für ein anderes eigenes Tier, wird vorher umgeschaltet. Bei Nachrichten und Storys führt auch der Name zum Ziel. Web: Nachrichten öffnen das Gespräch. Server liefert dafür das Gespräch zur Mitteilung und erweiterte Push-Daten. 386 Tests grün. Commit `4cf2821`, Rolling-Deploy, OTA Runtime 1.0.6: Android `7ea956bf-b519-4a57-a9f0-4008aa212899`, iOS `b8f7c983-fc18-43d7-aea3-10fa4315d4c6`. Nicht am Gerät getestet; Push-Ziele greifen für Mitteilungen ab jetzt (ältere Pushes haben die neuen Daten noch nicht).
+
+- [x] Gefunden 04.10. (Marketing-Aufnahmen): Nach „Vermisst-Meldung starten“ war die Bestätigung auf Android abgeschnitten („… dass Berli schnell nac…“).
+      → **Behoben (04.10.):** Android kürzt Dialog-Titel auf zwei Zeilen, und der ganze Text stand als Titel im Dialog. Jetzt kurzer Titel + vollständige Nachricht: „Die Meldung ist raus“ / „Wir drücken die Daumen, dass {Name} schnell nach Hause findet.“, Entwarnung „Wie schön! 🎉“ / „Willkommen zurück, {Name}!“, Fehler „Hoppla“ + Meldung des Servers. Am Android-Emulator geprüft (Fehlerdialog bei der 24-h-Sperre vollständig lesbar). Typecheck, Lint und 406 Tests grün. Commit `b1d3b61`, OTA Runtime 1.0.6: Android `ab6e7fc6-9b24-44a6-bb65-b88e2b0cf937`, iOS `f63c0db6-6f5b-49de-b369-bf6aa7d52a1b`.
+
+- [x] Wunsch 09.10. (Obsidian „Mobile - UI Rework“): Login-Seite wirkt statisch, Sprachwahl zu dominant, Logo fehlt, Reihenfolge seltsam. Nachtrag: Nutzer versteht nicht, warum „Mit Google anmelden“ auf der Registrierung ausgegraut ist.
+      → **Umgesetzt (09.10.):** Login und Registrierung neu aufgebaut (gemeinsamer Rahmen `src/components/auth/AuthShell.tsx`): Logo + „PawFeed“ oben, Sprache als kleiner „DE ⌄“-Chip mit Menü, Formular unten (E-Mail/Passwort → Anmelden → „oder weiter mit“ Apple/Google). Animationen nur mit eingebautem `Animated` (OTA-fähig): Logo federt rein, Inhalte gleiten gestaffelt ein, Feldrahmen orange bei Fokus, Ladekringel im Knopf, Felder wackeln + rot bei falschem Login; „Bewegung reduzieren“ wird beachtet. Android: Abstände über Statusleiste/Gestenleiste per Safe-Area, 28 pt Seitenrand (Zurück-Wischzone), Sprachmenü als Modal (Zurück-Geste schließt nur das Menü), Tastatur schiebt das Formular jetzt hoch (`KeyboardAvoidingView` auch auf Android, nötig seit Edge-to-Edge). Google/Apple auf der Registrierung nicht mehr ausgegraut: Tippen ohne Haken markiert die Checkbox rot, lässt sie wackeln und zeigt einen Hinweis. Typecheck + Lint sauber, live im Android-Emulator (Pixel 10 Pro, Gestensteuerung) getestet: Layout, Sprachmenü + Zurück-Geste, Tastatur, Fehlerfall, Hinweis. iOS nur per HTML-Vorschau abgenommen, nicht auf Gerät. Per OTA ausgeliefert 09.10. (Runtime 1.0.6, Android + iOS).
+
+- [x] Wunsch 09.10. (Obsidian „Mobile - UI Rework“): „Freunde einladen“ in den Einstellungen sieht nach AI-Slop aus; Onboarding dynamischer machen statt statischer Seiten. Nachtrag beim Test: Die Detailseite „Freunde einladen“ passte nicht mehr zum neuen Design.
+      → **Umgesetzt (09.10.):** Neue `InviteCard` (`src/components/referrals/`) in den Einstellungen und oben auf `/invite`: Rang mit Abzeichen (ohne Rang gestrichelt „Dein erster Rang wartet“), markierbarer Code (Kopieren-Knopf bräuchte natives Modul), animierter Fortschrittsbalken, „Link teilen“. `/invite` neu: Ränge als Zeitleiste mit „Als Nächstes“, Status-Etiketten bei eingeladenen Tieren. Onboarding (`app/onboarding/pet.tsx` + `src/components/onboarding/flow/`): Willkommen mit 3 Regel-Karten + beiden Bestätigungen auf einer Seite → Name (Buchstabe live) → Tierart als Chips + Rasse → Beschreibung/Geschichte (legt Tier an) → Foto → Spinnen-Schalter (entfällt bei Spinne) → Herkunft (nur erstes Tier) → Abschluss mit Pfoten-Konfetti; Fortschrittsbalken, Zurück (nicht nach dem Anlegen), Android-Zurück-Geste geht einen Schritt zurück. Fund: Neue Nutzer sahen auf „Bevor es losgeht“ alle 7 Änderungsnotizen der Rechtstexte statt der Regeln — Regeln jetzt als feste App-Texte, `legal.acknowledge` unverändert (Web-Onboarding hat dasselbe Problem noch). Typecheck + Lint sauber, live im Android-Emulator (Dunkelmodus) getestet: Karte, `/invite`, kompletter Onboarding-Durchlauf mit Testtier „Testi“ (danach über „Tier löschen“ entfernt, DB geprüft). Einmal reagierte „Profil anlegen“ erst beim zweiten Tippen, nicht reproduziert. Hellmodus und iOS nicht auf Gerät geprüft. Per OTA ausgeliefert 09.10. (Runtime 1.0.6, Android + iOS).
+
+- [x] Gefunden 09.10. (Video-Aufnahmen): Nach dem Onboarding zeigte „Meine Tiere“ das neue Tier nur mit Anfangsbuchstaben, obwohl das Foto hochgeladen war (bis zum App-Neustart).
+      → **Behoben (09.10.):** `AvatarStep` lädt nach dem Upload die Tierliste neu (`pets.list` invalidiert). Außerdem zeigt der Abschluss-Screen des Onboardings jetzt das hochgeladene Foto statt des Buchstabens. Typecheck + Lint sauber, live im Emulator geprüft (Liste zeigt Foto sofort, Abschluss mit Foto).

mobile/package-lock.json

@@ -17,8 +17,11 @@
         "@trpc/client": "11.17.0",
         "@trpc/tanstack-react-query": "11.17.0",
         "expo": "~57.0.22",
+        "expo-apple-authentication": "~57.0.2",
         "expo-auth-session": "~57.0.12",
+        "expo-build-properties": "~57.0.22",
         "expo-constants": "~57.0.16",
+        "expo-crypto": "~57.0.3",
         "expo-dev-client": "~57.0.19",
         "expo-file-system": "~57.0.6",
         "expo-font": "~57.0.3",
@@ -6311,6 +6314,17 @@
         }
       }
     },
+    "node_modules/expo-apple-authentication": {
+      "version": "57.0.2",
+      "resolved": "https://registry.npmjs.org/expo-apple-authentication/-/expo-apple-authentication-57.0.2.tgz",
+      "integrity": "sha512-00KnlyRceRKski+ljZz8q8JhJZ4D3ZScU+Y0RqS6ElJ8GaCWfd7Qh5tMr47yIU/dKDrOnkzkFUM+6vyHS5HI7Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-application": {
       "version": "57.0.3",
       "resolved": "https://registry.npmjs.org/expo-application/-/expo-application-57.0.3.tgz",
@@ -6353,11 +6367,16 @@
         "react-native": "*"
       }
     },
-    "node_modules/expo-auth-session/node_modules/expo-crypto": {
-      "version": "57.0.3",
-      "resolved": "https://registry.npmjs.org/expo-crypto/-/expo-crypto-57.0.3.tgz",
-      "integrity": "sha512-SAWqEfF37nc8ot7bXsVmu9AFYwQdC2kGvH/eNAHiR3bmlcf1Vv8wu9AnGKT+a90r3T8YfwMpZP4QAYlo4vCn9w==",
+    "node_modules/expo-build-properties": {
+      "version": "57.0.22",
+      "resolved": "https://registry.npmjs.org/expo-build-properties/-/expo-build-properties-57.0.22.tgz",
+      "integrity": "sha512-A5oRf2I02XDRu2NnqKo7Au5kUu244unvyoRMUsB+xvg/BOlsR+G/oyDFGkjbda1cJbeKm9eqposIXbA2ri5UrQ==",
       "license": "MIT",
+      "dependencies": {
+        "@expo/schema-utils": "^57.0.2",
+        "resolve-from": "^5.0.0",
+        "semver": "^7.6.0"
+      },
       "peerDependencies": {
         "expo": "*"
       }
@@ -6375,6 +6394,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-crypto": {
+      "version": "57.0.3",
+      "resolved": "https://registry.npmjs.org/expo-crypto/-/expo-crypto-57.0.3.tgz",
+      "integrity": "sha512-SAWqEfF37nc8ot7bXsVmu9AFYwQdC2kGvH/eNAHiR3bmlcf1Vv8wu9AnGKT+a90r3T8YfwMpZP4QAYlo4vCn9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-dev-client": {
       "version": "57.0.19",
       "resolved": "https://registry.npmjs.org/expo-dev-client/-/expo-dev-client-57.0.19.tgz",

mobile/package.json

@@ -12,8 +12,11 @@
     "@trpc/client": "11.17.0",
     "@trpc/tanstack-react-query": "11.17.0",
     "expo": "~57.0.22",
+    "expo-apple-authentication": "~57.0.2",
     "expo-auth-session": "~57.0.12",
+    "expo-build-properties": "~57.0.22",
     "expo-constants": "~57.0.16",
+    "expo-crypto": "~57.0.3",
     "expo-dev-client": "~57.0.19",
     "expo-file-system": "~57.0.6",
     "expo-font": "~57.0.3",

mobile/src/api/types.ts

@@ -12,4 +12,3 @@ export type PostComment = RouterOutputs["comments"]["listByPost"]["comments"][nu
 export type ChatMessage = RouterOutputs["messages"]["list"]["messages"][number];
 export type MilestonePost = RouterOutputs["milestones"]["listByPet"][number];
 export type TrendingPost = RouterOutputs["explore"]["getTrending"]["posts"][number];
-export type PostDetail = RouterOutputs["posts"]["getById"];

mobile/src/components/AppleSignInButton.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useState } from "react";
+import { Platform, View, StyleSheet } from "react-native";
+import { useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+import * as AppleAuthentication from "expo-apple-authentication";
+import { useSignInWithApple } from "@clerk/expo/apple";
+import * as Sentry from "@sentry/react-native";
+import { useTheme } from "../context/ThemeContext";
+
+type Props = {
+  onError: (message: string) => void;
+  /** Same contract as GoogleSignInButton's `legalAccepted` — see there. */
+  legalAccepted?: boolean;
+  /** Same contract as GoogleSignInButton's `onNeedsConsent` — see there. */
+  onNeedsConsent?: () => void;
+  disabled?: boolean;
+};
+
+/**
+ * "Sign in with Apple" — required by App Store Review Guideline 4.8 because
+ * the app offers Google login. iOS only: renders nothing on Android or on an
+ * iOS device where Apple Authentication isn't available.
+ *
+ * Uses Clerk's native `useSignInWithApple()` (expo-apple-authentication
+ * sheet + `oauth_token_apple` token exchange) instead of the browser-based
+ * `oauth_apple` SSO flow — Apple expects the native sheet, and it avoids the
+ * redirect-URL pitfalls the Google SSO flow had.
+ *
+ * Uses Apple's own AppleAuthenticationButton (HIG-mandated look), not a
+ * custom Pressable like GoogleSignInButton. Legal-consent handling mirrors
+ * GoogleSignInButton: Clerk's sign-up comes back `missing_requirements`
+ * with `legal_accepted` for brand-new accounts.
+ */
+export function AppleSignInButton(props: Props) {
+  const [isAvailable, setIsAvailable] = useState(false);
+
+  useEffect(() => {
+    if (Platform.OS !== "ios") return;
+    AppleAuthentication.isAvailableAsync().then(setIsAvailable).catch(() => setIsAvailable(false));
+  }, []);
+
+  if (!isAvailable) return null;
+  return <AppleSignInButtonInner {...props} />;
+}
+
+function AppleSignInButtonInner({ onError, legalAccepted, onNeedsConsent, disabled }: Props) {
+  const { t } = useTranslation();
+  const { scheme } = useTheme();
+  const router = useRouter();
+  const { startAppleAuthenticationFlow } = useSignInWithApple();
+  const [isPending, setIsPending] = useState(false);
+
+  const onPress = async () => {
+    setIsPending(true);
+    try {
+      const result = await startAppleAuthenticationFlow();
+      const { setActive, signUp } = result;
+      let createdSessionId = result.createdSessionId;
+      let missingFields = signUp?.status === "missing_requirements" ? signUp.missingFields : [];
+
+      if (!createdSessionId && signUp && missingFields.includes("legal_accepted")) {
+        if (!legalAccepted) {
+          onNeedsConsent?.();
+          return;
+        }
+        const updatedSignUp = await signUp.update({ legalAccepted: true });
+        createdSessionId = updatedSignUp.createdSessionId;
+        missingFields = updatedSignUp.status === "missing_requirements" ? updatedSignUp.missingFields : [];
+      }
+
+      if (createdSessionId && setActive) {
+        await setActive({ session: createdSessionId });
+        router.replace("/(app)");
+        return;
+      }
+
+      // Any other required field Apple can't supply (e.g. first/last name —
+      // Apple only sends the name on the very first authorization) would
+      // otherwise leave the button silently doing nothing.
+      if (missingFields.length > 0) {
+        Sentry.captureMessage(`Apple sign-up missing requirements: ${missingFields.join(", ")}`);
+        onError(t("auth.appleSignInError"));
+      }
+      // No createdSessionId and nothing missing: user cancelled the Apple sheet.
+    } catch (err) {
+      Sentry.captureException(err);
+      onError(err instanceof Error ? err.message : t("auth.appleSignInError"));
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  const isInactive = isPending || !!disabled;
+
+  return (
+    <View style={isInactive && styles.disabled} pointerEvents={isInactive ? "none" : "auto"}>
+      <AppleAuthentication.AppleAuthenticationButton
+        buttonType={AppleAuthentication.AppleAuthenticationButtonType.CONTINUE}
+        buttonStyle={
+          scheme === "dark"
+            ? AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
+            : AppleAuthentication.AppleAuthenticationButtonStyle.BLACK
+        }
+        cornerRadius={14}
+        style={styles.button}
+        onPress={onPress}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: { height: 52, width: "100%" },
+  disabled: { opacity: 0.5 },
+});

mobile/src/components/Button.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Pressable, Text, StyleSheet, type PressableProps } from "react-native";
+import { ActivityIndicator, Pressable, Text, StyleSheet, type PressableProps } from "react-native";
 import { useTheme } from "../context/ThemeContext";
 import { radii, fontFamily, type ColorTokens } from "../theme/tokens";
 
@@ -8,6 +8,8 @@ type Variant = "primary" | "outline";
 type Props = PressableProps & {
   title: string;
   variant?: Variant;
+  /** Spinner instead of the title; also blocks presses. */
+  isLoading?: boolean;
 };
 
 /**
@@ -16,13 +18,13 @@ type Props = PressableProps & {
  * Height is 48px rather than the web's 32px: that control size is a
  * desktop-density choice, too small as a touch target on a phone.
  */
-export function Button({ title, variant = "primary", style, disabled, ...rest }: Props) {
+export function Button({ title, variant = "primary", style, disabled, isLoading = false, ...rest }: Props) {
   const { colors } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
 
   return (
     <Pressable
-      disabled={disabled}
+      disabled={disabled || isLoading}
       style={(state) => [
         styles.base,
         variant === "primary" ? styles.primary : styles.outline,
@@ -32,7 +34,11 @@ export function Button({ title, variant = "primary", style, disabled, ...rest }:
       ]}
       {...rest}
     >
-      <Text style={variant === "primary" ? styles.primaryText : styles.outlineText}>{title}</Text>
+      {isLoading ? (
+        <ActivityIndicator color={variant === "primary" ? colors.pureWhite : colors.marigoldOrange} />
+      ) : (
+        <Text style={variant === "primary" ? styles.primaryText : styles.outlineText}>{title}</Text>
+      )}
     </Pressable>
   );
 }

mobile/src/components/DateField.tsx

@@ -0,0 +1,25 @@
+import type { TextInputProps } from "react-native";
+import { TextField } from "./TextField";
+import { formatDateInput } from "../lib/date-format";
+
+const DISPLAY_DATE_LENGTH = 10; // DD.MM.YYYY
+
+type DateFieldProps = Omit<TextInputProps, "onChangeText" | "keyboardType" | "maxLength"> & {
+  onChangeText: (value: string) => void;
+};
+
+/**
+ * Text date input with a DD.MM.YYYY mask: number pad only, the dots are
+ * inserted automatically (iOS' number pad has no "." key). A native wheel
+ * picker needs @react-native-community/datetimepicker → PENDING-NATIVE-BUILD.md.
+ */
+export function DateField({ onChangeText, ...props }: DateFieldProps) {
+  return (
+    <TextField
+      {...props}
+      keyboardType="number-pad"
+      maxLength={DISPLAY_DATE_LENGTH}
+      onChangeText={(text) => onChangeText(formatDateInput(text))}
+    />
+  );
+}

mobile/src/components/GoogleSignInButton.tsx

@@ -6,7 +6,7 @@ import { useSSO } from "@clerk/expo";
 import * as Sentry from "@sentry/react-native";
 import { useTheme } from "../context/ThemeContext";
 import { useWarmUpBrowser } from "../hooks/useWarmUpBrowser";
-import { radii, fontFamily, type ColorTokens } from "../theme/tokens";
+import { fontFamily, type ColorTokens } from "../theme/tokens";
 import { GoogleIcon } from "./GoogleIcon";
 
 type Props = {
@@ -109,8 +109,8 @@ export function GoogleSignInButton({ onError, legalAccepted, onNeedsConsent, dis
 function makeStyles(colors: ColorTokens) {
   return StyleSheet.create({
     base: {
-      height: 48,
-      borderRadius: radii.lg,
+      height: 52,
+      borderRadius: 14,
       borderWidth: 1,
       borderColor: colors.hairlineGray,
       backgroundColor: colors.pureWhite,

mobile/src/components/LanguageSwitcher.tsx

@@ -14,17 +14,15 @@ import { getTypography, type ColorTokens, type Typography } from "../theme/token
  * changeLanguage() logic, no backend field (mirrors web: locale lives only
  * in a cookie/local preference, never on the Owner row).
  */
-export function LanguageSwitcher() {
+export function useLanguagePreference() {
   const { t } = useTranslation();
-  const { colors } = useTheme();
-  const styles = useMemo(() => makeStyles(colors), [colors]);
   const queryClient = useQueryClient();
   const [preference, setPreferenceState] = useState<Locale | null>(() => getLanguagePreference());
 
   const languageOptions = [
-    { value: "de" as const, label: t("pets.languageGerman"), flag: "🇩🇪" },
-    { value: "en" as const, label: t("pets.languageEnglish"), flag: "🇬🇧" },
-    { value: null, label: t("pets.languageAuto"), flag: "🌐" },
+    { value: "de" as const, label: t("pets.languageGerman"), flag: "🇩🇪", short: "DE" },
+    { value: "en" as const, label: t("pets.languageEnglish"), flag: "🇬🇧", short: "EN" },
+    { value: null, label: t("pets.languageAuto"), flag: "🌐", short: "Auto" },
   ];
 
   const handleSelect = (value: Locale | null) => {
@@ -33,6 +31,14 @@ export function LanguageSwitcher() {
     queryClient.invalidateQueries();
   };
 
+  return { preference, languageOptions, handleSelect };
+}
+
+export function LanguageSwitcher() {
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const { preference, languageOptions, handleSelect } = useLanguagePreference();
+
   return (
     <View style={styles.row}>
       {languageOptions.map((option) => {

mobile/src/components/OptionPicker.tsx

@@ -1,9 +1,22 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { View, Text, Pressable, ScrollView, ActivityIndicator, Modal, StyleSheet } from "react-native";
-import { ChevronDown } from "lucide-react-native";
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  ScrollView,
+  ActivityIndicator,
+  Modal,
+  StyleSheet,
+  Keyboard,
+  Platform,
+  useWindowDimensions,
+} from "react-native";
+import { ChevronDown, Search } from "lucide-react-native";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../context/ThemeContext";
-import { radii, getTypography, type ColorTokens, type Typography } from "../theme/tokens";
+import { radii, fontFamily, getTypography, type ColorTokens, type Typography } from "../theme/tokens";
+import { filterOptionsByName } from "../lib/filter-options";
 
 export type PickerOption = { id: string; name: string };
 
@@ -22,6 +35,11 @@ type Props = {
 const BUTTON_HEIGHT = 48;
 const LIST_GAP = 4;
 const MAX_LIST_HEIGHT = 220;
+// Ab so vielen Einträgen gibt es oben ein Suchfeld (found.md: Hunde-/Katzen-
+// Rassenlisten sind lang). Tierarten (kurze Liste) bleiben ohne.
+const SEARCH_MIN_OPTIONS = 10;
+const SEARCH_HEIGHT = 44;
+const MIN_LIST_TOP = 48;
 
 type Anchor = { top: number; left: number; width: number };
 
@@ -64,6 +82,13 @@ export function OptionPicker({
   const styles = useMemo(() => makeStyles(colors), [colors]);
   const triggerRef = useRef<View>(null);
   const [anchor, setAnchor] = useState<Anchor | null>(null);
+  const [query, setQuery] = useState("");
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [listHeight, setListHeight] = useState(0);
+  const { height: windowHeight } = useWindowDimensions();
+
+  const hasSearch = options.length >= SEARCH_MIN_OPTIONS;
+  const visibleOptions = useMemo(() => filterOptionsByName(options, query), [options, query]);
 
   useEffect(() => {
     // No need to reset `anchor` to null when closing — the Modal already
@@ -76,6 +101,38 @@ export function OptionPicker({
     });
   }, [open]);
 
+  // The search field brings up the keyboard; a list anchored low on the
+  // screen would end up underneath it, so it moves up while the keyboard is open.
+  useEffect(() => {
+    if (!open || !hasSearch) return;
+    const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+    const showSub = Keyboard.addListener(showEvent, (e) => setKeyboardHeight(e.endCoordinates.height));
+    const hideSub = Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+      setKeyboardHeight(0);
+    };
+  }, [open, hasSearch]);
+
+  const close = () => {
+    setQuery("");
+    onToggle();
+  };
+
+  const select = (option: PickerOption) => {
+    setQuery("");
+    onSelect(option);
+  };
+
+  const listTop = (() => {
+    if (!anchor) return 0;
+    if (!keyboardHeight || !listHeight) return anchor.top;
+    const maxTop = windowHeight - keyboardHeight - listHeight - LIST_GAP;
+    return Math.max(MIN_LIST_TOP, Math.min(anchor.top, maxTop));
+  })();
+
   return (
     <View>
       <Pressable
@@ -87,7 +144,7 @@ export function OptionPicker({
         <Text style={selectedName ? styles.value : styles.placeholder}>{selectedName ?? placeholder}</Text>
         <ChevronDown color={colors.quietGray} size={18} />
       </Pressable>
-      <Modal visible={open} transparent animationType="fade" onRequestClose={onToggle}>
+      <Modal visible={open} transparent animationType="fade" onRequestClose={close}>
         {/*
           Backdrop and list are SIBLINGS, not parent/child. The list must
           not be a descendant of the backdrop Pressable at all — a Pressable
@@ -99,17 +156,36 @@ export function OptionPicker({
           the list's bounds hit-tests into the list's own subtree and never
           reaches the backdrop's Pressable underneath at all.
         */}
-        <Pressable style={styles.backdrop} onPress={onToggle} />
+        <Pressable style={styles.backdrop} onPress={close} />
         {anchor && (
-          <View style={[styles.list, { top: anchor.top, left: anchor.left, width: anchor.width }]}>
+          <View
+            style={[styles.list, hasSearch && styles.listWithSearch, { top: listTop, left: anchor.left, width: anchor.width }]}
+            onLayout={(e) => setListHeight(e.nativeEvent.layout.height)}
+          >
+            {hasSearch && (
+              <View style={styles.searchRow}>
+                <Search color={colors.quietGray} size={16} />
+                <TextInput
+                  value={query}
+                  onChangeText={setQuery}
+                  placeholder={t("common.searchPlaceholder")}
+                  placeholderTextColor={colors.quietGray}
+                  style={styles.searchInput}
+                  autoCorrect={false}
+                  autoCapitalize="none"
+                  returnKeyType="search"
+                  clearButtonMode="while-editing"
+                />
+              </View>
+            )}
             {isLoading ? (
               <ActivityIndicator color={colors.marigoldOrange} style={styles.loading} />
-            ) : options.length === 0 ? (
-              <Text style={styles.empty}>{emptyLabel ?? t("common.noResultsFound")}</Text>
+            ) : visibleOptions.length === 0 ? (
+              <Text style={styles.empty}>{emptyLabel && !query ? emptyLabel : t("common.noResultsFound")}</Text>
             ) : (
-              <ScrollView style={styles.scrollView}>
-                {options.map((option) => (
-                  <Pressable key={option.id} style={styles.row} onPress={() => onSelect(option)}>
+              <ScrollView style={styles.scrollView} keyboardShouldPersistTaps="handled">
+                {visibleOptions.map((option) => (
+                  <Pressable key={option.id} style={styles.row} onPress={() => select(option)}>
                     <Text style={getTypography(colors).body}>{option.name}</Text>
                   </Pressable>
                 ))}
@@ -154,7 +230,18 @@ function makeStyles(colors: ColorTokens) {
       shadowOpacity: 0.15,
       shadowRadius: 8,
     },
+    listWithSearch: { maxHeight: MAX_LIST_HEIGHT + SEARCH_HEIGHT },
     scrollView: { maxHeight: MAX_LIST_HEIGHT },
+    searchRow: {
+      height: SEARCH_HEIGHT,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      paddingHorizontal: 14,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.hairlineGray,
+    },
+    searchInput: { flex: 1, height: SEARCH_HEIGHT, fontFamily: fontFamily.regular, fontSize: 14, color: colors.ink },
     row: { paddingHorizontal: 14, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: colors.hairlineGray },
     loading: { padding: 16 },
     empty: { ...typography.body, color: colors.quietGray, padding: 16 },

mobile/src/components/PawButton.tsx

@@ -1,8 +1,8 @@
-import { useState } from "react";
 import { Pressable, Text, StyleSheet } from "react-native";
 import { useMutation } from "@tanstack/react-query";
 import { PawPrint } from "lucide-react-native";
 import { useTRPC } from "../api/trpc";
+import { usePawToggle } from "../hooks/usePawToggle";
 import { colors, fontFamily } from "../theme/tokens";
 
 type Props = {
@@ -16,37 +16,12 @@ type Props = {
  * `false` on mount — the web app's feed response doesn't tell the client
  * whether the viewer already reacted (postInclude has no reactions relation),
  * an acknowledged simplification on web that this mirrors rather than fixes.
- * Same optimistic-update shape: flip locally in onMutate, reconcile the exact
- * count from the server's authoritative `reacted` in onSuccess, roll back in
- * onError.
+ * Optimistic toggle via usePawToggle (shared with StoryPawButton).
  */
 export function PawButton({ postId, petId, initialCount }: Props) {
   const trpc = useTRPC();
-  const [reacted, setReacted] = useState(false);
-  const [count, setCount] = useState(initialCount);
-
-  const toggleMutation = useMutation(
-    trpc.reactions.toggle.mutationOptions({
-      onMutate: () => {
-        const prevReacted = reacted;
-        const prevCount = count;
-        setReacted(!reacted);
-        return { prevReacted, prevCount };
-      },
-      onSuccess: (data, _vars, context) => {
-        setReacted(data.reacted);
-        if (context) {
-          setCount(data.reacted ? context.prevCount + 1 : Math.max(0, context.prevCount - 1));
-        }
-      },
-      onError: (_err, _vars, context) => {
-        if (context) {
-          setReacted(context.prevReacted);
-          setCount(context.prevCount);
-        }
-      },
-    })
-  );
+  const paw = usePawToggle(false, initialCount);
+  const toggleMutation = useMutation(trpc.reactions.toggle.mutationOptions(paw.callbacks));
 
   return (
     <Pressable
@@ -56,10 +31,10 @@ export function PawButton({ postId, petId, initialCount }: Props) {
     >
       <PawPrint
         size={20}
-        color={reacted ? colors.marigoldOrange : colors.quietGray}
-        fill={reacted ? colors.marigoldOrange : "transparent"}
+        color={paw.reacted ? colors.marigoldOrange : colors.quietGray}
+        fill={paw.reacted ? colors.marigoldOrange : "transparent"}
       />
-      <Text style={styles.count}>{count}</Text>
+      <Text style={styles.count}>{paw.count}</Text>
     </Pressable>
   );
 }

mobile/src/components/PawRing.tsx

@@ -3,6 +3,7 @@ import Svg, { Circle } from "react-native-svg";
 import { useQuery } from "@tanstack/react-query";
 import { useTRPC } from "../api/trpc";
 import { useActivePet } from "../context/ActivePetContext";
+import { useOwnerRankWithPerk, type ReferralOwnerFields } from "../hooks/useReferralRanks";
 
 type Props = {
   petId: string;
@@ -10,29 +11,56 @@ type Props = {
   /** Avatar size in px — used to scale the paw outline (default: 32) */
   size?: number;
   onPress?: () => void;
+  /** Nur Story-Leiste: eigene abgelaufene Storys (≤ 7 Tage) als grauer Ring. */
+  includeOwnRecent?: boolean;
+  /**
+   * Owner with the PROFILE_RING perk (found.md): an unseen story's paw takes
+   * the rank colour instead of orange, and without a story a plain ring in
+   * the rank colour is drawn. Seen stories stay gray either way.
+   */
+  owner?: ReferralOwnerFields | null;
 };
 
 const RING_PAD = 8;
+// The two middle toe beans (cy 1, r 10) reach up to y = -9 in the 0–100
+// viewBox. Web renders the SVG with `overflow: visible`; react-native-svg
+// clips at the viewBox instead, which cut the paw off at the top (found.md
+// "Story Ring ist abgeschnitten"). So the viewBox starts BEAN_OVERHANG units
+// higher and the box grows by the same proportion.
+const BEAN_OVERHANG = 10;
 const UNSEEN_COLOR = "#f97316";
 const SEEN_COLOR = "#9ca3af";
 
+/** Outer box of a PawRing for a given avatar size — lets siblings (StoryTray's "add" tile) line up with it. */
+export function getPawRingBox(size: number) {
+  const width = size + RING_PAD * 2;
+  const overhang = (width * BEAN_OVERHANG) / 100;
+  return { width, height: width + overhang, paddingTop: overhang };
+}
+
 /**
  * Port of web's src/components/stories/PawRing.tsx — a paw-print outline
  * (one big circle + four "toe bean" circles) drawn with react-native-svg
  * instead of inline SVG markup. Orange = unseen stories, gray = all seen,
  * no ring = no active story (STORY-02).
  */
-export function PawRing({ petId, children, size = 32, onPress }: Props) {
+export function PawRing({ petId, children, size = 32, onPress, includeOwnRecent, owner }: Props) {
   const trpc = useTRPC();
   const { activePetId } = useActivePet();
 
   const { data = { hasStory: false, allSeen: false } } = useQuery(
-    trpc.stories.hasActiveStory.queryOptions({ petId, viewerPetId: activePetId ?? undefined })
+    trpc.stories.hasActiveStory.queryOptions({
+      petId,
+      viewerPetId: activePetId ?? undefined,
+      ...(includeOwnRecent ? { includeOwnRecent: true } : {}),
+    })
   );
   const { hasStory, allSeen } = data;
-  const ringColor = allSeen ? SEEN_COLOR : UNSEEN_COLOR;
+  const rank = useOwnerRankWithPerk(owner, "PROFILE_RING");
+  const ringColor = allSeen ? SEEN_COLOR : (rank?.color ?? UNSEEN_COLOR);
+  const showRankRingOnly = !hasStory && !!rank;
 
-  const outerSize = size + RING_PAD * 2;
+  const box = getPawRingBox(size);
   const strokeWidth = Math.max(4, size / 8);
   const beans = [
     { cx: 13, cy: 10, r: 8 },
@@ -42,13 +70,31 @@ export function PawRing({ petId, children, size = 32, onPress }: Props) {
   ];
 
   const content = (
-    <View style={{ width: outerSize, height: outerSize, alignItems: "center", justifyContent: "center" }}>
+    <View
+      style={{
+        width: box.width,
+        height: box.height,
+        paddingTop: box.paddingTop,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {showRankRingOnly && (
+        <Svg
+          width={box.width}
+          height={box.height}
+          viewBox={`0 ${-BEAN_OVERHANG} 100 ${100 + BEAN_OVERHANG}`}
+          style={{ position: "absolute", top: 0, left: 0 }}
+        >
+          <Circle cx={50} cy={50} r={44} fill="none" stroke={rank.color} strokeWidth={strokeWidth * 0.6} />
+        </Svg>
+      )}
       {hasStory && (
         <Svg
-          width={outerSize}
-          height={outerSize}
-          viewBox="0 0 100 100"
-          style={{ position: "absolute" }}
+          width={box.width}
+          height={box.height}
+          viewBox={`0 ${-BEAN_OVERHANG} 100 ${100 + BEAN_OVERHANG}`}
+          style={{ position: "absolute", top: 0, left: 0 }}
         >
           <Circle cx={50} cy={50} r={44} fill="none" stroke={ringColor} strokeWidth={strokeWidth} />
           {beans.map((b, i) => (

mobile/src/components/PetAvatar.tsx

@@ -4,6 +4,7 @@ import { Image } from "expo-image";
 import { getAvatarUrl } from "../lib/media-url";
 import { useTheme } from "../context/ThemeContext";
 import { fontFamily, type ColorTokens } from "../theme/tokens";
+import { useOwnerRankWithPerk, type ReferralOwnerFields } from "../hooks/useReferralRanks";
 
 const SIZE_PRESETS = { sm: 32, md: 40, lg: 56 } as const;
 
@@ -11,28 +12,60 @@ type Props = {
   name: string;
   avatarKey?: string | null;
   size?: keyof typeof SIZE_PRESETS;
+  /**
+   * The pet's owner (referralRankId/referralPerks, part of petIdentitySelect).
+   * With the PROFILE_RING perk the avatar gets a ring in the rank colour.
+   * Don't pass it when a PawRing wraps this avatar — PawRing draws that ring.
+   */
+  owner?: ReferralOwnerFields | null;
 };
 
+// Ring sits *outside* the avatar (absolute overlay) so ranked and unranked
+// avatars keep the same footprint and list rows don't shift.
+const RING_WIDTH = { sm: 2, md: 2, lg: 3 } as const;
+const RING_GAP = 2;
+
 /**
  * Port of web's src/components/ui/pet-avatar.tsx — image if the pet has one,
  * otherwise a colored initial fallback.
  */
-export function PetAvatar({ name, avatarKey, size = "md" }: Props) {
+export function PetAvatar({ name, avatarKey, size = "md", owner }: Props) {
   const { colors } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
+  const rank = useOwnerRankWithPerk(owner, "PROFILE_RING");
   const px = SIZE_PRESETS[size];
   const uri = getAvatarUrl(avatarKey);
   const dimensionStyle = { width: px, height: px, borderRadius: px / 2 };
 
-  if (uri) {
-    return <Image source={{ uri }} style={dimensionStyle} contentFit="cover" transition={150} />;
-  }
-
-  return (
+  const avatar = uri ? (
+    <Image source={{ uri }} style={dimensionStyle} contentFit="cover" transition={150} />
+  ) : (
     <View style={[styles.fallback, dimensionStyle]}>
       <Text style={[styles.fallbackText, { fontSize: px * 0.4 }]}>{name.charAt(0).toUpperCase()}</Text>
     </View>
   );
+
+  if (!rank) return avatar;
+
+  const offset = RING_GAP + RING_WIDTH[size];
+  return (
+    <View style={{ width: px, height: px }}>
+      {avatar}
+      <View
+        pointerEvents="none"
+        style={{
+          position: "absolute",
+          top: -offset,
+          left: -offset,
+          width: px + offset * 2,
+          height: px + offset * 2,
+          borderRadius: (px + offset * 2) / 2,
+          borderWidth: RING_WIDTH[size],
+          borderColor: rank.color,
+        }}
+      />
+    </View>
+  );
 }
 
 function makeStyles(colors: ColorTokens) {

mobile/src/components/PetIdentityBadges.tsx

@@ -1,22 +1,43 @@
 import { View, StyleSheet } from "react-native";
-import { BadgeCheck, Sparkles } from "lucide-react-native";
+import { BadgeCheck, Ribbon, Siren, Sparkles, Sprout } from "lucide-react-native";
+import { useTranslation } from "react-i18next";
 import { isActiveSponsor } from "../lib/sponsor";
 import { colors } from "../theme/tokens";
+import { useTheme } from "../context/ThemeContext";
+import { ReferralIcon } from "../lib/referral-icons";
+import { useOwnerRankWithPerk, type ReferralOwnerFields } from "../hooks/useReferralRanks";
 
 type Props = {
   isVerified?: boolean;
-  sponsor?: { sponsorSince: Date | string | null; sponsorPeriodEnd: Date | string | null } | null;
+  /** Eines der ersten 250 Tiere (Pet.isFoundingMember). */
+  isFoundingMember?: boolean;
+  /** Gedenkmodus „In Erinnerung“ (Pet.deceasedAt gesetzt). */
+  isDeceased?: boolean;
+  /** Aktive Vermisst-Meldung (Pet.lostSince gesetzt). */
+  isLost?: boolean;
+  sponsor?: { sponsorSince?: Date | string | null; sponsorPeriodEnd?: Date | string | null } | null;
+  /** Owner-Felder referralRankId/referralPerks — Rang-Abzeichen des Empfehlungsprogramms. */
+  referral?: ReferralOwnerFields | null;
 };
 
 /** Port of web's src/components/ui/pet-identity-badges.tsx. */
-export function PetIdentityBadges({ isVerified, sponsor }: Props) {
+const FOUNDING_COLOR = "#059669"; // emerald-600, wie im Web
+
+export function PetIdentityBadges({ isVerified, isFoundingMember, isDeceased, isLost, sponsor, referral }: Props) {
+  const { t } = useTranslation();
+  const { colors: theme } = useTheme();
   const showSponsor = sponsor ? isActiveSponsor(sponsor) : false;
-  if (!isVerified && !showSponsor) return null;
+  const rank = useOwnerRankWithPerk(referral, "NAME_BADGE");
+  if (!isDeceased && !isLost && !isVerified && !isFoundingMember && !showSponsor && !rank) return null;
 
   return (
     <View style={styles.row}>
+      {isLost && <Siren size={14} color="#dc2626" accessibilityLabel={t("lostReport.badge")} />}
+      {isDeceased && <Ribbon size={14} color={theme.ink} fill={theme.ink} accessibilityLabel={t("inMemory.label")} />}
       {isVerified && <BadgeCheck size={14} color={colors.marigoldOrange} />}
       {showSponsor && <Sparkles size={14} color={colors.marigoldOrange} />}
+      {isFoundingMember && <Sprout size={14} color={FOUNDING_COLOR} accessibilityLabel={t("foundingMember.label")} />}
+      {rank && <ReferralIcon icon={rank.icon} size={14} color={rank.color} fill={rank.color} accessibilityLabel={rank.name} />}
     </View>
   );
 }

mobile/src/components/PostCard.tsx

@@ -13,10 +13,12 @@ import { PawBackButton } from "./PawBackButton";
 import { RepostCard } from "./RepostCard";
 import { VideoPlayer } from "./VideoPlayer";
 import { ReportSheet } from "./ReportSheet";
+import { useBlockPet } from "../hooks/useBlockPet";
 import { getMediaUrl } from "../lib/media-url";
 import { formatPetName, formatRelativeTime } from "../lib/format";
 import { useTheme } from "../context/ThemeContext";
 import { radii, getTypography, type ColorTokens, type Typography } from "../theme/tokens";
+import type { ReferralOwnerFields } from "../hooks/useReferralRanks";
 
 /**
  * Structural rather than imported from a single router's inferred output:
@@ -38,7 +40,7 @@ type PostCardOriginalPost = {
   type?: string | null;
   images: PostCardImage[];
   milestone?: unknown;
-  pet: { id: string; name: string; avatarKey?: string | null };
+  pet: { id: string; name: string; avatarKey?: string | null; owner?: ReferralOwnerFields | null };
 };
 
 export type PostCardPost = {
@@ -58,7 +60,17 @@ export type PostCardPost = {
     nickname?: string | null;
     avatarKey?: string | null;
     isVerified?: boolean;
-    owner?: { sponsorSince: Date | string | null; sponsorPeriodEnd: Date | string | null } | null;
+    deceasedAt?: Date | string | null;
+    lostSince?: Date | string | null;
+    isFoundingMember?: boolean;
+    // Sponsor fields only come with petCardSelect (feed/explore); a plain pet
+    // identity's owner (posts.byPetId, comments) carries just the referral rank.
+    owner?: {
+      sponsorSince?: Date | string | null;
+      sponsorPeriodEnd?: Date | string | null;
+      referralRankId?: string | null;
+      referralPerks?: string[] | null;
+    } | null;
   };
 };
 
@@ -90,6 +102,7 @@ export function PostCard({ post, actingPetId, isTrending, isVisible = true }: Pr
   const cardWidth = width - 32; // matches the 16px screen padding used by the feed list
   const [reportOpen, setReportOpen] = useState(false);
   const isOwnPost = post.pet.id === actingPetId;
+  const { confirmBlock } = useBlockPet();
 
   const deleteMutation = useMutation(
     trpc.posts.delete.mutationOptions({
@@ -119,7 +132,17 @@ export function PostCard({ post, actingPetId, isTrending, isVisible = true }: Pr
         { text: t("common.delete"), style: "destructive", onPress: () => deleteMutation.mutate({ postId: post.id }) },
       ]);
     } else {
-      setReportOpen(true);
+      // Report + block (App Store Guideline 1.2), matching web PostCard's
+      // "..." menu for other pets' posts.
+      Alert.alert(formatPetName(post.pet), undefined, [
+        { text: t("report.title"), onPress: () => setReportOpen(true) },
+        {
+          text: t("block.menuItem", { petName: post.pet.name }),
+          style: "destructive",
+          onPress: () => confirmBlock(actingPetId, { id: post.pet.id, name: post.pet.name }),
+        },
+        { text: t("common.cancel"), style: "cancel" },
+      ]);
     }
   };
 
@@ -127,11 +150,11 @@ export function PostCard({ post, actingPetId, isTrending, isVisible = true }: Pr
     <View style={styles.card}>
       <View style={styles.headerRow}>
         <Pressable style={styles.header} onPress={() => router.push(`/pets/${post.pet.id}`)}>
-          <PetAvatar name={post.pet.name} avatarKey={post.pet.avatarKey} />
+          <PetAvatar name={post.pet.name} avatarKey={post.pet.avatarKey} owner={post.pet.owner} />
           <View style={styles.headerText}>
             <View style={styles.nameRow}>
               <Text style={styles.name}>{formatPetName(post.pet)}</Text>
-              <PetIdentityBadges isVerified={post.pet.isVerified} sponsor={post.pet.owner} />
+              <PetIdentityBadges isLost={!!post.pet.lostSince} isDeceased={!!post.pet.deceasedAt} isVerified={post.pet.isVerified} isFoundingMember={post.pet.isFoundingMember} sponsor={post.pet.owner} referral={post.pet.owner} />
               {isTrending && (
                 <View style={styles.trendingBadge}>
                   <Flame size={11} color={colors.marigoldDeep} fill={colors.marigoldDeep} />
@@ -289,8 +312,8 @@ function makeStyles(colors: ColorTokens) {
       borderRadius: radii.sm,
       backgroundColor: colors.marigoldTint,
     },
-    trendingBadgeText: { ...typography.label, textTransform: "none", letterSpacing: 0, fontSize: 10, color: colors.marigoldDeep },
-    timestamp: { ...typography.label, textTransform: "none", letterSpacing: 0 },
+    trendingBadgeText: { ...typography.caption, fontSize: 10, color: colors.marigoldDeep },
+    timestamp: { ...typography.caption },
     caption: { ...typography.body },
     actions: { flexDirection: "row", alignItems: "center", gap: 20 },
     actionGroup: { flexDirection: "row", alignItems: "center", gap: 6 },

mobile/src/components/RepostCard.tsx

@@ -45,7 +45,7 @@ export function RepostCard({ post }: Props) {
       </Pressable>
 
       <Pressable style={styles.header} onPress={() => router.push(`/pets/${origPet.id}`)}>
-        <PetAvatar name={origPet.name} avatarKey={origPet.avatarKey} size="sm" />
+        <PetAvatar name={origPet.name} avatarKey={origPet.avatarKey} size="sm" owner={origPet.owner} />
         <Text style={styles.name}>{origPet.name}</Text>
       </Pressable>
 
@@ -81,7 +81,7 @@ function makeStyles(colors: ColorTokens) {
   return StyleSheet.create({
     card: { gap: 8 },
     attribution: { flexDirection: "row", alignItems: "center", gap: 6 },
-    attributionText: { ...typography.label, textTransform: "none", letterSpacing: 0, color: colors.quietGray },
+    attributionText: { ...typography.caption, color: colors.quietGray },
     header: { flexDirection: "row", alignItems: "center", gap: 8 },
     name: { ...typography.body, fontFamily: typography.title.fontFamily },
     caption: { ...typography.body },

mobile/src/components/Reveal.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { Animated, Easing, type StyleProp, type ViewStyle } from "react-native";
+import { useReducedMotion } from "../hooks/useReducedMotion";
+
+const START_DELAY_MS = 250;
+const STAGGER_MS = 60;
+const DURATION_MS = 550;
+const RISE_PX = 18;
+
+type Props = {
+  /** Position in the entrance sequence — each step starts STAGGER_MS later. */
+  index: number;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Fades and slides its children up once on mount, staggered by `index`. */
+export function Reveal({ index, children, style }: Props) {
+  const isReducedMotion = useReducedMotion();
+  const [progress] = useState(() => new Animated.Value(0));
+
+  useEffect(() => {
+    if (isReducedMotion) {
+      progress.setValue(1);
+      return;
+    }
+    const animation = Animated.timing(progress, {
+      toValue: 1,
+      duration: DURATION_MS,
+      delay: START_DELAY_MS + index * STAGGER_MS,
+      easing: Easing.bezier(0.2, 0.8, 0.2, 1),
+      useNativeDriver: true,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [isReducedMotion, index, progress]);
+
+  const translateY = progress.interpolate({ inputRange: [0, 1], outputRange: [RISE_PX, 0] });
+  return <Animated.View style={[style, { opacity: progress, transform: [{ translateY }] }]}>{children}</Animated.View>;
+}

mobile/src/components/StoryTray.tsx

@@ -7,28 +7,42 @@ import { PlusCircle } from "lucide-react-native";
 import { useTRPC } from "../api/trpc";
 import { useActivePet } from "../context/ActivePetContext";
 import { useTheme } from "../context/ThemeContext";
-import { PawRing } from "./PawRing";
+import { PawRing, getPawRingBox } from "./PawRing";
 import { PetAvatar } from "./PetAvatar";
 import { fontFamily, type ColorTokens } from "../theme/tokens";
 
 const AVATAR_SIZE = 56;
+const RING_BOX = getPawRingBox(AVATAR_SIZE);
 
 /**
  * Port of web's src/components/stories/StoryTray.tsx: an "add story" tile
- * for the active pet, then followed pets with an active story (each in a
- * PawRing). No viewer list, reactions, or comments on stories yet (Gitea
+ * for the active pet, then the active pet's own story while it has one
+ * ("Deine Story" — the followed-pets query never includes the viewer's own
+ * pet), then followed pets with an active story (each in a PawRing). No viewer list, reactions, or comments on stories yet (Gitea
  * #29 on web) — that's a fast-follow, matching how earlier phases trimmed
- * AI-disclosure/mentions from ported forms. Photo stories only, no video
- * story upload/playback (mirrors mobile's post-creation scope decision).
+ * AI-disclosure/mentions from ported forms. Photo and video stories both
+ * play back the same way here — see story-viewer.tsx for the branch.
  */
 export function StoryTray() {
   const { t } = useTranslation();
   const trpc = useTRPC();
   const router = useRouter();
-  const { activePetId } = useActivePet();
+  const { activePetId, pets } = useActivePet();
   const { colors } = useTheme();
   const styles = useMemo(() => makeStyles(colors), [colors]);
 
+  const { data: ownStory } = useQuery({
+    ...trpc.stories.hasActiveStory.queryOptions({ petId: activePetId ?? "", includeOwnRecent: true }),
+    enabled: !!activePetId,
+  });
+  const activePet = pets.find((pet) => pet.id === activePetId) ?? null;
+
+  const openViewer = (pet: { id: string; name: string; avatarKey?: string | null }) =>
+    router.push({
+      pathname: "/story-viewer",
+      params: { petId: pet.id, petName: pet.name, petAvatarKey: pet.avatarKey ?? "" },
+    });
+
   const { data: followedWithStories = [] } = useQuery({
     ...trpc.follows.getPetsWithActiveStories.queryOptions({ followerPetId: activePetId ?? "" }),
     enabled: !!activePetId,
@@ -37,26 +51,30 @@ export function StoryTray() {
   return (
     <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.row}>
       <Pressable style={styles.item} onPress={() => router.push("/story-new")}>
-        <View style={styles.addButton}>
-          <PlusCircle color={colors.pureWhite} size={26} />
+        <View style={styles.addButtonBox}>
+          <View style={styles.addButton}>
+            <PlusCircle color={colors.pureWhite} size={26} />
+          </View>
         </View>
         <Text style={styles.label} numberOfLines={1}>
           {t("feed.storyLabel")}
         </Text>
       </Pressable>
 
+      {ownStory?.hasStory && activePet && (
+        <Pressable style={styles.item} onPress={() => openViewer(activePet)}>
+          <PawRing petId={activePet.id} size={AVATAR_SIZE} includeOwnRecent owner={activePet.owner}>
+            <PetAvatar name={activePet.name} avatarKey={activePet.avatarKey} size="lg" />
+          </PawRing>
+          <Text style={styles.label} numberOfLines={1}>
+            {t("feed.yourStory")}
+          </Text>
+        </Pressable>
+      )}
+
       {followedWithStories.map((pet) => (
-        <Pressable
-          key={pet.id}
-          style={styles.item}
-          onPress={() =>
-            router.push({
-              pathname: "/story-viewer",
-              params: { petId: pet.id, petName: pet.name, petAvatarKey: pet.avatarKey ?? "" },
-            })
-          }
-        >
-          <PawRing petId={pet.id} size={AVATAR_SIZE}>
+        <Pressable key={pet.id} style={styles.item} onPress={() => openViewer(pet)}>
+          <PawRing petId={pet.id} size={AVATAR_SIZE} owner={pet.owner}>
             <PetAvatar name={pet.name} avatarKey={pet.avatarKey} size="lg" />
           </PawRing>
           <Text style={styles.label} numberOfLines={1}>
@@ -71,7 +89,15 @@ export function StoryTray() {
 function makeStyles(colors: ColorTokens) {
   return StyleSheet.create({
     row: { gap: 16, paddingHorizontal: 16, paddingVertical: 12 },
-    item: { alignItems: "center", gap: 4, width: 72 },
+    item: { alignItems: "center", gap: 4, width: RING_BOX.width },
+    // Same box as a PawRing so the "add" tile lines up with the story rings.
+    addButtonBox: {
+      width: RING_BOX.width,
+      height: RING_BOX.height,
+      paddingTop: RING_BOX.paddingTop,
+      alignItems: "center",
+      justifyContent: "center",
+    },
     addButton: {
       width: AVATAR_SIZE,
       height: AVATAR_SIZE,

mobile/src/components/VideoPlayer.tsx

@@ -96,5 +96,5 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     gap: 8,
   },
-  label: { ...typography.label, textTransform: "none", letterSpacing: 0, color: colors.pureWhite },
+  label: { ...typography.caption, color: colors.pureWhite },
 });

mobile/src/components/auth/AuthField.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useMemo, useState } from "react";
+import { Animated, Pressable, StyleSheet, TextInput, type TextInputProps } from "react-native";
+import { Eye, EyeOff, type LucideIcon } from "lucide-react-native";
+import { useTheme } from "../../context/ThemeContext";
+import { fontFamily, type ColorTokens } from "../../theme/tokens";
+
+const FOCUS_MS = 200;
+
+type Props = TextInputProps & {
+  icon?: LucideIcon;
+  /** Red border after a rejected submit. */
+  isInvalid?: boolean;
+  /** Password field: hidden text plus a show/hide toggle. */
+  isSecure?: boolean;
+};
+
+/** Larger auth-screen input: leading icon, animated marigold border on focus, red when invalid. */
+export function AuthField({ icon: Icon, isInvalid = false, isSecure = false, onFocus, onBlur, ...rest }: Props) {
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const [isVisible, setIsVisible] = useState(false);
+  const [focus] = useState(() => new Animated.Value(0));
+
+  const animateFocus = (toValue: number) =>
+    // borderColor can't run on the native driver.
+    Animated.timing(focus, { toValue, duration: FOCUS_MS, useNativeDriver: false }).start();
+
+  useEffect(() => () => focus.stopAnimation(), [focus]);
+
+  const borderColor = isInvalid
+    ? colors.alertRed
+    : focus.interpolate({ inputRange: [0, 1], outputRange: [colors.hairlineGray, colors.marigoldOrange] });
+
+  return (
+    <Animated.View style={[styles.field, { borderColor }]}>
+      {Icon ? <Icon color={colors.quietGray} size={18} /> : null}
+      <TextInput
+        placeholderTextColor={colors.quietGray}
+        secureTextEntry={isSecure && !isVisible}
+        onFocus={(e) => {
+          animateFocus(1);
+          onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          animateFocus(0);
+          onBlur?.(e);
+        }}
+        {...rest}
+        style={styles.input}
+      />
+      {isSecure ? (
+        <Pressable onPress={() => setIsVisible((v) => !v)} hitSlop={12} accessibilityRole="button">
+          {isVisible ? <EyeOff color={colors.quietGray} size={18} /> : <Eye color={colors.quietGray} size={18} />}
+        </Pressable>
+      ) : null}
+    </Animated.View>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  return StyleSheet.create({
+    field: {
+      height: 52,
+      borderRadius: 14,
+      borderWidth: 1.5,
+      backgroundColor: colors.pureWhite,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 10,
+      paddingHorizontal: 14,
+    },
+    input: {
+      flex: 1,
+      height: "100%",
+      fontFamily: fontFamily.regular,
+      fontSize: 15,
+      color: colors.ink,
+    },
+  });
+}

mobile/src/components/auth/AuthLogo.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import { Animated, Platform, StyleSheet } from "react-native";
+import Svg, { Circle, Defs, G, LinearGradient, Path, Rect, Stop } from "react-native-svg";
+import { useReducedMotion } from "../../hooks/useReducedMotion";
+
+const SIZE = 68;
+const RADIUS = 22;
+const TOE_DELAY_MS = 450;
+const TOE_STAGGER_MS = 70;
+const TOES = [
+  { cx: 5.5, cy: 9.5, r: 2.4 },
+  { cx: 10, cy: 5.2, r: 2.4 },
+  { cx: 15, cy: 5.6, r: 2.4 },
+  { cx: 19, cy: 10, r: 2.3 },
+];
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+/** App icon mark for the auth screens: springs in, then the four toes appear one by one. */
+export function AuthLogo() {
+  const isReducedMotion = useReducedMotion();
+  const [pop] = useState(() => new Animated.Value(0));
+  const [toes] = useState(() => TOES.map(() => new Animated.Value(0)));
+
+  useEffect(() => {
+    if (isReducedMotion) {
+      pop.setValue(1);
+      toes.forEach((toe) => toe.setValue(1));
+      return;
+    }
+    const animation = Animated.parallel([
+      Animated.spring(pop, { toValue: 1, friction: 5, tension: 80, useNativeDriver: true }),
+      Animated.sequence([
+        Animated.delay(TOE_DELAY_MS),
+        // SVG props can't run on the native driver.
+        Animated.stagger(
+          TOE_STAGGER_MS,
+          toes.map((toe) => Animated.timing(toe, { toValue: 1, duration: 300, useNativeDriver: false })),
+        ),
+      ]),
+    ]);
+    animation.start();
+    return () => animation.stop();
+  }, [isReducedMotion, pop, toes]);
+
+  const scale = pop.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] });
+  const opacity = pop.interpolate({ inputRange: [0, 0.6], outputRange: [0, 1], extrapolate: "clamp" });
+
+  return (
+    <Animated.View style={[styles.mark, { opacity, transform: [{ scale }] }]}>
+      <Svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`}>
+        <Defs>
+          <LinearGradient id="authLogoFill" x1="0" y1="0" x2="1" y2="1">
+            <Stop offset="0" stopColor="#fb923c" />
+            <Stop offset="1" stopColor="#ea580c" />
+          </LinearGradient>
+        </Defs>
+        <Rect width={SIZE} height={SIZE} rx={RADIUS} fill="url(#authLogoFill)" />
+        <G transform="translate(12 12) scale(1.8333)" fill="#ffffff">
+          {TOES.map((toe, i) => (
+            <AnimatedCircle key={i} cx={toe.cx} cy={toe.cy} r={toe.r} opacity={toes[i]} />
+          ))}
+          <Path d="M12.3 11.2c3 0 6.2 3.6 6.2 6.4 0 2.2-1.7 3-3.3 3-1.3 0-1.9-.6-2.9-.6s-1.6.6-2.9.6c-1.6 0-3.3-.8-3.3-3 0-2.8 3.2-6.4 6.2-6.4z" />
+        </G>
+      </Svg>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  mark: {
+    width: SIZE,
+    height: SIZE,
+    borderRadius: RADIUS,
+    marginBottom: 12,
+    // Android needs a background for elevation to cast a shadow.
+    backgroundColor: "#ea580c",
+    ...Platform.select({
+      ios: { shadowColor: "#ea580c", shadowOpacity: 0.45, shadowRadius: 14, shadowOffset: { width: 0, height: 10 } },
+      android: { elevation: 8 },
+    }),
+  },
+});

mobile/src/components/auth/AuthShell.tsx

@@ -0,0 +1,118 @@
+import { useMemo, type ReactNode } from "react";
+import { KeyboardAvoidingView, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTranslation } from "react-i18next";
+import Svg, { Defs, RadialGradient, Rect, Stop } from "react-native-svg";
+import { useTheme } from "../../context/ThemeContext";
+import { getTypography, type ColorTokens } from "../../theme/tokens";
+import { AuthLogo } from "./AuthLogo";
+import { LanguageChip } from "./LanguageChip";
+import { Reveal } from "../Reveal";
+
+const GLOW_HEIGHT = 420;
+/** Keeps tappable content out of Android's edge back-gesture zone. */
+const SIDE_GUTTER = 28;
+
+type Props = {
+  children: ReactNode;
+  footer?: ReactNode;
+};
+
+/**
+ * Shared frame for sign-in/sign-up: language chip top right, brand block,
+ * then the form anchored to the bottom (thumb zone). Insets are applied by
+ * hand because Android draws edge-to-edge — without them the chip sits under
+ * the status bar and the footer under the gesture bar. Reveal indexes 0–2
+ * are used here, so the screens' own content starts at 3.
+ */
+export function AuthShell({ children, footer }: Props) {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const insets = useSafeAreaInsets();
+
+  return (
+    // "padding" on Android too: edge-to-edge means the window no longer resizes
+    // for the keyboard, so without it the bottom-anchored form stays hidden.
+    <KeyboardAvoidingView style={styles.flex} behavior="padding">
+      <Svg style={styles.glow} width="100%" height={GLOW_HEIGHT} pointerEvents="none">
+        <Defs>
+          <RadialGradient id="authGlow" cx="50%" cy="15%" rx="75%" ry="85%">
+            <Stop offset="0" stopColor={colors.marigoldTint} stopOpacity="1" />
+            <Stop offset="1" stopColor={colors.marigoldTint} stopOpacity="0" />
+          </RadialGradient>
+        </Defs>
+        <Rect width="100%" height="100%" fill="url(#authGlow)" />
+      </Svg>
+      <ScrollView
+        contentContainerStyle={[styles.container, { paddingTop: insets.top + 8, paddingBottom: insets.bottom + 24 }]}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.column}>
+          <Reveal index={0} style={styles.topline}>
+            <LanguageChip />
+          </Reveal>
+          <View style={styles.brand}>
+            <AuthLogo />
+            <Reveal index={1}>
+              <Text style={styles.wordmark}>PawFeed</Text>
+            </Reveal>
+            <Reveal index={2}>
+              <Text style={styles.tagline}>{t("auth.tagline")}</Text>
+            </Reveal>
+          </View>
+          <View style={styles.form}>{children}</View>
+          {footer}
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+export function AuthDivider({ label }: { label: string }) {
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  return (
+    <View style={styles.divider}>
+      <View style={styles.dividerLine} />
+      <Text style={styles.dividerText}>{label}</Text>
+      <View style={styles.dividerLine} />
+    </View>
+  );
+}
+
+type FooterLinkProps = { prompt: string; action: string; onPress: () => void };
+
+export function AuthFooterLink({ prompt, action, onPress }: FooterLinkProps) {
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  return (
+    <Pressable onPress={onPress} hitSlop={12} style={styles.footer} accessibilityRole="link">
+      <Text style={styles.footerText}>
+        {prompt} <Text style={styles.footerAction}>{action}</Text>
+      </Text>
+    </Pressable>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    flex: { flex: 1, backgroundColor: colors.porchWhite },
+    glow: { position: "absolute", top: 0, left: 0 },
+    container: { flexGrow: 1, paddingHorizontal: SIDE_GUTTER, alignItems: "center" },
+    // maxWidth keeps a phone-width column on tablets.
+    column: { flexGrow: 1, width: "100%", maxWidth: 420 },
+    topline: { alignItems: "flex-end" },
+    brand: { alignItems: "center", marginTop: 16, marginBottom: 32 },
+    wordmark: { ...typography.display, fontSize: 32, lineHeight: 38 },
+    tagline: { ...typography.body, color: colors.quietGray, marginTop: 2 },
+    form: { marginTop: "auto", gap: 10 },
+    divider: { flexDirection: "row", alignItems: "center", gap: 12, marginVertical: 4 },
+    dividerLine: { flex: 1, height: StyleSheet.hairlineWidth, backgroundColor: colors.hairlineGray },
+    dividerText: { ...typography.caption, color: colors.quietGray },
+    footer: { marginTop: 18, alignSelf: "center" },
+    footerText: { ...typography.body, color: colors.quietGray },
+    footerAction: { fontFamily: typography.title.fontFamily, color: colors.marigoldDeep },
+  });
+}

mobile/src/components/auth/LanguageChip.tsx

@@ -0,0 +1,122 @@
+import { useMemo, useRef, useState } from "react";
+import { Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ChevronDown, ChevronUp } from "lucide-react-native";
+import { useTheme } from "../../context/ThemeContext";
+import { useLanguagePreference } from "../LanguageSwitcher";
+import { fontFamily, type ColorTokens } from "../../theme/tokens";
+
+const CHIP_HEIGHT = 34;
+const MENU_GAP = 6;
+
+/**
+ * Compact language picker for the auth screens. The menu is a Modal on
+ * purpose: Android's back gesture then closes the menu (onRequestClose)
+ * instead of leaving the app from the root sign-in screen.
+ */
+export function LanguageChip() {
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const insets = useSafeAreaInsets();
+  const { preference, languageOptions, handleSelect } = useLanguagePreference();
+  const [isOpen, setIsOpen] = useState(false);
+  const [chipBottom, setChipBottom] = useState(insets.top + CHIP_HEIGHT);
+  const chipRef = useRef<View>(null);
+
+  // Measured on press, not onLayout: the entrance animation is still moving the chip at mount.
+  const open = () => {
+    if (!chipRef.current) return setIsOpen(true);
+    chipRef.current.measureInWindow((_x, y, _w, h) => {
+      setChipBottom(y + h);
+      setIsOpen(true);
+    });
+  };
+
+  const current = languageOptions.find((o) => o.value === preference) ?? languageOptions[2];
+  const Chevron = isOpen ? ChevronUp : ChevronDown;
+
+  return (
+    <>
+      <Pressable
+        ref={chipRef}
+        onPress={open}
+        android_ripple={{ color: colors.marigoldTint, borderless: false }}
+        style={styles.chip}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: isOpen }}
+      >
+        <Text style={styles.flag}>{current.flag}</Text>
+        <Text style={styles.chipText}>{current.short}</Text>
+        <Chevron color={colors.quietGray} size={14} />
+      </Pressable>
+
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="fade"
+        statusBarTranslucent
+        navigationBarTranslucent
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <Pressable style={StyleSheet.absoluteFill} onPress={() => setIsOpen(false)} accessibilityLabel="close" />
+        <View style={[styles.menu, { top: chipBottom + MENU_GAP }]}>
+          {languageOptions.map((option) => {
+            const isActive = option.value === preference;
+            return (
+              <Pressable
+                key={option.label}
+                onPress={() => {
+                  handleSelect(option.value);
+                  setIsOpen(false);
+                }}
+                android_ripple={{ color: colors.marigoldTint }}
+                style={[styles.item, isActive && styles.itemActive]}
+              >
+                <Text style={styles.flag}>{option.flag}</Text>
+                <Text style={[styles.itemText, isActive && styles.itemTextActive]}>{option.label}</Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      </Modal>
+    </>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  return StyleSheet.create({
+    chip: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 6,
+      height: CHIP_HEIGHT,
+      paddingHorizontal: 12,
+      borderRadius: CHIP_HEIGHT / 2,
+      borderWidth: 1,
+      borderColor: colors.hairlineGray,
+      backgroundColor: colors.pureWhite,
+      overflow: "hidden",
+    },
+    flag: { fontSize: 14 },
+    chipText: { fontFamily: fontFamily.semiBold, fontSize: 13, color: colors.ink },
+    menu: {
+      position: "absolute",
+      right: 28,
+      minWidth: 180,
+      padding: 6,
+      borderRadius: 14,
+      borderWidth: 1,
+      borderColor: colors.hairlineGray,
+      backgroundColor: colors.pureWhite,
+      elevation: 6,
+      shadowColor: "#000",
+      shadowOpacity: 0.18,
+      shadowRadius: 16,
+      shadowOffset: { width: 0, height: 8 },
+    },
+    item: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, paddingVertical: 11, borderRadius: 9, overflow: "hidden" },
+    itemActive: { backgroundColor: colors.marigoldTint },
+    itemText: { fontFamily: fontFamily.regular, fontSize: 14, color: colors.ink },
+    itemTextActive: { fontFamily: fontFamily.semiBold, color: colors.marigoldDeep },
+  });
+}

mobile/src/components/caretaker/CaretakerOnboarding.tsx

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "../../context/ThemeContext";
+import { Button } from "../Button";
+import { CaretakerRedeem } from "./CaretakerRedeem";
+import { getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
+
+type Props = { onApproved: () => void; onBack: () => void };
+
+/** Onboarding-Weg „Ich betreue ein Tier mit“ statt eigenes Tier anlegen (web: onboarding/pet/page.tsx). */
+export function CaretakerOnboarding({ onApproved, onBack }: Props) {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  return (
+    <View style={styles.wrap}>
+      <Text style={styles.title}>{t("caretaker.onboardingTitle")}</Text>
+      <Text style={styles.desc}>{t("caretaker.onboardingDesc")}</Text>
+      <CaretakerRedeem onApproved={onApproved} />
+      <Button title={t("caretaker.onboardingBack")} variant="outline" onPress={onBack} />
+    </View>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography: Typography = getTypography(colors);
+  return StyleSheet.create({
+    wrap: { padding: 24, gap: 12 },
+    title: { ...typography.title, fontSize: 20 },
+    desc: { ...typography.body, color: colors.quietGray, marginBottom: 8 },
+  });
+}

mobile/src/components/caretaker/CaretakerRedeem.tsx

@@ -0,0 +1,100 @@
+import { useMemo, useState } from "react";
+import { View, Text, Alert, StyleSheet } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Clock } from "lucide-react-native";
+import { useTRPC } from "../../api/trpc";
+import { useTheme } from "../../context/ThemeContext";
+import { TextField } from "../TextField";
+import { Button } from "../Button";
+import { Card } from "../Card";
+import { getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
+
+type Props = {
+  /** Nach „Erneut prüfen“, wenn das Tier freigegeben ist (Onboarding → App). */
+  onApproved?: () => void;
+};
+
+/**
+ * „Ich betreue ein Tier mit“ — Port von web src/components/caretaker/CaretakerRedeem.tsx:
+ * Einladungscode einlösen und offene Anfragen zeigen, bis der Haupt-Besitzer freigibt.
+ */
+export function CaretakerRedeem({ onApproved }: Props) {
+  const { t } = useTranslation();
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const [code, setCode] = useState("");
+  const { data: requests } = useQuery(trpc.caretakers.myRequests.queryOptions());
+
+  const refresh = () => queryClient.invalidateQueries(trpc.caretakers.myRequests.queryFilter());
+  const onError = (err: { message: string }) => Alert.alert(err.message || t("caretaker.failed"));
+  const redeem = useMutation(
+    trpc.caretakers.redeem.mutationOptions({
+      onSuccess: async ({ petName }) => {
+        Alert.alert(t("caretaker.requestSent", { name: petName }));
+        setCode("");
+        await refresh();
+      },
+      onError,
+    })
+  );
+  const withdraw = useMutation(trpc.caretakers.leave.mutationOptions({ onSuccess: refresh, onError }));
+
+  const checkAgain = async () => {
+    await refresh();
+    const pets = await queryClient.fetchQuery({ ...trpc.pets.list.queryOptions(), staleTime: 0 });
+    await queryClient.invalidateQueries(trpc.pets.pathFilter());
+    if (pets.length > 0) onApproved?.();
+    else Alert.alert(t("caretaker.stillWaiting"));
+  };
+
+  return (
+    <View style={styles.wrap}>
+      {requests?.map((r) => (
+        <Card key={r.petId} style={styles.request}>
+          <View style={styles.requestRow}>
+            <Clock size={16} color={colors.quietGray} />
+            <Text style={styles.body}>{t("caretaker.waiting", { name: r.petName })}</Text>
+          </View>
+          <Button title={t("caretaker.checkAgain")} variant="outline" onPress={checkAgain} />
+          <Button
+            title={t("caretaker.withdraw")}
+            variant="outline"
+            disabled={withdraw.isPending}
+            onPress={() => withdraw.mutate({ petId: r.petId })}
+          />
+        </Card>
+      ))}
+
+      <Text style={styles.label}>{t("caretaker.codeLabel")}</Text>
+      <TextField
+        value={code}
+        onChangeText={setCode}
+        maxLength={20}
+        autoCapitalize="characters"
+        autoCorrect={false}
+        placeholder="7K3M-QX9A"
+      />
+      <Text style={styles.hint}>{t("caretaker.codeHint")}</Text>
+      <Button
+        title={t("caretaker.redeem")}
+        disabled={redeem.isPending || !code.trim()}
+        onPress={() => redeem.mutate({ code })}
+      />
+    </View>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography: Typography = getTypography(colors);
+  return StyleSheet.create({
+    wrap: { gap: 8 },
+    request: { gap: 8 },
+    requestRow: { flexDirection: "row", alignItems: "center", gap: 8 },
+    body: { ...typography.body, flex: 1 },
+    label: { ...typography.caption, marginTop: 4 },
+    hint: { ...typography.caption },
+  });
+}

mobile/src/components/caretaker/CaretakerSettings.tsx

@@ -0,0 +1,185 @@
+import { useMemo } from "react";
+import { View, Text, Alert, Share, StyleSheet } from "react-native";
+import { useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Users } from "lucide-react-native";
+import { useTRPC } from "../../api/trpc";
+import { useActivePet } from "../../context/ActivePetContext";
+import { useTheme } from "../../context/ThemeContext";
+import { Button } from "../Button";
+import { radii, getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
+import { isoToDisplayDate } from "../../lib/date-format";
+
+const WEB_ORIGIN = "https://pawfeed.org";
+
+type Account = { name: string | null; email: string | null } | null;
+
+function accountLabel(account: Account, fallback: string): string {
+  if (!account) return fallback;
+  if (account.name && account.email) return `${account.name} (${account.email})`;
+  return account.name ?? account.email ?? fallback;
+}
+
+/**
+ * Mitbetreuer in „Profil bearbeiten“ — Port von web
+ * src/components/caretaker/CaretakerSettings.tsx. Haupt-Besitzer: einladen
+ * (Code teilen), freigeben, ablehnen, entfernen. Mitbetreuer: beenden.
+ * Teilen statt Kopieren: Share braucht kein neues natives Modul (OTA-fähig).
+ */
+export function CaretakerSettings({ petId, petName }: { petId: string; petName: string }) {
+  const { t } = useTranslation();
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const { activePetId, clearActivePetId } = useActivePet();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const { data } = useQuery(trpc.caretakers.status.queryOptions({ petId }));
+
+  const refresh = () => queryClient.invalidateQueries(trpc.caretakers.status.queryFilter({ petId }));
+  const onError = (err: { message: string }) => Alert.alert(err.message || t("caretaker.failed"));
+  const createInvite = useMutation(trpc.caretakers.createInvite.mutationOptions({ onSuccess: refresh, onError }));
+  const approve = useMutation(
+    trpc.caretakers.approve.mutationOptions({
+      onSuccess: async () => {
+        Alert.alert(t("caretaker.approved"));
+        await refresh();
+      },
+      onError,
+    })
+  );
+  const remove = useMutation(trpc.caretakers.remove.mutationOptions({ onSuccess: refresh, onError }));
+  const leave = useMutation(
+    trpc.caretakers.leave.mutationOptions({
+      onSuccess: async () => {
+        if (activePetId === petId) clearActivePetId();
+        await queryClient.invalidateQueries();
+        router.replace("/(app)/(tabs)/pets");
+      },
+      onError,
+    })
+  );
+
+  if (!data) return null;
+  const c = data.caretaker;
+
+  const confirm = (title: string, message: string, action: string, onPress: () => void) =>
+    Alert.alert(title, message, [
+      { text: t("common.cancel"), style: "cancel" },
+      { text: action, style: "destructive", onPress },
+    ]);
+
+  const shareCode = (code: string) =>
+    Share.share({ message: t("caretaker.shareMessage", { name: petName, code, link: `${WEB_ORIGIN}/mitbetreuen/${code}` }) });
+
+  return (
+    <View style={styles.section}>
+      <View style={styles.headingRow}>
+        <Users size={16} color={colors.ink} />
+        <Text style={styles.heading}>{t("caretaker.heading")}</Text>
+      </View>
+
+      {data.role === "CARETAKER" ? (
+        <>
+          <Text style={styles.hint}>{t("caretaker.youCoCare", { name: petName })}</Text>
+          <Text style={styles.hint}>{t("caretaker.caretakerLimits")}</Text>
+          <Button
+            title={t("caretaker.leave")}
+            variant="outline"
+            disabled={leave.isPending}
+            onPress={() =>
+              confirm(t("caretaker.leave"), t("caretaker.leaveConfirm", { name: petName }), t("caretaker.leave"), () =>
+                leave.mutate({ petId })
+              )
+            }
+          />
+        </>
+      ) : !c ? (
+        <>
+          <Text style={styles.hint}>{t("caretaker.intro", { name: petName })}</Text>
+          <Button
+            title={t("caretaker.createInvite")}
+            variant="outline"
+            disabled={createInvite.isPending}
+            onPress={() => createInvite.mutate({ petId })}
+          />
+        </>
+      ) : c.status === "INVITED" && c.inviteCode ? (
+        <>
+          <Text style={styles.hint}>{t("caretaker.inviteHint", { name: petName })}</Text>
+          <Text style={styles.code} selectable>
+            {c.inviteCode}
+          </Text>
+          {c.inviteExpiresAt ? (
+            <Text style={styles.hint}>
+              {t("caretaker.validUntil", { date: isoToDisplayDate(new Date(c.inviteExpiresAt).toISOString().slice(0, 10)) })}
+            </Text>
+          ) : null}
+          <Button title={t("caretaker.share")} onPress={() => shareCode(c.inviteCode!)} />
+          <Button
+            title={t("caretaker.newCode")}
+            variant="outline"
+            disabled={createInvite.isPending}
+            onPress={() => createInvite.mutate({ petId })}
+          />
+          <Button
+            title={t("caretaker.revokeInvite")}
+            variant="outline"
+            disabled={remove.isPending}
+            onPress={() => remove.mutate({ petId })}
+          />
+        </>
+      ) : c.status === "PENDING" ? (
+        <>
+          <Text style={styles.body}>{t("caretaker.requestFrom", { who: accountLabel(c.account, t("caretaker.unknownAccount")) })}</Text>
+          <Text style={styles.hint}>{t("caretaker.requestHint", { name: petName })}</Text>
+          <Button title={t("caretaker.approve")} disabled={approve.isPending} onPress={() => approve.mutate({ petId })} />
+          <Button
+            title={t("caretaker.reject")}
+            variant="outline"
+            disabled={remove.isPending}
+            onPress={() => remove.mutate({ petId })}
+          />
+        </>
+      ) : (
+        <>
+          <Text style={styles.body}>
+            {t("caretaker.activeWith", { who: accountLabel(c.account, t("caretaker.unknownAccount")), name: petName })}
+          </Text>
+          <Button
+            title={t("caretaker.remove")}
+            variant="outline"
+            disabled={remove.isPending}
+            onPress={() =>
+              confirm(t("caretaker.remove"), t("caretaker.removeConfirm", { name: petName }), t("caretaker.remove"), () =>
+                remove.mutate({ petId })
+              )
+            }
+          />
+        </>
+      )}
+    </View>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography: Typography = getTypography(colors);
+  return StyleSheet.create({
+    section: { marginTop: 24, gap: 8 },
+    headingRow: { flexDirection: "row", alignItems: "center", gap: 6 },
+    heading: { ...typography.title, fontSize: 16 },
+    hint: { ...typography.caption },
+    body: { ...typography.body },
+    code: {
+      ...typography.title,
+      fontSize: 22,
+      letterSpacing: 3,
+      textAlign: "center",
+      paddingVertical: 10,
+      borderRadius: radii.lg,
+      borderWidth: 1,
+      borderColor: colors.hairlineGray,
+    },
+  });
+}

mobile/src/components/health/HealthConsentGate.tsx

@@ -147,7 +147,7 @@ function makeStyles(colors: ColorTokens) {
     },
     checkboxChecked: { backgroundColor: colors.marigoldOrange, borderColor: colors.marigoldOrange },
     checkboxLabel: { ...typography.body, flex: 1, fontSize: 13, lineHeight: 19 },
-    privacyLink: { ...typography.label, textTransform: "none", letterSpacing: 0, color: colors.marigoldDeep, marginBottom: 20 },
+    privacyLink: { ...typography.caption, color: colors.marigoldDeep, marginBottom: 20 },
     ctaRow: { flexDirection: "row", gap: 10 },
     ctaButton: { flex: 1 },
     manageBox: {
@@ -163,7 +163,7 @@ function makeStyles(colors: ColorTokens) {
     },
     manageText: { flex: 1 },
     manageTitle: { ...typography.body, fontFamily: typography.title.fontFamily, fontSize: 13 },
-    manageDesc: { ...typography.label, textTransform: "none", letterSpacing: 0, marginTop: 2 },
+    manageDesc: { ...typography.caption, marginTop: 2 },
     revokeLink: { ...typography.body, color: colors.alertRed, fontFamily: typography.title.fontFamily, fontSize: 13 },
   });
 }

mobile/src/components/health/VaccineSection.tsx

@@ -6,10 +6,15 @@ import { Plus, Trash2 } from "lucide-react-native";
 import { useTRPC } from "../../api/trpc";
 import { useTheme } from "../../context/ThemeContext";
 import { TextField } from "../TextField";
+import { DateField } from "../DateField";
 import { Button } from "../Button";
 import { Card } from "../Card";
+import { healthSectionStyles } from "./healthSectionStyles";
 import { getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
-import { displayDateToIso, todayAsDisplayDate } from "../../lib/date-format";
+import { addYearsToDisplayDate, displayDateToIso, todayAsDisplayDate } from "../../lib/date-format";
+
+/** Übliche Auffrisch-Intervalle (z. B. Tollwut 1–3 Jahre) als Schnellauswahl für den Folgetermin. */
+const NEXT_DUE_PRESET_YEARS = [1, 3];
 
 /** Port of web's health.ts vaccine CRUD — see health/page.tsx's Impfungen tab. */
 export function VaccineSection({ petId }: { petId: string }) {
@@ -80,8 +85,24 @@ export function VaccineSection({ petId }: { petId: string }) {
       {showForm && (
         <Card style={styles.form}>
           <TextField placeholder={t("health.vaccineNamePlaceholder")} value={name} onChangeText={setName} maxLength={100} />
-          <TextField placeholder={t("health.vaccineGivenPlaceholder")} value={dateGiven} onChangeText={setDateGiven} />
-          <TextField placeholder={t("health.vaccineNextDuePlaceholder")} value={nextDueDate} onChangeText={setNextDueDate} />
+          <DateField placeholder={t("health.vaccineGivenPlaceholder")} value={dateGiven} onChangeText={setDateGiven} />
+          <DateField placeholder={t("health.vaccineNextDuePlaceholder")} value={nextDueDate} onChangeText={setNextDueDate} />
+          <View style={styles.presetRow}>
+            {NEXT_DUE_PRESET_YEARS.map((years) => {
+              const suggestion = addYearsToDisplayDate(dateGiven, years);
+              return (
+                <Pressable
+                  key={years}
+                  style={[styles.preset, !suggestion && styles.presetDisabled]}
+                  disabled={!suggestion}
+                  onPress={() => suggestion && setNextDueDate(suggestion)}
+                >
+                  <Text style={styles.presetText}>{t("health.vaccineNextDuePreset", { count: years })}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+          <Text style={styles.hint}>{t("health.vaccineReminderHint")}</Text>
           <TextField placeholder={t("health.notesPlaceholder")} value={notes} onChangeText={setNotes} maxLength={200} />
           <Button
             title={addMutation.isPending ? "…" : t("common.save")}
@@ -123,16 +144,14 @@ export function VaccineSection({ petId }: { petId: string }) {
 
 function makeStyles(colors: ColorTokens) {
   const typography: Typography = getTypography(colors);
+  const base = healthSectionStyles(colors);
   return StyleSheet.create({
-    section: { gap: 10 },
-    sectionHeader: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-    sectionTitle: { ...typography.title, fontSize: 16 },
-    form: { gap: 10 },
-    empty: { ...typography.body, color: colors.quietGray },
-    row: { flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between", paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: colors.hairlineGray },
-    rowText: { flex: 1, gap: 2 },
-    rowPrimary: { ...typography.body, fontFamily: typography.title.fontFamily },
-    rowSecondary: { ...typography.label, textTransform: "none", letterSpacing: 0 },
+    ...base,
     overdue: { color: colors.alertRed },
+    presetRow: { flexDirection: "row", gap: 8 },
+    preset: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 999, backgroundColor: colors.marigoldTint },
+    presetDisabled: { opacity: 0.4 },
+    presetText: { ...typography.caption, color: colors.ink },
+    hint: { ...typography.caption, color: colors.quietGray },
   });
 }

mobile/src/components/health/VetVisitSection.tsx

@@ -6,8 +6,10 @@ import { Plus, Trash2 } from "lucide-react-native";
 import { useTRPC } from "../../api/trpc";
 import { useTheme } from "../../context/ThemeContext";
 import { TextField } from "../TextField";
+import { DateField } from "../DateField";
 import { Button } from "../Button";
 import { Card } from "../Card";
+import { healthSectionStyles } from "./healthSectionStyles";
 import { getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
 import { displayDateToIso, todayAsDisplayDate } from "../../lib/date-format";
 
@@ -72,7 +74,7 @@ export function VetVisitSection({ petId }: { petId: string }) {
 
       {showForm && (
         <Card style={styles.form}>
-          <TextField placeholder={t("health.weightDatePlaceholder")} value={date} onChangeText={setDate} />
+          <DateField placeholder={t("health.weightDatePlaceholder")} value={date} onChangeText={setDate} />
           <TextField placeholder={t("health.vetReasonPlaceholder")} value={reason} onChangeText={setReason} maxLength={100} />
           <TextField placeholder={t("health.vetNamePlaceholder")} value={vetName} onChangeText={setVetName} maxLength={100} />
           <TextField placeholder={t("health.notesPlaceholder")} value={notes} onChangeText={setNotes} maxLength={500} multiline />
@@ -111,16 +113,9 @@ export function VetVisitSection({ petId }: { petId: string }) {
 
 function makeStyles(colors: ColorTokens) {
   const typography: Typography = getTypography(colors);
+  const base = healthSectionStyles(colors);
   return StyleSheet.create({
-    section: { gap: 10 },
-    sectionHeader: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-    sectionTitle: { ...typography.title, fontSize: 16 },
-    form: { gap: 10 },
-    empty: { ...typography.body, color: colors.quietGray },
-    row: { flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between", paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: colors.hairlineGray },
-    rowText: { flex: 1, gap: 2 },
-    rowPrimary: { ...typography.body, fontFamily: typography.title.fontFamily },
-    rowSecondary: { ...typography.label, textTransform: "none", letterSpacing: 0 },
+    ...base,
     rowNotes: { ...typography.body, fontSize: 13, marginTop: 2 },
   });
 }

mobile/src/components/health/WeightChart.tsx

@@ -0,0 +1,202 @@
+import { useMemo, useState } from "react";
+import { View, Text, Pressable, StyleSheet, type LayoutChangeEvent } from "react-native";
+import Svg, { Path, Line, Circle, Text as SvgText, Defs, LinearGradient, Stop } from "react-native-svg";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "../../context/ThemeContext";
+import { Card } from "../Card";
+import { getTypography, fontFamily, type ColorTokens, type Typography } from "../../theme/tokens";
+import { buildWeightChart, nearestPointIndex, type WeightEntry } from "../../lib/weight-chart";
+
+const CHART_HEIGHT = 170;
+const BOX = { left: 40, right: 12, top: 12, bottom: 26 };
+const AXIS_FONT_SIZE = 10;
+const MAX_LABELED_Y_TICKS = 5;
+const MARKER_RADIUS = 4;
+const SELECTED_RADIUS = 6;
+const LONG_SPAN_MS = 300 * 24 * 60 * 60 * 1000;
+
+/**
+ * Weight history (found.md: Gewichtsdaten als Diagramm) — port of web's
+ * src/components/health/WeightChart.tsx. Tap anywhere on the plot to select
+ * the nearest weigh-in; its value and date show in the header (no floating
+ * tooltip to collide with the edges on a phone). The newest entry is
+ * selected by default. The entry list below the chart is the table view.
+ */
+export function WeightChart({ entries }: { entries: WeightEntry[] }) {
+  const { t, i18n } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const [width, setWidth] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+  const chart = useMemo(
+    () => (width > 0 ? buildWeightChart(entries, { width, height: CHART_HEIGHT, ...BOX }) : null),
+    [entries, width]
+  );
+
+  const formatKg = (kg: number, maximumFractionDigits = 2) =>
+    `${kg.toLocaleString(i18n.language, { maximumFractionDigits })} kg`;
+  const formatDate = (time: number, options: Intl.DateTimeFormatOptions) =>
+    new Date(time).toLocaleDateString(i18n.language, { timeZone: "UTC", ...options });
+
+  const onLayout = (e: LayoutChangeEvent) => setWidth(Math.round(e.nativeEvent.layout.width));
+
+  if (entries.length < 2) return null;
+
+  const points = chart?.points ?? [];
+  const activeIndex = selectedIndex !== null && selectedIndex < points.length ? selectedIndex : points.length - 1;
+  const active = points[activeIndex];
+  const delta = chart?.deltaKg ?? 0;
+  const deltaLabel = `${delta > 0 ? "+" : delta < 0 ? "−" : "±"}${formatKg(Math.abs(delta))}`;
+  const spansLong = points.length > 1 && points[points.length - 1].time - points[0].time > LONG_SPAN_MS;
+  const axisDateOptions: Intl.DateTimeFormatOptions = spansLong
+    ? { month: "short", year: "2-digit" }
+    : { day: "2-digit", month: "2-digit" };
+
+  const summary =
+    points.length > 1
+      ? t("health.weightChartA11y", {
+          from: formatKg(points[0].kg),
+          fromDate: formatDate(points[0].time, { dateStyle: "medium" }),
+          to: formatKg(points[points.length - 1].kg),
+          toDate: formatDate(points[points.length - 1].time, { dateStyle: "medium" }),
+        })
+      : "";
+
+  return (
+    <Card style={styles.card}>
+      <View style={styles.header}>
+        <View>
+          <Text style={styles.eyebrow}>{t("health.weightChartTitle")}</Text>
+          {active && (
+            <Text style={styles.readout}>
+              {formatKg(active.kg)}
+              <Text style={styles.readoutDate}>{"  "}{formatDate(active.time, { dateStyle: "medium" })}</Text>
+            </Text>
+          )}
+        </View>
+        <View style={styles.deltaChip}>
+          <Text style={styles.deltaText}>{deltaLabel}</Text>
+          <Text style={styles.deltaCaption}>{t("health.weightChartSinceFirst")}</Text>
+        </View>
+      </View>
+
+      <Pressable
+        onLayout={onLayout}
+        onPress={(e) => chart && setSelectedIndex(nearestPointIndex(chart.points, e.nativeEvent.locationX))}
+        accessibilityRole="image"
+        accessibilityLabel={summary}
+        style={styles.plot}
+      >
+        {chart && (
+          <Svg width={width} height={CHART_HEIGHT}>
+            <Defs>
+              <LinearGradient id="weightArea" x1="0" y1="0" x2="0" y2="1">
+                <Stop offset="0" stopColor={colors.chartLine} stopOpacity={0.2} />
+                <Stop offset="1" stopColor={colors.chartLine} stopOpacity={0} />
+              </LinearGradient>
+            </Defs>
+
+            {chart.yTicks.map((tick, i) => (
+              <Line
+                key={`grid-${i}`}
+                x1={BOX.left}
+                x2={width - BOX.right}
+                y1={tick.y}
+                y2={tick.y}
+                stroke={colors.hairlineGray}
+                strokeWidth={1}
+              />
+            ))}
+            {chart.yTicks.map((tick, i) =>
+              chart.yTicks.length <= MAX_LABELED_Y_TICKS || i % 2 === 0 ? (
+                <SvgText
+                  key={`ylabel-${i}`}
+                  x={BOX.left - 6}
+                  y={tick.y + AXIS_FONT_SIZE / 3}
+                  fontSize={AXIS_FONT_SIZE}
+                  fontFamily={fontFamily.regular}
+                  fill={colors.quietGray}
+                  textAnchor="end"
+                >
+                  {tick.kg.toLocaleString(i18n.language, {
+                    minimumFractionDigits: chart.yTickDecimals,
+                    maximumFractionDigits: chart.yTickDecimals,
+                  })}
+                </SvgText>
+              ) : null
+            )}
+
+            <Path d={chart.areaPath} fill="url(#weightArea)" />
+            <Path
+              d={chart.linePath}
+              fill="none"
+              stroke={colors.chartLine}
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+
+            {active && (
+              <Line
+                x1={active.x}
+                x2={active.x}
+                y1={BOX.top}
+                y2={chart.baselineY}
+                stroke={colors.quietGray}
+                strokeWidth={1}
+                strokeDasharray="3 3"
+              />
+            )}
+
+            {chart.points.map((p, i) => (
+              <Circle
+                key={`pt-${i}`}
+                cx={p.x}
+                cy={p.y}
+                r={i === activeIndex ? SELECTED_RADIUS : MARKER_RADIUS}
+                fill={i === activeIndex ? colors.chartLine : colors.pureWhite}
+                stroke={i === activeIndex ? colors.pureWhite : colors.chartLine}
+                strokeWidth={2}
+              />
+            ))}
+
+            {chart.xLabelIndices.map((i) => {
+              const p = chart.points[i];
+              const isFirst = i === chart.xLabelIndices[0] && p.x - BOX.left < 20;
+              const isLast = i === chart.points.length - 1;
+              return (
+                <SvgText
+                  key={`xlabel-${i}`}
+                  x={p.x}
+                  y={CHART_HEIGHT - 6}
+                  fontSize={AXIS_FONT_SIZE}
+                  fontFamily={fontFamily.regular}
+                  fill={colors.quietGray}
+                  textAnchor={isLast ? "end" : isFirst ? "start" : "middle"}
+                >
+                  {formatDate(p.time, axisDateOptions)}
+                </SvgText>
+              );
+            })}
+          </Svg>
+        )}
+      </Pressable>
+    </Card>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography: Typography = getTypography(colors);
+  return StyleSheet.create({
+    card: { gap: 8 },
+    header: { flexDirection: "row", justifyContent: "space-between", alignItems: "flex-start", gap: 12 },
+    eyebrow: { ...typography.label },
+    readout: { ...typography.title, fontSize: 20, marginTop: 2 },
+    readoutDate: { ...typography.caption, fontSize: 12 },
+    deltaChip: { alignItems: "flex-end" },
+    deltaText: { ...typography.body, fontFamily: typography.title.fontFamily },
+    deltaCaption: { ...typography.caption, fontSize: 11 },
+    plot: { height: CHART_HEIGHT },
+  });
+}

mobile/src/components/health/WeightLogSection.tsx

@@ -6,9 +6,12 @@ import { Plus, Trash2 } from "lucide-react-native";
 import { useTRPC } from "../../api/trpc";
 import { useTheme } from "../../context/ThemeContext";
 import { TextField } from "../TextField";
+import { DateField } from "../DateField";
 import { Button } from "../Button";
 import { Card } from "../Card";
-import { getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
+import { healthSectionStyles } from "./healthSectionStyles";
+import { WeightChart } from "./WeightChart";
+import type { ColorTokens } from "../../theme/tokens";
 import { displayDateToIso, todayAsDisplayDate } from "../../lib/date-format";
 
 /** Port of web's health.ts weightLog CRUD — see src/app/(app)/pets/[petId]/health/page.tsx's Gewicht tab. */
@@ -65,7 +68,7 @@ export function WeightLogSection({ petId }: { petId: string }) {
 
       {showForm && (
         <Card style={styles.form}>
-          <TextField placeholder={t("health.weightDatePlaceholder")} value={date} onChangeText={setDate} />
+          <DateField placeholder={t("health.weightDatePlaceholder")} value={date} onChangeText={setDate} />
           <TextField placeholder={t("health.weightKgPlaceholder")} value={weightKg} onChangeText={setWeightKg} keyboardType="decimal-pad" />
           <TextField placeholder={t("health.notesPlaceholder")} value={notes} onChangeText={setNotes} maxLength={200} />
           <Button
@@ -81,36 +84,32 @@ export function WeightLogSection({ petId }: { petId: string }) {
       ) : logs.length === 0 ? (
         <Text style={styles.empty}>{t("health.weightEmpty")}</Text>
       ) : (
-        logs.map((log) => (
-          <View key={log.id} style={styles.row}>
-            <View style={styles.rowText}>
-              <Text style={styles.rowPrimary}>{(log.weightGrams / 1000).toLocaleString(i18n.language)} kg</Text>
-              <Text style={styles.rowSecondary}>
-                {new Date(log.date).toLocaleDateString(i18n.language)}
-                {log.notes ? ` · ${log.notes}` : ""}
-              </Text>
+        <>
+          <WeightChart entries={logs} />
+          {logs.map((log) => (
+            <View key={log.id} style={styles.row}>
+              <View style={styles.rowText}>
+                <Text style={styles.rowPrimary}>{(log.weightGrams / 1000).toLocaleString(i18n.language)} kg</Text>
+                <Text style={styles.rowSecondary}>
+                  {new Date(log.date).toLocaleDateString(i18n.language)}
+                  {log.notes ? ` · ${log.notes}` : ""}
+                </Text>
+              </View>
+              <Pressable onPress={() => deleteMutation.mutate({ id: log.id, petId })} hitSlop={8}>
+                <Trash2 color={colors.quietGray} size={16} />
+              </Pressable>
             </View>
-            <Pressable onPress={() => deleteMutation.mutate({ id: log.id, petId })} hitSlop={8}>
-              <Trash2 color={colors.quietGray} size={16} />
-            </Pressable>
-          </View>
-        ))
+          ))}
+        </>
       )}
     </View>
   );
 }
 
 function makeStyles(colors: ColorTokens) {
-  const typography: Typography = getTypography(colors);
+  const base = healthSectionStyles(colors);
   return StyleSheet.create({
-    section: { gap: 10 },
-    sectionHeader: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-    sectionTitle: { ...typography.title, fontSize: 16 },
-    form: { gap: 10 },
-    empty: { ...typography.body, color: colors.quietGray },
-    row: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: colors.hairlineGray },
-    rowText: { flex: 1, gap: 2 },
-    rowPrimary: { ...typography.body, fontFamily: typography.title.fontFamily },
-    rowSecondary: { ...typography.label, textTransform: "none", letterSpacing: 0 },
+    ...base,
+    row: { ...base.row, alignItems: "center" },
   });
 }

mobile/src/components/health/healthSectionStyles.ts

@@ -0,0 +1,18 @@
+import { StyleSheet } from "react-native";
+import { getTypography, type ColorTokens } from "../../theme/tokens";
+
+/** Shared chrome of the health sections (vaccines, vet visits, weight): header, form, list rows. */
+export function healthSectionStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    section: { gap: 10 },
+    sectionHeader: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
+    sectionTitle: { ...typography.title, fontSize: 16 },
+    form: { gap: 10 },
+    empty: { ...typography.body, color: colors.quietGray },
+    row: { flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between", paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: colors.hairlineGray },
+    rowText: { flex: 1, gap: 2 },
+    rowPrimary: { ...typography.body, fontFamily: typography.title.fontFamily },
+    rowSecondary: { ...typography.caption },
+  });
+}

mobile/src/components/lost/LostReportSettings.tsx

@@ -0,0 +1,296 @@
+import { useMemo, useState } from "react";
+import { View, Text, Pressable, Switch, Share, Linking, Alert, StyleSheet } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Siren } from "lucide-react-native";
+import { useTRPC } from "../../api/trpc";
+import { useTheme } from "../../context/ThemeContext";
+import { TextField } from "../TextField";
+import { DateField } from "../DateField";
+import { Button } from "../Button";
+import { env } from "../../lib/env";
+import { displayDateToIso, isoToDisplayDate, todayAsDisplayDate } from "../../lib/date-format";
+import { radii, getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
+
+type Props = { petId: string; petName: string; isDeceased: boolean };
+
+type Form = {
+  date: string; // DD.MM.YYYY
+  time: string; // HH:MM
+  lastSeenPlace: string;
+  description: string;
+  contactPhone: string;
+  contactEmail: string;
+  allowIndexing: boolean;
+};
+
+const TIME_PATTERN = /^([01]?\d|2[0-3]):[0-5]\d$/;
+const RED = "#dc2626";
+
+function pad(n: number): string {
+  return String(n).padStart(2, "0");
+}
+
+function formFromDate(date: Date): Pick<Form, "date" | "time"> {
+  const iso = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  return { date: isoToDisplayDate(iso), time: `${pad(date.getHours())}:${pad(date.getMinutes())}` };
+}
+
+/** Datum + Uhrzeit (Ortszeit) → ISO-Zeitpunkt, oder null bei ungültiger Eingabe. */
+function toIsoTimestamp(form: Form): string | null {
+  const iso = displayDateToIso(form.date);
+  if (!iso || !TIME_PATTERN.test(form.time)) return null;
+  const [h, m] = form.time.split(":");
+  const date = new Date(`${iso}T${pad(Number(h))}:${m}:00`);
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+}
+
+/**
+ * Vermisst-Meldung in „Profil bearbeiten“ — Port von web
+ * src/components/lost/LostReportSettings.tsx. Melden (Push an Follower und
+ * gefolgte Tiere), Angaben ergänzen, Link teilen, „Wieder da!“.
+ */
+export function LostReportSettings({ petId, petName, isDeceased }: Props) {
+  const { t } = useTranslation();
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const { data: report, isPending } = useQuery(trpc.lostReports.mine.queryOptions({ petId }));
+  const [isOpen, setIsOpen] = useState(false);
+  const [notifyFound, setNotifyFound] = useState(true);
+  const [form, setForm] = useState<Form | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Längere Texte immer als Nachricht, nie als Titel: Android kürzt Dialog-Titel auf zwei Zeilen.
+  const done = (title: string, message?: string) => {
+    setForm(null);
+    setError(null);
+    void queryClient.invalidateQueries();
+    Alert.alert(title, message);
+  };
+  const onError = (err: { message: string }) => Alert.alert(t("lostReport.errorTitle"), err.message || t("lostReport.saveFailed"));
+  const create = useMutation(
+    trpc.lostReports.create.mutationOptions({
+      onSuccess: () => {
+        setIsOpen(false);
+        done(t("lostReport.createdTitle"), t("lostReport.created", { name: petName }));
+      },
+      onError,
+    })
+  );
+  const update = useMutation(trpc.lostReports.update.mutationOptions({ onSuccess: () => done(t("lostReport.updated")), onError }));
+  const markFound = useMutation(
+    trpc.lostReports.markFound.mutationOptions({
+      onSuccess: () => done(t("lostReport.foundTitle"), t("lostReport.foundToast", { name: petName })),
+      onError,
+    })
+  );
+
+  if (isDeceased || isPending) return null;
+
+  const current: Form =
+    form ??
+    (report
+      ? {
+          ...formFromDate(new Date(report.lastSeenAt)),
+          lastSeenPlace: report.lastSeenPlace,
+          description: report.description ?? "",
+          contactPhone: report.contactPhone ?? "",
+          contactEmail: report.contactEmail ?? "",
+          allowIndexing: report.allowIndexing,
+        }
+      : {
+          date: todayAsDisplayDate(),
+          time: "",
+          lastSeenPlace: "",
+          description: "",
+          contactPhone: "",
+          contactEmail: "",
+          allowIndexing: false,
+        });
+  const set = (patch: Partial<Form>) => setForm({ ...current, ...patch });
+  const publicUrl = report ? `${env.apiUrl}/vermisst/${report.code}` : "";
+
+  function payload() {
+    const lastSeenAt = toIsoTimestamp(current);
+    if (!lastSeenAt || !current.lastSeenPlace.trim()) {
+      setError(t("lostReport.invalidForm"));
+      return null;
+    }
+    setError(null);
+    return {
+      petId,
+      lastSeenAt,
+      lastSeenPlace: current.lastSeenPlace,
+      description: current.description,
+      contactPhone: current.contactPhone,
+      contactEmail: current.contactEmail,
+      allowIndexing: current.allowIndexing,
+    };
+  }
+
+  if (!report && !isOpen) {
+    return (
+      <View style={styles.teaser}>
+        <Text style={styles.teaserText}>{t("lostReport.teaser", { name: petName })}</Text>
+        <Pressable style={styles.teaserButton} onPress={() => setIsOpen(true)} accessibilityRole="button">
+          <Siren size={16} color={RED} />
+          <Text style={styles.teaserButtonText}>{t("lostReport.open")}</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.headingRow}>
+        <Siren size={18} color={RED} />
+        <Text style={styles.heading}>
+          {report ? t("lostReport.activeHeading", { name: petName }) : t("lostReport.formHeading", { name: petName })}
+        </Text>
+      </View>
+      <Text style={styles.hint}>{report ? t("lostReport.activeHint") : t("lostReport.formHint", { name: petName })}</Text>
+
+      {report && (
+        <>
+          <Text style={styles.link} onPress={() => void Linking.openURL(publicUrl)}>
+            {publicUrl}
+          </Text>
+          <Button
+            title={t("lostReport.share")}
+            variant="outline"
+            onPress={() => void Share.share({ message: `${t("lostReport.shareTitle", { name: petName })} ${publicUrl}` })}
+          />
+        </>
+      )}
+
+      <Text style={styles.label}>{t("lostReport.lastSeenAt")}</Text>
+      <View style={styles.row}>
+        <View style={styles.flex}>
+          <DateField placeholder={t("health.weightDatePlaceholder")} value={current.date} onChangeText={(date) => set({ date })} />
+        </View>
+        <TextField
+          style={styles.time}
+          placeholder={t("lostReport.timePlaceholder")}
+          keyboardType="numbers-and-punctuation"
+          maxLength={5}
+          value={current.time}
+          onChangeText={(time) => set({ time })}
+        />
+      </View>
+      <Text style={styles.label}>{t("lostReport.lastSeenPlace")}</Text>
+      <TextField
+        maxLength={120}
+        placeholder={t("lostReport.lastSeenPlacePlaceholder")}
+        value={current.lastSeenPlace}
+        onChangeText={(lastSeenPlace) => set({ lastSeenPlace })}
+      />
+      <Text style={styles.label}>{t("lostReport.description")}</Text>
+      <TextField
+        multiline
+        maxLength={1000}
+        style={styles.multiline}
+        placeholder={t("lostReport.descriptionPlaceholder")}
+        value={current.description}
+        onChangeText={(description) => set({ description })}
+      />
+      <Text style={styles.hint}>{t("lostReport.contactHint")}</Text>
+      <Text style={styles.label}>{t("lostReport.contactPhone")}</Text>
+      <TextField keyboardType="phone-pad" maxLength={40} value={current.contactPhone} onChangeText={(contactPhone) => set({ contactPhone })} />
+      <Text style={styles.label}>{t("lostReport.contactEmail")}</Text>
+      <TextField
+        keyboardType="email-address"
+        autoCapitalize="none"
+        maxLength={120}
+        value={current.contactEmail}
+        onChangeText={(contactEmail) => set({ contactEmail })}
+      />
+      <View style={styles.switchRow}>
+        <View style={styles.flex}>
+          <Text style={styles.switchLabel}>{t("lostReport.allowIndexing")}</Text>
+          <Text style={styles.hint}>{t("lostReport.allowIndexingHint")}</Text>
+        </View>
+        <Switch value={current.allowIndexing} onValueChange={(allowIndexing) => set({ allowIndexing })} />
+      </View>
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+
+      {report ? (
+        <>
+          <Button
+            title={t("lostReport.saveChanges")}
+            variant="outline"
+            disabled={update.isPending || !form}
+            onPress={() => {
+              const p = payload();
+              if (p) update.mutate(p);
+            }}
+          />
+          <View style={styles.divider} />
+          <View style={styles.switchRow}>
+            <Text style={[styles.switchLabel, styles.flex]}>{t("lostReport.notifyFound", { name: petName })}</Text>
+            <Switch value={notifyFound} onValueChange={setNotifyFound} />
+          </View>
+          <Button
+            title={t("lostReport.markFound", { name: petName })}
+            disabled={markFound.isPending}
+            onPress={() => markFound.mutate({ petId, notifyAudience: notifyFound })}
+          />
+        </>
+      ) : (
+        <>
+          <Button
+            title={t("lostReport.submit")}
+            disabled={create.isPending}
+            onPress={() => {
+              const p = payload();
+              if (p) create.mutate(p);
+            }}
+          />
+          <Button
+            title={t("lostReport.cancel")}
+            variant="outline"
+            onPress={() => {
+              setIsOpen(false);
+              setForm(null);
+              setError(null);
+            }}
+          />
+        </>
+      )}
+    </View>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography: Typography = getTypography(colors);
+  return StyleSheet.create({
+    teaser: { gap: 8, padding: 12, borderRadius: radii.lg, borderWidth: 1, borderColor: colors.hairlineGray, marginBottom: 8 },
+    teaserText: { ...typography.caption },
+    teaserButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 6,
+      height: 44,
+      borderRadius: radii.lg,
+      borderWidth: 1,
+      borderColor: colors.alertRedTint,
+    },
+    teaserButtonText: { ...typography.body, color: RED, fontFamily: typography.title.fontFamily },
+    card: { gap: 8, padding: 12, borderRadius: radii.lg, borderWidth: 1, borderColor: colors.alertRedTint, marginBottom: 8 },
+    headingRow: { flexDirection: "row", alignItems: "center", gap: 6 },
+    heading: { ...typography.title, fontSize: 16, flexShrink: 1 },
+    hint: { ...typography.caption },
+    label: { ...typography.caption, marginTop: 4 },
+    link: { ...typography.body, textDecorationLine: "underline" },
+    row: { flexDirection: "row", gap: 8 },
+    flex: { flex: 1 },
+    time: { width: 88 },
+    multiline: { height: 88, textAlignVertical: "top", paddingTop: 12 },
+    switchRow: { flexDirection: "row", alignItems: "center", gap: 12, marginTop: 4 },
+    switchLabel: { ...typography.body },
+    divider: { height: 1, backgroundColor: colors.hairlineGray, marginVertical: 8 },
+    error: { ...typography.body, color: colors.alertRed },
+  });
+}

mobile/src/components/onboarding/AcquisitionStep.tsx

@@ -0,0 +1,111 @@
+import { useMemo, useState } from "react";
+import { View, Text, Pressable, StyleSheet } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "@tanstack/react-query";
+import { CheckCircle2 } from "lucide-react-native";
+import { useTRPC } from "../../api/trpc";
+import { useTheme } from "../../context/ThemeContext";
+import { Button } from "../Button";
+import { RedeemCodeForm } from "../referrals/RedeemCodeForm";
+import { radii, getTypography, type ColorTokens } from "../../theme/tokens";
+import { StepScaffold } from "./flow/StepScaffold";
+
+const SOURCES = [
+  "FRIENDS",
+  "TIKTOK",
+  "INSTAGRAM",
+  "YOUTUBE",
+  "FACEBOOK",
+  "SHELTER_OR_PARTNER",
+  "STORE_SEARCH",
+  "PRESS",
+  "OTHER",
+] as const;
+type Source = (typeof SOURCES)[number];
+
+type Props = { canRedeem: boolean; onDone: () => void };
+
+/**
+ * Port of web's src/components/referrals/AcquisitionStep.tsx — freiwillige
+ * Herkunftsangabe nach dem ersten Tier, bei „Freunde“ mit Code-Eingabe.
+ * Kein Vorausfüllen wie im Web (dort per Cookie aus /r/<code>): nach dem
+ * Store-Umweg gibt es in der App keinen Weg, den Link-Code mitzunehmen.
+ */
+export function AcquisitionStep({ canRedeem, onDone }: Props) {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const trpc = useTRPC();
+  const [source, setSource] = useState<Source | null>(null);
+  const [inviterName, setInviterName] = useState<string | null | undefined>(undefined);
+
+  const saveSource = useMutation(trpc.referrals.setAcquisitionSource.mutationOptions({ onSettled: onDone }));
+
+  function handleContinue() {
+    if (source) saveSource.mutate({ source });
+    else onDone();
+  }
+
+  return (
+    <StepScaffold
+      title={t("referrals.onboardingTitle")}
+      subtitle={t("referrals.onboardingSubtitle")}
+      footer={
+        <>
+          <Button title={t("common.continue")} isLoading={saveSource.isPending} onPress={handleContinue} style={styles.cta} />
+          <Button title={t("common.skip")} variant="outline" onPress={onDone} style={styles.skip} />
+        </>
+      }
+    >
+
+      <View style={styles.chips} accessibilityRole="radiogroup">
+        {SOURCES.map((option) => {
+          const isSelected = source === option;
+          return (
+            <Pressable
+              key={option}
+              accessibilityRole="radio"
+              accessibilityState={{ checked: isSelected }}
+              onPress={() => setSource(option)}
+              style={[styles.chip, isSelected && styles.chipSelected]}
+            >
+              <Text style={[styles.chipText, isSelected && styles.chipTextSelected]}>{t(`referrals.source_${option}`)}</Text>
+            </Pressable>
+          );
+        })}
+      </View>
+
+      {source === "FRIENDS" && canRedeem && (
+        <View style={styles.redeemBox}>
+          {inviterName !== undefined ? (
+            <View style={styles.redeemedRow}>
+              <CheckCircle2 size={18} color={colors.marigoldOrange} />
+              <Text style={styles.redeemedText}>
+                {inviterName ? t("referrals.redeemed", { name: inviterName }) : t("referrals.redeemedGeneric")}
+              </Text>
+            </View>
+          ) : (
+            <RedeemCodeForm onRedeemed={setInviterName} />
+          )}
+        </View>
+      )}
+
+    </StepScaffold>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    chips: { flexDirection: "row", flexWrap: "wrap", gap: 8, marginBottom: 12 },
+    chip: { paddingHorizontal: 14, paddingVertical: 9, borderRadius: 999, borderWidth: 1, borderColor: colors.hairlineGray },
+    chipSelected: { borderColor: colors.marigoldOrange, backgroundColor: colors.marigoldTint },
+    chipText: { ...typography.body, fontSize: 14 },
+    chipTextSelected: { color: colors.marigoldDeep, fontWeight: "600" },
+    redeemBox: { padding: 14, borderRadius: radii.xl, borderWidth: 1, borderColor: colors.hairlineGray, marginBottom: 12 },
+    redeemedRow: { flexDirection: "row", alignItems: "center", gap: 8 },
+    redeemedText: { ...typography.body, flex: 1 },
+    cta: { height: 54, borderRadius: 15 },
+    skip: { height: 48, borderRadius: 15, marginTop: 6 },
+  });
+}

mobile/src/components/onboarding/ArachnophobiaOptIn.tsx

@@ -1,11 +1,13 @@
-import { useState } from "react";
-import { View, Text, Pressable, StyleSheet } from "react-native";
+import { useMemo, useState } from "react";
+import { View, Text, Pressable, StyleSheet, Switch } from "react-native";
 import { useTranslation } from "react-i18next";
 import { useMutation } from "@tanstack/react-query";
-import { Bug, Check } from "lucide-react-native";
+import { EyeOff } from "lucide-react-native";
 import { useTRPC } from "../../api/trpc";
 import { Button } from "../Button";
-import { colors, radii, typography } from "../../theme/tokens";
+import { fontFamily, getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
+import { StepScaffold } from "./flow/StepScaffold";
+import { useTheme } from "../../context/ThemeContext";
 
 type Props = { onContinue: () => void };
 
@@ -16,6 +18,8 @@ type Props = { onContinue: () => void };
  */
 export function ArachnophobiaOptIn({ onContinue }: Props) {
   const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
   const trpc = useTRPC();
   const [hideSpiders, setHideSpiders] = useState(false);
 
@@ -27,58 +31,62 @@ export function ArachnophobiaOptIn({ onContinue }: Props) {
   );
 
   return (
-    <View style={styles.container}>
-      <View style={styles.titleRow}>
-        <Bug color={colors.marigoldOrange} size={20} />
-        <Text style={styles.title}>{t("onboarding.arachnophobiaTitle")}</Text>
-      </View>
-      <Text style={styles.subtitle}>{t("onboarding.arachnophobiaSubtitle")}</Text>
-
-      <Pressable style={styles.checkboxRow} onPress={() => setHideSpiders((v) => !v)}>
-        <View style={[styles.checkbox, hideSpiders && styles.checkboxChecked]}>
-          {hideSpiders && <Check color={colors.pureWhite} size={14} />}
+    <StepScaffold
+      title={t("onboarding.spiderTitle")}
+      subtitle={t("onboarding.spiderSubtitle")}
+      footer={
+        <Button
+          title={t("common.continue")}
+          isLoading={setPreferenceMutation.isPending}
+          onPress={() => setPreferenceMutation.mutate({ hideSpiders })}
+          style={styles.cta}
+        />
+      }
+    >
+      <Pressable
+        style={styles.card}
+        onPress={() => setHideSpiders((v) => !v)}
+        accessibilityRole="switch"
+        accessibilityState={{ checked: hideSpiders }}
+      >
+        <View style={styles.icon}>
+          <EyeOff color={colors.marigoldDeep} size={20} />
         </View>
-        <Text style={styles.checkboxLabel}>{t("onboarding.arachnophobiaCheckboxLabel")}</Text>
+        <View style={styles.cardText}>
+          <Text style={styles.cardTitle}>{t("onboarding.spiderToggle")}</Text>
+          <Text style={styles.cardSub}>{t("onboarding.spiderWhere")}</Text>
+        </View>
+        <Switch
+          value={hideSpiders}
+          onValueChange={setHideSpiders}
+          trackColor={{ false: colors.hairlineGray, true: colors.marigoldOrange }}
+          thumbColor="#ffffff"
+          ios_backgroundColor={colors.hairlineGray}
+        />
       </Pressable>
-
       <Text style={styles.hint}>{t("onboarding.arachnophobiaHint")}</Text>
-
-      <Button
-        title={setPreferenceMutation.isPending ? "…" : t("common.continue")}
-        disabled={setPreferenceMutation.isPending}
-        onPress={() => setPreferenceMutation.mutate({ hideSpiders })}
-        style={styles.cta}
-      />
-    </View>
+    </StepScaffold>
   );
 }
 
-const styles = StyleSheet.create({
-  container: { padding: 24, gap: 4 },
-  titleRow: { flexDirection: "row", alignItems: "center", gap: 8, marginBottom: 4 },
-  title: { ...typography.title, fontSize: 18 },
-  subtitle: { ...typography.body, color: colors.quietGray, marginBottom: 16 },
-  checkboxRow: {
-    flexDirection: "row",
-    gap: 12,
-    padding: 14,
-    borderRadius: radii.xl,
-    borderWidth: 1,
-    borderColor: colors.hairlineGray,
-    marginBottom: 16,
-  },
-  checkbox: {
-    width: 20,
-    height: 20,
-    borderRadius: 5,
-    borderWidth: 1.5,
-    borderColor: colors.hairlineGray,
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: 2,
-  },
-  checkboxChecked: { backgroundColor: colors.marigoldOrange, borderColor: colors.marigoldOrange },
-  checkboxLabel: { ...typography.body, flex: 1, fontSize: 13, lineHeight: 19 },
-  hint: { ...typography.label, textTransform: "none", letterSpacing: 0, marginBottom: 16 },
-  cta: { marginTop: 4 },
-});
+function makeStyles(colors: ColorTokens) {
+  const typography: Typography = getTypography(colors);
+  return StyleSheet.create({
+    card: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 14,
+      padding: 16,
+      borderRadius: 18,
+      borderWidth: 1,
+      borderColor: colors.hairlineGray,
+      backgroundColor: colors.pureWhite,
+    },
+    icon: { width: 44, height: 44, borderRadius: 13, backgroundColor: colors.marigoldTint, alignItems: "center", justifyContent: "center" },
+    cardText: { flex: 1 },
+    cardTitle: { fontFamily: fontFamily.semiBold, fontSize: 15, color: colors.ink },
+    cardSub: { ...typography.body, fontSize: 13, color: colors.quietGray },
+    hint: { ...typography.body, fontSize: 13, color: colors.quietGray, marginTop: 4 },
+    cta: { height: 54, borderRadius: 15 },
+  });
+}

mobile/src/components/onboarding/AvatarStep.tsx

@@ -1,37 +1,42 @@
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { View, Text, Image as RNImage, Pressable, ActivityIndicator, StyleSheet, Alert } from "react-native";
 import * as ImagePicker from "expo-image-picker";
 import { useTranslation } from "react-i18next";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ImagePlus, Camera } from "lucide-react-native";
 import { useTRPC } from "../../api/trpc";
-import { uploadImageToSupabase } from "../../lib/upload";
-import { resizeForUpload } from "../../lib/resize-image";
-import { PetAvatar } from "../PetAvatar";
+import { uploadPickedImage } from "../../lib/upload";
 import { Button } from "../Button";
-import { colors, radii, typography } from "../../theme/tokens";
+import { fontFamily, getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
+import { StepScaffold } from "./flow/StepScaffold";
+import { useTheme } from "../../context/ThemeContext";
 
 type Props = {
   petId: string;
   petName: string;
-  onDone: () => void;
+  /** Called with the local photo URI once uploaded, or without one when skipped. */
+  onDone: (uploadedPhotoUri?: string) => void;
 };
 
 /**
  * Port of web's onboarding avatar step (AvatarUpload, invoked from
  * onboarding/pet/page.tsx once createdPetId exists). Uses the media router
  * (not posts/stories) — media.getPresignedUrl scopes keys to `avatars/`.
- * "Skip for now" is always available, matching web: an avatar is never
- * required to finish onboarding.
+ * An avatar is never required: "Done" finishes onboarding with or without a
+ * photo. No separate "Skip for now" link — Apple (5.1.1(iv)) read it as a
+ * way to dodge a permission prompt.
  */
 export function AvatarStep({ petId, petName, onDone }: Props) {
   const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
   const trpc = useTRPC();
   const [asset, setAsset] = useState<ImagePicker.ImagePickerAsset | null>(null);
-  const [uploadedKey, setUploadedKey] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const getPresignedUrlMutation = useMutation(trpc.media.getPresignedUrl.mutationOptions());
+  const queryClient = useQueryClient();
+  const [uploadedUri, setUploadedUri] = useState<string | undefined>(undefined);
   const confirmUploadMutation = useMutation(trpc.media.confirmUpload.mutationOptions());
 
   const pickAndUpload = useCallback(
@@ -43,28 +48,21 @@ export function AvatarStep({ petId, petName, onDone }: Props) {
       setError(null);
 
       try {
-        const resized = await resizeForUpload(picked.uri, picked.width, picked.height);
-        const { presignedUrl, key } = await getPresignedUrlMutation.mutateAsync({
-          petId,
-          contentType: resized.mimeType,
-          fileSize: resized.fileSize,
-        });
-        await uploadImageToSupabase(resized.uri, presignedUrl, resized.mimeType);
+        const { key } = await uploadPickedImage(picked, (file) => getPresignedUrlMutation.mutateAsync({ petId, ...file }));
         await confirmUploadMutation.mutateAsync({ petId, key });
-        setUploadedKey(key);
+        setUploadedUri(picked.uri);
+        // Lists still showed the letter avatar after onboarding until the app restarted.
+        queryClient.invalidateQueries({ queryKey: trpc.pets.list.queryOptions().queryKey });
       } catch {
         setError(t("onboarding.uploadError"));
       }
     },
-    [petId, getPresignedUrlMutation, confirmUploadMutation]
+    [petId, getPresignedUrlMutation, confirmUploadMutation, queryClient, trpc, t]
   );
 
   const pickFromGallery = useCallback(async () => {
-    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
-    if (!permission.granted) {
-      Alert.alert(t("onboarding.galleryPermissionDenied"));
-      return;
-    }
+    // Kein Berechtigungsdialog: der System-Bildwähler (iOS PHPicker, Android Photo Picker)
+    // braucht keine Freigabe der Fotomediathek (Apple 5.1.1(iv), 07.10.).
     await pickAndUpload(() => ImagePicker.launchImageLibraryAsync({ mediaTypes: ["images"], quality: 0.8 }));
   }, [pickAndUpload]);
 
@@ -75,81 +73,100 @@ export function AvatarStep({ petId, petName, onDone }: Props) {
       return;
     }
     await pickAndUpload(() => ImagePicker.launchCameraAsync({ quality: 0.8 }));
-  }, [pickAndUpload]);
+  }, [pickAndUpload, t]);
 
   const isUploading = getPresignedUrlMutation.isPending || confirmUploadMutation.isPending;
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>{t("onboarding.avatarTitle")}</Text>
-      <Text style={styles.subtitle}>{t("onboarding.avatarSubtitle")}</Text>
-
-      {asset ? (
-        <View style={styles.previewWrap}>
-          <RNImage source={{ uri: asset.uri }} style={styles.preview} />
-          {isUploading && (
-            <View style={styles.previewOverlay}>
-              <ActivityIndicator color={colors.pureWhite} />
-            </View>
+    <StepScaffold
+      title={t("onboarding.photoTitle", { name: petName })}
+      highlight={petName}
+      subtitle={t("onboarding.photoSubtitle", { name: petName })}
+      footer={
+        // Ohne „Überspringen“-Link (Apple 5.1.1(iv)): „Weiter“ führt auch ohne Foto weiter.
+        <Button title={t("common.continue")} onPress={() => onDone(uploadedUri)} disabled={isUploading} style={styles.cta} />
+      }
+    >
+      <View style={styles.photoRing}>
+        <View style={styles.photo}>
+          {asset ? (
+            <>
+              <RNImage source={{ uri: asset.uri }} style={styles.preview} />
+              {isUploading && (
+                <View style={styles.previewOverlay}>
+                  <ActivityIndicator color="#ffffff" />
+                </View>
+              )}
+            </>
+          ) : (
+            <Text style={styles.letter}>{petName.trim().charAt(0).toUpperCase()}</Text>
           )}
         </View>
-      ) : (
-        <PetAvatar name={petName} avatarKey={null} size="lg" />
-      )}
+      </View>
 
       {error ? <Text style={styles.error}>{error}</Text> : null}
 
       <View style={styles.pickerRow}>
-        <Pressable style={styles.pickerButton} onPress={pickFromGallery} disabled={isUploading}>
+        <Pressable style={styles.pickerButton} onPress={pickFromGallery} disabled={isUploading} android_ripple={{ color: colors.marigoldTint }}>
           <ImagePlus color={colors.marigoldOrange} size={22} />
           <Text style={styles.pickerText}>{t("onboarding.galleryButton")}</Text>
         </Pressable>
-        <Pressable style={styles.pickerButton} onPress={takePhoto} disabled={isUploading}>
+        <Pressable style={styles.pickerButton} onPress={takePhoto} disabled={isUploading} android_ripple={{ color: colors.marigoldTint }}>
           <Camera color={colors.marigoldOrange} size={22} />
           <Text style={styles.pickerText}>{t("onboarding.cameraButton")}</Text>
         </Pressable>
       </View>
-
-      <Button title={t("common.done")} onPress={onDone} disabled={isUploading} style={styles.cta} />
-      {!uploadedKey && (
-        <Pressable onPress={onDone} disabled={isUploading} hitSlop={8}>
-          <Text style={styles.skipLink}>{t("onboarding.skipLink")}</Text>
-        </Pressable>
-      )}
-    </View>
+    </StepScaffold>
   );
 }
 
-const styles = StyleSheet.create({
-  container: { padding: 24, gap: 4, alignItems: "center" },
-  title: { ...typography.title, fontSize: 18, textAlign: "center" },
-  subtitle: { ...typography.body, color: colors.quietGray, textAlign: "center", marginBottom: 20 },
-  previewWrap: { width: 96, height: 96, borderRadius: 48, overflow: "hidden", backgroundColor: colors.hairlineGray },
-  preview: { width: "100%", height: "100%" },
-  previewOverlay: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "rgba(0,0,0,0.4)",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  error: { ...typography.body, color: colors.alertRed, marginTop: 12, textAlign: "center" },
-  pickerRow: { flexDirection: "row", gap: 12, marginTop: 20, alignSelf: "stretch" },
-  pickerButton: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
-    height: 48,
-    borderRadius: radii.lg,
-    borderWidth: 1,
-    borderColor: colors.hairlineGray,
-  },
-  pickerText: { ...typography.body, color: colors.ink },
-  cta: { marginTop: 20, alignSelf: "stretch" },
-  skipLink: { ...typography.label, textTransform: "none", letterSpacing: 0, color: colors.quietGray, marginTop: 12 },
-});
+const PHOTO_SIZE = 156;
+
+function makeStyles(colors: ColorTokens) {
+  const typography: Typography = getTypography(colors);
+  return StyleSheet.create({
+    photoRing: {
+      alignSelf: "center",
+      padding: 8,
+      borderRadius: PHOTO_SIZE,
+      borderWidth: 2,
+      borderStyle: "dashed",
+      borderColor: colors.marigoldOrange,
+      marginTop: 6,
+    },
+    photo: {
+      width: PHOTO_SIZE,
+      height: PHOTO_SIZE,
+      borderRadius: PHOTO_SIZE / 2,
+      overflow: "hidden",
+      backgroundColor: colors.marigoldOrange,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    letter: { fontFamily: fontFamily.extraBold, fontSize: 60, color: "#ffffff" },
+    preview: { width: "100%", height: "100%" },
+    previewOverlay: {
+      ...StyleSheet.absoluteFill,
+      backgroundColor: "rgba(0,0,0,0.4)",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    error: { ...typography.body, color: colors.alertRed, marginTop: 12, textAlign: "center" },
+    pickerRow: { flexDirection: "row", gap: 10, marginTop: 24 },
+    pickerButton: {
+      flex: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      height: 56,
+      borderRadius: 16,
+      borderWidth: 1.5,
+      borderColor: colors.hairlineGray,
+      backgroundColor: colors.pureWhite,
+      overflow: "hidden",
+    },
+    pickerText: { fontFamily: fontFamily.semiBold, fontSize: 15, color: colors.ink },
+    cta: { height: 54, borderRadius: 15 },
+  });
+}

mobile/src/components/onboarding/OnboardingGuidelines.tsx

@@ -1,101 +0,0 @@
-import { View, Text, Pressable, ActivityIndicator, Linking, StyleSheet } from "react-native";
-import { useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ScrollText } from "lucide-react-native";
-import { useTRPC } from "../../api/trpc";
-import { env } from "../../lib/env";
-import { Button } from "../Button";
-import { colors, radii, typography } from "../../theme/tokens";
-
-type Props = { onContinue: () => void };
-
-/**
- * Port of web's src/components/legal/OnboardingGuidelines.tsx. Auto-skips
- * via onContinue() once acknowledged, or if nothing has ever been published
- * (legal.getPendingUpdate returns null) — matches web's admin-editable
- * LegalDocumentVersion content, not a hardcoded first-run screen.
- */
-export function OnboardingGuidelines({ onContinue }: Props) {
-  const { t } = useTranslation();
-  const trpc = useTRPC();
-  const queryClient = useQueryClient();
-
-  const { data: pending, isLoading } = useQuery(trpc.legal.getPendingUpdate.queryOptions());
-
-  const acknowledgeMutation = useMutation(
-    trpc.legal.acknowledge.mutationOptions({
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: trpc.legal.getPendingUpdate.queryOptions().queryKey });
-        onContinue();
-      },
-    })
-  );
-
-  const hasNothingToAcknowledge = !isLoading && (!pending || pending.length === 0);
-
-  useEffect(() => {
-    if (hasNothingToAcknowledge) onContinue();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hasNothingToAcknowledge]);
-
-  if (isLoading || hasNothingToAcknowledge) {
-    return (
-      <View style={styles.center}>
-        <ActivityIndicator color={colors.marigoldOrange} />
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.titleRow}>
-        <ScrollText color={colors.marigoldOrange} size={20} />
-        <Text style={styles.title}>{t("onboarding.guidelinesTitle")}</Text>
-      </View>
-      <Text style={styles.subtitle}>{t("onboarding.guidelinesSubtitle")}</Text>
-
-      <View style={styles.card}>
-        {pending!.map((version) => (
-          <Text key={version.id} style={styles.summary}>
-            {version.changeSummary}
-          </Text>
-        ))}
-      </View>
-
-      <Pressable onPress={() => Linking.openURL(`${env.apiUrl}/nutzungsbedingungen`)}>
-        <Text style={styles.link}>{t("onboarding.termsLink")}</Text>
-      </Pressable>
-      <Pressable onPress={() => Linking.openURL(`${env.apiUrl}/datenschutz`)}>
-        <Text style={styles.link}>{t("onboarding.privacyLink")}</Text>
-      </Pressable>
-
-      <Button
-        title={acknowledgeMutation.isPending ? "…" : t("onboarding.guidelinesContinue")}
-        disabled={acknowledgeMutation.isPending}
-        onPress={() => acknowledgeMutation.mutate()}
-        style={styles.cta}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 40 },
-  container: { padding: 24, gap: 4 },
-  titleRow: { flexDirection: "row", alignItems: "center", gap: 8, marginBottom: 4 },
-  title: { ...typography.title, fontSize: 18 },
-  subtitle: { ...typography.body, color: colors.quietGray, marginBottom: 16 },
-  card: {
-    gap: 10,
-    padding: 14,
-    borderRadius: radii.xl,
-    borderWidth: 1,
-    borderColor: colors.hairlineGray,
-    backgroundColor: colors.pureWhite,
-    marginBottom: 16,
-  },
-  summary: { ...typography.body },
-  link: { ...typography.label, textTransform: "none", letterSpacing: 0, color: colors.marigoldDeep, marginBottom: 8 },
-  cta: { marginTop: 12 },
-});

mobile/src/components/onboarding/PetCreateForm.tsx

@@ -1,152 +0,0 @@
-import { useMemo, useState } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { useTranslation } from "react-i18next";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useTRPC } from "../../api/trpc";
-import { TextField } from "../TextField";
-import { Button } from "../Button";
-import { OptionPicker, type PickerOption } from "../OptionPicker";
-import { BreedPicker } from "../pet/BreedPicker";
-import { useTheme } from "../../context/ThemeContext";
-import { getTypography, type ColorTokens } from "../../theme/tokens";
-
-type Props = { onSuccess: (pet: { id: string; name: string }) => void };
-
-/**
- * Port of web's src/components/pet/PetForm.tsx in create mode — name,
- * nickname, species/breed (data-driven, never hardcoded per CLAUDE.md),
- * bio, adoption story. Avatar upload happens in a separate step after the
- * pet exists (see onboarding/pet.tsx), matching web's two-phase flow.
- */
-export function PetCreateForm({ onSuccess }: Props) {
-  const { t } = useTranslation();
-  const trpc = useTRPC();
-  const queryClient = useQueryClient();
-  const { colors } = useTheme();
-  const styles = useMemo(() => makeStyles(colors), [colors]);
-  const [name, setName] = useState("");
-  const [nickname, setNickname] = useState("");
-  const [speciesId, setSpeciesId] = useState<string | null>(null);
-  const [speciesName, setSpeciesName] = useState<string | null>(null);
-  const [breedId, setBreedId] = useState<string | null>(null);
-  const [breedName, setBreedName] = useState<string | null>(null);
-  const [bio, setBio] = useState("");
-  const [adoptionStory, setAdoptionStory] = useState("");
-  const [error, setError] = useState<string | null>(null);
-
-  const createMutation = useMutation(
-    trpc.pets.create.mutationOptions({
-      onSuccess: (pet) => {
-        // Ohne dieses Invalidate bleibt ActivePetContext.pets (trpc.pets.list)
-        // auf dem alten "keine Tiere"-Stand stehen, bis die App neu startet —
-        // OnboardingRedirect wirft dann sofort wieder auf /onboarding/pet
-        // zurück, sobald man nach dem Avatar-Schritt in (app) landet.
-        queryClient.invalidateQueries({ queryKey: trpc.pets.list.queryOptions().queryKey });
-        onSuccess({ id: pet.id, name: pet.name });
-      },
-      onError: (err) => setError(err.message),
-    })
-  );
-
-  const canSubmit = name.trim().length > 0 && !!speciesId && !createMutation.isPending;
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>{t("petForm.createTitle")}</Text>
-      <Text style={styles.subtitle}>{t("petForm.createSubtitle")}</Text>
-
-      <Text style={styles.label}>{t("petForm.name")}</Text>
-      <TextField placeholder={t("petForm.namePlaceholder")} value={name} onChangeText={setName} maxLength={30} />
-
-      <Text style={styles.label}>{t("petForm.nickname")}</Text>
-      <TextField placeholder={t("petForm.nicknamePlaceholder")} value={nickname} onChangeText={setNickname} maxLength={30} />
-
-      <Text style={styles.label}>{t("petForm.species")}</Text>
-      <SpeciesPicker
-        selectedName={speciesName}
-        onSelect={(option) => {
-          setSpeciesId(option.id);
-          setSpeciesName(option.name);
-          setBreedId(null);
-          setBreedName(null);
-        }}
-      />
-
-      <Text style={styles.label}>{t("petForm.breed")}</Text>
-      <BreedPicker speciesId={speciesId} selectedName={breedName} onSelect={(o) => { setBreedId(o.id); setBreedName(o.name); }} />
-
-      <Text style={styles.label}>{t("petForm.bio")}</Text>
-      <TextField
-        placeholder={t("petForm.bioPlaceholder")}
-        value={bio}
-        onChangeText={setBio}
-        maxLength={150}
-        multiline
-        style={styles.multiline}
-      />
-
-      <Text style={styles.label}>{t("petForm.adoptionStory")}</Text>
-      <TextField
-        placeholder={t("petForm.adoptionStoryPlaceholder")}
-        value={adoptionStory}
-        onChangeText={setAdoptionStory}
-        maxLength={500}
-        multiline
-        style={styles.multiline}
-      />
-
-      {error ? <Text style={styles.error}>{error}</Text> : null}
-
-      <Button
-        title={createMutation.isPending ? "…" : t("petForm.createButton")}
-        disabled={!canSubmit}
-        onPress={() =>
-          createMutation.mutate({
-            name: name.trim(),
-            nickname: nickname.trim() || undefined,
-            speciesId: speciesId as string,
-            breedId: breedId ?? undefined,
-            bio: bio.trim() || undefined,
-            adoptionStory: adoptionStory.trim() || undefined,
-          })
-        }
-        style={styles.cta}
-      />
-    </View>
-  );
-}
-
-function SpeciesPicker({ selectedName, onSelect }: { selectedName: string | null; onSelect: (o: PickerOption) => void }) {
-  const { t, i18n } = useTranslation();
-  const trpc = useTRPC();
-  const [open, setOpen] = useState(false);
-  const { data: species = [], isLoading } = useQuery(trpc.pets.listSpecies.queryOptions({ locale: i18n.language }));
-
-  return (
-    <OptionPicker
-      open={open}
-      onToggle={() => setOpen((v) => !v)}
-      selectedName={selectedName}
-      placeholder={t("petForm.selectSpecies")}
-      isLoading={isLoading}
-      options={species}
-      onSelect={(o) => {
-        onSelect(o);
-        setOpen(false);
-      }}
-    />
-  );
-}
-
-function makeStyles(colors: ColorTokens) {
-  const typography = getTypography(colors);
-  return StyleSheet.create({
-    container: { padding: 24, gap: 6 },
-    title: { ...typography.title, fontSize: 18, marginBottom: 4 },
-    subtitle: { ...typography.body, color: colors.quietGray, marginBottom: 16 },
-    label: { ...typography.label, textTransform: "none", letterSpacing: 0, marginTop: 10 },
-    multiline: { height: 80, textAlignVertical: "top", paddingTop: 12 },
-    error: { ...typography.body, color: colors.alertRed, marginTop: 8 },
-    cta: { marginTop: 16 },
-  });
-}

mobile/src/components/onboarding/UploadConsent.tsx

@@ -1,127 +0,0 @@
-import { useEffect, useState } from "react";
-import { View, Text, Pressable, ActivityIndicator, Linking, StyleSheet } from "react-native";
-import { useTranslation } from "react-i18next";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ShieldCheck, Check } from "lucide-react-native";
-import { useTRPC } from "../../api/trpc";
-import { env } from "../../lib/env";
-import { Button } from "../Button";
-import { colors, radii, typography } from "../../theme/tokens";
-
-type Props = { onContinue: () => void };
-
-/**
- * Port of web's src/components/legal/UploadConsent.tsx — two mandatory,
- * blocking Willenserklärungen (content rights + data-processing consent,
- * Gitea #3) shown once before the very first pet can be created. Skips
- * automatically if already consented (legal.getUploadConsentStatus).
- */
-export function UploadConsent({ onContinue }: Props) {
-  const { t } = useTranslation();
-  const trpc = useTRPC();
-  const queryClient = useQueryClient();
-  const [contentRightsChecked, setContentRightsChecked] = useState(false);
-  const [dataProcessingChecked, setDataProcessingChecked] = useState(false);
-
-  const { data: status, isLoading } = useQuery(trpc.legal.getUploadConsentStatus.queryOptions());
-
-  const acknowledgeMutation = useMutation(
-    trpc.legal.acknowledgeUploadConsent.mutationOptions({
-      onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: trpc.legal.getUploadConsentStatus.queryOptions().queryKey });
-        onContinue();
-      },
-    })
-  );
-
-  const alreadyConsented = !isLoading && status?.hasConsented === true;
-
-  useEffect(() => {
-    if (alreadyConsented) onContinue();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [alreadyConsented]);
-
-  if (isLoading || alreadyConsented) {
-    return (
-      <View style={styles.center}>
-        <ActivityIndicator color={colors.marigoldOrange} />
-      </View>
-    );
-  }
-
-  const canContinue = contentRightsChecked && dataProcessingChecked;
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.titleRow}>
-        <ShieldCheck color={colors.marigoldOrange} size={20} />
-        <Text style={styles.title}>{t("onboarding.consentTitle")}</Text>
-      </View>
-      <Text style={styles.subtitle}>{t("onboarding.consentSubtitle")}</Text>
-
-      <ConsentCheckbox
-        checked={contentRightsChecked}
-        onToggle={() => setContentRightsChecked((v) => !v)}
-        label={t("onboarding.contentRightsLabel")}
-      />
-      <ConsentCheckbox
-        checked={dataProcessingChecked}
-        onToggle={() => setDataProcessingChecked((v) => !v)}
-        label={t("onboarding.dataProcessingLabel")}
-      />
-
-      <Pressable onPress={() => Linking.openURL(`${env.apiUrl}/datenschutz`)}>
-        <Text style={styles.link}>{t("onboarding.consentPrivacyLink")}</Text>
-      </Pressable>
-
-      <Button
-        title={acknowledgeMutation.isPending ? "…" : t("onboarding.consentContinue")}
-        disabled={!canContinue || acknowledgeMutation.isPending}
-        onPress={() => acknowledgeMutation.mutate()}
-        style={styles.cta}
-      />
-    </View>
-  );
-}
-
-function ConsentCheckbox({ checked, onToggle, label }: { checked: boolean; onToggle: () => void; label: string }) {
-  return (
-    <Pressable style={styles.checkboxRow} onPress={onToggle}>
-      <View style={[styles.checkbox, checked && styles.checkboxChecked]}>
-        {checked && <Check color={colors.pureWhite} size={14} />}
-      </View>
-      <Text style={styles.checkboxLabel}>{label}</Text>
-    </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
-  center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 40 },
-  container: { padding: 24, gap: 4 },
-  titleRow: { flexDirection: "row", alignItems: "center", gap: 8, marginBottom: 4 },
-  title: { ...typography.title, fontSize: 18 },
-  subtitle: { ...typography.body, color: colors.quietGray, marginBottom: 16 },
-  checkboxRow: {
-    flexDirection: "row",
-    gap: 12,
-    padding: 14,
-    borderRadius: radii.xl,
-    borderWidth: 1,
-    borderColor: colors.hairlineGray,
-    marginBottom: 12,
-  },
-  checkbox: {
-    width: 20,
-    height: 20,
-    borderRadius: 5,
-    borderWidth: 1.5,
-    borderColor: colors.hairlineGray,
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: 2,
-  },
-  checkboxChecked: { backgroundColor: colors.marigoldOrange, borderColor: colors.marigoldOrange },
-  checkboxLabel: { ...typography.body, flex: 1, fontSize: 13, lineHeight: 19 },
-  link: { ...typography.label, textTransform: "none", letterSpacing: 0, color: colors.marigoldDeep, marginBottom: 16, marginTop: 4 },
-  cta: { marginTop: 4 },
-});

mobile/src/components/onboarding/flow/AboutStep.tsx

@@ -0,0 +1,85 @@
+import { useMemo } from "react";
+import { StyleSheet, Text, TextInput } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "../../../context/ThemeContext";
+import { Button } from "../../Button";
+import { fontFamily, getTypography, type ColorTokens } from "../../../theme/tokens";
+import { StepScaffold } from "./StepScaffold";
+
+const BIO_MAX = 150;
+const STORY_MAX = 500;
+
+type Props = {
+  petName: string;
+  bio: string;
+  adoptionStory: string;
+  onChangeBio: (value: string) => void;
+  onChangeAdoptionStory: (value: string) => void;
+  error: string | null;
+  isCreating: boolean;
+  /** Creates the pet — both texts are optional. */
+  onCreate: () => void;
+};
+
+/** Step "Erzähl uns von {name}" — optional bio + adoption story, then the pet is created. */
+export function AboutStep({ petName, bio, adoptionStory, onChangeBio, onChangeAdoptionStory, error, isCreating, onCreate }: Props) {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+
+  return (
+    <StepScaffold
+      title={t("onboarding.aboutTitle", { name: petName })}
+      highlight={petName}
+      subtitle={t("onboarding.aboutSubtitle")}
+      footer={
+        <>
+          {error ? <Text style={styles.error}>{error}</Text> : null}
+          <Button title={t("onboarding.aboutCreate")} isLoading={isCreating} onPress={onCreate} style={styles.cta} />
+        </>
+      }
+    >
+      <TextInput
+        style={[styles.area, styles.areaTall]}
+        value={bio}
+        onChangeText={onChangeBio}
+        placeholder={t("petForm.bioPlaceholder")}
+        placeholderTextColor={colors.quietGray}
+        maxLength={BIO_MAX}
+        multiline
+      />
+      <TextInput
+        style={styles.area}
+        value={adoptionStory}
+        onChangeText={onChangeAdoptionStory}
+        placeholder={t("onboarding.storyPlaceholder", { name: petName })}
+        placeholderTextColor={colors.quietGray}
+        maxLength={STORY_MAX}
+        multiline
+      />
+    </StepScaffold>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    area: {
+      minHeight: 72,
+      borderRadius: 16,
+      borderWidth: 1.5,
+      borderColor: colors.hairlineGray,
+      backgroundColor: colors.pureWhite,
+      paddingHorizontal: 14,
+      paddingTop: 12,
+      paddingBottom: 12,
+      fontFamily: fontFamily.regular,
+      fontSize: 15,
+      color: colors.ink,
+      textAlignVertical: "top",
+    },
+    areaTall: { minHeight: 104 },
+    error: { ...typography.body, color: colors.alertRed, marginBottom: 6 },
+    cta: { height: 54, borderRadius: 15 },
+  });
+}

mobile/src/components/onboarding/flow/DoneStep.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useMemo, useState } from "react";
+import { Animated, Easing, Image, StyleSheet, Text, View } from "react-native";
+import { useTranslation } from "react-i18next";
+import { PawPrint } from "lucide-react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { useReducedMotion } from "../../../hooks/useReducedMotion";
+import { Button } from "../../Button";
+import { Reveal } from "../../Reveal";
+import { fontFamily, getTypography, type ColorTokens } from "../../../theme/tokens";
+
+const PAW_COUNT = 16;
+const BURST_MS = 1300;
+
+type Props = { petName: string; photoUri?: string; onFinish: () => void };
+
+/** Closing moment after onboarding: the pet's badge pops in, paws burst around it. */
+export function DoneStep({ petName, photoUri, onFinish }: Props) {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const isReducedMotion = useReducedMotion();
+  const [pop] = useState(() => new Animated.Value(isReducedMotion ? 1 : 0));
+
+  useEffect(() => {
+    if (isReducedMotion) {
+      pop.setValue(1);
+      return;
+    }
+    const animation = Animated.spring(pop, { toValue: 1, friction: 5, tension: 70, useNativeDriver: true });
+    animation.start();
+    return () => animation.stop();
+  }, [isReducedMotion, pop]);
+
+  const letter = petName.trim().charAt(0).toUpperCase();
+  const scale = pop.interpolate({ inputRange: [0, 1], outputRange: [0.3, 1] });
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.center}>
+        <View>
+          {isReducedMotion ? null : <PawBurst color={colors.marigoldOrange} />}
+          <Animated.View style={[styles.badge, { opacity: pop, transform: [{ scale }] }]}>
+            {photoUri ? <Image source={{ uri: photoUri }} style={styles.photo} alt={petName} /> : <Text style={styles.letter}>{letter}</Text>}
+          </Animated.View>
+        </View>
+        <Reveal index={2}>
+          <Text style={styles.title}>{t("onboarding.doneTitle", { name: petName })}</Text>
+        </Reveal>
+        <Reveal index={3}>
+          <Text style={styles.subtitle}>{t("onboarding.doneSubtitle")}</Text>
+        </Reveal>
+      </View>
+      <Button title={t("onboarding.doneCta")} onPress={onFinish} style={styles.cta} />
+    </View>
+  );
+}
+
+function PawBurst({ color }: { color: string }) {
+  const [progress] = useState(() => new Animated.Value(0));
+
+  useEffect(() => {
+    const animation = Animated.timing(progress, {
+      toValue: 1,
+      duration: BURST_MS,
+      easing: Easing.bezier(0.15, 0.7, 0.3, 1),
+      useNativeDriver: true,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [progress]);
+
+  return (
+    <View style={burstStyles.layer} pointerEvents="none">
+      {Array.from({ length: PAW_COUNT }, (_, i) => {
+        const angle = (i / PAW_COUNT) * Math.PI * 2;
+        const distance = 110 + (i % 3) * 36;
+        const translateX = progress.interpolate({ inputRange: [0, 1], outputRange: [0, Math.cos(angle) * distance] });
+        const translateY = progress.interpolate({ inputRange: [0, 1], outputRange: [0, Math.sin(angle) * distance - 40] });
+        const rotate = progress.interpolate({ inputRange: [0, 1], outputRange: ["0deg", `${(i % 2 ? 1 : -1) * (90 + i * 12)}deg`] });
+        const opacity = progress.interpolate({ inputRange: [0, 0.15, 1], outputRange: [0, 1, 0] });
+        return (
+          <Animated.View key={i} style={[burstStyles.paw, { opacity, transform: [{ translateX }, { translateY }, { rotate }] }]}>
+            <PawPrint color={color} fill={color} size={18} />
+          </Animated.View>
+        );
+      })}
+    </View>
+  );
+}
+
+const burstStyles = StyleSheet.create({
+  layer: { ...StyleSheet.absoluteFill, alignItems: "center", justifyContent: "center" },
+  paw: { position: "absolute" },
+});
+
+function makeStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    container: { flex: 1, paddingHorizontal: 26, paddingBottom: 16 },
+    center: { flex: 1, alignItems: "center", justifyContent: "center" },
+    badge: {
+      width: 120,
+      height: 120,
+      borderRadius: 60,
+      backgroundColor: colors.marigoldOrange,
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 8,
+      borderColor: colors.marigoldTint,
+      overflow: "hidden",
+    },
+    letter: { fontFamily: fontFamily.extraBold, fontSize: 48, color: "#ffffff" },
+    photo: { width: "100%", height: "100%" },
+    title: {
+      fontFamily: fontFamily.extraBold,
+      fontSize: 28,
+      lineHeight: 34,
+      letterSpacing: -0.6,
+      color: colors.ink,
+      textAlign: "center",
+      marginTop: 26,
+    },
+    subtitle: { ...typography.body, fontSize: 15, color: colors.quietGray, textAlign: "center", marginTop: 8 },
+    cta: { height: 54, borderRadius: 15 },
+  });
+}

mobile/src/components/onboarding/flow/NameStep.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Pressable, StyleSheet, Text, TextInput } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "../../../context/ThemeContext";
+import { useReducedMotion } from "../../../hooks/useReducedMotion";
+import { Button } from "../../Button";
+import { fontFamily, getTypography, type ColorTokens } from "../../../theme/tokens";
+import { StepScaffold } from "./StepScaffold";
+
+const NAME_MAX = 30;
+
+type Props = {
+  name: string;
+  nickname: string;
+  onChangeName: (value: string) => void;
+  onChangeNickname: (value: string) => void;
+  onNext: () => void;
+  /** "Ich betreue ein Tier mit" — the co-caretaker path instead of creating a pet. */
+  onCaretaker: () => void;
+};
+
+/** Step "Wie heißt dein Tier?" — the avatar circle shows the first letter live. */
+export function NameStep({ name, nickname, onChangeName, onChangeNickname, onNext, onCaretaker }: Props) {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const [isNicknameOpen, setIsNicknameOpen] = useState(nickname.length > 0);
+  const letter = name.trim().charAt(0).toUpperCase() || "?";
+  const canContinue = name.trim().length > 0;
+
+  return (
+    <StepScaffold
+      title={t("onboarding.nameTitle")}
+      subtitle={t("onboarding.nameSubtitle")}
+      footer={
+        <>
+          <Button title={t("common.continue")} disabled={!canContinue} onPress={onNext} style={styles.cta} />
+          <Pressable onPress={onCaretaker} hitSlop={8} style={styles.caretaker} accessibilityRole="button">
+            <Text style={styles.caretakerText}>{t("caretaker.onboardingSwitch")}</Text>
+          </Pressable>
+        </>
+      }
+    >
+      <LetterAvatar letter={letter} colors={colors} />
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={onChangeName}
+        placeholder={t("petForm.namePlaceholder")}
+        placeholderTextColor={colors.quietGray}
+        maxLength={NAME_MAX}
+        autoFocus
+        returnKeyType="next"
+        onSubmitEditing={() => canContinue && onNext()}
+      />
+      {isNicknameOpen ? (
+        <TextInput
+          style={[styles.input, styles.inputSmall]}
+          value={nickname}
+          onChangeText={onChangeNickname}
+          placeholder={t("petForm.nicknamePlaceholder")}
+          placeholderTextColor={colors.quietGray}
+          maxLength={NAME_MAX}
+        />
+      ) : (
+        <Pressable onPress={() => setIsNicknameOpen(true)} hitSlop={8} accessibilityRole="button">
+          <Text style={styles.addLink}>{t("onboarding.addNickname")}</Text>
+        </Pressable>
+      )}
+    </StepScaffold>
+  );
+}
+
+function LetterAvatar({ letter, colors }: { letter: string; colors: ColorTokens }) {
+  const isReducedMotion = useReducedMotion();
+  const [bump] = useState(() => new Animated.Value(1));
+  const previous = useRef(letter);
+
+  useEffect(() => {
+    if (previous.current === letter) return;
+    previous.current = letter;
+    if (isReducedMotion) return;
+    bump.setValue(1.1);
+    Animated.spring(bump, { toValue: 1, friction: 4, tension: 160, useNativeDriver: true }).start();
+  }, [letter, isReducedMotion, bump]);
+
+  return (
+    <Animated.View style={[avatarStyles.circle, { backgroundColor: colors.marigoldOrange, transform: [{ scale: bump }] }]}>
+      <Text style={avatarStyles.letter}>{letter}</Text>
+    </Animated.View>
+  );
+}
+
+const avatarStyles = StyleSheet.create({
+  circle: { width: 104, height: 104, borderRadius: 52, alignSelf: "center", alignItems: "center", justifyContent: "center", marginBottom: 16 },
+  letter: { fontFamily: fontFamily.extraBold, fontSize: 44, color: "#ffffff" },
+});
+
+function makeStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    input: {
+      height: 58,
+      borderRadius: 16,
+      borderWidth: 1.5,
+      borderColor: colors.marigoldOrange,
+      backgroundColor: colors.pureWhite,
+      paddingHorizontal: 16,
+      fontFamily: fontFamily.semiBold,
+      fontSize: 20,
+      color: colors.ink,
+    },
+    inputSmall: { height: 50, fontSize: 16, borderColor: colors.hairlineGray },
+    addLink: { ...typography.body, fontFamily: fontFamily.semiBold, color: colors.marigoldDeep, marginTop: 2 },
+    cta: { height: 54, borderRadius: 15 },
+    caretaker: { alignSelf: "center", paddingVertical: 12 },
+    caretakerText: { ...typography.body, fontFamily: fontFamily.semiBold, color: colors.quietGray },
+  });
+}

mobile/src/components/onboarding/flow/OnboardingTopBar.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useMemo, useState } from "react";
+import { Animated, Pressable, StyleSheet, View } from "react-native";
+import { useTranslation } from "react-i18next";
+import { ChevronLeft, X } from "lucide-react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { useReducedMotion } from "../../../hooks/useReducedMotion";
+import type { ColorTokens } from "../../../theme/tokens";
+
+const FILL_MS = 450;
+
+type Props = {
+  /** Number of progress segments. */
+  count: number;
+  /** How many segments are filled (current step included). */
+  filled: number;
+  onBack?: () => void;
+  onClose: () => void;
+};
+
+/** Back arrow, segmented progress and close button above the onboarding steps. */
+export function OnboardingTopBar({ count, filled, onBack, onClose }: Props) {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+
+  return (
+    <View style={styles.bar}>
+      <Pressable
+        onPress={onBack}
+        disabled={!onBack}
+        hitSlop={10}
+        style={[styles.iconButton, !onBack && styles.hidden]}
+        accessibilityRole="button"
+        accessibilityLabel={t("onboarding.back")}
+      >
+        <ChevronLeft color={colors.ink} size={24} />
+      </Pressable>
+      <View style={styles.segments} accessibilityRole="progressbar" accessibilityValue={{ min: 0, max: count, now: filled }}>
+        {Array.from({ length: count }, (_, i) => (
+          <Segment key={i} isFilled={i < filled} colors={colors} />
+        ))}
+      </View>
+      <Pressable
+        onPress={onClose}
+        hitSlop={10}
+        style={styles.iconButton}
+        accessibilityRole="button"
+        accessibilityLabel={t("onboarding.close")}
+      >
+        <X color={colors.quietGray} size={22} />
+      </Pressable>
+    </View>
+  );
+}
+
+function Segment({ isFilled, colors }: { isFilled: boolean; colors: ColorTokens }) {
+  const isReducedMotion = useReducedMotion();
+  const [fill] = useState(() => new Animated.Value(isFilled ? 1 : 0));
+
+  useEffect(() => {
+    if (isReducedMotion) {
+      fill.setValue(isFilled ? 1 : 0);
+      return;
+    }
+    // width can't run on the native driver.
+    const animation = Animated.timing(fill, { toValue: isFilled ? 1 : 0, duration: FILL_MS, useNativeDriver: false });
+    animation.start();
+    return () => animation.stop();
+  }, [isFilled, isReducedMotion, fill]);
+
+  const width = fill.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] });
+  return (
+    <View style={[segmentStyles.track, { backgroundColor: colors.hairlineGray }]}>
+      <Animated.View style={[segmentStyles.fill, { width, backgroundColor: colors.marigoldOrange }]} />
+    </View>
+  );
+}
+
+const segmentStyles = StyleSheet.create({
+  track: { flex: 1, height: 5, borderRadius: 3, overflow: "hidden" },
+  fill: { height: 5, borderRadius: 3 },
+});
+
+function makeStyles(colors: ColorTokens) {
+  return StyleSheet.create({
+    bar: { flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 16, height: 48, backgroundColor: colors.porchWhite },
+    iconButton: { width: 36, height: 36, alignItems: "center", justifyContent: "center" },
+    hidden: { opacity: 0 },
+    segments: { flex: 1, flexDirection: "row", gap: 5 },
+  });
+}

mobile/src/components/onboarding/flow/SpeciesStep.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from "react";
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
+import { useTRPC } from "../../../api/trpc";
+import { useTheme } from "../../../context/ThemeContext";
+import { Button } from "../../Button";
+import { BreedPicker } from "../../pet/BreedPicker";
+import { Reveal } from "../../Reveal";
+import type { PickerOption } from "../../OptionPicker";
+import { fontFamily, getTypography, type ColorTokens } from "../../../theme/tokens";
+import { StepScaffold } from "./StepScaffold";
+
+type Props = {
+  petName: string;
+  speciesId: string | null;
+  breedName: string | null;
+  onSelectSpecies: (option: PickerOption) => void;
+  onSelectBreed: (option: PickerOption) => void;
+  onNext: () => void;
+};
+
+/** Step "Was für ein Tier ist {name}?" — species as chips (data-driven), breed appears once a species is picked. */
+export function SpeciesStep({ petName, speciesId, breedName, onSelectSpecies, onSelectBreed, onNext }: Props) {
+  const { t, i18n } = useTranslation();
+  const trpc = useTRPC();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const { data: species = [], isLoading } = useQuery(trpc.pets.listSpecies.queryOptions({ locale: i18n.language }));
+  const sorted = useMemo(() => [...species].sort((a, b) => a.name.localeCompare(b.name, i18n.language)), [species, i18n.language]);
+
+  return (
+    <StepScaffold
+      title={t("onboarding.speciesTitle", { name: petName })}
+      highlight={petName}
+      subtitle={t("onboarding.speciesSubtitle")}
+      footer={<Button title={t("common.continue")} disabled={!speciesId} onPress={onNext} style={styles.cta} />}
+    >
+      {isLoading ? (
+        <ActivityIndicator color={colors.marigoldOrange} />
+      ) : (
+        <View style={styles.chips} accessibilityRole="radiogroup">
+          {sorted.map((option) => {
+            const isSelected = option.id === speciesId;
+            return (
+              <Pressable
+                key={option.id}
+                onPress={() => onSelectSpecies(option)}
+                style={({ pressed }) => [styles.chip, isSelected && styles.chipSelected, pressed && styles.chipPressed]}
+                accessibilityRole="radio"
+                accessibilityState={{ checked: isSelected }}
+              >
+                <Text style={[styles.chipText, isSelected && styles.chipTextSelected]}>{option.name}</Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      )}
+      {speciesId ? (
+        <Reveal index={0} style={styles.breed}>
+          <Text style={styles.breedLabel}>{t("onboarding.breedOptional")}</Text>
+          <BreedPicker speciesId={speciesId} selectedName={breedName} onSelect={onSelectBreed} />
+        </Reveal>
+      ) : null}
+    </StepScaffold>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    chips: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+    chip: {
+      paddingHorizontal: 14,
+      paddingVertical: 10,
+      borderRadius: 999,
+      borderWidth: 1.5,
+      borderColor: colors.hairlineGray,
+      backgroundColor: colors.pureWhite,
+    },
+    chipSelected: { backgroundColor: colors.marigoldOrange, borderColor: colors.marigoldOrange },
+    chipPressed: { transform: [{ scale: 0.94 }] },
+    chipText: { fontFamily: fontFamily.semiBold, fontSize: 14, color: colors.ink },
+    chipTextSelected: { color: "#ffffff" },
+    breed: { marginTop: 10, gap: 6 },
+    breedLabel: { ...typography.caption, color: colors.quietGray },
+    cta: { height: 54, borderRadius: 15 },
+  });
+}

mobile/src/components/onboarding/flow/StepScaffold.tsx

@@ -0,0 +1,53 @@
+import { useMemo, type ReactNode } from "react";
+import { ScrollView, StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../../context/ThemeContext";
+import { fontFamily, getTypography, type ColorTokens } from "../../../theme/tokens";
+
+type Props = {
+  title: string;
+  /** Part of the title shown in marigold (the pet's name, "PawFeed"). */
+  highlight?: string;
+  subtitle?: string;
+  children?: ReactNode;
+  /** Pinned below the content: the step's main button(s). */
+  footer: ReactNode;
+};
+
+/** Shared layout of every onboarding step: big title, subtitle, content, buttons at the bottom. */
+export function StepScaffold({ title, highlight, subtitle, children, footer }: Props) {
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+
+  return (
+    <ScrollView contentContainerStyle={styles.container} keyboardShouldPersistTaps="handled">
+      <Text style={styles.title}>{renderHighlighted(title, highlight, styles.highlight)}</Text>
+      {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
+      <View style={styles.content}>{children}</View>
+      <View style={styles.footer}>{footer}</View>
+    </ScrollView>
+  );
+}
+
+function renderHighlighted(title: string, highlight: string | undefined, style: object): ReactNode {
+  const at = highlight ? title.indexOf(highlight) : -1;
+  if (!highlight || at < 0) return title;
+  return (
+    <>
+      {title.slice(0, at)}
+      <Text style={style}>{highlight}</Text>
+      {title.slice(at + highlight.length)}
+    </>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    container: { flexGrow: 1, paddingHorizontal: 26, paddingTop: 18, paddingBottom: 16 },
+    title: { fontFamily: fontFamily.extraBold, fontSize: 28, lineHeight: 34, letterSpacing: -0.6, color: colors.ink },
+    highlight: { color: colors.marigoldOrange },
+    subtitle: { ...typography.body, fontSize: 15, color: colors.quietGray, marginTop: 8 },
+    content: { flexGrow: 1, marginTop: 22, gap: 10 },
+    footer: { marginTop: 20, gap: 4 },
+  });
+}

mobile/src/components/onboarding/flow/StepSlide.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { Animated, Easing, StyleSheet } from "react-native";
+import { useReducedMotion } from "../../../hooks/useReducedMotion";
+
+const SLIDE_PX = 48;
+const DURATION_MS = 380;
+
+type Props = {
+  /** 1 = came from the previous step (enter from the right), -1 = went back. */
+  direction: 1 | -1;
+  children: ReactNode;
+};
+
+/**
+ * Slides a step in on mount. The parent keys it by step, so each step change
+ * mounts a fresh StepSlide and plays the entrance once.
+ */
+export function StepSlide({ direction, children }: Props) {
+  const isReducedMotion = useReducedMotion();
+  const [progress] = useState(() => new Animated.Value(0));
+
+  useEffect(() => {
+    if (isReducedMotion) {
+      progress.setValue(1);
+      return;
+    }
+    const animation = Animated.timing(progress, {
+      toValue: 1,
+      duration: DURATION_MS,
+      easing: Easing.bezier(0.2, 0.8, 0.2, 1),
+      useNativeDriver: true,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [isReducedMotion, progress]);
+
+  const translateX = progress.interpolate({ inputRange: [0, 1], outputRange: [SLIDE_PX * direction, 0] });
+  return <Animated.View style={[styles.fill, { opacity: progress, transform: [{ translateX }] }]}>{children}</Animated.View>;
+}
+
+const styles = StyleSheet.create({ fill: { flex: 1 } });

mobile/src/components/onboarding/flow/WelcomeStep.tsx

@@ -0,0 +1,183 @@
+import { useMemo, useState } from "react";
+import { Linking, Pressable, StyleSheet, Text, View } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "@tanstack/react-query";
+import { Check, Heart, PawPrint, ShieldCheck, type LucideIcon } from "lucide-react-native";
+import { useTRPC } from "../../../api/trpc";
+import { env } from "../../../lib/env";
+import { useTheme } from "../../../context/ThemeContext";
+import { Button } from "../../Button";
+import { Reveal } from "../../Reveal";
+import { getTypography, type ColorTokens } from "../../../theme/tokens";
+import { StepScaffold } from "./StepScaffold";
+
+const RULES: { icon: LucideIcon; key: "rule1" | "rule2" | "rule3" }[] = [
+  { icon: Heart, key: "rule1" },
+  { icon: PawPrint, key: "rule2" },
+  { icon: ShieldCheck, key: "rule3" },
+];
+
+type Props = {
+  /** Terms/privacy have versions this owner hasn't acknowledged yet. */
+  needsLegal: boolean;
+  /** The two first-pet declarations (content rights, data processing) are missing. */
+  needsConsent: boolean;
+  onContinue: () => void;
+};
+
+/**
+ * Replaces the former OnboardingGuidelines + UploadConsent screens. The
+ * rules are three fixed cards (app i18n): legal.getPendingUpdate returns the
+ * whole changelog for a new owner, which read as a wall of "we updated our
+ * privacy policy" notes instead of community rules. Acknowledging still goes
+ * through legal.acknowledge; both declarations stay separate, explicit
+ * checkboxes with their full text (Gitea #3).
+ */
+export function WelcomeStep({ needsLegal, needsConsent, onContinue }: Props) {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const trpc = useTRPC();
+  const [hasContentRights, setHasContentRights] = useState(false);
+  const [hasDataConsent, setHasDataConsent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const acknowledgeLegal = useMutation(trpc.legal.acknowledge.mutationOptions());
+  const acknowledgeConsent = useMutation(trpc.legal.acknowledgeUploadConsent.mutationOptions());
+  const isSaving = acknowledgeLegal.isPending || acknowledgeConsent.isPending;
+  const canContinue = !needsConsent || (hasContentRights && hasDataConsent);
+
+  const handleContinue = async () => {
+    setError(null);
+    try {
+      if (needsLegal) await acknowledgeLegal.mutateAsync();
+      if (needsConsent) await acknowledgeConsent.mutateAsync();
+      // Cache is refreshed when the onboarding is left (pet.tsx), not here — see there why.
+      onContinue();
+    } catch {
+      setError(t("onboarding.saveError"));
+    }
+  };
+
+  return (
+    <StepScaffold
+      title={t("onboarding.welcomeTitle")}
+      highlight="PawFeed"
+      subtitle={t("onboarding.welcomeSubtitle")}
+      footer={
+        <>
+          {error ? <Text style={styles.error}>{error}</Text> : null}
+          <Button
+            title={needsConsent ? t("onboarding.welcomeContinueConsent") : t("onboarding.welcomeContinue")}
+            disabled={!canContinue}
+            isLoading={isSaving}
+            onPress={handleContinue}
+            style={styles.cta}
+          />
+        </>
+      }
+    >
+      {RULES.map(({ icon: Icon, key }, i) => (
+        <Reveal key={key} index={i}>
+          <View style={styles.rule}>
+            <View style={styles.ruleIcon}>
+              <Icon color={colors.marigoldDeep} size={18} />
+            </View>
+            <View style={styles.ruleText}>
+              <Text style={styles.ruleTitle}>{t(`onboarding.${key}Title`)}</Text>
+              <Text style={styles.ruleBody}>{t(`onboarding.${key}Body`)}</Text>
+            </View>
+          </View>
+        </Reveal>
+      ))}
+
+      <View style={styles.links}>
+        <Pressable onPress={() => Linking.openURL(`${env.apiUrl}/nutzungsbedingungen`)} hitSlop={8}>
+          <Text style={styles.link}>{t("onboarding.termsShort")}</Text>
+        </Pressable>
+        <Pressable onPress={() => Linking.openURL(`${env.apiUrl}/datenschutz`)} hitSlop={8}>
+          <Text style={styles.link}>{t("onboarding.privacyShort")}</Text>
+        </Pressable>
+      </View>
+
+      {needsConsent ? (
+        <View style={styles.consents}>
+          <ConsentCheck
+            isChecked={hasContentRights}
+            onToggle={() => setHasContentRights((v) => !v)}
+            label={t("onboarding.contentRightsLabel")}
+          />
+          <ConsentCheck
+            isChecked={hasDataConsent}
+            onToggle={() => setHasDataConsent((v) => !v)}
+            label={t("onboarding.dataProcessingLabel")}
+          />
+        </View>
+      ) : null}
+    </StepScaffold>
+  );
+}
+
+function ConsentCheck({ isChecked, onToggle, label }: { isChecked: boolean; onToggle: () => void; label: string }) {
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  return (
+    <Pressable
+      style={styles.checkRow}
+      onPress={onToggle}
+      hitSlop={4}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: isChecked }}
+    >
+      <View style={[styles.checkbox, isChecked && styles.checkboxChecked]}>
+        {isChecked ? <Check color="#ffffff" size={14} strokeWidth={3} /> : null}
+      </View>
+      <Text style={styles.checkLabel}>{label}</Text>
+    </Pressable>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    rule: {
+      flexDirection: "row",
+      gap: 12,
+      padding: 12,
+      borderRadius: 16,
+      borderWidth: 1,
+      borderColor: colors.hairlineGray,
+      backgroundColor: colors.pureWhite,
+    },
+    ruleIcon: {
+      width: 36,
+      height: 36,
+      borderRadius: 11,
+      backgroundColor: colors.marigoldTint,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    ruleText: { flex: 1 },
+    ruleTitle: { ...typography.body, fontFamily: typography.title.fontFamily, fontSize: 14.5 },
+    ruleBody: { ...typography.body, fontSize: 13, lineHeight: 18, color: colors.quietGray },
+    links: { flexDirection: "row", flexWrap: "wrap", gap: 16, marginTop: 2 },
+    link: { ...typography.caption, color: colors.marigoldDeep },
+    consents: { gap: 12, marginTop: 8 },
+    checkRow: { flexDirection: "row", gap: 10 },
+    checkbox: {
+      width: 22,
+      height: 22,
+      borderRadius: 7,
+      borderWidth: 1.5,
+      borderColor: colors.hairlineGray,
+      backgroundColor: colors.pureWhite,
+      alignItems: "center",
+      justifyContent: "center",
+      marginTop: 1,
+    },
+    checkboxChecked: { backgroundColor: colors.marigoldOrange, borderColor: colors.marigoldOrange },
+    checkLabel: { ...typography.body, flex: 1, fontSize: 12.5, lineHeight: 17 },
+    error: { ...typography.body, color: colors.alertRed, marginBottom: 6 },
+    cta: { height: 54, borderRadius: 15 },
+  });
+}

mobile/src/components/pet/MemorialSettings.tsx

@@ -0,0 +1,115 @@
+import { useMemo, useState } from "react";
+import { View, Text, Alert, StyleSheet } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Ribbon } from "lucide-react-native";
+import { useTRPC } from "../../api/trpc";
+import { useTheme } from "../../context/ThemeContext";
+import { DateField } from "../DateField";
+import { Button } from "../Button";
+import { getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
+import { displayDateToIso, isoToDisplayDate, todayAsDisplayDate } from "../../lib/date-format";
+
+type Props = {
+  petId: string;
+  petName: string;
+  deceasedAt: Date | string | null;
+};
+
+/** YYYY-MM-DD eines @db.Date-Werts (kommt als UTC-Mitternacht). */
+function toIso(value: Date | string | null): string | null {
+  return value ? new Date(value).toISOString().slice(0, 10) : null;
+}
+
+/**
+ * Gedenkmodus „In Erinnerung“ — Port von web src/components/pet/MemorialSettings.tsx.
+ * Datum setzen (mit Bestätigung, Follower werden einmalig still informiert),
+ * korrigieren oder beenden. Server: pets.setDeceased.
+ */
+export function MemorialSettings({ petId, petName, deceasedAt }: Props) {
+  const { t } = useTranslation();
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const savedIso = toIso(deceasedAt);
+  const isDeceased = savedIso != null;
+  const [date, setDate] = useState(() => (savedIso ? isoToDisplayDate(savedIso) : todayAsDisplayDate()));
+  const [error, setError] = useState<string | null>(null);
+
+  const mutation = useMutation(
+    trpc.pets.setDeceased.mutationOptions({
+      onSuccess: (_data, variables) => {
+        void queryClient.invalidateQueries();
+        Alert.alert(variables.deceasedAt ? t("inMemory.saved") : t("inMemory.removed"));
+      },
+      onError: () => Alert.alert(t("inMemory.saveFailed")),
+    })
+  );
+
+  /** Gültiges, nicht zukünftiges Datum als YYYY-MM-DD — sonst Fehlermeldung. */
+  function validIso(): string | null {
+    const iso = displayDateToIso(date);
+    const todayIso = displayDateToIso(todayAsDisplayDate());
+    if (!iso || (todayIso && iso > todayIso)) {
+      setError(t("inMemory.invalidDate"));
+      return null;
+    }
+    setError(null);
+    return iso;
+  }
+
+  function activate() {
+    const iso = validIso();
+    if (!iso) return;
+    Alert.alert(t("inMemory.confirmTitle", { name: petName }), t("inMemory.confirmDescription", { name: petName }), [
+      { text: t("inMemory.cancel"), style: "cancel" },
+      { text: t("inMemory.confirm"), onPress: () => mutation.mutate({ petId, deceasedAt: iso }) },
+    ]);
+  }
+
+  function saveDate() {
+    const iso = validIso();
+    if (iso && iso !== savedIso) mutation.mutate({ petId, deceasedAt: iso });
+  }
+
+  return (
+    <View style={styles.section}>
+      <View style={styles.headingRow}>
+        <Ribbon size={16} color={colors.ink} />
+        <Text style={styles.heading}>{t("inMemory.settingsHeading")}</Text>
+      </View>
+      <Text style={styles.hint}>
+        {isDeceased ? t("inMemory.activeHint", { name: petName }) : t("inMemory.settingsHint")}
+      </Text>
+      <Text style={styles.label}>{t("inMemory.dateLabel")}</Text>
+      <DateField placeholder={t("health.weightDatePlaceholder")} value={date} onChangeText={setDate} />
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+      {isDeceased ? (
+        <>
+          <Button title={t("inMemory.saveDate")} variant="outline" disabled={mutation.isPending} onPress={saveDate} />
+          <Button
+            title={t("inMemory.remove")}
+            variant="outline"
+            disabled={mutation.isPending}
+            onPress={() => mutation.mutate({ petId, deceasedAt: null })}
+          />
+        </>
+      ) : (
+        <Button title={t("inMemory.activate")} variant="outline" disabled={mutation.isPending} onPress={activate} />
+      )}
+    </View>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography: Typography = getTypography(colors);
+  return StyleSheet.create({
+    section: { marginTop: 24, gap: 8 },
+    headingRow: { flexDirection: "row", alignItems: "center", gap: 6 },
+    heading: { ...typography.title, fontSize: 16 },
+    hint: { ...typography.caption },
+    label: { ...typography.caption, marginTop: 4 },
+    error: { ...typography.body, color: colors.alertRed },
+  });
+}

mobile/src/components/pet/PrivacySettings.tsx

@@ -0,0 +1,142 @@
+import { useMemo } from "react";
+import { View, Text, Pressable, Alert, StyleSheet } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Check } from "lucide-react-native";
+import { useTRPC } from "../../api/trpc";
+import { useTheme } from "../../context/ThemeContext";
+import { radii, getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
+
+type DmPolicy = "EVERYONE" | "FOLLOWERS_ONLY";
+type FollowerVisibility = "EVERYONE" | "FOLLOWERS_ONLY" | "NOBODY";
+
+type Props = {
+  petId: string;
+  petName: string;
+  dmPolicy: DmPolicy;
+  followerVisibility: FollowerVisibility;
+};
+
+/**
+ * Port of the "Privatsphäre" block from web's src/app/(app)/pets/[petId]/edit/page.tsx
+ * (found.md: only editable on web so far). Each choice is saved immediately via
+ * pets.update — no separate save button, so it can't get lost in the long form.
+ */
+export function PrivacySettings({ petId, petName, dmPolicy, followerVisibility }: Props) {
+  const { t } = useTranslation();
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+
+  const update = useMutation(
+    trpc.pets.update.mutationOptions({
+      onSuccess: () => queryClient.invalidateQueries({ queryKey: trpc.pets.byId.queryOptions({ petId }).queryKey }),
+      onError: () => Alert.alert(t("privacy.saveFailed")),
+    })
+  );
+
+  const dmOptions: { value: DmPolicy; label: string }[] = [
+    { value: "EVERYONE", label: t("privacy.everyone") },
+    { value: "FOLLOWERS_ONLY", label: t("privacy.onlyFollowedPets") },
+  ];
+  const followerOptions: { value: FollowerVisibility; label: string }[] = [
+    { value: "EVERYONE", label: t("privacy.everyone") },
+    { value: "FOLLOWERS_ONLY", label: t("privacy.onlyMyFollowers") },
+    { value: "NOBODY", label: t("privacy.onlyMe") },
+  ];
+  const followerHint = {
+    EVERYONE: t("privacy.followerEveryoneHint", { name: petName }),
+    FOLLOWERS_ONLY: t("privacy.followerFollowersOnlyHint", { name: petName }),
+    NOBODY: t("privacy.followerNobodyHint", { name: petName }),
+  }[followerVisibility];
+
+  return (
+    <View style={styles.section}>
+      <Text style={styles.heading}>{t("privacy.heading")}</Text>
+
+      <Text style={styles.question}>{t("privacy.whoCanMessage", { name: petName })}</Text>
+      <OptionGroup
+        options={dmOptions}
+        value={dmPolicy}
+        disabled={update.isPending}
+        onChange={(value) => update.mutate({ petId, dmPolicy: value })}
+        styles={styles}
+        colors={colors}
+      />
+      <Text style={styles.hint}>
+        {dmPolicy === "FOLLOWERS_ONLY" ? t("privacy.dmFollowersOnlyHint") : t("privacy.dmEveryoneHint")}
+      </Text>
+
+      <Text style={styles.question}>{t("privacy.whoCanSeeFollowers", { name: petName })}</Text>
+      <OptionGroup
+        options={followerOptions}
+        value={followerVisibility}
+        disabled={update.isPending}
+        onChange={(value) => update.mutate({ petId, followerVisibility: value })}
+        styles={styles}
+        colors={colors}
+      />
+      <Text style={styles.hint}>{followerHint}</Text>
+    </View>
+  );
+}
+
+function OptionGroup<T extends string>({
+  options,
+  value,
+  disabled,
+  onChange,
+  styles,
+  colors,
+}: {
+  options: { value: T; label: string }[];
+  value: T;
+  disabled: boolean;
+  onChange: (value: T) => void;
+  styles: ReturnType<typeof makeStyles>;
+  colors: ColorTokens;
+}) {
+  return (
+    <View style={styles.group} accessibilityRole="radiogroup">
+      {options.map((option, index) => {
+        const isSelected = option.value === value;
+        return (
+          <Pressable
+            key={option.value}
+            style={[styles.option, index > 0 && styles.optionDivider]}
+            onPress={() => !isSelected && onChange(option.value)}
+            disabled={disabled}
+            accessibilityRole="radio"
+            accessibilityState={{ checked: isSelected, disabled }}
+          >
+            <Text style={[styles.optionText, isSelected && styles.optionTextSelected]}>{option.label}</Text>
+            {isSelected && <Check color={colors.marigoldOrange} size={18} />}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography: Typography = getTypography(colors);
+  return StyleSheet.create({
+    section: { marginTop: 24, gap: 8 },
+    heading: { ...typography.title, fontSize: 16 },
+    question: { ...typography.body, fontFamily: typography.title.fontFamily, marginTop: 8 },
+    group: { borderWidth: 1, borderColor: colors.hairlineGray, borderRadius: radii.lg, overflow: "hidden" },
+    option: {
+      minHeight: 48,
+      paddingHorizontal: 14,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      backgroundColor: colors.pureWhite,
+    },
+    optionDivider: { borderTopWidth: 1, borderTopColor: colors.hairlineGray },
+    optionText: { ...typography.body },
+    optionTextSelected: { fontFamily: typography.title.fontFamily, color: colors.marigoldOrange },
+    hint: { ...typography.caption },
+  });
+}

mobile/src/components/referrals/InviteCard.tsx

@@ -0,0 +1,242 @@
+import { useEffect, useMemo, useState } from "react";
+import { Animated, Easing, Pressable, StyleSheet, Text, View } from "react-native";
+import { useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronRight, PawPrint, Share2 } from "lucide-react-native";
+import { useTRPC } from "../../api/trpc";
+import { useTheme } from "../../context/ThemeContext";
+import { useReducedMotion } from "../../hooks/useReducedMotion";
+import { useReferralRanks, type ReferralRankView } from "../../hooks/useReferralRanks";
+import { ReferralIcon } from "../../lib/referral-icons";
+import { shareReferralLink } from "../../lib/referral-share";
+import { Reveal } from "../Reveal";
+import { fontFamily, getTypography, type ColorTokens } from "../../theme/tokens";
+
+const FILL_DELAY_MS = 350;
+const FILL_MS = 900;
+const BREATHE_MS = 1200;
+
+type Props = {
+  /** Settings shows a "Ränge" button to the detail page; the detail page itself doesn't. */
+  showRanksLink?: boolean;
+};
+
+/**
+ * Einladungskarte (Einstellungen und Kopf von /invite): aktueller Rang (oder
+ * der erste, noch offene, gestrichelt), eigener Code, Fortschritt bis zum
+ * nächsten Rang und Teilen direkt aus der Karte.
+ */
+export function InviteCard({ showRanksLink = false }: Props) {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const trpc = useTRPC();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const { ranks } = useReferralRanks();
+  const { data } = useQuery(trpc.referrals.me.queryOptions());
+
+  if (!data) return <View style={[styles.card, styles.placeholder]} />;
+
+  const activeRanks = ranks.filter((rank) => rank.isActive).sort((a, b) => a.threshold - b.threshold);
+  const achieved = new Set(data.achievedRankIds);
+  const current = activeRanks.filter((rank) => achieved.has(rank.id)).at(-1) ?? null;
+  const next = activeRanks.find((rank) => rank.id === data.nextRankId) ?? null;
+  const shownRank = current ?? next;
+
+  const heading = current ? current.name : next ? t("referrals.cardFirstRankWaiting") : t("referrals.title");
+  const subline = current
+    ? `${t("referrals.cardYourRank")} · ${current.description}`
+    : next
+      ? `${next.name} · ${next.description}`
+      : null;
+
+  let progressText: string;
+  if (!next) progressText = t("referrals.allRanksReached");
+  else if (!current && data.qualifiedCount === 0) progressText = t("referrals.cardFirstInvite", { count: next.threshold });
+  else progressText = t("referrals.cardProgress", { done: data.qualifiedCount, count: next.threshold, name: next.name });
+
+  const progress = next ? Math.min(1, data.qualifiedCount / next.threshold) : 1;
+
+  return (
+    <Reveal index={0}>
+      <View style={styles.card}>
+        <PawPrint style={styles.watermark} color={colors.marigoldOrange} size={130} />
+        <View style={styles.top}>
+          {shownRank ? <RankDot rank={shownRank} isPending={!current} /> : null}
+          <View style={styles.topText}>
+            <Text style={styles.heading}>{heading}</Text>
+            {subline ? (
+              <Text style={styles.subline} numberOfLines={2}>
+                {subline}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+
+        <View style={styles.codeBox}>
+          <Text style={styles.codeLabel}>{t("referrals.cardCodeLabel")}</Text>
+          {/* selectable: long-press copy without a clipboard module (would need a native build). */}
+          <Text style={styles.code} selectable>
+            {data.code}
+          </Text>
+        </View>
+
+        <ProgressBar progress={progress} colors={colors} />
+        <Text style={styles.progressText}>{progressText}</Text>
+
+        <View style={styles.actions}>
+          <Pressable
+            style={({ pressed }) => [styles.share, pressed && styles.pressed]}
+            onPress={() => shareReferralLink(data.code, t)}
+            android_ripple={{ color: "rgba(255,255,255,0.25)" }}
+            accessibilityRole="button"
+          >
+            <Share2 size={18} color="#ffffff" />
+            <Text style={styles.shareText}>{t("referrals.share")}</Text>
+          </Pressable>
+          {showRanksLink ? (
+            <Pressable
+              style={({ pressed }) => [styles.more, pressed && styles.pressed]}
+              onPress={() => router.push("/invite")}
+              android_ripple={{ color: colors.marigoldTint }}
+              accessibilityRole="button"
+            >
+              <Text style={styles.moreText}>{t("referrals.cardRanks")}</Text>
+              <ChevronRight size={16} color={colors.ink} />
+            </Pressable>
+          ) : null}
+        </View>
+      </View>
+    </Reveal>
+  );
+}
+
+function RankDot({ rank, isPending }: { rank: ReferralRankView; isPending: boolean }) {
+  const isReducedMotion = useReducedMotion();
+  const [scale] = useState(() => new Animated.Value(1));
+
+  useEffect(() => {
+    if (!isPending || isReducedMotion) return;
+    const breathe = Animated.loop(
+      Animated.sequence([
+        Animated.timing(scale, { toValue: 1.08, duration: BREATHE_MS, useNativeDriver: true }),
+        Animated.timing(scale, { toValue: 1, duration: BREATHE_MS, useNativeDriver: true }),
+      ]),
+    );
+    breathe.start();
+    return () => breathe.stop();
+  }, [isPending, isReducedMotion, scale]);
+
+  return (
+    <Animated.View
+      style={[
+        dotStyles.dot,
+        isPending
+          ? { borderColor: rank.color, borderStyle: "dashed", borderWidth: 2 }
+          : { backgroundColor: rank.color },
+        { transform: [{ scale }] },
+      ]}
+    >
+      <ReferralIcon icon={rank.icon} size={20} color={isPending ? rank.color : "#ffffff"} />
+    </Animated.View>
+  );
+}
+
+function ProgressBar({ progress, colors }: { progress: number; colors: ColorTokens }) {
+  const isReducedMotion = useReducedMotion();
+  const [fill] = useState(() => new Animated.Value(0));
+
+  useEffect(() => {
+    if (isReducedMotion) {
+      fill.setValue(progress);
+      return;
+    }
+    // width can't run on the native driver.
+    const animation = Animated.timing(fill, {
+      toValue: progress,
+      duration: FILL_MS,
+      delay: FILL_DELAY_MS,
+      easing: Easing.bezier(0.2, 0.8, 0.2, 1),
+      useNativeDriver: false,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [progress, isReducedMotion, fill]);
+
+  const width = fill.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] });
+  return (
+    <View style={[barStyles.track, { backgroundColor: colors.whisperGray }]}>
+      <Animated.View style={[barStyles.fill, { width, backgroundColor: colors.marigoldOrange }]} />
+    </View>
+  );
+}
+
+const dotStyles = StyleSheet.create({
+  dot: { width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center" },
+});
+
+const barStyles = StyleSheet.create({
+  track: { height: 8, borderRadius: 4, overflow: "hidden" },
+  fill: { height: 8, borderRadius: 4 },
+});
+
+function makeStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    card: {
+      gap: 12,
+      padding: 18,
+      borderRadius: 22,
+      borderWidth: 1,
+      borderColor: colors.marigoldTint,
+      backgroundColor: colors.pureWhite,
+      overflow: "hidden",
+    },
+    placeholder: { height: 236 },
+    watermark: { position: "absolute", right: -26, top: -18, opacity: 0.08, transform: [{ rotate: "18deg" }] },
+    top: { flexDirection: "row", alignItems: "center", gap: 12 },
+    topText: { flex: 1 },
+    heading: { ...typography.title, fontSize: 16, lineHeight: 22 },
+    subline: { ...typography.body, fontSize: 12.5, lineHeight: 17, color: colors.quietGray },
+    codeBox: {
+      paddingVertical: 10,
+      paddingHorizontal: 14,
+      borderRadius: 14,
+      borderWidth: 1,
+      borderStyle: "dashed",
+      borderColor: colors.marigoldOrange,
+      backgroundColor: colors.porchWhite,
+    },
+    codeLabel: { ...typography.label, fontSize: 10.5, letterSpacing: 1 },
+    code: { fontFamily: fontFamily.extraBold, fontSize: 20, letterSpacing: 1.6, color: colors.marigoldDeep, marginTop: 2 },
+    progressText: { ...typography.body, fontSize: 13, color: colors.quietGray, marginTop: -4 },
+    actions: { flexDirection: "row", gap: 8 },
+    share: {
+      flex: 1,
+      height: 46,
+      borderRadius: 13,
+      backgroundColor: colors.marigoldOrange,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      overflow: "hidden",
+    },
+    shareText: { fontFamily: fontFamily.bold, fontSize: 15, color: "#ffffff" },
+    more: {
+      height: 46,
+      paddingHorizontal: 14,
+      borderRadius: 13,
+      borderWidth: 1,
+      borderColor: colors.hairlineGray,
+      backgroundColor: colors.pureWhite,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 4,
+      overflow: "hidden",
+    },
+    moreText: { fontFamily: fontFamily.semiBold, fontSize: 14, color: colors.ink },
+    pressed: { transform: [{ scale: 0.97 }] },
+  });
+}

mobile/src/components/referrals/RankLadder.tsx

@@ -0,0 +1,111 @@
+import { useMemo } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useTranslation } from "react-i18next";
+import { Check } from "lucide-react-native";
+import { useTheme } from "../../context/ThemeContext";
+import { ReferralIcon } from "../../lib/referral-icons";
+import type { ReferralRankView } from "../../hooks/useReferralRanks";
+import { fontFamily, getTypography, type ColorTokens } from "../../theme/tokens";
+
+const DOT = 38;
+
+type Props = {
+  ranks: ReferralRankView[];
+  achievedRankIds: ReadonlySet<string>;
+  qualifiedCount: number;
+  nextRankId: string | null;
+};
+
+/** "#rrggbb" + alpha → "#rrggbbaa"; other formats are returned unchanged. */
+function withAlpha(hex: string, alpha: number): string {
+  if (!/^#[0-9a-f]{6}$/i.test(hex)) return hex;
+  return `${hex}${Math.round(alpha * 255).toString(16).padStart(2, "0")}`;
+}
+
+/**
+ * All active ranks as a timeline: achieved ranks filled with a check, the
+ * next one highlighted ("Als Nächstes"), the rest as outlines with their
+ * threshold. Progress itself lives in InviteCard above.
+ */
+export function RankLadder({ ranks, achievedRankIds, qualifiedCount, nextRankId }: Props) {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const activeRanks = ranks.filter((rank) => rank.isActive).sort((a, b) => a.threshold - b.threshold);
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.headerRow}>
+        <Text style={styles.heading}>{t("referrals.ranksHeading")}</Text>
+        <Text style={styles.muted}>{t("referrals.countedInvites", { count: qualifiedCount })}</Text>
+      </View>
+
+      <View>
+        {activeRanks.map((rank, i) => {
+          const isAchieved = achievedRankIds.has(rank.id);
+          const isNext = rank.id === nextRankId;
+          const isLast = i === activeRanks.length - 1;
+          return (
+            <View key={rank.id} style={[styles.row, isNext && { backgroundColor: withAlpha(rank.color, 0.12) }]}>
+              {isLast ? null : <View style={[styles.connector, isAchieved && { backgroundColor: rank.color }]} />}
+              <View
+                style={[
+                  styles.dot,
+                  isAchieved ? { backgroundColor: rank.color } : { borderColor: rank.color, borderWidth: 2 },
+                  !isAchieved && !isNext && styles.dotFaded,
+                ]}
+              >
+                <ReferralIcon icon={rank.icon} size={18} color={isAchieved ? "#ffffff" : rank.color} />
+              </View>
+              <View style={styles.text}>
+                <Text style={[styles.name, !isAchieved && !isNext && styles.faded]}>{rank.name}</Text>
+                <Text style={styles.description}>{rank.description}</Text>
+              </View>
+              {isAchieved ? (
+                <View style={[styles.check, { backgroundColor: withAlpha(rank.color, 0.16) }]}>
+                  <Check size={14} color={rank.color} strokeWidth={3} accessibilityLabel={t("referrals.achieved")} />
+                </View>
+              ) : (
+                <View style={[styles.pill, isNext && { backgroundColor: rank.color }]}>
+                  <Text style={[styles.pillText, isNext && styles.pillTextNext]}>
+                    {isNext ? t("referrals.ladderNext") : t("referrals.ladderThreshold", { count: rank.threshold })}
+                  </Text>
+                </View>
+              )}
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    card: { gap: 12, padding: 18, borderRadius: 22, borderWidth: 1, borderColor: colors.hairlineGray, backgroundColor: colors.pureWhite },
+    headerRow: { flexDirection: "row", justifyContent: "space-between", alignItems: "baseline", gap: 8 },
+    heading: { ...typography.title, fontSize: 16 },
+    muted: { ...typography.body, fontSize: 13, color: colors.quietGray },
+    row: { flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 10, paddingHorizontal: 8, borderRadius: 16 },
+    // Line from this dot to the next one; dot centre = 8 (row padding) + DOT / 2.
+    connector: {
+      position: "absolute",
+      left: 8 + DOT / 2 - 1,
+      top: 10 + DOT,
+      bottom: -10,
+      width: 2,
+      backgroundColor: colors.hairlineGray,
+    },
+    dot: { width: DOT, height: DOT, borderRadius: DOT / 2, alignItems: "center", justifyContent: "center", backgroundColor: colors.pureWhite },
+    dotFaded: { opacity: 0.55 },
+    text: { flex: 1 },
+    name: { fontFamily: fontFamily.semiBold, fontSize: 15, color: colors.ink },
+    faded: { color: colors.quietGray },
+    description: { ...typography.body, fontSize: 12.5, lineHeight: 17, color: colors.quietGray },
+    check: { width: 26, height: 26, borderRadius: 13, alignItems: "center", justifyContent: "center" },
+    pill: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 999, backgroundColor: colors.whisperGray },
+    pillText: { fontFamily: fontFamily.semiBold, fontSize: 12, color: colors.quietGray },
+    pillTextNext: { color: "#ffffff" },
+  });
+}

mobile/src/components/referrals/RedeemCodeForm.tsx

@@ -0,0 +1,74 @@
+import { useMemo, useState } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTRPC } from "../../api/trpc";
+import { useTheme } from "../../context/ThemeContext";
+import { Button } from "../Button";
+import { TextField } from "../TextField";
+import { getTypography, type ColorTokens } from "../../theme/tokens";
+
+/** Fehler-Schlüssel aus REFERRAL_ERRORS (src/lib/referrals.ts im Web) → Übersetzungsschlüssel. */
+const ERROR_KEYS: Record<string, string> = {
+  REFERRAL_PROGRAM_PAUSED: "referrals.errorPaused",
+  REFERRAL_CODE_INVALID: "referrals.errorInvalid",
+  REFERRAL_OWN_CODE: "referrals.errorOwnCode",
+  REFERRAL_ALREADY_REDEEMED: "referrals.errorAlreadyRedeemed",
+  REFERRAL_WINDOW_EXPIRED: "referrals.errorWindowExpired",
+  REFERRAL_NO_PET: "referrals.errorNoPet",
+};
+
+/** Port of web's RedeemCodeForm — genutzt im Onboarding und auf dem Einladen-Bildschirm. */
+export function RedeemCodeForm({ onRedeemed }: { onRedeemed?: (inviterPetName: string | null) => void }) {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+  const trpc = useTRPC();
+  const qc = useQueryClient();
+  const [code, setCode] = useState("");
+  const [errorKey, setErrorKey] = useState<string | null>(null);
+
+  const redeem = useMutation(
+    trpc.referrals.redeem.mutationOptions({
+      onSuccess: (result) => {
+        setErrorKey(null);
+        void qc.invalidateQueries({ queryKey: trpc.referrals.me.queryKey() });
+        onRedeemed?.(result.inviterPetName);
+      },
+      onError: (err) => {
+        const isRateLimited = err.data?.code === "TOO_MANY_REQUESTS";
+        setErrorKey(isRateLimited ? "referrals.errorTooMany" : (ERROR_KEYS[err.message] ?? "referrals.errorGeneric"));
+      },
+    })
+  );
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{t("referrals.redeemLabel")}</Text>
+      <TextField
+        value={code}
+        onChangeText={(value) => setCode(value.toUpperCase())}
+        placeholder="BUBI-7K3M"
+        autoCapitalize="characters"
+        autoCorrect={false}
+        maxLength={32}
+        accessibilityLabel={t("referrals.redeemLabel")}
+      />
+      {errorKey && <Text style={styles.error}>{t(errorKey)}</Text>}
+      <Button
+        title={redeem.isPending ? "…" : t("referrals.redeemCta")}
+        disabled={!code.trim() || redeem.isPending}
+        onPress={() => redeem.mutate({ code: code.trim() })}
+      />
+    </View>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    container: { gap: 8 },
+    label: { ...typography.body, fontWeight: "600" },
+    error: { ...typography.body, fontSize: 13, color: colors.alertRed },
+  });
+}

mobile/src/components/referrals/ReferralAvatarRing.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { View } from "react-native";
+import { useOwnerRankWithPerk, type ReferralOwnerFields } from "../../hooks/useReferralRanks";
+
+const RING_WIDTH = 3;
+const RING_GAP = 2;
+
+/**
+ * Port of web's ReferralAvatarRing — Ring in der Rangfarbe um das Tierbild
+ * im Profilkopf (Vorteil PROFILE_RING). Nur im Profil, nicht im Feed: dort
+ * steht der Ring (PawRing) für Storys.
+ */
+export function ReferralAvatarRing({ owner, children }: { owner: ReferralOwnerFields | null | undefined; children: ReactNode }) {
+  const rank = useOwnerRankWithPerk(owner, "PROFILE_RING");
+  if (!rank) return <>{children}</>;
+  return (
+    <View style={{ borderWidth: RING_WIDTH, borderColor: rank.color, borderRadius: 999, padding: RING_GAP }}>{children}</View>
+  );
+}

mobile/src/components/settings/AppearanceSection.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import { Sun, Moon, SunMoon } from "lucide-react-native";
 import { useTheme } from "../../context/ThemeContext";
 import { getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
-import { sectionTitleStyle } from "./sectionTitleStyle";
 
 /**
  * Darstellung (light/dark/auto) toggle. Extracted from pets.tsx's former
@@ -49,7 +48,7 @@ export function AppearanceSection() {
 function makeStyles(colors: ColorTokens) {
   const typography: Typography = getTypography(colors);
   return StyleSheet.create({
-    sectionTitle: sectionTitleStyle(colors),
+    sectionTitle: { ...typography.caption, marginBottom: 10 },
     row: { flexDirection: "row", gap: 8 },
     option: {
       flex: 1,

mobile/src/components/settings/DeleteAccountSection.tsx

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+import { Pressable, Text, StyleSheet } from "react-native";
+import { useRouter } from "expo-router";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "../../context/ThemeContext";
+import { getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
+
+/**
+ * Entry point to app/(app)/delete-account.tsx. Deliberately a quiet text
+ * link below Log out (like web's DeleteAccountDialog trigger) rather than a
+ * prominent button — it has to be findable (App Store Guideline 5.1.1(v)),
+ * not inviting.
+ */
+export function DeleteAccountSection() {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { colors } = useTheme();
+  const styles = useMemo(() => makeStyles(colors), [colors]);
+
+  return (
+    <Pressable onPress={() => router.push("/delete-account")} hitSlop={8} style={styles.row}>
+      <Text style={styles.text}>{t("deleteAccount.trigger")}</Text>
+    </Pressable>
+  );
+}
+
+function makeStyles(colors: ColorTokens) {
+  const typography: Typography = getTypography(colors);
+  return StyleSheet.create({
+    row: { alignItems: "center", paddingVertical: 4 },
+    text: { ...typography.body, fontSize: 13, color: colors.alertRed },
+  });
+}

mobile/src/components/settings/InviteFriendsSection.tsx

@@ -0,0 +1,6 @@
+import { InviteCard } from "../referrals/InviteCard";
+
+/** Einstieg zum Empfehlungsprogramm oben in den Einstellungen. */
+export function InviteFriendsSection() {
+  return <InviteCard showRanksLink />;
+}

mobile/src/components/settings/LanguageSection.tsx

@@ -3,8 +3,7 @@ import { View, Text, StyleSheet } from "react-native";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "../../context/ThemeContext";
 import { LanguageSwitcher } from "../LanguageSwitcher";
-import type { ColorTokens } from "../../theme/tokens";
-import { sectionTitleStyle } from "./sectionTitleStyle";
+import { getTypography, type ColorTokens } from "../../theme/tokens";
 
 /**
  * Section chrome (title + spacing) around the shared LanguageSwitcher — see
@@ -26,6 +25,6 @@ export function LanguageSection() {
 
 function makeStyles(colors: ColorTokens) {
   return StyleSheet.create({
-    sectionTitle: sectionTitleStyle(colors),
+    sectionTitle: { ...getTypography(colors).caption, marginBottom: 10 },
   });
 }

mobile/src/components/settings/LegalSection.tsx

@@ -69,6 +69,6 @@ function makeStyles(colors: ColorTokens) {
   return StyleSheet.create({
     section: { gap: 12, alignItems: "center" },
     legalLink: { ...typography.body, fontSize: 13, color: colors.marigoldDeep },
-    versionText: { ...typography.label, textTransform: "none", letterSpacing: 0, marginTop: 4 },
+    versionText: { ...typography.caption, marginTop: 4 },
   });
 }

mobile/src/components/settings/LogoutSection.tsx

@@ -1,6 +1,9 @@
 import { Alert } from "react-native";
 import { useTranslation } from "react-i18next";
 import { useAuth } from "@clerk/expo";
+import { useMutation } from "@tanstack/react-query";
+import { useTRPC } from "../../api/trpc";
+import { getRegisteredPushToken } from "../../hooks/usePushNotifications";
 import { useActivePet } from "../../context/ActivePetContext";
 import { Button } from "../Button";
 
@@ -22,6 +25,17 @@ export function LogoutSection() {
   const { t } = useTranslation();
   const { signOut } = useAuth();
   const { clearActivePetId } = useActivePet();
+  const trpc = useTRPC();
+  const clearPushToken = useMutation(trpc.owner.clearPushToken.mutationOptions());
+
+  const logout = async () => {
+    // Dieses Gerät vor dem Abmelden austragen, sonst kämen weiter Mitteilungen des alten Kontos an.
+    // Fehler (z. B. offline) dürfen das Abmelden nie blockieren.
+    const token = getRegisteredPushToken();
+    if (token) await clearPushToken.mutateAsync({ expoPushToken: token }).catch(() => undefined);
+    clearActivePetId();
+    await signOut();
+  };
 
   const confirmLogout = () => {
     Alert.alert(t("pets.logoutConfirmTitle"), t("pets.logoutConfirmMessage"), [
@@ -30,8 +44,7 @@ export function LogoutSection() {
         text: t("pets.logoutButton"),
         style: "destructive",
         onPress: () => {
-          clearActivePetId();
-          void signOut();
+          void logout();
         },
       },
     ]);

mobile/src/components/settings/PetSuggestionsSection.tsx

@@ -5,7 +5,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useTRPC } from "../../api/trpc";
 import { useTheme } from "../../context/ThemeContext";
 import { getTypography, type ColorTokens, type Typography } from "../../theme/tokens";
-import { sectionTitleStyle } from "./sectionTitleStyle";
 
 /**
  * Opt-out for the PET_SUGGESTION cron notification
@@ -53,7 +52,7 @@ export function PetSuggestionsSection() {
 function makeStyles(colors: ColorTokens) {
   const typography: Typography = getTypography(colors);
   return StyleSheet.create({
-    sectionTitle: sectionTitleStyle(colors),
+    sectionTitle: { ...typography.caption, marginBottom: 10 },
     toggleRow: { flexDirection: "row", alignItems: "center", gap: 12 },
     toggleText: { flex: 1 },
     toggleLabel: { ...typography.body, fontSize: 12, color: colors.quietGray, marginTop: 2 },

mobile/src/components/settings/sectionTitleStyle.ts

@@ -1,14 +0,0 @@
-import { getTypography, type ColorTokens } from "../../theme/tokens";
-
-/**
- * Shared "section label" chrome (the small uppercase-ish title above a
- * Settings-screen section, e.g. "DARSTELLUNG"/"SPRACHE"). Extracted so
- * AppearanceSection/LanguageSection/PetSuggestionsSection can't drift out of
- * sync on this — they all had the exact same style object copy-pasted
- * before this file existed (found during code review of the Settings-screen
- * extraction, see mobile/found.md).
- */
-export function sectionTitleStyle(colors: ColorTokens) {
-  const typography = getTypography(colors);
-  return { ...typography.label, textTransform: "none" as const, letterSpacing: 0, marginBottom: 10 };
-}

mobile/src/components/stories/StoryCommentsSheet.tsx

@@ -0,0 +1,181 @@
+import { useMemo, useState } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Send, Trash2, X } from "lucide-react-native";
+import { useTRPC } from "../../api/trpc";
+import { useTheme } from "../../context/ThemeContext";
+import { PetAvatar } from "../PetAvatar";
+import { TextField } from "../TextField";
+import { formatPetName, formatRelativeTime } from "../../lib/format";
+import { getTypography, radii, type ColorTokens } from "../../theme/tokens";
+
+type Props = {
+  storyId: string;
+  activePetId: string;
+  visible: boolean;
+  onClose: () => void;
+  /** Wird nach Hinzufügen/Löschen aufgerufen, damit der Viewer den Zähler neu lädt. */
+  onChanged: () => void;
+  onPressPet: (petId: string) => void;
+  /** Abgelaufene Story in der 7-Tage-Ansicht des Erstellers: nur lesen. */
+  readOnly?: boolean;
+};
+
+/**
+ * Port of web's StoryCommentsOverlay als Bottom-Sheet. Der Viewer pausiert die
+ * Story, solange das Sheet offen ist (anders als im Web — auf dem Handy
+ * verdeckt die Tastatur sonst die laufende Story und sie springt weiter,
+ * während man noch tippt).
+ */
+export function StoryCommentsSheet({ storyId, activePetId, visible, onClose, onChanged, onPressPet, readOnly = false }: Props) {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const insets = useSafeAreaInsets();
+  const styles = useMemo(() => makeStyles(colors, insets.bottom), [colors, insets.bottom]);
+  const trpc = useTRPC();
+  const qc = useQueryClient();
+  const [body, setBody] = useState("");
+
+  const { data: comments = [], isLoading } = useQuery({
+    ...trpc.stories.listComments.queryOptions({ storyId }),
+    enabled: visible,
+  });
+
+  const refresh = () => {
+    void qc.invalidateQueries({ queryKey: trpc.stories.listComments.queryKey({ storyId }) });
+    onChanged();
+  };
+
+  const add = useMutation(
+    trpc.stories.addComment.mutationOptions({
+      onSuccess: () => {
+        setBody("");
+        refresh();
+      },
+    })
+  );
+  const remove = useMutation(trpc.stories.deleteComment.mutationOptions({ onSuccess: refresh }));
+
+  const trimmed = body.trim();
+
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+      <KeyboardAvoidingView style={styles.flex} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+        <Pressable style={styles.backdrop} onPress={onClose} accessibilityLabel={t("common.close")} />
+        <View style={styles.sheet}>
+          <View style={styles.header}>
+            <Text style={styles.title}>{t("storyViewer.commentsTitle")}</Text>
+            <Pressable onPress={onClose} hitSlop={12} accessibilityLabel={t("common.close")}>
+              <X size={20} color={colors.ink} />
+            </Pressable>
+          </View>
+
+          {isLoading ? (
+            <ActivityIndicator style={styles.loading} color={colors.marigoldOrange} />
+          ) : (
+            <FlatList
+              data={comments}
+              keyExtractor={(item) => item.id}
+              contentContainerStyle={styles.list}
+              ListEmptyComponent={<Text style={styles.muted}>{t("comments.empty")}</Text>}
+              renderItem={({ item }) => (
+                <View style={styles.row}>
+                  <Pressable onPress={() => onPressPet(item.pet.id)}>
+                    <PetAvatar name={item.pet.name} avatarKey={item.pet.avatarKey} size="sm" owner={item.pet.owner} />
+                  </Pressable>
+                  <View style={styles.rowBody}>
+                    <View style={styles.rowHeader}>
+                      <Text style={styles.petName} onPress={() => onPressPet(item.pet.id)}>
+                        {formatPetName(item.pet)}
+                      </Text>
+                      <Text style={styles.time}>{formatRelativeTime(item.createdAt)}</Text>
+                    </View>
+                    <Text style={styles.body}>{item.body}</Text>
+                  </View>
+                  {item.pet.id === activePetId && (
+                    <Pressable
+                      onPress={() => remove.mutate({ commentId: item.id, petId: activePetId })}
+                      hitSlop={8}
+                      accessibilityLabel={t("storyViewer.deleteComment")}
+                    >
+                      <Trash2 size={16} color={colors.quietGray} />
+                    </Pressable>
+                  )}
+                </View>
+              )}
+            />
+          )}
+
+          {readOnly ? (
+            <Text style={styles.readOnly}>{t("storyViewer.readOnlyExpired")}</Text>
+          ) : (
+          <View style={styles.inputRow}>
+            <TextField
+              placeholder={t("comments.placeholder")}
+              value={body}
+              onChangeText={setBody}
+              maxLength={500}
+              style={styles.input}
+              returnKeyType="send"
+              onSubmitEditing={() => trimmed && add.mutate({ storyId, petId: activePetId, body: trimmed })}
+            />
+            <Pressable
+              onPress={() => add.mutate({ storyId, petId: activePetId, body: trimmed })}
+              disabled={!trimmed || add.isPending}
+              style={[styles.send, (!trimmed || add.isPending) && styles.sendDisabled]}
+              accessibilityLabel={t("messages.send")}
+            >
+              {add.isPending ? <ActivityIndicator color="#ffffff" /> : <Send size={18} color="#ffffff" />}
+            </Pressable>
+          </View>
+          )}
+          {add.isError && <Text style={styles.error}>{t("storyViewer.commentError")}</Text>}
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+function makeStyles(colors: ColorTokens, insetBottom: number) {
+  const typography = getTypography(colors);
+  return StyleSheet.create({
+    flex: { flex: 1 },
+    backdrop: { flex: 1, backgroundColor: "rgba(0,0,0,0.35)" },
+    sheet: {
+      maxHeight: "65%",
+      backgroundColor: colors.porchWhite,
+      borderTopLeftRadius: radii["2xl"],
+      borderTopRightRadius: radii["2xl"],
+      paddingBottom: insetBottom + 12,
+    },
+    header: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", padding: 16, borderBottomWidth: 1, borderBottomColor: colors.hairlineGray },
+    title: { ...typography.title, fontSize: 16 },
+    loading: { padding: 24 },
+    list: { padding: 16, gap: 14 },
+    muted: { ...typography.body, color: colors.quietGray, textAlign: "center", paddingVertical: 16 },
+    row: { flexDirection: "row", gap: 10, alignItems: "flex-start" },
+    rowBody: { flex: 1, gap: 2 },
+    rowHeader: { flexDirection: "row", alignItems: "baseline", gap: 8 },
+    petName: { ...typography.body, fontWeight: "600", fontSize: 13 },
+    time: { ...typography.body, fontSize: 11, color: colors.quietGray },
+    body: { ...typography.body },
+    inputRow: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, paddingTop: 10 },
+    input: { flex: 1 },
+    send: { width: 48, height: 48, borderRadius: radii.lg, backgroundColor: colors.marigoldOrange, alignItems: "center", justifyContent: "center" },
+    sendDisabled: { opacity: 0.5 },
+    readOnly: { ...typography.body, fontSize: 13, color: colors.quietGray, paddingHorizontal: 16, paddingTop: 10 },
+    error: { ...typography.body, fontSize: 12, color: colors.alertRed, paddingHorizontal: 12, paddingTop: 6 },
+  });
+}