v3 Responsive — Remaining Overflow Fixes Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Eliminate the last per-page horizontal-overflow failures (implementierung, steuerberater, kreditoren) so the all-pages harness is fully green except en-home.

Architecture: The Foundation plan already fixed every shared overflow cause. What remains is the same root pattern (min-width: auto on grid/flex items, plus long unbreakable German words) on three pages' bespoke in-body <style> grids. Each fix is a small @media (max-width: 480px) block appended to the page's existing in-body <style> block. All three pages are exact de/en structural mirrors, so each task applies one identical CSS edit to both language files.

Tech Stack: Static HTML/CSS. Playwright (Chromium) harness for verification.

Scope

This is Plan 2 of sub-project A (spec: docs/superpowers/specs/2026-05-14-v3-responsive-all-pages-design.md). The Foundation (Plan 1) took the harness from 58 → 10 failures; this plan clears 8 of the remaining 10 (3 page-types × de/en, at 320/375px). The last 2 failures (en-home) are Plan 3 — the EN homepage reconcile. The "polish tier" quality pass on section pages, if still wanted after the Foundation's results, is a later plan.

Prerequisites

Worktree: /Users/maximilianbrandstaetter/Orcha/.claude/worktrees/website-v3-mobile-responsive, branch website-v3-mobile-responsive. Run all commands from here.

Local server: serves www/ at http://127.0.0.1:8123. Start/restart if down:

pkill -f "http.server 8123"; cd /Users/maximilianbrandstaetter/Orcha/.claude/worktrees/website-v3-mobile-responsive/www && (python3 -m http.server 8123 --bind 127.0.0.1 >/tmp/orcha-v3-www.log 2>&1 &)

Harness: www/v3/dev/screenshot.mjs, run from www/v3/dev/. Supports a comma-list slug filter, e.g. node screenshot.mjs implementierung,steuerberater.
Diagnosed causes (from foundation-baseline.md + diagnostics):
- implementierung (+105/+50px): .integ-b tile grid is repeat(4,1fr) at ≤640px; .integ-b-tile grid items have default min-width:auto so they won't shrink below ~96px → 4 cols overflow 320/375px.
- steuerberater (+77/+22px, DE only): .stb-compliance-grid is repeat(2,1fr) at ≤900px; long German words (e.g. "Verfahrensdokumentation") give .stb-compliance-cell a large min-content width → 2 cols overflow.
- kreditoren (+15px, 320px only): .fwm-card (a grid item in the 1-col .fwm-scenarios grid at ≤880px) won't shrink below the min-content width of its inner flex row .fwm-flow.

File Structure

File	Status	Responsibility
`www/v3/de/implementierung/index.html` + `www/v3/en/implementierung/index.html`	modify	Append a `@media (max-width: 480px)` block to the in-body `<style>` holding `.integ-b`.
`www/v3/de/steuerberater/index.html` + `www/v3/en/steuerberater/index.html`	modify	Append a `@media (max-width: 480px)` block to the in-body `<style>` holding `.stb-compliance-grid`.
`www/v3/de/produkt/kreditoren.html` + `www/v3/en/produkt/kreditoren.html`	modify	Append a `@media (max-width: 480px)` block to the in-body `<style>` holding `.fwm-card`.

The de and en file of each pair are structural mirrors; their in-body <style> blocks (pure CSS) are byte-identical, so the same edit string applies to both.

Task 1: Fix implementierung tile-grid overflow

Files:

Modify: www/v3/de/implementierung/index.html
Modify: www/v3/en/implementierung/index.html
Step 1: Append a phone breakpoint to the .integ-b style block (both files)

In both www/v3/de/implementierung/index.html and www/v3/en/implementierung/index.html, find this exact line in the in-body <style> block:

        @media (max-width: 640px)  { .integ-b { grid-template-columns: repeat(4, 1fr); } }

Replace it with:

        @media (max-width: 640px)  { .integ-b { grid-template-columns: repeat(4, 1fr); } }
        @media (max-width: 480px)  {
          .integ-b { grid-template-columns: repeat(3, 1fr); }
          .integ-b-tile { min-width: 0; overflow-wrap: break-word; }
        }

(min-width: 0 lets the grid columns shrink below the tiles' intrinsic content width; repeat(3,1fr) keeps each tile a reasonable size at 320px; overflow-wrap: break-word lets long names like "Commerzbank" break rather than force the tile wide.)

Step 2: Verify

cd /Users/maximilianbrandstaetter/Orcha/.claude/worktrees/website-v3-mobile-responsive/www/v3/dev && node screenshot.mjs implementierung

Expected: de-implementierung and en-implementierung now ok at all 5 widths (320/375/768/1024/1280). Open shots/de-implementierung-375.png — the integration tile grid is a clean 3-column layout, tiles legible, no overflow.

Step 3: Commit

git add www/v3/de/implementierung/index.html www/v3/en/implementierung/index.html
git commit -m "fix(v3): make implementierung integration tile-grid responsive"

Task 2: Fix steuerberater split-grid overflow

Plan correction (during execution, 2026-05-14): the original Task 2 targeted .stb-compliance-grid, but that grid has overflow: hidden — its wide cells were already clipped, not the page-overflow source. The real cause is its parent: <div class="grid" style="grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start;"> at index.html:237 — an inline-styled 2-column grid (media queries can't override inline styles), so it stays 2-column on mobile and pushes .stb-compliance-grid past the viewport. Fix: convert the inline grid to a class that collapses on mobile (same pattern the homepage used for its inline grids). The corrected task also still collapses .stb-compliance-grid to one column on phones — not for page overflow, but so its overflow:hidden doesn't clip the long German cell titles.

Files:

Modify: www/v3/de/steuerberater/index.html
Modify: www/v3/en/steuerberater/index.html
Step 1: Convert the inline-styled split grid to a class (both files)

In both www/v3/de/steuerberater/index.html and www/v3/en/steuerberater/index.html, find this exact line:

      <div class="grid" style="grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start;">

Replace it with:

      <div class="grid stb-split">

Step 2: Append the responsive rules to the in-body <style> block (both files)

In both files, find this exact block — the .stb-compliance-sub rule, then the existing @media (max-width: 900px) block, then </style>:

  .stb-compliance-sub { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-top: 4px; line-height: 1.5; }

  @media (max-width: 900px) {
    .datev-grid { grid-template-columns: 1fr; }
    .datev-cell { border-right: 0; border-bottom: 1px solid var(--line); }
    .datev-cell:last-child { border-bottom: 0; }
    .stb-compliance-grid { grid-template-columns: repeat(2, 1fr); }
    .stb-compliance-cell:nth-child(3n) { border-right: 1px solid var(--line); }
    .stb-compliance-cell:nth-child(2n) { border-right: 0; }
  }
</style>

Replace it with (note: the base .stb-split rule goes before the media queries — a base rule placed after its @media override would win on source order and the media query would never take effect):

  .stb-compliance-sub { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-top: 4px; line-height: 1.5; }
  .stb-split { grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }

  @media (max-width: 900px) {
    .datev-grid { grid-template-columns: 1fr; }
    .datev-cell { border-right: 0; border-bottom: 1px solid var(--line); }
    .datev-cell:last-child { border-bottom: 0; }
    .stb-compliance-grid { grid-template-columns: repeat(2, 1fr); }
    .stb-compliance-cell:nth-child(3n) { border-right: 1px solid var(--line); }
    .stb-compliance-cell:nth-child(2n) { border-right: 0; }
    .stb-split { grid-template-columns: 1fr; gap: 40px; }
  }
  @media (max-width: 480px) {
    .stb-compliance-grid { grid-template-columns: 1fr; }
    .stb-compliance-cell { min-width: 0; }
    .stb-compliance-name { overflow-wrap: break-word; }
  }
</style>

(.stb-split base rule reproduces the original inline values, so desktop is unchanged — .grid on the div still supplies display: grid. The @media 900 collapses it to one column, which both eliminates the page overflow and gives .stb-compliance-grid full width. The @media 480 block then makes the compliance grid itself a single column so its overflow:hidden no longer clips long German titles.)

Step 3: Verify

cd /Users/maximilianbrandstaetter/Orcha/.claude/worktrees/website-v3-mobile-responsive/www/v3/dev && node screenshot.mjs steuerberater

Expected: de-steuerberater and en-steuerberater ok at all 5 widths. Open shots/de-steuerberater-375.png — the section is single-column (copy above the compliance grid), the compliance grid is a single column, each cell's German title legible and not clipped, no overflow. Open shots/de-steuerberater-1280.png — desktop unchanged (2-column 1fr 1.4fr split, 3-column compliance grid).

Step 4: Commit

git add www/v3/de/steuerberater/index.html www/v3/en/steuerberater/index.html
git commit -m "fix(v3): make steuerberater split grid responsive"

Task 3: Fix kreditoren fwm-card overflow

Files:

Modify: www/v3/de/produkt/kreditoren.html
Modify: www/v3/en/produkt/kreditoren.html
Step 1: Append a phone breakpoint to the .fwm style block (both files)

In both www/v3/de/produkt/kreditoren.html and www/v3/en/produkt/kreditoren.html, find this exact line in the in-body <style> block (the last .fwm-* rule, immediately before that block's </style>):

      .fwm-card-body {
        margin: 18px 0 0;
        font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
      }

Replace it with:

      .fwm-card-body {
        margin: 18px 0 0;
        font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
      }
      @media (max-width: 480px) {
        /* let the .fwm-scenarios grid item shrink, and let the horizontal
           document-flow row scroll inside the card rather than widen it */
        .fwm-card { min-width: 0; }
        .fwm-flow { overflow-x: auto; }
      }

(.fwm-card is a grid item in the single-column .fwm-scenarios grid; min-width: 0 lets it shrink to the viewport. .fwm-flow is a non-wrapping flex row of document boxes — overflow-x: auto keeps it scrollable inside the card instead of forcing the page wider.)

Step 2: Verify

cd /Users/maximilianbrandstaetter/Orcha/.claude/worktrees/website-v3-mobile-responsive/www/v3/dev && node screenshot.mjs produkt-kreditoren

Expected: de-produkt-kreditoren and en-produkt-kreditoren ok at all 5 widths. Open shots/de-produkt-kreditoren-375.png — no horizontal page overflow; the .fwm document-flow row is contained within its card (it may scroll horizontally inside the card — acceptable for this baseline-tier page).

Step 3: Commit

git add www/v3/de/produkt/kreditoren.html www/v3/en/produkt/kreditoren.html
git commit -m "fix(v3): contain kreditoren fwm-flow row to prevent page overflow"

Task 4: Full-sweep verification

Files: none (verification only — unless a regression fix is needed)

Step 1: Run the full 30-page harness sweep

cd /Users/maximilianbrandstaetter/Orcha/.claude/worktrees/website-v3-mobile-responsive/www/v3/dev && node screenshot.mjs

Expected: exactly 2 failures remain — en-home @ 320px and en-home @ 375px — every other page (de-home, all 18 product pages, all section pages except the en-home) ok at all 5 widths. If any page other than en-home fails, that is a regression or an incomplete fix — diagnose and fix it before proceeding.

Step 2: Confirm no desktop regression

Open shots/de-implementierung-1280.png, shots/de-steuerberater-1280.png, shots/de-produkt-kreditoren-1280.png — the desktop layouts of all three pages must be unchanged (the @media (max-width: 480px) additions only affect ≤480px viewports).

Step 3: Update the baseline record

Edit www/v3/dev/foundation-baseline.md — update the failure list to reflect that only en-home remains (the three page-types fixed by this plan are resolved). Commit:

git add www/v3/dev/foundation-baseline.md
git commit -m "docs(v3): update responsive baseline after overflow fixes"

Step 4: If a regression was found in Step 1

Fix it in the relevant file, re-run node screenshot.mjs, and commit:

git add -A
git commit -m "fix(v3): overflow-fix regression"

If no regression, skip this step.

Self-Review

Checked against docs/superpowers/specs/2026-05-14-v3-responsive-all-pages-design.md:

Spec §Design.5 (product pages — baseline tier): kreditoren was the only product page still failing after the Foundation; Task 3 fixes it. The other 17 product pages already pass. ✔
Spec §Design.4 (section pages): implementierung and steuerberater were the only section pages still overflowing; Tasks 1-2 fix them. Note: this plan addresses section-page overflow (the baseline bar), not the spec's "polish tier" section-by-section pass — the Foundation's output was strong enough that whether a dedicated polish pass is still wanted is a decision to revisit with the user before scoping it as a later plan. Flagged in the execution handoff.
Spec §Design.3 (EN homepage): out of scope — Plan 3.
Spec acceptance criteria (no horizontal overflow at 320/375/768/1024/1280): Task 4 Step 1 verifies it across all 30 pages; the expected end state is "only en-home fails," which Plan 3 resolves.

Placeholder scan: none — every task has the exact CSS block and exact anchor text.

Type/name consistency: all class names (.integ-b, .integ-b-tile, .stb-compliance-grid, .stb-compliance-cell, .stb-compliance-name, .fwm-card, .fwm-flow, .fwm-scenarios) verified present in the respective pages' in-body <style> blocks via diagnostics. The min-width: 0 + overflow-wrap: break-word pattern is the same one proven in the Foundation plan (Task 4). All three edits are de/en-mirror-safe (CSS-only, in byte-identical <style> blocks).