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

@@ -2,6 +2,29 @@ import Link from "next/link";
 import Image from "next/image";
 import { PopIn, Reveal } from "./Reveal";
 
+// Shared between the plain (below lg:) and Reveal-wrapped (lg:+) render —
+// see the two call sites' own comment on why this needs two wrappers.
+function HeroImage() {
+  return (
+    <Image
+      src="/hero.png"
+      alt=""
+      fill
+      priority
+      sizes="(min-width: 1024px) 58vw, 100vw"
+      className="object-cover"
+      style={{
+        WebkitMaskImage:
+          "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
+        WebkitMaskComposite: "destination-in",
+        maskImage:
+          "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
+        maskComposite: "intersect",
+      }}
+    />
+  );
+}
+
 export function Hero() {
   return (
     <section className="bg-bg-base w-full overflow-hidden">
@@ -113,26 +136,23 @@ export function Hero() {
             plain box-shadow reads as a hard rectangular edge against the
             existing corner/right/bottom mask-gradient fade below, which
             looked worse than no shadow at all — tried and reverted. */}
+        {/* No Reveal (fade-in-on-scroll) below lg: — whileInView's -80px
+            viewport margin means the image doesn't fade in until scrolled
+            that much further into view; on a short mobile viewport this
+            image sits right at the initial fold, so it stayed at
+            opacity:0 (a white gap, matching the section's own bg-bg-base)
+            above the fold until the user scrolled (reported 2026-07-24).
+            Plain, always-visible image below lg: instead; Reveal's fade
+            kept from lg: up, where the image is beside the text with
+            plenty of room and this was never an issue. */}
+        <div className="order-2 lg:hidden relative w-full aspect-[887/583] max-h-[16rem] md:max-h-[22rem] mt-0 md:-mt-6">
+          <HeroImage />
+        </div>
         <Reveal
-          className="order-2 lg:order-none lg:col-span-7 relative w-full aspect-[887/583] max-h-[16rem] md:max-h-[22rem] lg:max-h-none mt-0 md:-mt-6 lg:mt-0"
+          className="hidden lg:block lg:col-span-7 relative w-full aspect-[887/583]"
           delay={0.15}
         >
-          <Image
-            src="/hero.png"
-            alt=""
-            fill
-            priority
-            sizes="(min-width: 1024px) 58vw, 100vw"
-            className="object-cover"
-            style={{
-              WebkitMaskImage:
-                "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
-              WebkitMaskComposite: "destination-in",
-              maskImage:
-                "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
-              maskComposite: "intersect",
-            }}
-          />
+          <HeroImage />
         </Reveal>
 
       </div>