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/versand/components/VersandTOC.tsx

@@ -1,6 +1,13 @@
-import { SectionTOC } from "../../components/SectionTOC";
+import { SectionTOC, MobileSectionTOC } from "../../components/SectionTOC";
 import { VERSAND_SECTION_IDS } from "./VersandSections";
 
 export function VersandTOC() {
   return <SectionTOC sections={[...VERSAND_SECTION_IDS]} />;
 }
+
+// Below lg: accordion counterpart — see SectionTOC.tsx's own comment on
+// why this needs to be a separate element rather than nested inside
+// VersandTOC/the page's `hidden lg:block` sidebar wrapper.
+export function MobileVersandTOC() {
+  return <MobileSectionTOC sections={[...VERSAND_SECTION_IDS]} />;
+}

app/versand/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { Reveal } from "../components/Reveal";
 import { Footer } from "../components/Footer";
 import { VersandSections } from "./components/VersandSections";
-import { VersandTOC } from "./components/VersandTOC";
+import { VersandTOC, MobileVersandTOC } from "./components/VersandTOC";
 import { getShippingSettings } from "../lib/payload";
 
 export const metadata: Metadata = {
@@ -36,6 +36,12 @@ export default async function VersandPage() {
           </p>
         </Reveal>
 
+        {/* MobileSectionTOC counterpart — below lg: only, see
+            SectionTOC.tsx's own comment. */}
+        <div className="lg:hidden px-[var(--layout-padding-x)] pb-4 w-full">
+          <MobileVersandTOC />
+        </div>
+
         <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start pb-16 pt-2 px-[var(--layout-padding-x)] w-full">
           <div className="hidden lg:block lg:sticky lg:top-32 lg:self-start">
             <VersandTOC />