perf(images): convert remaining <img> tags to next/image project-wide

Clears every remaining @next/next/no-img-element warning — automatic
responsive srcset, lazy-loading, and format optimization instead of
always loading the original file at full size. Fixed-size icons got
explicit width/height; dynamic-aspect photos got fill inside a
relative wrapper.

app/components/RichText.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import Image from "next/image";
 import type { TOCSection } from "./SectionTOC";
 
 // Minimal Lexical JSON → JSX renderer for Payload's richText fields.
@@ -146,8 +147,8 @@ function renderNode(node: LexicalNode, key: string): ReactNode {
       return (
         <div key={key} className="relative flex items-start gap-6 w-full my-6">
           <div className="flex items-center gap-2 shrink-0">
-            <span className="flex h-7 w-6 items-center justify-center shrink-0">
-              <img alt="" src="/icon-sparkle-merke-dir.png" className="w-full h-full object-contain" />
+            <span className="relative flex h-7 w-6 items-center justify-center shrink-0">
+              <Image alt="" src="/icon-sparkle-merke-dir.png" fill sizes="24px" className="object-contain" />
             </span>
             <span
               className="font-bold text-text-primary text-[1.625rem] whitespace-nowrap"
@@ -158,9 +159,11 @@ function renderNode(node: LexicalNode, key: string): ReactNode {
           </div>
           {/* Hand-drawn underline image, not a plain bar — exported
               straight from the Figma node (label-underline). */}
-          <img
+          <Image
             alt=""
             src="/icon-merke-dir-underline.png"
+            width={136}
+            height={23}
             className="absolute left-8 top-[2.1875rem] w-[8.5rem] h-[1.4375rem] object-cover pointer-events-none"
           />
           <div className="w-px self-stretch bg-brand shrink-0" />