Cap legal dialog size and match mobile navigation colors

docs/implementation.md

@@ -10,7 +10,9 @@ At 1024 px and below, both decorative images are ordinary `body` backgrounds. Th
 
 The footer opens native dialogs for Impressum and Datenschutz. All legal HTML lives in `index.html`; `assets/legal.mjs` handles opening, closing, focus, and fragment navigation. The burgundy reading panels scroll independently while the page stays in place. The close link, Escape, backdrop click and browser Back close the popup; fragment links also expose the content without JavaScript. CSS and the legal module have content-hash URL parameters that must be refreshed when their files change.
 
-The footer separator spans the main text column, and its links scale with the contact and bank text with a 16 px minimum. Dialog width, type, spacing and controls scale with the desktop design; on mobile, body text is 18 px and the panel keeps a 16 px viewport margin. A uniform solid white border surrounds each panel. The height is limited to the viewport, leaving the close control visible above the scrolling text.
+The footer separator spans the main text column, and its links scale with the contact and bank text with a 16 px minimum. Dialog width, type, spacing and controls scale with the desktop design up to a 1200 px panel width and 24 px body text; on mobile, body text is 18 px and the panel keeps a 16 px viewport margin. A uniform solid white border surrounds each panel. The height is limited to the viewport, leaving the close control visible above the scrolling text.
+
+When a dialog opens, the root canvas and browser `theme-color` switch to the dark burgundy surrounding the panel, then revert when it closes. The solid surround color matches the existing translucent backdrop composited over the page burgundy. This covers browser UI using the theme hint and mobile navigation areas using the canvas background. The native-dialog enhancement disables the CSS `:target` fallback: browsers can retain `:target` after `history.replaceState` removes a fragment, so it must not keep a closed dialog or its scroll lock active. Without JavaScript, fragment navigation still controls the fallback. Browser behavior references: [HTML theme-color updates](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color) and [Chrome on Android edge-to-edge](https://developer.chrome.com/docs/css-ui/edge-to-edge).
 
 The supplied, unchanged PDFs are retained under `design/legal/`. The legal content was copied directly from their `imprint_html_de` and `privacy_html_de` form fields, preserving the supplied headings, paragraphs, lists, punctuation and entities. The PDF export's table of contents, integration instructions and duplicate text rendering are not website copy. Only title attributes for dialog accessibility were added. Run `python3 scripts/verify-legal-content.py` with the development dependency `pypdf` to compare the complete embedded HTML against both original fields. It ignores only indentation, line endings and the two title attributes. Do not revise the legal wording without replacement content from the owner.
 

docs/verification.md

@@ -60,3 +60,10 @@ Footer and dialog sizing follow-up on 2026-09-10:
 - The footer separator matches the main text column width at all five sizes. Footer links scale to 32 px at 3840 px with a 16 px minimum; dialog body text scales to 57.6 px at 3840 px with an 18 px minimum. Inspected wide desktop and mobile screenshots.
 - All four popup borders have identical widths and solid white color. The former pink top accent is removed.
 - The build and whitespace checks pass, and the complete embedded legal HTML still matches both supplied PDF fields exactly.
+
+Dialog size cap and mobile navigation colors on 2026-09-10:
+
+- Limited desktop scaling to a 1200 px panel and 24 px body text after the uncapped version proved too large. Checked both dialogs at 3008 × 1658, 1920 × 1080, 1200 × 900, 390 × 844, 320 × 568 and 844 × 390; all fit, have no horizontal overflow, keep close controls visible and reach the final paragraph. Mobile retains 18 px body text. Inspected desktop and mobile screenshots.
+- Reproduced the unchanged bright `theme-color` and root canvas while a dialog was open. Both now switch from RGB(152, 34, 73) to RGB(60, 15, 32) while open, and return on close. Verified the page color signals in Chrome; the reporting phone's native navigation bar was not available for direct verification.
+- Direct-link testing exposed retained CSS `:target` state after history replacement. The native-dialog enhancement now disables the fallback selectors. Both direct links close fully and release scrolling; close controls, Escape, backdrop clicks, Back and Forward restore the corresponding color state. The JavaScript-disabled fragment fallback still opens and closes.
+- Build, module syntax, whitespace and exact PDF-content checks pass; browser checks reported no JavaScript errors.