Add persistent account navigation (sidebar/tabs); fix CTA arrow on Android

Konto-Aktionen links (profile, wishlist, logout) used to live at the bottom of the orders page's own content — unreachable once the order list got long enough. New KontoShell + AccountNav give every /konto/* page a persistent sidebar (sm+) / tab bar (mobile) instead, always reachable regardless of list length. The order filters also collapse behind a "Filter" toggle on mobile now, since the tab bar above them left little room for 3 full-width dropdowns.

Also: replaced the Unicode "→" arrow in CTA links (Tools.tsx, Blog.tsx, ProductGrid.tsx) with an SVG icon — the glyph isn't covered by the site's custom fonts, so browsers fall back to a system font per-platform; confirmed sitting visibly low relative to the label text on Android/Chrome (Galaxy S22), not reproducible in desktop Chromium. An SVG has no font-fallback path, so it renders identically everywhere.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/components/ArrowRightIcon.tsx

@@ -0,0 +1,17 @@
+// Replaces the Unicode "→" (U+2192) previously used inline in CTA links
+// (Tools.tsx, Blog.tsx, ProductGrid.tsx) — that glyph isn't covered by the
+// site's custom web fonts, so browsers fall back to a system font just for
+// that one character. The fallback's vertical metrics differ enough by
+// platform (confirmed: sat visibly low relative to the label text on a
+// Samsung Galaxy S22/Android Chrome, not reproducible in desktop Chromium)
+// that centering it via flex `items-center` alone isn't reliable across
+// devices. An SVG has no font-fallback path — it renders identically
+// everywhere. `currentColor` stroke follows the parent Link's own
+// text/hover color, same as every other icon in this codebase.
+export function ArrowRightIcon() {
+  return (
+    <svg aria-hidden width="16" height="12" viewBox="0 0 16 12" fill="none" className="shrink-0">
+      <path d="M1 6H15M15 6L10 1M15 6L10 11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

app/components/Blog.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { getBlogPosts } from "../lib/payload";
 import { Reveal, RevealGroup, RevealItem } from "./Reveal";
+import { ArrowRightIcon } from "./ArrowRightIcon";
 
 export async function Blog() {
   const posts = await getBlogPosts(3);
@@ -69,7 +70,7 @@ export async function Blog() {
               href={featured.href}
               className="flex items-center gap-1 font-bold text-body text-text-primary whitespace-nowrap hover:text-brand transition-colors"
             >
-              <span aria-hidden>→</span>
+              <ArrowRightIcon />
               <span>Zum Beitrag</span>
             </Link>
           </div>
@@ -122,7 +123,7 @@ export async function Blog() {
                   href={post.href}
                   className="flex items-center gap-1 font-bold text-body whitespace-nowrap hover:text-brand transition-colors"
                 >
-                  <span aria-hidden>→</span>
+                  <ArrowRightIcon />
                   <span>Zum Beitrag</span>
                 </Link>
               </div>

app/components/Tools.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import Image from "next/image";
 import { Reveal, RevealGroup, RevealItem } from "./Reveal";
+import { ArrowRightIcon } from "./ArrowRightIcon";
 import { getWerkzeugeCards } from "../lib/payload";
 
 // Content now lives in Payload (WerkzeugeCards collection). Icons use a
@@ -87,17 +88,14 @@ export async function Tools() {
                   {tool.description}
                 </p>
               </div>
-              {/* flex items-center + arrow as its own span, not inline text
-                  — the → glyph sits low relative to the surrounding text's
-                  cap-height in the font used here, off-center against the
-                  label if it's just part of the same text node (fixed
-                  2026-07-24, same pattern ProductGrid.tsx's "Mehr
-                  erfahren" link already uses). */}
+              {/* SVG arrow, not a Unicode "→" character — see
+                  ArrowRightIcon.tsx's own comment on why (font-fallback
+                  vertical-metrics mismatch, platform-dependent). */}
               <Link
                 href={tool.ctaHref}
                 className="flex items-center gap-1 font-bold leading-normal text-body whitespace-nowrap hover:text-brand transition-colors"
               >
-                <span aria-hidden>→</span>
+                <ArrowRightIcon />
                 <span>{tool.ctaLabel}</span>
               </Link>
             </div>