feat: Apple-Touch-Icon fuer iOS "Zum Home-Bildschirm hinzufuegen"

app/icon.svg deckt moderne Chrome/Android-Browser-Tabs und den
manifest.ts-Eintrag ab, aber iOS/iPadOS liest fuer "Zum Home-Bildschirm
hinzufuegen" ausschliesslich ein dediziertes Apple-Touch-Icon und
akzeptiert dafuer kein SVG (nur PNG/JPG) — ohne diese Datei waere
stattdessen ein Screenshot der Seite als Icon verwendet worden.
Rendert dieselbe Grafik wie icon.svg per next/og ImageResponse als
180x180-PNG. Per pnpm build + manuellem HTTP-Abruf/Sichtpruefung
verifiziert, dass Satori die SVG-Elemente korrekt rendert.

Social-Media-Icons (TikTok/YouTube/Instagram, site-footer.tsx) per
Code-Review geprueft: einfache, universell unterstuetzte SVG-Primitive
(rect/circle/path), werden nur gerendert wenn eine URL konfiguriert
ist — kein Fix noetig.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

src/app/apple-icon.tsx

@@ -0,0 +1,41 @@
+import { ImageResponse } from "next/og";
+
+export const size = { width: 180, height: 180 };
+export const contentType = "image/png";
+
+/**
+ * Apple-Touch-Icon fuer "Zum Home-Bildschirm hinzufuegen" auf iOS/iPadOS —
+ * Apple akzeptiert dafuer ausschliesslich PNG/JPG, kein SVG (anders als
+ * app/icon.svg, das moderne Chrome/Android direkt lesen, siehe
+ * app/manifest.ts). Ohne diese Datei nimmt iOS ersatzweise einen
+ * Screenshot der Seite als Icon — unbrandet und meist unbrauchbar. Gleiche
+ * Grafik wie app/icon.svg, per ImageResponse als Raster gerendert.
+ */
+export default function AppleIcon() {
+  return new ImageResponse(
+    (
+      <svg width={180} height={180} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width={100} height={100} rx={20} fill="#24352B" />
+        <polygon points="50,12 82,30 82,68 50,86 18,68 18,30" fill="none" stroke="#B88A44" strokeWidth={4} />
+        <g fill="#F4EFE5">
+          <g transform="translate(26,42) scale(0.62)">
+            <polygon points="10,2 5,13 15,13" />
+            <polygon points="10,10 2,22 18,22" />
+            <rect x={8} y={22} width={4} height={4} />
+          </g>
+          <g transform="translate(40,30) scale(0.82)">
+            <polygon points="10,2 5,13 15,13" />
+            <polygon points="10,10 2,22 18,22" />
+            <rect x={8} y={22} width={4} height={4} />
+          </g>
+          <g transform="translate(56,42) scale(0.62)">
+            <polygon points="10,2 5,13 15,13" />
+            <polygon points="10,10 2,22 18,22" />
+            <rect x={8} y={22} width={4} height={4} />
+          </g>
+        </g>
+      </svg>
+    ),
+    { ...size }
+  );
+}