From 7c305a3fced3b369982a0c0bc33dcc74f16da380 Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Sat, 26 Sep 2026 01:46:59 +0200
Subject: [PATCH] feat(ui): Bild-Platzhalter im Stil des Glas-Etiketts

Fehlt ein Foto, zeigte die Seite einen Farbverlauf mit Diagonallinien -
ein generisches Muster, das auf Produkt- und Inhaltskacheln wie
unfertige Vorlage wirkte. Jetzt: ruhige Markenflaeche mit leisem
Wabenraster, das gezeichnete Waben-Zeichen und darunter der Name in
gesperrten Serif-Versalien, wie auf dem Etikett. In kleinen Groessen
(Warenkorb, Galerie-Vorschau) bleibt per Container Query nur das Zeichen.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/components/placeholder-image.tsx | 63 +++++++++++++---------------
 1 file changed, 30 insertions(+), 33 deletions(-)

diff --git a/src/components/placeholder-image.tsx b/src/components/placeholder-image.tsx
index 6f9a883..c520790 100644
--- a/src/components/placeholder-image.tsx
+++ b/src/components/placeholder-image.tsx
@@ -1,7 +1,20 @@
+import { HoneycombPattern } from "@/components/honeycomb";
+import { Logomark } from "@/components/logomark";
+
+const SURFACES = {
+  forest: "bg-forest text-cream",
+  cream: "bg-cream text-forest",
+  honey: "bg-honey-pale/60 text-forest",
+} as const;
+
 /**
- * Abstrakter, hochwertiger Bild-Platzhalter (Farbverlauf + feine Linientextur)
- * fuer Bereiche, in denen echte Produkt-/Naturfotografie noch fehlt. Bewusst
- * ohne Comic-Motive oder Wabenmuster-Kitsch, passend zur Markenpalette.
+ * Platzhalter, solange fuer ein Produkt oder einen Abschnitt kein Foto
+ * gepflegt ist. Gestaltet wie das Glas-Etikett: ruhige Flaeche, das
+ * gezeichnete Waben-Zeichen und darunter der Name in gesperrten
+ * Serif-Versalien — statt eines generischen Farbverlaufs mit Linientextur.
+ *
+ * In kleinen Groessen (Warenkorb, Galerie-Vorschau) bleibt nur das Zeichen;
+ * der Name erscheint erst ab 9rem Breite (Container Query).
  */
 export function PlaceholderImage({
   className = "",
@@ -9,39 +22,23 @@ export function PlaceholderImage({
   label,
 }: {
   className?: string;
-  tone?: "forest" | "cream" | "honey";
+  tone?: keyof typeof SURFACES;
   label?: string;
 }) {
-  const gradients: Record<string, string> = {
-    forest: "from-[#1a271f] via-[#24352b] to-[#3a4d3f]",
-    cream: "from-[#efe8d8] via-[#f4efe5] to-[#e2d9c4]",
-    honey: "from-[#8a6832] via-[#b88a44] to-[#c9a468]",
-  };
-
   return (
-    <div
-      className={`relative overflow-hidden bg-gradient-to-br ${gradients[tone]} ${className}`}
-    >
-      <svg
-        className="absolute inset-0 w-full h-full opacity-[0.15]"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <defs>
-          <pattern id="lines" width="40" height="40" patternUnits="userSpaceOnUse">
-            <path d="M0 40L40 0" stroke="currentColor" strokeWidth="0.5" />
-          </pattern>
-        </defs>
-        <rect width="100%" height="100%" fill="url(#lines)" />
-      </svg>
-      {label ? (
-        <span
-          className={`absolute bottom-4 left-4 right-4 truncate text-[11px] tracking-wide-caps ${
-            tone === "cream" ? "text-forest/50" : "text-cream/50"
-          }`}
-        >
-          {label}
-        </span>
-      ) : null}
+    <div className={`@container relative overflow-hidden ${SURFACES[tone]} ${className}`}>
+      <HoneycombPattern className="opacity-[0.07]" size={20} fade="radial" />
+      <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 p-4 text-center">
+        <Logomark
+          className="aspect-square h-auto w-[26%] max-w-20 opacity-70"
+          variant={tone === "forest" ? "inverted" : "default"}
+        />
+        {label ? (
+          <span className="hidden max-w-[80%] font-serif text-base uppercase leading-snug tracking-[0.2em] opacity-60 @min-[9rem]:line-clamp-2">
+            {label}
+          </span>
+        ) : null}
+      </div>
     </div>
   );
 }