Enlarge legal dialogs and footer with solid white popup borders

assets/styles.css

@@ -22,7 +22,6 @@
   --color-sand: #e5cd9c;
   --color-announcement: #f2e6cc;
   --color-focus: #ffc300;
-  --color-accent: #ef3a57;
   --color-dialog: #721a3d;
   --color-overlay: rgb(24 8 16 / 72%);
   --color-shadow: rgb(24 8 16 / 45%);
@@ -289,17 +288,18 @@ address {
 }
 
 .site-footer {
-  margin-block-start: 28px;
+  inline-size: min(100%, calc(454.02 * var(--unit)));
+  margin-block-start: max(28px, calc(20 * var(--unit)));
   border-block-start: 1px solid color-mix(in srgb, var(--color-sand) 35%, transparent);
-  padding-block-start: 8px;
+  padding-block-start: max(8px, calc(8 * var(--unit)));
   color: var(--color-sand);
-  font-size: 14px;
+  font-size: max(16px, calc(10 * var(--unit)));
 }
 
 .site-footer nav {
   display: flex;
   justify-content: center;
-  gap: 24px;
+  gap: max(24px, calc(24 * var(--unit)));
 }
 
 .site-footer a {
@@ -314,20 +314,23 @@ html:has(.legal-dialog:target) {
 }
 
 .legal-dialog {
+  --dialog-unit: max(1px, var(--unit));
+  --dialog-gap: calc(16 * var(--dialog-unit));
+  --dialog-border: calc(2 * var(--dialog-unit));
   position: fixed;
   inset: 0;
-  inline-size: min(48rem, calc(100% - 32px));
+  inline-size: min(calc(900 * var(--dialog-unit)), calc(100% - 2 * var(--dialog-gap)));
   max-inline-size: none;
-  max-block-size: calc(100svh - 32px);
+  max-block-size: calc(100svh - 2 * var(--dialog-gap));
   margin: auto;
-  border: 1px solid color-mix(in srgb, var(--color-sand) 45%, transparent);
-  border-block-start: 4px solid var(--color-accent);
-  border-radius: 12px;
+  border: var(--dialog-border) solid var(--color-white);
+  border-radius: calc(12 * var(--dialog-unit));
   padding: 0;
   overflow: hidden;
   background: var(--color-dialog);
   color: var(--color-cream);
-  box-shadow: 0 24px 80px var(--color-shadow);
+  font-size: calc(18 * var(--dialog-unit));
+  box-shadow: 0 calc(24 * var(--dialog-unit)) calc(80 * var(--dialog-unit)) var(--color-shadow);
 }
 
 .legal-dialog::backdrop {
@@ -345,7 +348,7 @@ html:has(.legal-dialog:target) {
 .legal-shell {
   display: flex;
   flex-direction: column;
-  max-block-size: min(54rem, calc(100svh - 38px));
+  max-block-size: calc(100svh - 2 * var(--dialog-gap) - 2 * var(--dialog-border));
 }
 
 .legal-header {
@@ -353,26 +356,26 @@ html:has(.legal-dialog:target) {
   flex: none;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
+  gap: calc(16 * var(--dialog-unit));
   border-block-end: 1px solid color-mix(in srgb, var(--color-sand) 25%, transparent);
-  padding: 12px clamp(18px, 4vw, 36px);
+  padding: calc(12 * var(--dialog-unit)) calc(20 * var(--dialog-unit));
 }
 
 .legal-header img {
-  inline-size: 48px;
-  block-size: 38px;
+  inline-size: calc(64 * var(--dialog-unit));
+  block-size: calc(51 * var(--dialog-unit));
 }
 
 .legal-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 12px;
-  min-block-size: 44px;
-  border-radius: 6px;
-  padding-inline: 12px;
+  gap: calc(12 * var(--dialog-unit));
+  min-block-size: calc(44 * var(--dialog-unit));
+  border-radius: calc(6 * var(--dialog-unit));
+  padding-inline: calc(12 * var(--dialog-unit));
   color: var(--color-sand);
-  font-size: 14px;
+  font-size: calc(16 * var(--dialog-unit));
 }
 
 .legal-close:hover {
@@ -381,62 +384,62 @@ html:has(.legal-dialog:target) {
 }
 
 .legal-close span {
-  font-size: 28px;
+  font-size: calc(28 * var(--dialog-unit));
   line-height: 1;
 }
 
 .legal-copy {
   min-block-size: 0;
-  padding: clamp(20px, 4vw, 36px);
+  padding: calc(24 * var(--dialog-unit));
   overflow: auto;
   overscroll-behavior: contain;
   text-align: start;
   overflow-wrap: anywhere;
-  font-size: 16px;
+  font-size: inherit;
   font-style: normal;
   line-height: 1.65;
   scrollbar-color: var(--color-sand) var(--color-dialog);
 }
 
 .legal-copy h1 {
-  margin: 0 0 24px;
+  margin: 0 0 calc(24 * var(--dialog-unit));
   color: var(--color-cream);
-  font-size: clamp(26px, 4vw, 34px);
+  font-size: calc(36 * var(--dialog-unit));
   font-style: italic;
   line-height: 1.2;
 }
 
 .legal-copy h2 {
-  margin: 32px 0 16px;
+  margin: calc(32 * var(--dialog-unit)) 0 calc(16 * var(--dialog-unit));
   color: var(--color-sand);
-  font-size: 22px;
+  font-size: calc(24 * var(--dialog-unit));
   line-height: 1.35;
 }
 
 .legal-copy h3 {
-  margin: 24px 0 12px;
+  margin: calc(24 * var(--dialog-unit)) 0 calc(12 * var(--dialog-unit));
   color: var(--color-sand);
-  font-size: 18px;
+  font-size: calc(20 * var(--dialog-unit));
   line-height: 1.4;
 }
 
 .legal-copy h4 {
-  margin: 20px 0 10px;
-  font-size: 16px;
+  margin: calc(20 * var(--dialog-unit)) 0 calc(10 * var(--dialog-unit));
+  font-size: inherit;
   line-height: 1.5;
 }
 
 .legal-copy p,
 .legal-copy ul {
-  margin-block: 0 16px;
+  margin-block: 0 calc(16 * var(--dialog-unit));
 }
 
 .legal-copy ul {
-  padding-inline-start: 24px;
+  padding-inline-start: calc(24 * var(--dialog-unit));
 }
 
 .legal-copy li + li {
-  margin-block-start: 8px;
+  margin-block-start: calc(8 * var(--dialog-unit));
 }
 
 .legal-copy a {
@@ -504,6 +507,10 @@ html:has(.legal-dialog:target) {
     line-height: 1.5;
   }
 
+  .site-footer {
+    inline-size: min(100%, 620px);
+  }
+
   .announcement {
     margin-block-start: 30px;
   }

docs/implementation.md

@@ -10,6 +10,8 @@ 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 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.
 
 ## Preview and deployment

docs/verification.md

@@ -53,3 +53,10 @@ Legal dialogs on 2026-09-10:
 - Close links, Escape, backdrop clicks, browser Back and direct fragment URLs work. Tab and Shift+Tab remain within each modal; closing restores focus to its footer link and preserves the underlying scroll position.
 - Emulated mobile touch input scrolls the Datenschutz reading area while the page remains stationary; after closing, normal page touch scrolling resumes. No JavaScript errors or external requests occurred.
 - With JavaScript disabled, both footer fragment links expose the full legal text through the CSS fallback; the close link returns to the footer.
+
+Footer and dialog sizing follow-up on 2026-09-10:
+
+- Checked both dialogs at 3840 × 2160, 1200 × 900, 390 × 844, 320 × 568 and 844 × 390. Each fits the viewport without horizontal overflow, keeps its close control visible, scrolls to the final paragraph and closes with Escape. No JavaScript errors occurred.
+- 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.

index.html

@@ -35,7 +35,7 @@
     <link rel="manifest" href="./site.webmanifest">
     <link rel="preload" href="./assets/fonts/roboto-italic-latin.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="./assets/fonts/roboto-latin.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="stylesheet" href="./assets/styles.css?v=19b33a80b5f1">
+    <link rel="stylesheet" href="./assets/styles.css?v=9976de40c15eb">
     <script type="module" src="./assets/app.mjs"></script>
     <script type="module" src="./assets/legal.mjs?v=8e53198bf9c1"></script>
     <script type="application/ld+json">