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/Blog.tsx

@@ -63,11 +63,14 @@ export async function Blog() {
                 </p>
               </div>
             </div>
+            {/* flex + arrow as its own span — see Tools.tsx's comment on
+                this same fix (→'s glyph baseline sits low next to text). */}
             <Link
               href={featured.href}
-              className="font-bold text-body text-text-primary whitespace-nowrap hover:text-brand transition-colors"
+              className="flex items-center gap-1 font-bold text-body text-text-primary whitespace-nowrap hover:text-brand transition-colors"
             >
-              → Zum Beitrag
+              <span aria-hidden>→</span>
+              <span>Zum Beitrag</span>
             </Link>
           </div>
         </RevealItem>
@@ -109,11 +112,14 @@ export async function Blog() {
                     </p>
                   </div>
                 </div>
+                {/* flex + arrow as its own span — see the featured post's
+                    own Link above / Tools.tsx's comment on this same fix. */}
                 <Link
                   href={post.href}
-                  className="font-bold text-body whitespace-nowrap hover:text-brand transition-colors"
+                  className="flex items-center gap-1 font-bold text-body whitespace-nowrap hover:text-brand transition-colors"
                 >
-                  → Zum Beitrag
+                  <span aria-hidden>→</span>
+                  <span>Zum Beitrag</span>
                 </Link>
               </div>
             </RevealItem>