From 95f13774847395e780b23ad05f5c712e7dc0f7c2 Mon Sep 17 00:00:00 2001
From: JesJehle <jesvajnajehle@gmail.com>
Date: Wed, 2 Sep 2026 12:16:55 +0200
Subject: [PATCH] feat(priwa): unify mobile map controls

---
 .../e2e-local/priwa-field-write-flows.spec.ts |  37 ++++-
 .../e2e-local/priwa-warnkarte-local.spec.ts   | 127 ++++++++++++++++-
 .../mobile/MobileAnalysisDrawer.tsx           |   2 +-
 .../DeadwoodMap/mobile/MobileLayerDrawer.tsx  |  29 ++--
 .../DeadwoodMap/mobile/MobileMapControls.tsx  |  32 +----
 .../DeadwoodMap/mobile/MobileTimeDrawer.tsx   |   2 +-
 .../MapControls/mobile/MapLayersIcon.tsx      |  32 +++++
 .../mobile/MobileBottomSheet.tsx              |  48 ++++---
 .../mobile/MobileLayerRow.tsx                 |  54 ++++---
 .../mobile/MobileLayerTile.tsx                |  24 +---
 .../mobile/MobileMapSectionHeading.tsx        |  15 ++
 .../mobile/mobileMapThumbnails.ts             |   0
 .../components/PriwaField/PriwaFieldMap.tsx   | 132 +++++++++++++-----
 .../PriwaField/PriwaMapLayersSheet.test.ts    |  49 +++++++
 .../PriwaField/PriwaMapLayersSheet.tsx        | 117 ++++++++++++++++
 .../PriwaField/PriwaMobileFieldTools.tsx      |  30 +++-
 .../PriwaField/PriwaMobilePrimaryActions.tsx  |  59 ++++++++
 .../PriwaOfflineAreaSelection.test.ts         |  26 ++++
 .../PriwaField/PriwaOfflineAreaSelection.tsx  | 129 ++++++++++-------
 .../PriwaField/PriwaOfflineMapPanel.test.ts   |  24 ++++
 .../PriwaField/PriwaOfflineMapPanel.tsx       |  68 ++++++---
 .../PriwaField/PriwaWarnkarteMapControls.tsx  |   4 -
 .../PriwaField/usePriwaWarnkarte.ts           |  23 ++-
 frontend/src/index.css                        |  39 ------
 frontend/src/pages/PriwaField.tsx             |  43 ++++--
 25 files changed, 853 insertions(+), 292 deletions(-)
 create mode 100644 frontend/src/components/MapControls/mobile/MapLayersIcon.tsx
 rename frontend/src/components/{DeadwoodMap => MapControls}/mobile/MobileBottomSheet.tsx (80%)
 rename frontend/src/components/{DeadwoodMap => MapControls}/mobile/MobileLayerRow.tsx (53%)
 rename frontend/src/components/{DeadwoodMap => MapControls}/mobile/MobileLayerTile.tsx (59%)
 create mode 100644 frontend/src/components/MapControls/mobile/MobileMapSectionHeading.tsx
 rename frontend/src/components/{DeadwoodMap => MapControls}/mobile/mobileMapThumbnails.ts (100%)
 create mode 100644 frontend/src/components/PriwaField/PriwaMapLayersSheet.test.ts
 create mode 100644 frontend/src/components/PriwaField/PriwaMapLayersSheet.tsx
 create mode 100644 frontend/src/components/PriwaField/PriwaMobilePrimaryActions.tsx

diff --git a/frontend/e2e-local/priwa-field-write-flows.spec.ts b/frontend/e2e-local/priwa-field-write-flows.spec.ts
index 54f8c845..1be07eae 100644
--- a/frontend/e2e-local/priwa-field-write-flows.spec.ts
+++ b/frontend/e2e-local/priwa-field-write-flows.spec.ts
@@ -94,20 +94,42 @@ test.describe("PRIWA local field write flows", () => {
     ).toHaveCount(0);
 
     await expect(
-      page.getByRole("button", { name: "Zu Karte wechseln" }),
+      page.getByRole("button", { name: "Kartenebenen öffnen" }),
     ).toBeVisible();
     await expect(
       page.getByRole("button", { name: "Baumliste öffnen" }),
     ).toBeVisible();
     await expect(
-      page.getByRole("button", { name: "Punkt aufnehmen" }),
+      page.getByRole("button", { name: "Käferbaum aufnehmen" }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Aktuelle Position aktivieren" }),
     ).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Zu Karte wechseln" }),
+    ).toHaveCount(0);
     await expect(
       page.getByRole("navigation", { name: "PRIWA Feldaktionen" }),
     ).toHaveCount(0);
     await expectPersistedOfflineAreaVisualization(page);
 
-    await page.getByRole("button", { name: "Punkt aufnehmen" }).click();
+    const addPointButton = page.getByRole("button", {
+      name: "Käferbaum aufnehmen",
+    });
+    const locateButton = page.getByRole("button", {
+      name: "Aktuelle Position aktivieren",
+    });
+    const [addPointBox, locateBox] = await Promise.all([
+      addPointButton.boundingBox(),
+      locateButton.boundingBox(),
+    ]);
+    expect(addPointBox).not.toBeNull();
+    expect(locateBox).not.toBeNull();
+    expect(addPointBox!.width).toBe(locateBox!.width);
+    expect(addPointBox!.height).toBe(locateBox!.height);
+    expect(addPointBox!.y).toBeLessThan(locateBox!.y);
+
+    await addPointButton.click();
     const captureDrawer = page.locator(
       ".priwa-point-drawer-root .ant-drawer-content-wrapper",
     );
@@ -379,6 +401,9 @@ async function expectOfflineBasemapControl(page: Page) {
     page.getByRole("button", { name: "Bereich herunterladen" }),
   ).toBeVisible();
   await page.getByRole("button", { name: "Abbrechen" }).click();
+  await expect(offlineMapButton).toHaveAttribute("aria-pressed", "true");
+  await offlineMapButton.click();
+  await expect(offlineMapButton).toHaveAttribute("aria-pressed", "false");
 }
 
 async function expectPersistedOfflineAreaVisualization(page: Page) {
@@ -480,6 +505,12 @@ async function expectOfflineSelectionSuppressesPointInteraction(page: Page) {
     page.locator('[data-priwa-offline-selection-frame="true"]'),
   ).toBeVisible();
   await page.getByRole("button", { name: "Abbrechen" }).click();
+  const offlineMapButton = page.getByRole("button", {
+    name: /Offline-Karte laden/,
+  });
+  await expect(offlineMapButton).toHaveAttribute("aria-pressed", "true");
+  await offlineMapButton.click();
+  await expect(offlineMapButton).toHaveAttribute("aria-pressed", "false");
 }
 
 async function expectResizableDesktopPointTable(page: Page) {
diff --git a/frontend/e2e-local/priwa-warnkarte-local.spec.ts b/frontend/e2e-local/priwa-warnkarte-local.spec.ts
index f4dfd3dd..4c71f250 100644
--- a/frontend/e2e-local/priwa-warnkarte-local.spec.ts
+++ b/frontend/e2e-local/priwa-warnkarte-local.spec.ts
@@ -31,13 +31,19 @@ const polygon = {
 };
 
 async function installWarnkarteAdmin(page: Page) {
-  await installLocalSession(page, {
+  const session = await installLocalSession(page, {
     user: admin,
     supabaseUrl: localSupabaseUrl,
     refreshToken: "priwa-warnkarte-refresh-token",
   });
 
-  await page.route(`${localSupabaseUrl}/rest/v1/**`, fulfillSupabaseRequest);
+  // Keep the mocked journey independent from the worktree's generated
+  // Supabase endpoint. The application and test runner can legitimately read
+  // that endpoint from different env files.
+  await page.route("**/auth/v1/user", (route) =>
+    route.fulfill({ contentType: "application/json", json: session.user }),
+  );
+  await page.route("**/rest/v1/**", fulfillSupabaseRequest);
 }
 
 async function fulfillSupabaseRequest(route: Route) {
@@ -289,7 +295,9 @@ test.describe("PRIWA Warnkarte local UI", () => {
     await installWarnkarteApi(page);
     await page.goto("/priwa-field");
 
-    await expect(page.locator("[data-priwa-review-queue-panel]")).toHaveCount(0);
+    await expect(page.locator("[data-priwa-review-queue-panel]")).toHaveCount(
+      0,
+    );
     await expect(
       page.getByRole("button", { name: "Warnkarte verwalten" }),
     ).toHaveCount(0);
@@ -301,6 +309,7 @@ test.describe("PRIWA Warnkarte local UI", () => {
     });
     await expect(page.getByText("Käferbaum bearbeiten")).toBeVisible();
     await page.getByRole("button", { name: "Close" }).click();
+    await page.getByRole("button", { name: "Kartenebenen öffnen" }).click();
     await page.getByRole("button", { name: "Zur Warnkarte zoomen" }).click();
     await page.waitForTimeout(600);
     await page.getByTestId("priwa-field-map").click({
@@ -580,8 +589,17 @@ test.describe("PRIWA Warnkarte local UI", () => {
       });
     await page.route("**/priwa/warnkarte/versions?*", unavailable);
     await page.route("**/priwa/warnkarte/validate", unavailable);
+    await page.route("**/priwa/warnkarte/active?*", unavailable);
     await page.goto("/priwa-field");
 
+    const loadError = page.getByText("Warnkarte konnte nicht geladen werden", {
+      exact: true,
+    });
+    await expect(loadError).toHaveCount(0);
+    await page.getByRole("button", { name: "Warnkarte einblenden" }).click();
+    await expect(loadError).toBeVisible();
+    await expect(loadError).toBeHidden({ timeout: 5_000 });
+
     await page.getByRole("button", { name: "Warnkarte verwalten" }).click();
     const explanation =
       "Die Warnkarten-Funktion ist in dieser Umgebung noch nicht verfügbar. Die Datei wurde nicht validiert.";
@@ -614,6 +632,40 @@ test.describe("PRIWA Warnkarte local UI", () => {
     ).toHaveCount(0);
     await expect(page.locator(".dt-map-zoom-control")).toBeHidden();
     await expect(page.locator(".dt-map-scale-control")).toBeVisible();
+    await page.getByRole("button", { name: "Kartenebenen öffnen" }).click();
+    await page.getByRole("button", { name: "Baumliste öffnen" }).click();
+    await expect(page.getByLabel("Kartenebenen", { exact: true })).toHaveCount(
+      0,
+    );
+    await expect(
+      page.getByText("Käferbäume (1)", { exact: true }),
+    ).toBeVisible();
+    await page.keyboard.press("Escape");
+    await page.getByRole("button", { name: "Kartenebenen öffnen" }).click();
+    const layerSheet = page.getByLabel("Kartenebenen", { exact: true });
+    const layerSheetBox = await layerSheet.boundingBox();
+    expect(layerSheetBox).not.toBeNull();
+    expect(layerSheetBox!.height / 852).toBeGreaterThan(0.22);
+    expect(layerSheetBox!.height / 852).toBeLessThan(0.36);
+    const layerSheetHeaderBox = await layerSheet
+      .locator("header")
+      .boundingBox();
+    expect(layerSheetHeaderBox).not.toBeNull();
+    await page.mouse.move(
+      layerSheetHeaderBox!.x + layerSheetHeaderBox!.width / 2,
+      layerSheetHeaderBox!.y + 12,
+    );
+    await page.mouse.down();
+    await page.mouse.move(
+      layerSheetHeaderBox!.x + layerSheetHeaderBox!.width / 2,
+      layerSheetHeaderBox!.y - 280,
+      { steps: 4 },
+    );
+    await page.mouse.up();
+    await expect(layerSheet).toHaveAttribute(
+      "data-mobile-bottom-sheet-snap",
+      "expanded",
+    );
     await page.getByRole("button", { name: "Zur Warnkarte zoomen" }).click();
     await page.waitForTimeout(600);
     await page.getByTestId("priwa-field-map").click({
@@ -622,14 +674,79 @@ test.describe("PRIWA Warnkarte local UI", () => {
     await expect(page.locator(".priwa-warnkarte-tooltip")).toContainText(
       "Wahrscheinlichkeit: 60 %",
     );
-    await page.getByRole("button", { name: "Warnkarte ausblenden" }).click();
+    await page.getByRole("button", { name: "Kartenebenen öffnen" }).click();
+    await page.getByRole("switch", { name: "Warnkarte ausblenden" }).click();
     await expect(page.getByTestId("priwa-warnkarte-legend")).toHaveCount(0);
     await expect(
       page.getByRole("button", { name: "Zur Warnkarte zoomen" }),
     ).toHaveCount(0);
     await expect(
-      page.getByRole("button", { name: "Warnkarte einblenden" }),
+      page.getByRole("switch", { name: "Warnkarte einblenden" }),
     ).toBeVisible();
     await expect(page.getByTestId("priwa-field-map")).toBeVisible();
+    await page.getByRole("button", { name: "Kartenebenen schließen" }).click();
+    await page.getByRole("button", { name: /Offline-Karten öffnen/ }).click();
+    await expect(
+      page.getByLabel("Offline-Karten", { exact: true }),
+    ).toBeVisible();
+    await page.getByRole("button", { name: "Neuen Bereich auswählen" }).click();
+    const selectionFrame = page.locator(
+      '[data-priwa-offline-selection-frame="true"]',
+    );
+    const selectionSheet = page.getByLabel("Offline-Bereich auswählen", {
+      exact: true,
+    });
+    const [selectionFrameBox, selectionSheetBox] = await Promise.all([
+      selectionFrame.boundingBox(),
+      selectionSheet.boundingBox(),
+    ]);
+    expect(selectionFrameBox).not.toBeNull();
+    expect(selectionSheetBox).not.toBeNull();
+    expect(
+      Math.abs(selectionFrameBox!.width - selectionFrameBox!.height),
+    ).toBeLessThan(2);
+    expect(selectionFrameBox!.y + selectionFrameBox!.height).toBeLessThan(
+      selectionSheetBox!.y,
+    );
+    const [selectionTitleBox, selectionCloseBox] = await Promise.all([
+      page
+        .getByRole("heading", { name: "Offline-Bereich auswählen" })
+        .boundingBox(),
+      page
+        .getByRole("button", { name: "Bereichsauswahl schließen" })
+        .boundingBox(),
+    ]);
+    expect(selectionTitleBox).not.toBeNull();
+    expect(selectionCloseBox).not.toBeNull();
+    expect(selectionTitleBox!.x).toBeGreaterThanOrEqual(12);
+    expect(selectionCloseBox!.x + selectionCloseBox!.width).toBeLessThanOrEqual(
+      381,
+    );
+  });
+
+  test("mobile only reports an unavailable Warnkarte after activation", async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 393, height: 852 });
+    await installWarnkarteAdmin(page);
+    await page.route("**/priwa/warnkarte/active?*", (route) =>
+      route.fulfill({
+        status: 503,
+        contentType: "application/json",
+        json: { detail: "Offline" },
+      }),
+    );
+    await page.goto("/priwa-field");
+    await page.getByRole("button", { name: "Accept" }).click();
+
+    const errorMessage = page.getByText(
+      "Warnkarte konnte nicht geladen werden",
+      { exact: true },
+    );
+    await expect(errorMessage).toHaveCount(0);
+    await page.getByRole("button", { name: "Kartenebenen öffnen" }).click();
+    await page.getByRole("switch", { name: "Warnkarte einblenden" }).click();
+    await expect(errorMessage).toBeVisible();
+    await expect(errorMessage).toBeHidden({ timeout: 5_000 });
   });
 });
diff --git a/frontend/src/components/DeadwoodMap/mobile/MobileAnalysisDrawer.tsx b/frontend/src/components/DeadwoodMap/mobile/MobileAnalysisDrawer.tsx
index 047a6acb..6efdb3a3 100644
--- a/frontend/src/components/DeadwoodMap/mobile/MobileAnalysisDrawer.tsx
+++ b/frontend/src/components/DeadwoodMap/mobile/MobileAnalysisDrawer.tsx
@@ -5,7 +5,7 @@ import {
   LoginOutlined,
 } from "@ant-design/icons";
 
-import { mobileMapThumbnails } from "./mobileMapThumbnails";
+import { mobileMapThumbnails } from "../../MapControls/mobile/mobileMapThumbnails";
 
 interface MobileAnalysisDrawerProps {
   open: boolean;
diff --git a/frontend/src/components/DeadwoodMap/mobile/MobileLayerDrawer.tsx b/frontend/src/components/DeadwoodMap/mobile/MobileLayerDrawer.tsx
index 679ecd6f..ac07a2e8 100644
--- a/frontend/src/components/DeadwoodMap/mobile/MobileLayerDrawer.tsx
+++ b/frontend/src/components/DeadwoodMap/mobile/MobileLayerDrawer.tsx
@@ -2,10 +2,11 @@ import { Button, Slider } from "antd";
 import { DownloadOutlined } from "@ant-design/icons";
 
 import { mapColors } from "../../../theme/mapColors";
-import MobileLayerRow from "./MobileLayerRow";
-import MobileLayerTile from "./MobileLayerTile";
-import MobileBottomSheet from "./MobileBottomSheet";
-import { mobileMapThumbnails } from "./mobileMapThumbnails";
+import MobileLayerRow from "../../MapControls/mobile/MobileLayerRow";
+import MobileLayerTile from "../../MapControls/mobile/MobileLayerTile";
+import MobileBottomSheet from "../../MapControls/mobile/MobileBottomSheet";
+import MobileMapSectionHeading from "../../MapControls/mobile/MobileMapSectionHeading";
+import { mobileMapThumbnails } from "../../MapControls/mobile/mobileMapThumbnails";
 
 interface MobileLayerDrawerProps {
   open: boolean;
@@ -37,12 +38,6 @@ const baseMapOptions = [
   },
 ];
 
-const SectionHeading = ({ children }: { children: string }) => (
-  <div className="mb-2.5 text-xs font-semibold uppercase tracking-[0.08em] text-slate-500">
-    {children}
-  </div>
-);
-
 const MobileLayerDrawer = ({
   open,
   mapStyle,
@@ -62,10 +57,16 @@ const MobileLayerDrawer = ({
   const modelLayersVisible = showForest || showDeadwood;
 
   return (
-    <MobileBottomSheet open={open} onClose={onClose} title="Layers">
+    <MobileBottomSheet
+      open={open}
+      onClose={onClose}
+      title="Layers"
+      initialSnap="compact"
+      compactRatio={0.36}
+    >
       <div className="space-y-5">
         <section>
-          <SectionHeading>Map style</SectionHeading>
+          <MobileMapSectionHeading>Map style</MobileMapSectionHeading>
           <div className="grid grid-cols-2 gap-3">
             {baseMapOptions.map((option) => (
               <MobileLayerTile
@@ -80,7 +81,7 @@ const MobileLayerDrawer = ({
         </section>
 
         <section>
-          <SectionHeading>Map layers</SectionHeading>
+          <MobileMapSectionHeading>Map layers</MobileMapSectionHeading>
           <div className="space-y-2.5">
             <MobileLayerRow
               thumb={mobileMapThumbnails.treeCover}
@@ -134,7 +135,7 @@ const MobileLayerDrawer = ({
         </section>
 
         <section>
-          <SectionHeading>Feedback</SectionHeading>
+          <MobileMapSectionHeading>Feedback</MobileMapSectionHeading>
           <div className="space-y-2.5">
             <MobileLayerRow
               thumb={mobileMapThumbnails.communityPoints}
diff --git a/frontend/src/components/DeadwoodMap/mobile/MobileMapControls.tsx b/frontend/src/components/DeadwoodMap/mobile/MobileMapControls.tsx
index 3bb7c027..dfa76aed 100644
--- a/frontend/src/components/DeadwoodMap/mobile/MobileMapControls.tsx
+++ b/frontend/src/components/DeadwoodMap/mobile/MobileMapControls.tsx
@@ -4,6 +4,7 @@ import {
   EnvironmentOutlined,
   LoadingOutlined,
 } from "@ant-design/icons";
+import MapLayersIcon from "../../MapControls/mobile/MapLayersIcon";
 
 export type MobileMapPanel = "layers" | "analysis" | "time";
 
@@ -21,37 +22,6 @@ interface MobileMapControlsProps {
 const controlButtonClass =
   "pointer-events-auto !flex !h-12 !w-12 !min-w-12 !items-center !justify-center border-white/80 bg-white/95 shadow-lg shadow-slate-900/15 backdrop-blur-md";
 
-const MapLayersIcon = () => (
-  <svg
-    width="22"
-    height="22"
-    viewBox="0 0 24 24"
-    fill="none"
-    aria-hidden="true"
-  >
-    <path
-      d="M12 3.75 3.75 8.1 12 12.45l8.25-4.35L12 3.75Z"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeLinejoin="round"
-    />
-    <path
-      d="m5.75 11.15-2 1.05L12 16.55l8.25-4.35-2-1.05"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="m5.75 15.2-2 1.05L12 20.6l8.25-4.35-2-1.05"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
 const MobileMapControls = ({
   activePanel,
   hidden = false,
diff --git a/frontend/src/components/DeadwoodMap/mobile/MobileTimeDrawer.tsx b/frontend/src/components/DeadwoodMap/mobile/MobileTimeDrawer.tsx
index f10d072d..6c4d8ef4 100644
--- a/frontend/src/components/DeadwoodMap/mobile/MobileTimeDrawer.tsx
+++ b/frontend/src/components/DeadwoodMap/mobile/MobileTimeDrawer.tsx
@@ -1,5 +1,5 @@
 import type { WaybackItemWithMetadata } from "../../../hooks/useWaybackItems";
-import MobileBottomSheet from "./MobileBottomSheet";
+import MobileBottomSheet from "../../MapControls/mobile/MobileBottomSheet";
 import MobileTimeCard from "./MobileTimeCard";
 
 interface MobileTimeDrawerProps {
diff --git a/frontend/src/components/MapControls/mobile/MapLayersIcon.tsx b/frontend/src/components/MapControls/mobile/MapLayersIcon.tsx
new file mode 100644
index 00000000..df6d0bb0
--- /dev/null
+++ b/frontend/src/components/MapControls/mobile/MapLayersIcon.tsx
@@ -0,0 +1,32 @@
+const MapLayersIcon = () => (
+  <svg
+    width="22"
+    height="22"
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+  >
+    <path
+      d="M12 3.75 3.75 8.1 12 12.45l8.25-4.35L12 3.75Z"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinejoin="round"
+    />
+    <path
+      d="m5.75 11.15-2 1.05L12 16.55l8.25-4.35-2-1.05"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="m5.75 15.2-2 1.05L12 20.6l8.25-4.35-2-1.05"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default MapLayersIcon;
diff --git a/frontend/src/components/DeadwoodMap/mobile/MobileBottomSheet.tsx b/frontend/src/components/MapControls/mobile/MobileBottomSheet.tsx
similarity index 80%
rename from frontend/src/components/DeadwoodMap/mobile/MobileBottomSheet.tsx
rename to frontend/src/components/MapControls/mobile/MobileBottomSheet.tsx
index 8479e763..0eeb50bb 100644
--- a/frontend/src/components/DeadwoodMap/mobile/MobileBottomSheet.tsx
+++ b/frontend/src/components/MapControls/mobile/MobileBottomSheet.tsx
@@ -1,23 +1,20 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { PointerEvent as ReactPointerEvent, ReactNode } from "react";
 import { Button } from "antd";
 import { CloseOutlined } from "@ant-design/icons";
 
-type SheetSnap = "compact" | "expanded";
+export type MobileBottomSheetSnap = "compact" | "expanded";
 
 interface MobileBottomSheetProps {
   children: ReactNode;
   open: boolean;
   title: string;
   onClose: () => void;
+  closeLabel?: string;
   compactRatio?: number;
   expandedRatio?: number;
+  initialSnap?: MobileBottomSheetSnap;
+  hideFrom?: "md" | "lg";
 }
 
 const clamp = (value: number, min: number, max: number) =>
@@ -26,18 +23,26 @@ const clamp = (value: number, min: number, max: number) =>
 const getViewportHeight = () =>
   typeof window === "undefined" ? 844 : window.innerHeight;
 const CLOSE_THRESHOLD_PX = 160;
+const MIN_CLOSE_HEIGHT_PX = 96;
 const CLOSE_ANIMATION_MS = 220;
+const hideFromClass = {
+  md: "md:hidden",
+  lg: "min-[992px]:hidden",
+} as const;
 
 const MobileBottomSheet = ({
   children,
   open,
   title,
   onClose,
+  closeLabel = `Close ${title}`,
   compactRatio = 0.52,
   expandedRatio = 0.86,
+  initialSnap = "expanded",
+  hideFrom = "md",
 }: MobileBottomSheetProps) => {
   const [viewportHeight, setViewportHeight] = useState(getViewportHeight);
-  const [snap, setSnap] = useState<SheetSnap>("expanded");
+  const [snap, setSnap] = useState<MobileBottomSheetSnap>(initialSnap);
   const [dragHeight, setDragHeight] = useState<number | null>(null);
   const [isClosing, setIsClosing] = useState(false);
   const dragStartRef = useRef<{
@@ -56,17 +61,21 @@ const MobileBottomSheet = ({
 
   useEffect(() => {
     if (open) {
-      setSnap("expanded");
+      setSnap(initialSnap);
       setDragHeight(null);
       setIsClosing(false);
     }
-  }, [open]);
+  }, [initialSnap, open]);
 
   const compactHeight = useMemo(
     () => Math.round(viewportHeight * compactRatio),
     [compactRatio, viewportHeight],
   );
-  const closeHeight = Math.max(180, compactHeight - CLOSE_THRESHOLD_PX);
+  const closeDragDistance = Math.min(CLOSE_THRESHOLD_PX, compactHeight * 0.4);
+  const closeHeight = Math.max(
+    MIN_CLOSE_HEIGHT_PX,
+    compactHeight - closeDragDistance,
+  );
   const expandedHeight = useMemo(
     () => Math.round(viewportHeight * expandedRatio),
     [expandedRatio, viewportHeight],
@@ -147,7 +156,7 @@ const MobileBottomSheet = ({
 
   return (
     <section
-      className="deadtrees-mobile-control-panel pointer-events-auto fixed inset-x-0 bottom-0 z-[1000] mx-auto flex w-full max-w-[640px] flex-col overflow-hidden rounded-t-[24px] border border-slate-200 bg-white shadow-2xl shadow-slate-950/20 md:hidden"
+      className={`map-mobile-bottom-sheet pointer-events-auto fixed inset-x-0 bottom-0 z-[1000] mx-auto flex w-full max-w-[640px] flex-col overflow-hidden rounded-t-[24px] border border-slate-200 bg-white shadow-2xl shadow-slate-950/20 ${hideFromClass[hideFrom]}`}
       style={{
         height: currentHeight,
         transform: isClosing ? "translateY(110%)" : "translateY(0)",
@@ -157,6 +166,7 @@ const MobileBottomSheet = ({
             : "none",
       }}
       aria-label={title}
+      data-mobile-bottom-sheet-snap={snap}
     >
       <header
         className="touch-none select-none border-b border-slate-100 bg-white px-4 pb-3 pt-2"
@@ -164,15 +174,13 @@ const MobileBottomSheet = ({
       >
         <div className="mx-auto mb-2 h-1.5 w-12 rounded-full bg-slate-300" />
         <div className="flex items-center justify-between gap-3">
-          <div className="min-w-0">
-            <h2 className="truncate text-base font-semibold text-slate-950">
-              {title}
-            </h2>
-          </div>
+          <h2 className="min-w-0 truncate text-base font-semibold text-slate-950">
+            {title}
+          </h2>
           <Button
             shape="circle"
             icon={<CloseOutlined />}
-            aria-label={`Close ${title}`}
+            aria-label={closeLabel}
             onPointerDown={(event) => event.stopPropagation()}
             onClick={(event) => {
               event.stopPropagation();
@@ -181,7 +189,7 @@ const MobileBottomSheet = ({
           />
         </div>
       </header>
-      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-[calc(1rem+env(safe-area-inset-bottom))] pt-4">
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-[calc(1rem+env(safe-area-inset-bottom))] pt-3">
         {children}
       </div>
     </section>
diff --git a/frontend/src/components/DeadwoodMap/mobile/MobileLayerRow.tsx b/frontend/src/components/MapControls/mobile/MobileLayerRow.tsx
similarity index 53%
rename from frontend/src/components/DeadwoodMap/mobile/MobileLayerRow.tsx
rename to frontend/src/components/MapControls/mobile/MobileLayerRow.tsx
index cc12db51..36da9bb1 100644
--- a/frontend/src/components/DeadwoodMap/mobile/MobileLayerRow.tsx
+++ b/frontend/src/components/MapControls/mobile/MobileLayerRow.tsx
@@ -1,47 +1,52 @@
+import type { ReactNode } from "react";
 import { Switch } from "antd";
 
 interface MobileLayerRowProps {
-  /** Small square thumbnail illustrating the layer */
-  thumb: string;
+  thumb?: string;
+  icon?: ReactNode;
   title: string;
   description?: string;
   checked: boolean;
-  /** Legend swatch tying the row to the layer's color on the map */
   swatchColor?: string;
-  /** Optional count shown after the title (e.g. number of points) */
   count?: number;
+  secondaryAction?: ReactNode;
+  toggleLabel?: string;
   onChange: (checked: boolean) => void;
 }
 
-/**
- * Compact toggleable row for a data layer in the mobile settings drawer.
- * The whole row is tappable; the switch is the visible state affordance
- * and remains the keyboard/screen-reader control.
- */
 const MobileLayerRow = ({
   thumb,
+  icon,
   title,
   description,
   checked,
   swatchColor,
   count,
+  secondaryAction,
+  toggleLabel,
   onChange,
 }: MobileLayerRowProps) => (
   <div
-    className="flex min-h-[60px] cursor-pointer items-center gap-3 rounded-[18px] border border-slate-200 bg-white p-2.5 shadow-[0_1px_2px_rgba(15,23,42,0.06)] transition active:bg-slate-50"
+    className="flex min-h-14 cursor-pointer items-center gap-3 rounded-2xl border border-slate-200 bg-white p-2.5 shadow-[0_1px_2px_rgba(15,23,42,0.06)] transition active:bg-slate-50"
     onClick={() => onChange(!checked)}
   >
-    <span className="relative h-11 w-11 shrink-0 overflow-hidden rounded-xl bg-slate-100 ring-1 ring-inset ring-slate-900/10">
-      <img
-        src={thumb}
-        alt=""
-        loading="lazy"
-        aria-hidden="true"
-        className={`h-full w-full object-cover transition ${
-          checked ? "" : "opacity-40 grayscale"
-        }`}
-      />
-    </span>
+    {(thumb || icon) && (
+      <span className="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-slate-100 text-lg text-amber-700 ring-1 ring-inset ring-slate-900/10">
+        {thumb ? (
+          <img
+            src={thumb}
+            alt=""
+            loading="lazy"
+            aria-hidden="true"
+            className={`h-full w-full object-cover transition ${
+              checked ? "" : "opacity-40 grayscale"
+            }`}
+          />
+        ) : (
+          icon
+        )}
+      </span>
+    )}
     <span className="min-w-0 flex-1">
       <span className="flex items-center gap-1.5">
         {swatchColor && (
@@ -63,11 +68,16 @@ const MobileLayerRow = ({
         </span>
       )}
     </span>
+    {secondaryAction && (
+      <span onClick={(event) => event.stopPropagation()}>
+        {secondaryAction}
+      </span>
+    )}
     <span onClick={(event) => event.stopPropagation()}>
       <Switch
         checked={checked}
         onChange={onChange}
-        aria-label={`Show ${title}`}
+        aria-label={toggleLabel ?? `Show ${title}`}
       />
     </span>
   </div>
diff --git a/frontend/src/components/DeadwoodMap/mobile/MobileLayerTile.tsx b/frontend/src/components/MapControls/mobile/MobileLayerTile.tsx
similarity index 59%
rename from frontend/src/components/DeadwoodMap/mobile/MobileLayerTile.tsx
rename to frontend/src/components/MapControls/mobile/MobileLayerTile.tsx
index 8977ad41..74d60b19 100644
--- a/frontend/src/components/DeadwoodMap/mobile/MobileLayerTile.tsx
+++ b/frontend/src/components/MapControls/mobile/MobileLayerTile.tsx
@@ -1,19 +1,12 @@
 import { CheckOutlined } from "@ant-design/icons";
 
 interface MobileLayerTileProps {
-  /** Thumbnail image source */
   thumb: string;
-  /** Primary label */
   title: string;
-  /** Whether this tile is currently active/selected */
   active: boolean;
   onClick: () => void;
 }
 
-/**
- * Tappable thumbnail tile for single-select choices (e.g. base map style)
- * in the mobile settings drawer.
- */
 const MobileLayerTile = ({
   thumb,
   title,
@@ -24,34 +17,29 @@ const MobileLayerTile = ({
     type="button"
     onClick={onClick}
     aria-pressed={active}
-    className={`group relative min-w-0 overflow-hidden rounded-[18px] border bg-white p-0 text-left shadow-[0_1px_2px_rgba(15,23,42,0.06)] transition ${
+    className={`group relative min-w-0 overflow-hidden rounded-2xl border bg-slate-100 p-0 text-left shadow-[0_1px_2px_rgba(15,23,42,0.06)] transition ${
       active
         ? "border-emerald-700 ring-2 ring-emerald-700/20"
         : "border-slate-200 active:border-slate-300"
     }`}
   >
-    <span className="relative block aspect-[16/9] w-full bg-slate-100">
+    <span className="relative block aspect-[2/1] w-full">
       <img
         src={thumb}
         alt=""
         loading="lazy"
         className="absolute inset-0 h-full w-full object-cover transition duration-150 group-active:scale-[1.02]"
       />
+      <span className="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-slate-950/75 to-transparent" />
+      <span className="absolute bottom-2 left-2.5 right-9 block truncate text-sm font-semibold text-white drop-shadow-sm">
+        {title}
+      </span>
       {active && (
         <span className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-700 text-white shadow-md shadow-emerald-950/20">
           <CheckOutlined className="text-[10px]" />
         </span>
       )}
     </span>
-    <span className="block border-t border-slate-100 bg-white px-3 py-2">
-      <span
-        className={`block truncate text-sm font-semibold ${
-          active ? "text-emerald-950" : "text-slate-950"
-        }`}
-      >
-        {title}
-      </span>
-    </span>
   </button>
 );
 
diff --git a/frontend/src/components/MapControls/mobile/MobileMapSectionHeading.tsx b/frontend/src/components/MapControls/mobile/MobileMapSectionHeading.tsx
new file mode 100644
index 00000000..f6f5ce94
--- /dev/null
+++ b/frontend/src/components/MapControls/mobile/MobileMapSectionHeading.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+interface MobileMapSectionHeadingProps {
+  children: ReactNode;
+}
+
+export default function MobileMapSectionHeading({
+  children,
+}: MobileMapSectionHeadingProps) {
+  return (
+    <div className="mb-2 text-xs font-semibold uppercase tracking-[0.08em] text-slate-500">
+      {children}
+    </div>
+  );
+}
diff --git a/frontend/src/components/DeadwoodMap/mobile/mobileMapThumbnails.ts b/frontend/src/components/MapControls/mobile/mobileMapThumbnails.ts
similarity index 100%
rename from frontend/src/components/DeadwoodMap/mobile/mobileMapThumbnails.ts
rename to frontend/src/components/MapControls/mobile/mobileMapThumbnails.ts
diff --git a/frontend/src/components/PriwaField/PriwaFieldMap.tsx b/frontend/src/components/PriwaField/PriwaFieldMap.tsx
index 6f11b6ec..63543983 100644
--- a/frontend/src/components/PriwaField/PriwaFieldMap.tsx
+++ b/frontend/src/components/PriwaField/PriwaFieldMap.tsx
@@ -1,4 +1,4 @@
-import { Alert, App, Button, FloatButton, Tooltip } from "antd";
+import { Alert, App, Button, Tooltip } from "antd";
 import {
   AimOutlined,
   EnvironmentOutlined,
@@ -42,7 +42,9 @@ import PriwaPointListPanel from "./PriwaPointListPanel";
 import PriwaOfflineStatus from "./PriwaOfflineStatus";
 import PriwaBefallsgruppeEditor from "./PriwaBefallsgruppeEditor";
 import PriwaBaseLayerControl from "./PriwaBaseLayerControl";
+import PriwaMapLayersSheet from "./PriwaMapLayersSheet";
 import PriwaMobileFieldTools from "./PriwaMobileFieldTools";
+import PriwaMobilePrimaryActions from "./PriwaMobilePrimaryActions";
 import PriwaOfflineAreaSelection from "./PriwaOfflineAreaSelection";
 import PriwaOfflineMapPanel from "./PriwaOfflineMapPanel";
 import PriwaReviewWorkbench, {
@@ -89,6 +91,8 @@ interface PriwaFieldMapProps {
   projectName: string;
   warnkarteOverlay?: IPriwaWarnkarteOverlay | null;
   warnkarteVisible?: boolean;
+  warnkarteLoading?: boolean;
+  onWarnkarteVisibilityChange?: (visible: boolean) => void;
   additionalMapControl?: ReactNode;
   reviewDetailMode?: PriwaReviewDetailMode;
   mosaics?: IPriwaMosaic[];
@@ -117,6 +121,8 @@ interface PriwaFieldMapProps {
   onSyncNow?: () => Promise<void>;
 }
 
+type PriwaMapPanel = "layers" | "offline" | "trees";
+
 export default function PriwaFieldMap({
   points,
   projectId,
@@ -125,6 +131,8 @@ export default function PriwaFieldMap({
   projectName,
   warnkarteOverlay = null,
   warnkarteVisible = true,
+  warnkarteLoading = false,
+  onWarnkarteVisibilityChange,
   additionalMapControl,
   reviewDetailMode,
   mosaics = [],
@@ -198,7 +206,9 @@ export default function PriwaFieldMap({
   const [focusedPointId, setFocusedPointId] = useState<string | null>(null);
   const [reviewPointId, setReviewPointId] = useState<string | null>(null);
   const [baseLayer, setBaseLayer] = useState<PriwaBaseLayer>("aerial");
-  const [isOfflineMapModeActive, setOfflineMapModeActive] = useState(false);
+  const [activeMapPanel, setActiveMapPanel] = useState<PriwaMapPanel | null>(
+    null,
+  );
   const [viewportExtent3857, setViewportExtent3857] =
     useState<PriwaMapExtent | null>(null);
   const mapInteraction = usePriwaMapInteractionMode();
@@ -226,6 +236,9 @@ export default function PriwaFieldMap({
     mapRef,
     mapInteraction.isSelectingOfflineArea,
   );
+  const isOfflineMapModeActive = activeMapPanel === "offline";
+  const isMapLayersOpen = activeMapPanel === "layers";
+  const isTreeListOpen = activeMapPanel === "trees";
 
   useEffect(() => {
     isMobileRef.current = isMobile;
@@ -589,6 +602,11 @@ export default function PriwaFieldMap({
     );
   }, [isMobile]);
 
+  const zoomToWarnkarteFromSheet = useCallback(() => {
+    zoomToWarnkarte();
+    setActiveMapPanel(null);
+  }, [zoomToWarnkarte]);
+
   const focusPointOnMap = useCallback(
     (point: IPriwaPoint) => {
       selectMatchedMosaicForPoint(point);
@@ -714,10 +732,28 @@ export default function PriwaFieldMap({
   const startOfflineAreaSelection = useCallback(() => {
     setDrawerOpen(false);
     setPointListOpen(false);
-    setOfflineMapModeActive(false);
+    setActiveMapPanel("offline");
     setMode("select-offline-area");
   }, [setMode]);
 
+  const cancelOfflineAreaSelection = useCallback(() => {
+    setMode("browse");
+    setActiveMapPanel("offline");
+  }, [setMode]);
+
+  const dismissOfflineAreaSelection = useCallback(() => {
+    setMode("browse");
+    setActiveMapPanel(null);
+  }, [setMode]);
+
+  const toggleOfflineMapPanel = useCallback(() => {
+    setActiveMapPanel((current) => (current === "offline" ? null : "offline"));
+  }, []);
+
+  const toggleMapLayersPanel = useCallback(() => {
+    setActiveMapPanel((current) => (current === "layers" ? null : "layers"));
+  }, []);
+
   const requestDeferredOrientationPermission = useCallback(
     (event: PointerEvent<HTMLDivElement>) => {
       if (!userLocation.needsOrientationPermission) return;
@@ -790,7 +826,7 @@ export default function PriwaFieldMap({
           `Basiskarte offline gespeichert (${area.cachedTileCount}/${area.tileCount} Kacheln)`,
         );
         setMode("browse");
-        setOfflineMapModeActive(true);
+        setActiveMapPanel("offline");
       } catch (error) {
         message.error(
           error instanceof Error
@@ -841,8 +877,24 @@ export default function PriwaFieldMap({
     >
       <div ref={containerRef} className="absolute inset-0" />
 
-      {mapInteraction.mode === "browse" && (
-        <div className="priwa-map-control-stack pointer-events-none absolute left-4 z-[55] flex flex-col gap-2 min-[992px]:left-[22.5rem]">
+      {mapInteraction.mode === "browse" && isMobile && (
+        <div className="priwa-map-control-stack pointer-events-none absolute left-4 z-[55] flex flex-col gap-2">
+          <PriwaMobileFieldTools
+            points={points}
+            groups={groups}
+            isLayersOpen={isMapLayersOpen}
+            isTreeListOpen={isTreeListOpen}
+            onOpenLayers={toggleMapLayersPanel}
+            onOpenTreeList={() => setActiveMapPanel("trees")}
+            onCloseTreeList={() => setActiveMapPanel(null)}
+            onEditPoint={openPointForEditing}
+            onZoomToPoint={focusPointOnMap}
+          />
+        </div>
+      )}
+
+      {mapInteraction.mode === "browse" && !isMobile && (
+        <div className="priwa-map-control-stack pointer-events-none absolute left-[22.5rem] z-[55] flex flex-col gap-2">
           <Tooltip title={locationButtonTitle}>
             <Button
               className={
@@ -869,15 +921,7 @@ export default function PriwaFieldMap({
           {!!warnkarteOverlay?.features.length && warnkarteVisible && (
             <PriwaWarnkarteZoomControl onZoom={zoomToWarnkarte} />
           )}
-          {isMobile && (
-            <PriwaMobileFieldTools
-              points={points}
-              groups={groups}
-              onEditPoint={openPointForEditing}
-              onZoomToPoint={focusPointOnMap}
-            />
-          )}
-          {!isMobile && !isPointListOpen && !isDrawerOpen && (
+          {!isPointListOpen && !isDrawerOpen && (
             <Tooltip title="Käferbaum aufnehmen">
               <Button
                 className="pointer-events-auto shadow-md"
@@ -892,25 +936,20 @@ export default function PriwaFieldMap({
         </div>
       )}
 
-      {isMobile &&
-        !isDrawerOpen &&
-        !isPointListOpen &&
-        !isOfflineMapModeActive &&
-        mapInteraction.mode === "browse" && (
-          <FloatButton
-            className="priwa-add-point-fab"
-            shape="circle"
-            icon={<PlusOutlined />}
-            tooltip={{ title: "Punkt aufnehmen", placement: "left" }}
-            onClick={openNewPointDrawer}
-            aria-label="Punkt aufnehmen"
-            style={{
-              right: "max(20px, calc(env(safe-area-inset-right, 0px) + 20px))",
-              bottom:
-                "max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px))",
-            }}
-          />
-        )}
+      <PriwaMobilePrimaryActions
+        hidden={
+          !isMobile ||
+          isDrawerOpen ||
+          isPointListOpen ||
+          activeMapPanel !== null ||
+          mapInteraction.mode !== "browse"
+        }
+        isLocating={userLocation.isLocating}
+        locationActive={locationButtonActive}
+        locationLabel={locationButtonTitle}
+        onAddPoint={openNewPointDrawer}
+        onLocate={() => userLocation.locateUser(true)}
+      />
 
       {!isMobile && !isPointListOpen && (
         <PriwaReviewWorkbench
@@ -988,7 +1027,9 @@ export default function PriwaFieldMap({
         <PriwaOfflineAreaSelection
           plan={offlineSelectionPlan}
           cacheState={basemapCacheState}
-          onCancel={() => setMode("browse")}
+          isMobile={isMobile}
+          onCancel={cancelOfflineAreaSelection}
+          onDismiss={dismissOfflineAreaSelection}
           onConfirm={handleCacheBasemapArea}
         />
       )}
@@ -1002,7 +1043,8 @@ export default function PriwaFieldMap({
           isSupported={isOfflineBasemapSupported}
           needsRefresh={offlineBasemapNeedsRefresh}
           syncSummary={syncSummary}
-          onClose={() => setOfflineMapModeActive(false)}
+          isMobile={isMobile}
+          onClose={() => setActiveMapPanel(null)}
           onStartSelection={startOfflineAreaSelection}
           onClear={handleClearBasemapArea}
           onRefresh={handleRefreshBasemapAreas}
@@ -1010,6 +1052,22 @@ export default function PriwaFieldMap({
         />
       )}
 
+      {mapInteraction.mode === "browse" && isMobile && (
+        <PriwaMapLayersSheet
+          open={isMapLayersOpen}
+          baseLayer={baseLayer}
+          warnkarteAvailable={!!warnkarteOverlay?.features.length}
+          warnkarteLoading={warnkarteLoading}
+          warnkarteVisible={warnkarteVisible}
+          onClose={() => setActiveMapPanel(null)}
+          onBaseLayerChange={setBaseLayer}
+          onWarnkarteVisibilityChange={(visible) =>
+            onWarnkarteVisibilityChange?.(visible)
+          }
+          onZoomToWarnkarte={zoomToWarnkarteFromSheet}
+        />
+      )}
+
       {mapInteraction.mode === "browse" && (
         <div className="priwa-map-status-stack pointer-events-none absolute right-4 z-[55] flex max-w-[calc(100%-5.75rem)] flex-col items-end gap-1.5 min-[992px]:right-[24.5rem]">
           {locationHintLabel && (
@@ -1025,7 +1083,7 @@ export default function PriwaFieldMap({
             isSupported={isOfflineBasemapSupported}
             needsRefresh={offlineBasemapNeedsRefresh}
             syncSummary={syncSummary}
-            onToggle={() => setOfflineMapModeActive((current) => !current)}
+            onToggle={toggleOfflineMapPanel}
           />
         </div>
       )}
diff --git a/frontend/src/components/PriwaField/PriwaMapLayersSheet.test.ts b/frontend/src/components/PriwaField/PriwaMapLayersSheet.test.ts
new file mode 100644
index 00000000..83c85bdd
--- /dev/null
+++ b/frontend/src/components/PriwaField/PriwaMapLayersSheet.test.ts
@@ -0,0 +1,49 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import PriwaMapLayersSheet from "./PriwaMapLayersSheet";
+
+describe("PriwaMapLayersSheet", () => {
+  it("combines base maps and Warnkarte in one compact mobile sheet", () => {
+    const html = renderToStaticMarkup(
+      createElement(PriwaMapLayersSheet, {
+        open: true,
+        baseLayer: "aerial",
+        warnkarteAvailable: true,
+        warnkarteLoading: false,
+        warnkarteVisible: true,
+        onClose: () => undefined,
+        onBaseLayerChange: () => undefined,
+        onWarnkarteVisibilityChange: () => undefined,
+        onZoomToWarnkarte: () => undefined,
+      }),
+    );
+
+    expect(html).toContain('data-mobile-bottom-sheet-snap="compact"');
+    expect(html).toContain("Luftbild");
+    expect(html).toContain("Topografische Karte");
+    expect(html).toContain("Warnkarte");
+    expect(html).toContain('aria-label="Zur Warnkarte zoomen"');
+    expect(html).toContain('aria-label="Kartenebenen schließen"');
+  });
+
+  it("keeps the Warnkarte toggle available when data must be loaded", () => {
+    const html = renderToStaticMarkup(
+      createElement(PriwaMapLayersSheet, {
+        open: true,
+        baseLayer: "topographic",
+        warnkarteAvailable: false,
+        warnkarteLoading: false,
+        warnkarteVisible: true,
+        onClose: () => undefined,
+        onBaseLayerChange: () => undefined,
+        onWarnkarteVisibilityChange: () => undefined,
+        onZoomToWarnkarte: () => undefined,
+      }),
+    );
+
+    expect(html).toContain("Beim Aktivieren laden");
+    expect(html).not.toContain('aria-label="Zur Warnkarte zoomen"');
+  });
+});
diff --git a/frontend/src/components/PriwaField/PriwaMapLayersSheet.tsx b/frontend/src/components/PriwaField/PriwaMapLayersSheet.tsx
new file mode 100644
index 00000000..a5282552
--- /dev/null
+++ b/frontend/src/components/PriwaField/PriwaMapLayersSheet.tsx
@@ -0,0 +1,117 @@
+import { Button, Tooltip } from "antd";
+import { FullscreenOutlined, WarningOutlined } from "@ant-design/icons";
+
+import MobileBottomSheet from "../MapControls/mobile/MobileBottomSheet";
+import MobileLayerRow from "../MapControls/mobile/MobileLayerRow";
+import MobileLayerTile from "../MapControls/mobile/MobileLayerTile";
+import MobileMapSectionHeading from "../MapControls/mobile/MobileMapSectionHeading";
+import { mobileMapThumbnails } from "../MapControls/mobile/mobileMapThumbnails";
+import type { PriwaBaseLayer } from "./types";
+
+interface PriwaMapLayersSheetProps {
+  open: boolean;
+  baseLayer: PriwaBaseLayer;
+  warnkarteAvailable: boolean;
+  warnkarteLoading: boolean;
+  warnkarteVisible: boolean;
+  onClose: () => void;
+  onBaseLayerChange: (layer: PriwaBaseLayer) => void;
+  onWarnkarteVisibilityChange: (visible: boolean) => void;
+  onZoomToWarnkarte: () => void;
+}
+
+const baseLayerOptions: Array<{
+  value: PriwaBaseLayer;
+  label: string;
+  image: string;
+}> = [
+  {
+    value: "aerial",
+    label: "Luftbild",
+    image: mobileMapThumbnails.satellite,
+  },
+  {
+    value: "topographic",
+    label: "Topografische Karte",
+    image: mobileMapThumbnails.streets,
+  },
+];
+
+export default function PriwaMapLayersSheet({
+  open,
+  baseLayer,
+  warnkarteAvailable,
+  warnkarteLoading,
+  warnkarteVisible,
+  onClose,
+  onBaseLayerChange,
+  onWarnkarteVisibilityChange,
+  onZoomToWarnkarte,
+}: PriwaMapLayersSheetProps) {
+  const isWarnkarteActive = warnkarteAvailable && warnkarteVisible;
+
+  return (
+    <MobileBottomSheet
+      open={open}
+      title="Kartenebenen"
+      closeLabel="Kartenebenen schließen"
+      onClose={onClose}
+      initialSnap="compact"
+      compactRatio={0.28}
+      expandedRatio={0.7}
+      hideFrom="lg"
+    >
+      <div className="space-y-4">
+        <section>
+          <MobileMapSectionHeading>Basiskarte</MobileMapSectionHeading>
+          <div className="grid grid-cols-2 gap-2.5">
+            {baseLayerOptions.map((option) => (
+              <MobileLayerTile
+                key={option.value}
+                thumb={option.image}
+                title={option.label}
+                active={baseLayer === option.value}
+                onClick={() => onBaseLayerChange(option.value)}
+              />
+            ))}
+          </div>
+        </section>
+
+        <section>
+          <MobileMapSectionHeading>Zusätzliche Ebene</MobileMapSectionHeading>
+          <MobileLayerRow
+            icon={<WarningOutlined />}
+            title="Warnkarte"
+            description={
+              warnkarteLoading
+                ? "Warnkarte wird geladen"
+                : warnkarteAvailable
+                  ? "Gefahrenbereiche"
+                  : "Beim Aktivieren laden"
+            }
+            checked={isWarnkarteActive}
+            toggleLabel={
+              isWarnkarteActive
+                ? "Warnkarte ausblenden"
+                : "Warnkarte einblenden"
+            }
+            onChange={onWarnkarteVisibilityChange}
+            secondaryAction={
+              isWarnkarteActive ? (
+                <Tooltip title="Zur Warnkarte zoomen">
+                  <Button
+                    type="text"
+                    shape="circle"
+                    icon={<FullscreenOutlined />}
+                    aria-label="Zur Warnkarte zoomen"
+                    onClick={onZoomToWarnkarte}
+                  />
+                </Tooltip>
+              ) : null
+            }
+          />
+        </section>
+      </div>
+    </MobileBottomSheet>
+  );
+}
diff --git a/frontend/src/components/PriwaField/PriwaMobileFieldTools.tsx b/frontend/src/components/PriwaField/PriwaMobileFieldTools.tsx
index ccea415e..b7946fd2 100644
--- a/frontend/src/components/PriwaField/PriwaMobileFieldTools.tsx
+++ b/frontend/src/components/PriwaField/PriwaMobileFieldTools.tsx
@@ -2,6 +2,7 @@ import { SearchOutlined, UnorderedListOutlined } from "@ant-design/icons";
 import { Button, Drawer, Empty, Input, Tooltip } from "antd";
 import { useMemo, useState } from "react";
 
+import MapLayersIcon from "../MapControls/mobile/MapLayersIcon";
 import { indexPriwaBefallsgruppenByTreeId } from "./priwaBefallsgruppenState";
 import PriwaPointCompactList from "./PriwaPointCompactList";
 import type { IPriwaBefallsgruppe, IPriwaPoint } from "./types";
@@ -9,6 +10,11 @@ import type { IPriwaBefallsgruppe, IPriwaPoint } from "./types";
 interface PriwaMobileFieldToolsProps {
   points: IPriwaPoint[];
   groups: IPriwaBefallsgruppe[];
+  isLayersOpen: boolean;
+  isTreeListOpen: boolean;
+  onOpenLayers: () => void;
+  onOpenTreeList: () => void;
+  onCloseTreeList: () => void;
   onEditPoint: (point: IPriwaPoint) => void;
   onZoomToPoint: (point: IPriwaPoint) => void;
 }
@@ -16,10 +22,14 @@ interface PriwaMobileFieldToolsProps {
 export default function PriwaMobileFieldTools({
   points,
   groups,
+  isLayersOpen,
+  isTreeListOpen,
+  onOpenLayers,
+  onOpenTreeList,
+  onCloseTreeList,
   onEditPoint,
   onZoomToPoint,
 }: PriwaMobileFieldToolsProps) {
-  const [isTreeListOpen, setTreeListOpen] = useState(false);
   const [query, setQuery] = useState("");
   const groupByTreeId = useMemo(
     () => indexPriwaBefallsgruppenByTreeId(groups),
@@ -38,18 +48,30 @@ export default function PriwaMobileFieldTools({
 
   const showPointOnMap = (point: IPriwaPoint) => {
     onZoomToPoint(point);
-    setTreeListOpen(false);
+    onCloseTreeList();
   };
 
   return (
     <>
+      <Tooltip title="Kartenebenen" placement="right">
+        <Button
+          className="pointer-events-auto shadow-md min-[992px]:hidden"
+          type={isLayersOpen ? "primary" : "default"}
+          shape="circle"
+          size="large"
+          icon={<MapLayersIcon />}
+          onClick={onOpenLayers}
+          aria-label="Kartenebenen öffnen"
+          aria-pressed={isLayersOpen}
+        />
+      </Tooltip>
       <Tooltip title="Bäume" placement="right">
         <Button
           className="pointer-events-auto shadow-md min-[992px]:hidden"
           shape="circle"
           size="large"
           icon={<UnorderedListOutlined />}
-          onClick={() => setTreeListOpen(true)}
+          onClick={onOpenTreeList}
           aria-label="Baumliste öffnen"
           aria-pressed={isTreeListOpen}
         />
@@ -60,7 +82,7 @@ export default function PriwaMobileFieldTools({
         placement="bottom"
         height="78dvh"
         open={isTreeListOpen}
-        onClose={() => setTreeListOpen(false)}
+        onClose={onCloseTreeList}
         rootClassName="priwa-layer-sheet-root"
         className="min-[992px]:hidden"
         styles={{
diff --git a/frontend/src/components/PriwaField/PriwaMobilePrimaryActions.tsx b/frontend/src/components/PriwaField/PriwaMobilePrimaryActions.tsx
new file mode 100644
index 00000000..c7fde557
--- /dev/null
+++ b/frontend/src/components/PriwaField/PriwaMobilePrimaryActions.tsx
@@ -0,0 +1,59 @@
+import {
+  AimOutlined,
+  EnvironmentOutlined,
+  PlusOutlined,
+} from "@ant-design/icons";
+import { Button, Tooltip } from "antd";
+
+interface PriwaMobilePrimaryActionsProps {
+  hidden: boolean;
+  isLocating: boolean;
+  locationActive: boolean;
+  locationLabel: string;
+  onAddPoint: () => void;
+  onLocate: () => void;
+}
+
+const actionClass =
+  "pointer-events-auto !flex !h-[52px] !w-[52px] !min-w-[52px] !items-center !justify-center shadow-lg shadow-slate-950/20";
+
+export default function PriwaMobilePrimaryActions({
+  hidden,
+  isLocating,
+  locationActive,
+  locationLabel,
+  onAddPoint,
+  onLocate,
+}: PriwaMobilePrimaryActionsProps) {
+  if (hidden) return null;
+
+  return (
+    <div
+      className="pointer-events-none absolute right-4 z-[55] flex flex-col gap-2.5 min-[992px]:hidden"
+      style={{
+        bottom: "max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px))",
+      }}
+    >
+      <Tooltip title="Käferbaum aufnehmen" placement="left">
+        <Button
+          className={actionClass}
+          shape="circle"
+          icon={<PlusOutlined />}
+          aria-label="Käferbaum aufnehmen"
+          onClick={onAddPoint}
+        />
+      </Tooltip>
+      <Tooltip title={locationLabel} placement="left">
+        <Button
+          className={actionClass}
+          type={locationActive ? "primary" : "default"}
+          shape="circle"
+          icon={isLocating ? <AimOutlined spin /> : <EnvironmentOutlined />}
+          aria-label="Aktuelle Position aktivieren"
+          aria-pressed={locationActive}
+          onClick={onLocate}
+        />
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/frontend/src/components/PriwaField/PriwaOfflineAreaSelection.test.ts b/frontend/src/components/PriwaField/PriwaOfflineAreaSelection.test.ts
index c0c83d7b..bab3ac51 100644
--- a/frontend/src/components/PriwaField/PriwaOfflineAreaSelection.test.ts
+++ b/frontend/src/components/PriwaField/PriwaOfflineAreaSelection.test.ts
@@ -24,7 +24,9 @@ describe("PriwaOfflineAreaSelection", () => {
           total: 0,
           errorMessage: null,
         },
+        isMobile: false,
         onCancel: () => undefined,
+        onDismiss: () => undefined,
         onConfirm: async () => undefined,
       }),
     );
@@ -37,4 +39,28 @@ describe("PriwaOfflineAreaSelection", () => {
     expect(html).toContain("Karte verschieben oder zoomen");
     expect(html).toContain("Bereich herunterladen");
   });
+
+  it("keeps mobile selection actions in a compact dismissible sheet", () => {
+    const html = renderToStaticMarkup(
+      createElement(PriwaOfflineAreaSelection, {
+        plan: null,
+        cacheState: {
+          isCaching: false,
+          cached: 0,
+          failed: 0,
+          total: 0,
+          errorMessage: null,
+        },
+        isMobile: true,
+        onCancel: () => undefined,
+        onDismiss: () => undefined,
+        onConfirm: async () => undefined,
+      }),
+    );
+
+    expect(html).toContain("Offline-Bereich auswählen");
+    expect(html).toContain('data-mobile-bottom-sheet-snap="compact"');
+    expect(html).toContain('aria-label="Bereichsauswahl schließen"');
+    expect(html).toContain('data-priwa-offline-selection-panel="true"');
+  });
 });
diff --git a/frontend/src/components/PriwaField/PriwaOfflineAreaSelection.tsx b/frontend/src/components/PriwaField/PriwaOfflineAreaSelection.tsx
index b6e09518..3c8e12fd 100644
--- a/frontend/src/components/PriwaField/PriwaOfflineAreaSelection.tsx
+++ b/frontend/src/components/PriwaField/PriwaOfflineAreaSelection.tsx
@@ -1,5 +1,6 @@
 import { Button, Progress } from "antd";
 
+import MobileBottomSheet from "../MapControls/mobile/MobileBottomSheet";
 import {
   PRIWA_BASEMAP_MAX_AREA_KM2,
   PRIWA_BASEMAP_MAX_TILES,
@@ -12,7 +13,9 @@ import type { IPriwaOfflineSelectionPlan } from "./usePriwaOfflineSelectionPlan"
 interface PriwaOfflineAreaSelectionProps {
   plan: IPriwaOfflineSelectionPlan | null;
   cacheState: IPriwaBasemapCacheState;
+  isMobile: boolean;
   onCancel: () => void;
+  onDismiss: () => void;
   onConfirm: (plan: IPriwaOfflineSelectionPlan) => Promise<void>;
 }
 
@@ -24,7 +27,9 @@ const selectionMaxHeight = `${Math.round(
 export default function PriwaOfflineAreaSelection({
   plan,
   cacheState,
+  isMobile,
   onCancel,
+  onDismiss,
   onConfirm,
 }: PriwaOfflineAreaSelectionProps) {
   const isValid =
@@ -39,6 +44,59 @@ export default function PriwaOfflineAreaSelection({
         )
       : 0;
 
+  const content = (
+    <div data-priwa-offline-selection-panel="true">
+      <div className="text-sm font-medium text-gray-900">
+        Karte verschieben oder zoomen
+      </div>
+      <div className="mt-0.5 text-xs text-gray-600">
+        Der klare Rahmen wird für Luftbild und topografische Karte gespeichert.
+      </div>
+      {plan && (
+        <div
+          className={
+            isValid
+              ? "mt-2 text-xs text-emerald-800"
+              : "mt-2 text-xs text-red-600"
+          }
+        >
+          {Math.round(plan.areaKm2 * 100)} ha ·{" "}
+          {plan.tileCount.toLocaleString("de-DE")} Kacheln
+          {!isValid && " · Bereich bitte verkleinern"}
+        </div>
+      )}
+      {cacheState.isCaching && (
+        <Progress
+          className="mt-2"
+          percent={cachePercent}
+          size="small"
+          status={cacheState.failed > 0 ? "exception" : "active"}
+        />
+      )}
+      {cacheState.errorMessage && (
+        <div className="mt-2 text-xs text-red-600">
+          {cacheState.errorMessage}
+        </div>
+      )}
+      <div className="mt-3 flex gap-2">
+        <Button block disabled={cacheState.isCaching} onClick={onCancel}>
+          Abbrechen
+        </Button>
+        <Button
+          block
+          type="primary"
+          loading={cacheState.isCaching}
+          disabled={!isValid}
+          onClick={() => {
+            if (plan) void onConfirm(plan);
+          }}
+        >
+          Bereich herunterladen
+        </Button>
+      </div>
+    </div>
+  );
+
   return (
     <div
       className="pointer-events-none absolute inset-0 z-[70] overflow-hidden"
@@ -55,61 +113,24 @@ export default function PriwaOfflineAreaSelection({
           width: `min(${selectionSize}cqw, ${selectionMaxHeight}cqh)`,
         }}
       />
-
-      <div
-        className="pointer-events-auto absolute bottom-4 left-4 right-4 rounded-md bg-white/95 p-3 shadow-lg backdrop-blur min-[992px]:bottom-5 min-[992px]:left-1/2 min-[992px]:max-w-lg min-[992px]:-translate-x-1/2"
-        data-priwa-offline-selection-panel="true"
-      >
-        <div className="text-sm font-medium text-gray-900">
-          Karte verschieben oder zoomen
+      {isMobile ? (
+        <MobileBottomSheet
+          open
+          title="Offline-Bereich auswählen"
+          closeLabel="Bereichsauswahl schließen"
+          onClose={onDismiss}
+          initialSnap="compact"
+          compactRatio={0.28}
+          expandedRatio={0.62}
+          hideFrom="lg"
+        >
+          {content}
+        </MobileBottomSheet>
+      ) : (
+        <div className="pointer-events-auto absolute bottom-4 left-4 right-4 rounded-md bg-white/95 p-3 shadow-lg backdrop-blur min-[992px]:bottom-5 min-[992px]:left-1/2 min-[992px]:max-w-lg min-[992px]:-translate-x-1/2">
+          {content}
         </div>
-        <div className="mt-0.5 text-xs text-gray-600">
-          Der klare Rahmen wird für Luftbild und topografische Karte
-          gespeichert.
-        </div>
-        {plan && (
-          <div
-            className={
-              isValid
-                ? "mt-2 text-xs text-emerald-800"
-                : "mt-2 text-xs text-red-600"
-            }
-          >
-            {Math.round(plan.areaKm2 * 100)} ha ·{" "}
-            {plan.tileCount.toLocaleString("de-DE")} Kacheln
-            {!isValid && " · Bereich bitte verkleinern"}
-          </div>
-        )}
-        {cacheState.isCaching && (
-          <Progress
-            className="mt-2"
-            percent={cachePercent}
-            size="small"
-            status={cacheState.failed > 0 ? "exception" : "active"}
-          />
-        )}
-        {cacheState.errorMessage && (
-          <div className="mt-2 text-xs text-red-600">
-            {cacheState.errorMessage}
-          </div>
-        )}
-        <div className="mt-3 flex gap-2">
-          <Button block disabled={cacheState.isCaching} onClick={onCancel}>
-            Abbrechen
-          </Button>
-          <Button
-            block
-            type="primary"
-            loading={cacheState.isCaching}
-            disabled={!isValid}
-            onClick={() => {
-              if (plan) void onConfirm(plan);
-            }}
-          >
-            Bereich herunterladen
-          </Button>
-        </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/frontend/src/components/PriwaField/PriwaOfflineMapPanel.test.ts b/frontend/src/components/PriwaField/PriwaOfflineMapPanel.test.ts
index 6923a049..5c60b935 100644
--- a/frontend/src/components/PriwaField/PriwaOfflineMapPanel.test.ts
+++ b/frontend/src/components/PriwaField/PriwaOfflineMapPanel.test.ts
@@ -22,6 +22,7 @@ describe("PriwaOfflineMapPanel", () => {
         isSupported: true,
         needsRefresh: false,
         readyAreaCount: 0,
+        isMobile: false,
         onClose: () => undefined,
         onStartSelection: () => undefined,
         onClear: async () => undefined,
@@ -62,6 +63,7 @@ describe("PriwaOfflineMapPanel", () => {
         isSupported: true,
         needsRefresh: true,
         readyAreaCount: 0,
+        isMobile: false,
         onClose: () => undefined,
         onStartSelection: () => undefined,
         onClear: async () => undefined,
@@ -72,4 +74,26 @@ describe("PriwaOfflineMapPanel", () => {
     expect(html).toContain("auf dem iPhone ohne Netz funktionieren");
     expect(html).toContain("Offline-Karten aktualisieren");
   });
+
+  it("uses a compact dismissible sheet on mobile", () => {
+    const html = renderToStaticMarkup(
+      createElement(PriwaOfflineMapPanel, {
+        areas: [],
+        cacheState,
+        coverageRatio: 0.5,
+        isSupported: true,
+        needsRefresh: false,
+        readyAreaCount: 0,
+        isMobile: true,
+        onClose: () => undefined,
+        onStartSelection: () => undefined,
+        onClear: async () => undefined,
+        onRefresh: async () => undefined,
+      }),
+    );
+
+    expect(html).toContain('data-mobile-bottom-sheet-snap="compact"');
+    expect(html).toContain('aria-label="Offline-Karten schließen"');
+    expect(html).toContain("50 % der aktuellen Kartenansicht");
+  });
 });
diff --git a/frontend/src/components/PriwaField/PriwaOfflineMapPanel.tsx b/frontend/src/components/PriwaField/PriwaOfflineMapPanel.tsx
index b4bd5dd1..d0844121 100644
--- a/frontend/src/components/PriwaField/PriwaOfflineMapPanel.tsx
+++ b/frontend/src/components/PriwaField/PriwaOfflineMapPanel.tsx
@@ -7,6 +7,7 @@ import {
 } from "@ant-design/icons";
 import { Button, Progress, Typography } from "antd";
 
+import MobileBottomSheet from "../MapControls/mobile/MobileBottomSheet";
 import type { IPriwaSyncSummary } from "./priwaOfflineSync";
 import type { IPriwaOfflineBasemapArea } from "./priwaOfflineStore";
 import type { IPriwaBasemapCacheState } from "./usePriwaOfflineBasemap";
@@ -19,6 +20,7 @@ interface PriwaOfflineMapPanelProps {
   needsRefresh: boolean;
   readyAreaCount: number;
   syncSummary?: IPriwaSyncSummary;
+  isMobile: boolean;
   onClose: () => void;
   onStartSelection: () => void;
   onClear: () => Promise<void>;
@@ -41,6 +43,7 @@ export default function PriwaOfflineMapPanel({
   needsRefresh,
   readyAreaCount,
   syncSummary,
+  isMobile,
   onClose,
   onStartSelection,
   onClear,
@@ -59,31 +62,14 @@ export default function PriwaOfflineMapPanel({
       : 0;
   const syncLabel = getSyncLabel(syncSummary);
 
-  return (
-    <section
-      className="pointer-events-auto absolute bottom-4 left-4 right-4 z-[70] max-h-[55dvh] overflow-y-auto rounded-md bg-white/95 p-3 shadow-lg backdrop-blur min-[992px]:bottom-5 min-[992px]:left-1/2 min-[992px]:max-w-lg min-[992px]:-translate-x-1/2"
-      aria-label="Offline-Karten"
-      data-priwa-offline-map-panel="true"
-    >
-      <div className="flex items-start justify-between gap-3">
-        <div>
-          <Typography.Text strong>Offline-Karten</Typography.Text>
-          <div className="mt-1 text-xs text-gray-600">
-            {Math.round(coverageRatio * 100)} % der aktuellen Kartenansicht sind
-            offline verfügbar.
-          </div>
-        </div>
-        <Button
-          type="text"
-          size="small"
-          icon={<CloseOutlined />}
-          aria-label="Offline-Karten schließen"
-          onClick={onClose}
-        />
+  const content = (
+    <div data-priwa-offline-map-panel="true">
+      <div className="text-xs text-gray-600">
+        {Math.round(coverageRatio * 100)} % der aktuellen Kartenansicht sind
+        offline verfügbar.
       </div>
-
       {hasAreas && (
-        <div className="mt-3 rounded-md border border-emerald-100 bg-emerald-50 px-2 py-1.5 text-xs text-emerald-900">
+        <div className="mt-2 rounded-md border border-emerald-100 bg-emerald-50 px-2 py-1.5 text-xs text-emerald-900">
           {readyAreaCount} von {areas.length} Bereichen bereit · {totalAreaHa}{" "}
           ha
         </div>
@@ -164,6 +150,42 @@ export default function PriwaOfflineMapPanel({
           Offline-Karten werden von diesem Browser nicht unterstützt.
         </div>
       )}
+    </div>
+  );
+
+  if (isMobile) {
+    return (
+      <MobileBottomSheet
+        open
+        title="Offline-Karten"
+        closeLabel="Offline-Karten schließen"
+        onClose={onClose}
+        initialSnap="compact"
+        compactRatio={0.28}
+        expandedRatio={0.7}
+        hideFrom="lg"
+      >
+        {content}
+      </MobileBottomSheet>
+    );
+  }
+
+  return (
+    <section
+      className="pointer-events-auto absolute bottom-4 left-4 right-4 z-[70] max-h-[55dvh] overflow-y-auto rounded-md bg-white/95 p-3 shadow-lg backdrop-blur min-[992px]:bottom-5 min-[992px]:left-1/2 min-[992px]:max-w-lg min-[992px]:-translate-x-1/2"
+      aria-label="Offline-Karten"
+    >
+      <div className="mb-3 flex items-start justify-between gap-3">
+        <Typography.Text strong>Offline-Karten</Typography.Text>
+        <Button
+          type="text"
+          size="small"
+          icon={<CloseOutlined />}
+          aria-label="Offline-Karten schließen"
+          onClick={onClose}
+        />
+      </div>
+      {content}
     </section>
   );
 }
diff --git a/frontend/src/components/PriwaField/PriwaWarnkarteMapControls.tsx b/frontend/src/components/PriwaField/PriwaWarnkarteMapControls.tsx
index bc4729e0..656243de 100644
--- a/frontend/src/components/PriwaField/PriwaWarnkarteMapControls.tsx
+++ b/frontend/src/components/PriwaField/PriwaWarnkarteMapControls.tsx
@@ -7,20 +7,16 @@ import {
 import { Button, Tooltip } from "antd";
 
 interface PriwaWarnkarteVisibilityControlProps {
-  hasOverlay: boolean;
   isVisible: boolean;
   onToggle: () => void;
 }
 
 export function PriwaWarnkarteVisibilityControl({
-  hasOverlay,
   isVisible,
   onToggle,
 }: PriwaWarnkarteVisibilityControlProps) {
   const label = isVisible ? "Warnkarte ausblenden" : "Warnkarte einblenden";
 
-  if (!hasOverlay) return null;
-
   return (
     <Tooltip title={label} placement="right">
       <Button
diff --git a/frontend/src/components/PriwaField/usePriwaWarnkarte.ts b/frontend/src/components/PriwaField/usePriwaWarnkarte.ts
index 5b8b56e0..1289ee2b 100644
--- a/frontend/src/components/PriwaField/usePriwaWarnkarte.ts
+++ b/frontend/src/components/PriwaField/usePriwaWarnkarte.ts
@@ -34,6 +34,8 @@ export function usePriwaWarnkarte(projectId: string, canManage: boolean) {
     enabled: !!projectId && !!token && canManage,
     queryFn: () => fetchPriwaWarnkarteVersions(projectId, token!),
   });
+  const activeOverlay = activeQuery.data ?? null;
+  const refetchActiveOverlay = activeQuery.refetch;
 
   const requireToken = () => {
     if (!token) throw new Error("Die Anmeldung ist abgelaufen.");
@@ -119,17 +121,30 @@ export function usePriwaWarnkarte(projectId: string, canManage: boolean) {
     setSelectedOverlay(null);
   }, []);
 
+  const activateOverlay = useCallback(async () => {
+    if (selectedOverlay?.features.length || activeOverlay?.features.length) {
+      setVisible(true);
+      return true;
+    }
+
+    const result = await refetchActiveOverlay();
+    const isAvailable = !!result.data?.features.length;
+    setVisible(isAvailable);
+    return isAvailable;
+  }, [activeOverlay, refetchActiveOverlay, selectedOverlay]);
+
   return {
-    activeOverlay: activeQuery.data ?? null,
-    displayedOverlay: selectedOverlay ?? activeQuery.data ?? null,
+    activeOverlay,
+    displayedOverlay: selectedOverlay ?? activeOverlay,
     isVisible,
-    overlayError: activeQuery.error,
+    isLoadingOverlay: activeQuery.isFetching,
     selectedOverlay,
     versions: versionsQuery.data ?? [],
     versionsError: versionsQuery.error,
     isLoadingVersions: versionsQuery.isLoading,
     clearSelectedVersion,
-    toggleVisibility: () => setVisible((visible) => !visible),
+    activateOverlay,
+    setVisibility: setVisible,
     importFile,
     archiveVersion,
     restoreVersion,
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4103b89b..03da1b04 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -406,49 +406,10 @@
   }
 }
 
-.priwa-add-point-fab {
-  width: 52px !important;
-  height: 52px !important;
-  color: #2d6b3f !important;
-  box-shadow:
-    0 8px 24px rgb(15 23 42 / 18%),
-    0 2px 6px rgb(15 23 42 / 14%) !important;
-}
-
-.priwa-add-point-fab .ant-float-btn-body {
-  background: #ffffff !important;
-  border: 1px solid rgb(226 232 240) !important;
-}
-
-.priwa-add-point-fab:hover .ant-float-btn-body,
-.priwa-add-point-fab:focus-visible .ant-float-btn-body {
-  background: #f8fafc !important;
-  border-color: #2d6b3f !important;
-}
-
-.priwa-add-point-fab .ant-float-btn-body,
-.priwa-add-point-fab .ant-float-btn-content,
-.priwa-add-point-fab .ant-float-btn-icon {
-  width: 100%;
-  height: 100%;
-}
-
-.priwa-add-point-fab .ant-float-btn-content,
-.priwa-add-point-fab .ant-float-btn-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .priwa-comment-form-item.ant-form-item {
   margin-bottom: 30px !important;
 }
 
-.priwa-add-point-fab .anticon {
-  font-size: 20px;
-  color: #2d6b3f !important;
-}
-
 .priwa-point-table-row-focused > td,
 .priwa-point-table-row-focused:hover > td {
   background: #ecfdf5 !important;
diff --git a/frontend/src/pages/PriwaField.tsx b/frontend/src/pages/PriwaField.tsx
index b55a806a..a83cba91 100644
--- a/frontend/src/pages/PriwaField.tsx
+++ b/frontend/src/pages/PriwaField.tsx
@@ -5,7 +5,7 @@ import { usePriwaMosaics } from "../components/PriwaField/usePriwaMosaics";
 import { usePriwaBefallsgruppen } from "../components/PriwaField/usePriwaBefallsgruppen";
 import { usePriwaProjectMemberships } from "../hooks/usePriwaProjectMemberships";
 import { useIsMobile } from "../hooks/useIsMobile";
-import { Alert, Button, Result, Spin } from "antd";
+import { Alert, App, Button, Result, Spin } from "antd";
 import PriwaWarnkarteAdminPanel from "../components/PriwaField/PriwaWarnkarteAdminPanel";
 import PriwaWarnkarteLegend from "../components/PriwaField/PriwaWarnkarteLegend";
 import {
@@ -17,6 +17,7 @@ import type { PriwaReviewDetailMode } from "../components/PriwaField/PriwaReview
 import { useCallback, useMemo, useState } from "react";
 
 export default function PriwaField() {
+  const { message } = App.useApp();
   const [isWarnkarteAdminOpen, setWarnkarteAdminOpen] = useState(false);
   const { isOnline, serviceWorker } = usePriwaOfflineStatus();
   const {
@@ -60,11 +61,31 @@ export default function PriwaField() {
     activeMembership?.projectId ?? "",
     canManageWarnkarte,
   );
+  const activateWarnkarte = warnkarte.activateOverlay;
+  const setWarnkarteVisibility = warnkarte.setVisibility;
   const { clearSelectedVersion } = warnkarte;
   const closeWarnkarteAdmin = useCallback(() => {
     clearSelectedVersion();
     setWarnkarteAdminOpen(false);
   }, [clearSelectedVersion]);
+  const handleWarnkarteVisibilityChange = useCallback(
+    async (visible: boolean) => {
+      if (!visible) {
+        setWarnkarteVisibility(false);
+        return;
+      }
+
+      const isAvailable = await activateWarnkarte();
+      if (!isAvailable) {
+        message.error({
+          content: "Warnkarte konnte nicht geladen werden",
+          duration: 3,
+          key: "priwa-warnkarte-load-error",
+        });
+      }
+    },
+    [activateWarnkarte, message, setWarnkarteVisibility],
+  );
   const warnkarteDetailMode = useMemo<PriwaReviewDetailMode | undefined>(
     () =>
       canManageWarnkarte && isWarnkarteAdminOpen
@@ -169,12 +190,14 @@ export default function PriwaField() {
   }
 
   const hasWarnkarte = !!warnkarte.displayedOverlay?.features.length;
+  const isWarnkarteActive = hasWarnkarte && warnkarte.isVisible;
   const warnkarteControls = (
     <>
       <PriwaWarnkarteVisibilityControl
-        hasOverlay={hasWarnkarte}
-        isVisible={warnkarte.isVisible}
-        onToggle={warnkarte.toggleVisibility}
+        isVisible={isWarnkarteActive}
+        onToggle={() =>
+          void handleWarnkarteVisibilityChange(!isWarnkarteActive)
+        }
       />
       {canManageWarnkarte && (
         <PriwaWarnkarteAdminControl
@@ -197,6 +220,10 @@ export default function PriwaField() {
         projectName={activeMembership.projectName}
         warnkarteOverlay={warnkarte.displayedOverlay}
         warnkarteVisible={warnkarte.isVisible}
+        warnkarteLoading={warnkarte.isLoadingOverlay}
+        onWarnkarteVisibilityChange={(visible) =>
+          void handleWarnkarteVisibilityChange(visible)
+        }
         additionalMapControl={warnkarteControls}
         reviewDetailMode={warnkarteDetailMode}
         isLoadingPoints={isLoadingPoints || isRefetching}
@@ -229,14 +256,6 @@ export default function PriwaField() {
           sourceDate={warnkarte.displayedOverlay?.source_date ?? null}
         />
       )}
-      {warnkarte.overlayError && (
-        <Alert
-          className="absolute bottom-4 left-1/2 z-[65] w-[min(32rem,calc(100%-2rem))] -translate-x-1/2 shadow-lg"
-          type="error"
-          showIcon
-          message="Warnkarte konnte nicht geladen werden"
-        />
-      )}
     </div>
   );
 }