Fix orange dot/hero image visibility, arrow alignment, and add a mobile legal-page TOC

- PopIn (Home Hero's brand dot) switched from whileInView to animate — its
  translate-based entrance could push the element off-screen on a narrow
  phone before the IntersectionObserver ever saw it as visible, leaving it
  stuck invisible permanently.
- Hero image: no longer wrapped in Reveal below lg: — whileInView's margin
  meant it stayed at opacity:0 (a white gap above the fold) on short mobile
  viewports until scrolled. Reveal's fade-in kept from lg: up.
- "→ Label" CTA links (Tools.tsx, Blog.tsx) now use a flex row with the
  arrow as its own span instead of a literal inline "→" character, which
  doesn't reliably align to the surrounding text's cap-height.
- Replaced icon-arrow-connector.svg with a new shared StepArrow component
  (inline SVG) across all three step sections — the old asset's color
  couldn't be overridden from outside the SVG file, so it could never
  actually become brand-orange. Bigger and better-shaped below the
  structural breakpoint per feedback.
- Added MobileSectionTOC (SectionTOC.tsx) — a <details> accordion shown
  below lg: on Impressum/Datenschutz/AGB/Widerruf/Versand, which previously
  had no on-page navigation aid at all below lg: (the sidebar TOC is
  `hidden` entirely there).
- Updated the figma-to-nextjs skill with 8 new dated Gotchas from this
  mobile-responsive pass, and expanded Step 6's verification checklist.
- README: new "Mobile responsive pass" section summarizing the above.

app/components/Reveal.tsx

@@ -120,8 +120,17 @@ export function PopIn({ children, className, delay = 0 }: RevealProps) {
     <motion.span
       className={className}
       initial="hidden"
-      whileInView="show"
-      viewport={{ once: true, margin: "-80px" }}
+      // animate, not whileInView — its only caller (Hero.tsx's brand dot)
+      // sits above the fold, already visible on load, so there's no real
+      // "scrolls into view" moment to gate on. whileInView's -80px viewport
+      // margin also broke on some phones: the popIn variant's own "hidden"
+      // state translates x:+140, and on a narrow mobile viewport that could
+      // push the dot's pre-animation bounding box past the right edge —
+      // IntersectionObserver then never reports it as visible, so
+      // whileInView never fires and the dot stays stuck off-screen
+      // (reported 2026-07-24: dot invisible on a real phone). Firing on
+      // mount sidesteps that geometry entirely.
+      animate="show"
       variants={popIn}
       transition={{ delay }}
     >