{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "zeichnungsfamilie-produkte",
 "name": "Zeichnungsfamilie für Produkte, Läden und Leistungen",
 "name_en": "Product illustration family from one stroke system",
 "kurz": "Eine Strichsprache für Produkte, Filialen und Leistungen: gleiche Linie, gleiche Ecken, ein Akzent je Bild, damit ein Raster ohne Foto wie aus einer Hand wirkt.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "handgemacht",
  "ehrlich",
  "freundlich"
 ],
 "technik": [
  "svg",
  "css",
  "css-property",
  "intersection-observer",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine Zeichensprache aus wenigen festen Regeln: eine Strichstärke, die bei jeder Größe gleich bleibt, eine Eckform, eine Fläche in einem Ton, ein einziger Akzent je Bild aus der Signalfarbe des Rezepts und ein Raster von 96 Einheiten mit gemeinsamer Standlinie. Aus diesen Regeln entstehen Produktbilder (Brot, Brezel, Torte), Ladenfassaden und Leistungsbilder für Werkstätten, die wie aus einer Hand aussehen. Die Bausteine sind SVG-Symbole mit currentColor und CSS-Variablen; das Rezept stellt nur die Werte ein. Beim ersten Sehen zeichnet sich die Kontur einmal (stroke-dashoffset), danach steht sie.",
  "warum_es_wirkt": "Viele kleine Betriebe haben keine guten Fotos. Stockfotos zeigen fremde Brote, fremde Läden und fremde Autos und wirken genau deshalb unehrlich. Eine konsequente Zeichnung lügt nicht: Sie sagt erkennbar „so sieht es ungefähr aus“ und trägt trotzdem eine eigene Handschrift. Gleiche Strichstärke, gleiche Ecken und ein einziger Akzent machen aus vielen Einzelbildern eine Familie. Das liest sich hochwertiger als ein Raster aus Fotos mit uneinheitlichem Licht.",
  "wann_einsetzen": "Wann Zeichnung statt Foto: (1) Es gibt keine eigenen Fotos in einheitlichem Licht, und ein Stockfoto würde das eigene Produkt, den eigenen Laden oder das eigene Auto vortäuschen. (2) Das Sortiment wechselt oft oder ist zu groß für ein Fotoshooting (Backwaren, Leistungen einer Werkstatt). (3) Mehrere Filialen sollen auf einen Blick unterscheidbar sein. (4) Leistungen sind unsichtbar oder unschön im Foto (Bremsen, Klimaservice, Batterie). (5) Icons, Leerzustände und Fehlerseiten sollen zur Produktwelt passen. Branchen: Bäckerei und Konditorei, Laden mit Filialen, Kfz-Werkstatt, Handwerk, Hofladen, Apotheke.",
  "wann_nicht": "Wenn es gute eigene Fotos gibt: Fotos verkaufen Essen, Räume und Menschen besser, die Zeichnung ergänzt dann nur Icons und Leerzustände. Nicht für Menschen und Team (dafür echte Fotos mit Einwilligung), nicht für Immobilien, Fahrzeugbestand oder Ware, deren genaues Aussehen kaufentscheidend ist (Farbe, Zustand, Maße). Nicht mischen: Zeichnung und Stockfoto auf derselben Seite heben sich gegenseitig auf. Keine Zeichnung, die eine bestimmte fremde Marke, ein Prüfsiegel oder ein Herstellerlogo nachbildet.",
  "varianten": [
   "backwaren: Theken-Raster mit Brot, Brötchen, Brezel und Torte, Strich rund, Fläche versetzt, Akzent Krustenrot nur auf Einschnitt oder Füllung",
   "laden: vier Filialfassaden mit unterscheidbaren Dachformen, Strich eckig wie Etiketten, Akzent Schaufenstergrün nur auf Markise oder Tür, dazu Icons aus derselben Hand",
   "werkzeug: Leistungsbilder für die Kfz-Werkstatt als technische Zeichnung mit Maßlinie, Strich gerade, Akzent Verkehrsgelb auf dem Teil, um das es geht"
  ],
  "umsetzung": "1. Ein verstecktes <svg> enthält alle Zeichnungen als <symbol viewBox=\"0 0 96 96\">, jede auf demselben Raster mit Standlinie bei y = 84 und höchstens 80 Einheiten Breite. Jedes Teil trägt eine Rolle als Klasse: .f Fläche, .k Kontur, .d Detail, .a Akzent. 2. Das Bild ist <svg class=\"zf\" role=\"img\" aria-label=\"…\"><use href=\"#roggenlaib\"/></svg>. 3. Die Regeln stehen als CSS-Variablen am Bild oder am Rezept: --zf-strich (Konturstärke in px), --zf-strich-fein (Details), --zf-ecke (stroke-linejoin round, miter oder bevel), --zf-ende (stroke-linecap), --zf-farbe (Linie, sonst currentColor), --zf-flaeche (Füllton), --zf-akzent (Signalfarbe), --zf-versatz-x und -y (die Fläche liegt um wenige Einheiten versetzt unter der Kontur wie ein leicht verschobener Druck). 4. Alle Linien haben vector-effect: non-scaling-stroke, deshalb bleibt die Strichstärke bei 40 px und bei 400 px gleich. Variablen erben in den Schatten-Baum von <use>; einfache Klassen-Selektoren wie .zf-k greifen dort, Nachfahren-Selektoren über die Grenze hinweg nicht. 5. Zeichen-Reveal: Jede Kontur hat pathLength=\"1\" und stroke-dasharray: 1; stroke-dashoffset folgt der registrierten Variable --zf-zug (@property, <number>), die am Bild von 1 auf 0 läuft, einmal, wenn das Bild zu 35 % sichtbar ist. Die Fläche blendet danach ein. 6. Ohne JavaScript und bei reduzierter Bewegung stehen die Bilder fertig. Bilder für Inhalte bekommen role=\"img\" und einen Alternativtext (Produktname), Schmuckbilder aria-hidden.",
  "mobil": "Das Raster wird zweispaltig, die Zeichnung behält ihre Strichstärke, weil die Linie nicht mitskaliert. Unter 360 px einspaltig mit Zeichnung links und Text rechts. Kein Hover: der Versatz bleibt stehen, Tippen öffnet direkt das Produkt.",
  "reduzierte_bewegung": "Die Zeichnungen stehen fertig, kein Zeichnen, kein Versatz-Wechsel. Nur der Fokusring ändert sich.",
  "barrierefreiheit": "Produkt- und Fassadenbilder haben role=\"img\" mit aria-label (Produkt bzw. Filiale mit Straße), weil sie Inhalt tragen; reine Schmuckbilder und Icons neben einem Wort sind aria-hidden. Die Linie hat mindestens 3:1 zum Grund (Nicht-Text-Kontrast), die Bedeutung liegt nie nur in der Akzentfarbe. Im Kontrastmodus (forced-colors) erben Linien CanvasText und Flächen Canvas, die Zeichnung bleibt lesbar."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.37, 0, 0.63, 1) für Zeichnen und Hover (eine Kurve)",
  "dauer_ms": "Kontur 900, Fläche 300 ab 600, Hover 300 (Versatz → 0 bzw. Teil rückt heraus)",
  "stagger_ms": "70 je Bild im Raster",
  "distanz": "Versatz der Fläche 3/2 (Bäckerei) bzw. 2.5/0 (Laden) Einheiten von 96, im Hover 0; Werkstatt ohne Versatz, Teil rückt 4 Einheiten heraus",
  "sonstiges": "Raster 96 Einheiten, Standlinie y = 84, Kontur 2 px (Bäckerei), 1.5 px (Laden), 1.75 px (Werkstatt), Details 1 bis 1.25 px, nie mehr als drei Stärken; ein Akzent je Bild",
  "herkunft": "eigene Festlegung",
  "quelle": "Regeln nach IBM Line style (Strichstärken, Raster) und GitLab (Rahmengrößen), Werte eigene Festlegung"
 },
 "kurve": {
  "bezier": [
   0.37,
   0.0,
   0.63,
   1.0
  ],
  "css": "cubic-bezier(0.37, 0, 0.63, 1)",
  "name": "sine.inOut",
  "dauer_ms": 900
 },
 "gesehen_bei": [
  {
   "seite": "IBM Design Language: Illustration, Line style",
   "url": "https://www.ibm.com/design/language/illustration/line-style/design/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: höchstens vier Strichstärken je Illustration, jede mit klarem Zweck; Abstand zwischen Linien mindestens so groß wie die Strichstärke; 4-px-Raster für alle Größen, Ankerpunkte auf Rasterschnittpunkten; bevorzugte Winkel 15° bis 90°, Kurven möglichst als Viertel-, Halb- und Vollkreis; deckende Linien statt Transparenz.",
   "art": "artikel"
  },
  {
   "seite": "GitLab Pajamas: Illustration",
   "url": "https://design.gitlab.com/product-foundations/illustration",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: feste Rahmengrößen 288, 144, 72 und 36 px je Einsatz (Funktion, Leerzustand und Fehler, Banner, Einzelteil); kleine Elemente werden zu größeren Bildern kombiniert; Illustration ist unterstützend („less is more“), der Kontext trägt die Aussage.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: vector-effect",
   "url": "https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/vector-effect"
  },
  {
   "titel": "MDN: <use>",
   "url": "https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use"
  },
  {
   "titel": "MDN: @property",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@property"
  },
  {
   "titel": "MDN: pathLength",
   "url": "https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength"
  }
 ],
 "kombinierbar_mit": [
  "karte-ganzflaechig-klickbar",
  "raster-zu-wischreihe",
  "speisekarte-editorial",
  "reparatur-richtpreise",
  "firmendaten-strukturiert",
  "fehlerseite-leerzustand",
  "svg-pfad-zeichnen-scroll",
  "blueprint-raster-sichtbar"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/zeichnungsfamilie-produkte/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/zeichnungsfamilie-produkte/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/zeichnungsfamilie-produkte/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026",
   "Jury-Urteil Bäckerei-Probe, 04.11.2026"
  ],
  "pruefnotizen": [
   "Anlass: In der Bäckerei-Probe (04.11.2026) waren die Strich-Illustrationen konsistent, aber dünn und klein; die Jury nannte die Bildsprache „ohne Linie“ und empfahl, die Zeichnungen groß zu machen statt Stockfotos zu streuen.",
   "Belege sind Gestaltungsrichtlinien großer Systeme (IBM, GitLab), keine KMU-Websites. Ein Website-Beleg für ein Produktraster nur aus Zeichnungen fehlt noch.",
   "Alle Zeichnungen der Demo sind eigene SVG-Pfade auf dem 96er-Raster, keine Vorlagen, keine Marken, keine Prüfsiegel.",
   "Rechtlich: Zeichnungen dürfen keine fremden Marken, Logos oder Prüfplaketten nachbilden; vom Kunden prüfen lassen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Strichsprache für Produkte, Filialen und Leistungen: gleiche Linie, gleiche Ecken, ein Akzent je Bild, damit ein Raster ohne Foto wie aus einer Hand wirkt.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "raster": "viewBox 0 0 96 96, Standlinie y = 84, Breite höchstens 80 Einheiten; Raster-Ansicht 8er-Linien, Schlüsselkreis r 40, Quadrat 8–88",
   "rollen": ".zf-f Fläche (versetzt), .zf-k Kontur (pathLength 1), .zf-d Detail, .zf-a Akzentlinie, .zf-af Akzentfläche, .zf-p Punkte, .zf-t Beschriftung, .zf-m Maßlinie, .zf-x Teil, das im Hover herausrückt (--dx/--dy)",
   "strich": "vector-effect: non-scaling-stroke; Größenstufe groß (Held) eigene Stärke --zf-strich-gross",
   "backwaren": "Kontur 2 px, Detail 1.25 px, groß 3.5/2 px, linejoin/linecap round, Linie #241B14, Fläche #EBD8BB, Akzent #8A3C12, Versatz 3/2 Einheiten",
   "laden": "Kontur 1.5 px, Detail 1 px, groß 2.5/1.5 px, linejoin miter, linecap square, Linie #211F1C, Fläche #E2D3B8, Akzent #2E5B45, Versatz 2.5/0",
   "werkzeug": "Kontur 1.75 px, Detail und Maßlinie 1 px, groß 3/1.5 px, linejoin miter, linecap butt, Linie #121314, Fläche #DCDDD9, Akzent #F5B700 nur als Fläche mit Kontur (Kontrast), Versatz 0",
   "easing": "cubic-bezier(0.37, 0, 0.63, 1) für Zeichnen und Hover",
   "dauer_ms": "Kontur 900; Fläche 300 linear ab 600; Hover 300 (Versatz → 0 bzw. Teil rückt 4 Einheiten heraus)",
   "stagger_ms": 70,
   "ausloeser_reveal": "IntersectionObserver threshold 0.35, einmal je Bild, höchstens 8 × 70 ms Versatz",
   "reveal_technik": "@property --zf-zug (number) 1 → 0 als stroke-dashoffset; während des Zeichnens vector-effect none und stroke-width × 96 / Bildbreite, danach zurück auf non-scaling-stroke (pathLength und non-scaling-stroke vertragen sich in Chromium nicht)",
   "verdeckt": "überlappende Teile (Brezel) über <mask> im Symbol, Fläche als Vereinigung darunter",
   "ausschnitt": "Auslage viewBox 0 24 96 64, Held 0 24 96 64 mit Hinweislinien im SVG"
  },
  "ausloeser": "scroll",
  "touch": "Kein Hover: Versatz und herausrückende Teile bleiben stehen, Tippen öffnet das Produkt bzw. die Filiale (ganzflächiger Link). Auslage und Fassaden zweispaltig, unter 360 px einspaltig (Backwaren mit Zeichnung links, Schild rechts), Werkstatt-Blätter einspaltig.",
  "reduziert": "Alle Zeichnungen stehen fertig, kein Zeichnen, keine Transitions; Raster-Ansicht schaltet ohne Übergang.",
  "korrekturen": {},
  "geprueft": "04.11.2026",
  "notiz": "Rezepte und Welten: backwaren lebensmittelhandwerk-theke (Backhaus Wendeborn, Einbeck), laden laden-vor-ort-sortiment (Buchhandlung Lohbeck, Soest, Öffnungsstatus live aus einer Zeitentabelle), werkzeug kfz-werkstatt-autohaus (Kfz-Meisterbetrieb Hölscher, Meppen, Festpreis-Blätter mit Schriftfeld). 23 eigene Symbole auf dem 96er-Raster, keine Fotos, keine Marken, keine Prüfplaketten. Abgrenzung: svg-pfad-zeichnen-scroll zeichnet einen Pfad scrollgekoppelt, kontur-button-zeichnen nur Rahmen; hier ein ganzes Bildsystem mit Rollen und Tokens. Antwort auf Jury Bäckerei-Probe (Bilder ohne Linie, Zeichnungen zu klein): Zeichnung groß als Held, Auslage auf einer Thekenlinie, Grundpreis je kg. Geprüft pruef.sh je Variante, pruef-zugang (nur info:kontrast-von-hand). Selbsturteil 4.",
  "varianten": [
   {
    "id": "backwaren",
    "name": "Backwaren in der Theke",
    "wann": "Bäckerei, Konditorei, Hofladen: Sortiment ohne eigene Fotos, Produkte auf einer gemeinsamen Thekenlinie mit Preisschild, Grundpreis und Allergenen.",
    "werte": {
     "strich": "2 px rund, Detail 1.25 px",
     "versatz": "3/2 Einheiten, Hover 0",
     "akzent": "#8A3C12 nur Einschnitt, Kirsche oder Glanz"
    }
   },
   {
    "id": "laden",
    "name": "Filialfassaden",
    "wann": "Läden mit mehreren Filialen (Buchhandlung, Apotheke, Bäckerei): jede Filiale an ihrer Dachform erkennbar, darunter Adresse und Status; Icons aus derselben Hand.",
    "werte": {
     "strich": "1.5 px eckig, Detail 1 px",
     "versatz": "2.5/0 Einheiten, Hover 0",
     "akzent": "#2E5B45 nur Tür, Markise, Ausleger"
    }
   },
   {
    "id": "werkzeug",
    "name": "Leistungsblätter Werkstatt",
    "wann": "Kfz-Werkstatt und Handwerk: unsichtbare Leistungen als technische Zeichnung mit Maßlinie und Schriftfeld, Festpreis im Blatt.",
    "werte": {
     "strich": "1.75 px gerade, Maßlinie 1 px",
     "versatz": "0",
     "hover": "Akzentteil rückt 4 Einheiten heraus (Explosionszeichnung)",
     "akzent": "#F5B700 als Fläche mit schwarzer Kontur"
    }
   }
  ]
 }
}