Homepage Mobile Responsiveness — Design

Date: 2026-05-14 Scope: www/v3/de/index.html and the shared CSS/JS it depends on (www/v3/css/v3.css, www/v3/js/chrome.de.js). Goal: Make the v3 German homepage render correctly on every screen size, from 320px phones to wide desktop.

Problem

The homepage is partially responsive. Some sections already have media queries and reflow correctly (#north-star, #support, the agents grid, the hero pipeline, the final CTA). Others break on mobile.

The root cause for the broken sections: their grid/flex layout is hard-coded in inline style= attributes. Inline styles outrank any stylesheet selector on specificity, so media queries in v3.css cannot override them. Affected: #case, #security, #pricing, footer.

Separately:

The nav header has no mobile menu — .nav-links and .nav-cta overflow off-screen on phones.
#integration-orbit uses a fixed 600×600px diagram with absolutely-positioned nodes in fixed px; the only mobile handling is a crude transform: scale(0.6).
.wrap keeps 32px side padding and section keeps 120px vertical padding even on 320px screens.
de/index.html:868-869 has a stray </div></div> — an unbalanced-markup bug in the agents section.

Approach

Extract inline layout styles into named classes, then add breakpoints. This matches the pattern the already-responsive sections (#north-star, #support) use. No !important overrides; the root cause is fixed rather than papered over. Shared CSS fixes (nav, footer, .wrap) carry over to other v3 pages automatically.

Rejected alternatives:

Mobile override stylesheet with !important — fragile, specificity wars, doesn't fix root cause.
Intrinsic layout rebuild (auto-fit/minmax, container queries) — large rewrite, risks visual drift from the desktop design finalized 2026-05-14. Overkill for this goal.

Design

1. Breakpoint system

Standardize on three breakpoints, used for all new rules:

Breakpoint	Target
`max-width: 1024px`	tablet / small laptop
`max-width: 768px`	large phone
`max-width: 480px`	phone

The codebase currently has ~10 ad-hoc breakpoints (1100/1080/980/960/900/860/780/700/600/540). Homepage-relevant existing queries are migrated onto this scale where the change is low-risk. Media queries belonging to other pages are left untouched.

2. Shared CSS — `v3.css` (benefits all v3 pages)

.wrap padding: 0 32px → 0 24px at ≤768px → 0 16px at ≤480px.
section padding: 120px 0 → 80px 0 at ≤768px → 56px 0 at ≤480px. section:first-of-type padding-top scales down proportionally.
Nav (mobile menu):
- Add a hamburger button to .nav-inner, hidden above 768px, shown at ≤768px.
- At ≤768px, .nav-links + .nav-cta move into a slide-down drawer panel below the nav bar.
- The existing nav dropdown panels (.nav-dd-panel) flatten to plain inline links inside the drawer.
- Toggle logic added to chrome.de.js: open/close on button click, close on link click and on resize above 768px, body-scroll lock while open, aria-expanded on the button.
Footer: inline 5-column grid → moved to a class; 2-col at ≤768px → 1-col at ≤480px. Bottom bar (justify-content: space-between) stacks vertically at ≤480px.

3. Homepage sections — `de/index.html`

For each broken section, the inline grid-template-columns / layout declarations move out of style= attributes into classes (placed in the section's existing <style> block, or v3.css where shared), then breakpoint rules are added.

Section	Mobile behavior
Hero	Already mostly works (pipeline 5→3 lanes at 900px, `clamp()` headline). Tighten: CTAs go full-width and wrap at ≤480px; verify `.hero-full` height and `.pipeline-belt` height on short screens.
`#integration-orbit`	Convert `.rings-node` positions from fixed `left/top` px to percentages on the 600-unit grid (px ÷ 6 = %). Set `.rings-canvas` to `width: min(600px, 92vw); aspect-ratio: 1` so the whole diagram scales fluidly with all nodes proportionally placed and visible. Hub/node font sizes via `clamp()` or `em` so labels stay legible. Replace the `scale(0.6)` hack.
`#case`	Extract inline `grid-template-columns: 1.1fr 0.9fr; gap: 80px` → `.case-grid` class. 1 column at ≤768px, reduced gap, case-metrics block below the quote.
`#security`	Extract the inline `1fr 1fr` split and the inline `repeat(3,1fr)` cert grid → classes. Split stacks at ≤768px. Cert grid goes 3→2 col at ≤768px and stays 2 col at ≤480px (6 certs in a single column would be an overly long strip), with the cell border logic adjusted to the new column counts.
`#pricing`	Extract the flex header (`justify-content: space-between`) → wraps/stacks at ≤768px. Extract the `repeat(3,1fr)` factor-card grid → 2-col at ≤768px → 1-col at ≤480px.
`#north-star`	Already responsive (980/780px). QA only + minor tweaks at ≤480px: `.ns-bignum` (88px) size, `.ns-cal` dot grid spacing.
`#support`	Already responsive (780px). QA only.
`#agents`	Already responsive (1080/540px). Fix the stray `</div></div>` at lines 868-869.
Footer / final CTA	Footer covered in shared CSS above. Final CTA already fluid (`clamp()`, `flex-wrap`).

4. Verification

No Playwright is installed in this environment. Install Playwright Chromium (one-time) and add a small screenshot script that captures http://127.0.0.1:8123/v3/de/ at 375px, 768px, and 1280px, for before/after evidence. The user does a final visual pass in their own browser.

Acceptance criteria:

No horizontal overflow / scrollbar at 320, 375, 390, 768, 1024, 1280px.
Nav is usable on mobile (hamburger opens drawer; all links + CTAs reachable).
Every section's content is visible and legibly laid out at 375px — no crushed multi-column grids, no clipped diagrams, no overlapping text.
Desktop layout (≥1024px) is visually unchanged from the current design.

5. Scope boundary

In scope: www/v3/de/index.html, www/v3/css/v3.css, www/v3/js/chrome.de.js.
The EN homepage (www/v3/en/index.html) inherits the shared nav/footer/.wrap fixes automatically, but its section-specific inline styles are not touched in this pass.
Other v3 pages similarly inherit shared fixes only.