style: Platzhalter als typografische Tafeln statt Verlaufsflaechen

Beige Verlaeufe mit Bogen- und Silhouettenformen wirkten wie generische
Fuellbilder. Jetzt: ruhiger Palettenton, feine Papierstruktur,
Passepartout und ein angeschnittener Bodoni-Buchstabe aus "ARTISTA"
(Cover: Jahreszahl), skaliert ueber Container-Einheiten. Eindeutig kein
Foto, in Produktion ohne Label. Galerie etwas flacher.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

src/components/MediaFrame.tsx

@@ -1,49 +1,25 @@
 import Image from "next/image";
 import type { Media, PlaceholderTone } from "@/content/site";
 
-const TONES: Record<PlaceholderTone, { background: string; shape: "arch" | "cypress" | "window" | "figure" }> = {
-  villa: { background: "linear-gradient(172deg, #efe2cc 0%, #e0c7a2 52%, #c49a6c 100%)", shape: "arch" },
-  terrace: { background: "linear-gradient(185deg, #e9dcc6 0%, #d7c29d 60%, #9f8b62 100%)", shape: "cypress" },
-  room: { background: "linear-gradient(160deg, #f3ebdf 0%, #e3d3bb 60%, #cdb592 100%)", shape: "window" },
-  garden: { background: "linear-gradient(190deg, #e6e0cc 0%, #c9c3a0 55%, #8c8a64 100%)", shape: "cypress" },
-  portrait: { background: "linear-gradient(170deg, #eadccb 0%, #d4b99c 60%, #a8805f 100%)", shape: "figure" },
-  studio: { background: "linear-gradient(175deg, #e4ddd3 0%, #cabdac 60%, #8f8273 100%)", shape: "figure" },
-};
+/*
+ * Platzhalter als typografische Tafeln: ruhiger Farbton aus der Palette,
+ * ein angeschnittener Bodoni-Buchstabe aus "ARTISTA" (bzw. die Jahreszahl
+ * im Cover) und ein feines Passepartout. Sie wirken gestaltet, sind aber
+ * eindeutig kein Foto und damit als Platzhalter erkennbar.
+ */
+type Plate = { background: string; glyph: string; italic?: boolean; style: React.CSSProperties };
 
-function Shape({ shape }: { shape: (typeof TONES)[PlaceholderTone]["shape"] }) {
-  const common = { fill: "currentColor", className: "absolute inset-0 h-full w-full text-ink/10" } as const;
-  switch (shape) {
-    case "arch":
-      return (
-        <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMax slice" aria-hidden {...common}>
-          <path d="M120 500V250a80 80 0 0 1 160 0v250z" />
-          <path d="M20 500V330a40 40 0 0 1 80 0v170zM300 500V330a40 40 0 0 1 80 0v170z" opacity=".6" />
-        </svg>
-      );
-    case "cypress":
-      return (
-        <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMax slice" aria-hidden {...common}>
-          <path d="M90 500c-22-90-18-230 12-330 26 100 30 240 10 330z" />
-          <path d="M290 500c-18-70-15-180 10-260 21 80 24 190 8 260z" opacity=".7" />
-          <rect x="0" y="440" width="400" height="60" opacity=".5" />
-        </svg>
-      );
-    case "window":
-      return (
-        <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" aria-hidden {...common}>
-          <path d="M150 90h100v190H150z" opacity=".7" />
-          <rect x="60" y="360" width="280" height="70" rx="6" />
-        </svg>
-      );
-    case "figure":
-      return (
-        <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMax slice" aria-hidden {...common}>
-          <circle cx="200" cy="185" r="62" />
-          <path d="M80 500c0-120 54-200 120-200s120 80 120 200z" />
-        </svg>
-      );
-  }
-}
+// Groessen und Lagen in Container-Einheiten (cqh/cqw): der Anschnitt sieht
+// in jeder Tafelgroesse gleich aus.
+const TONES: Record<PlaceholderTone, Plate> = {
+  cover: { background: "#ddd0bd", glyph: "27", italic: true, style: { fontSize: "92cqh", right: "-3cqw", bottom: "-20cqh" } },
+  villa: { background: "#e2d6c4", glyph: "A", style: { fontSize: "105cqh", left: "5cqw", bottom: "-22cqh" } },
+  terrace: { background: "#d6ccb8", glyph: "R", italic: true, style: { fontSize: "118cqh", right: "-4cqw", bottom: "-30cqh" } },
+  room: { background: "#e8dfd2", glyph: "T", style: { fontSize: "112cqh", left: "22cqw", top: "-34cqh" } },
+  garden: { background: "#cfcab6", glyph: "S", italic: true, style: { fontSize: "150cqh", right: "7cqw", bottom: "-58cqh" } },
+  portrait: { background: "#dccfbe", glyph: "R", style: { fontSize: "92cqh", left: "-10cqw", bottom: "-14cqh" } },
+  studio: { background: "#d2c9bd", glyph: "A", italic: true, style: { fontSize: "96cqh", right: "-16cqw", bottom: "-16cqh" } },
+};
 
 type Props = {
   media: Media;
@@ -73,12 +49,19 @@ export function MediaFrame({ media, aspect, sizes, showLabel, priority, classNam
     <div
       role="img"
       aria-label={`Platzhalter: ${media.label}`}
-      className={`relative overflow-hidden ${aspect} ${className}`}
-      style={{ background: tone.background }}
+      className={`placeholder-plate relative isolate overflow-hidden ${aspect} ${className}`}
+      style={{ backgroundColor: tone.background, containerType: "size" }}
     >
-      <Shape shape={tone.shape} />
+      <span
+        aria-hidden
+        className={`display pointer-events-none absolute select-none leading-none text-ink/[0.07] ${tone.italic ? "italic" : ""}`}
+        style={tone.style}
+      >
+        {tone.glyph}
+      </span>
+      <span aria-hidden className="pointer-events-none absolute inset-3 border border-ink/10 md:inset-4" />
       {showLabel && (
-        <span className="absolute bottom-3 left-3 rounded-full bg-paper/85 px-3 py-1 text-xs font-semibold text-ink">
+        <span className="absolute bottom-6 left-6 bg-paper/90 px-2.5 py-1 text-xs font-semibold text-ink md:bottom-7 md:left-7">
           Platzhalter: {media.label}
         </span>
       )}