{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "graustufen-zu-farbe",
 "name": "Graustufen zu Farbe / Duoton-Bildbehandlung",
 "name_en": "Grayscale to color / duotone hover / Duotone images",
 "kurz": "Das Team-Raster steht ruhig in Graustufen oder im Duoton der Marke; nur die Person unter dem Zeiger bekommt ihre Farbe zurück.",
 "kategorie": "Hover",
 "kategorie_slug": "hover",
 "kategorie_nr": 7,
 "bau_chat": "C4",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "editorial",
  "präzise",
  "laut"
 ],
 "stimmung_roh": [
  "ruhig",
  "editorial",
  "seriös",
  "plakativ",
  "laut"
 ],
 "technik": [
  "css",
  "svg-filter"
 ],
 "technik_gruppen": [
  "css",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Bilder stehen im Ruhezustand entsättigt oder als Duoton in der Markenfarbe. Beim Hover oder Fokus bekommt nur das berührte Bild seine Vollfarbe zurück: filter: grayscale(1) geht auf 0, oder eine Duoton-Ebene blendet aus. Oft kombiniert mit leichtem Zoom; als Variante kommt die Farbe überbelichtet und setzt sich (Lichtblitz).",
  "warum_es_wirkt": "Ein Raster aus vielen Fotos wird ruhig und einheitlich, auch wenn Licht und Hintergrund der Aufnahmen schwanken. Farbe wird zum Fokuszeichen: Wo sie auftaucht, liegt die Aufmerksamkeit. Im Duoton tragen alle Bilder die Markenfarbe und wirken grafisch und geschlossen.",
  "wann_einsetzen": "Team- und Köpfe-Raster, Kundenlogos, Projektraster mit uneinheitlichen Fotos, Archive. Event- und Kampagnenseiten mit starker Farbidentität.",
  "wann_nicht": "Wenn die Farbe verkauft, etwa bei Produkt- oder Food-Fotos. Wenn die meisten Besucher per Touch kommen und die Farbe sonst nie sähen.",
  "varianten": [
   "Graustufen zu Farbe: filter: grayscale(1) → 0 (Future Fonts, Klim)",
   "Duoton in Markenfarbe, das beim Hover ausblendet (SVG-Gradient-Map oder mix-blend-mode)",
   "Lichtblitz: brightness(300 %) → 100 % beim Einfärben (Codrops HoverGrid)",
   "Nur die Nachbarn werden grau (siehe nachbarn-reagieren-hover)",
   "Tritone oder kombiniert mit Halbton-Raster",
   "Statisches Duoton als Bildsprache, ganz ohne Hover"
  ],
  "umsetzung": "@media (hover: hover) { .tile img { filter: grayscale(1) contrast(1.05); transition: filter .1s cubic-bezier(.42,0,1,1), scale .5s cubic-bezier(.4,0,.22,1); } .tile:is(:hover, :focus-within) img { filter: none; scale: 1.03; } }\n\nDuoton: Zwei Ebenen übereinander, oben das Bild mit SVG-Filter (feColorMatrix für die Luminanz, dann feComponentTransfer type=\"table\" mit Schatten- und Lichtfarbe als Gradient-Map). Beim Hover blendet die obere Ebene per opacity aus. mix-blend-mode ist nicht animierbar, deshalb immer über opacity. Die einfache CSS-Variante: Container mit background: var(--marke), img { filter: grayscale(1); mix-blend-mode: multiply }. Die SVG-Variante ist genauer, ihre Farben lassen sich aber nicht per Custom Property ändern.\n\nFallstricke: filter auf vielen großen Bildern kostet; will-change nur sparsam. Die Duoton-Ebene ist eine Kopie und bekommt aria-hidden.",
  "mobil": "Ohne Hover alle Bilder in Farbe zeigen. Graustufen nur unter @media (hover: hover). Statisches Duoton kann bleiben.",
  "reduzierte_bewegung": "Unkritisch. Den Farbwechsel ohne Übergang zeigen, Zoom und Lichtblitz weglassen.",
  "barrierefreiheit": "Keine Information nur über Farbe. Tastaturfokus löst denselben Zustand aus wie Hover, dazu ein sichtbarer Fokusrahmen. Alt-Texte am Originalbild, die Duoton-Kopie ist aria-hidden. Kontrast von Text über Duoton-Bildern prüfen."
 },
 "messwerte": {
  "easing": "ease-in",
  "dauer_ms": "100 (Future Fonts)",
  "stagger_ms": "",
  "distanz": "grayscale 1 → 0",
  "sonstiges": "",
  "herkunft": "beobachtet",
  "quelle": "https://www.futurefonts.xyz/assets/index-mrLe-lzS.css"
 },
 "kurve": {
  "bezier": [
   0.42,
   0.0,
   1.0,
   1.0
  ],
  "css": "cubic-bezier(0.42, 0, 1, 1)",
  "name": "ease-in",
  "dauer_ms": 100
 },
 "gesehen_bei": [
  {
   "seite": "Codrops HoverGrid (Repo)",
   "url": "https://github.com/codrops/HoverGrid",
   "auszeichnung": "",
   "beobachtung": "Metalab-inspiriert; Code: Bilder beim Öffnen von brightness(300 %) auf 100 % mit clip-path-Reveal, 0.95 s power4.",
   "art": "demo"
  },
  {
   "seite": "Codrops DoubleImageHoverEffects (Repo)",
   "url": "https://github.com/codrops/DoubleImageHoverEffects",
   "auszeichnung": "",
   "beobachtung": "Clip-Path-Hover, die dasselbe Bild auf verschiedene Weise enthüllen.",
   "art": "demo"
  },
  {
   "seite": "Klim Type Foundry",
   "url": "https://klim.co.nz/",
   "auszeichnung": "",
   "beobachtung": "Fonts-in-Use-Karten: --imageFilter grayscale(100%) → :hover grayscale(0%).",
   "art": "website"
  },
  {
   "seite": "Future Fonts",
   "url": "https://www.futurefonts.xyz/",
   "auszeichnung": "",
   "beobachtung": ".typefaceCard--desaturated .typefaceCard--coverImg filter grayscale(100%), transition filter .1s ease-in → :hover grayscale(0%).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops HoverGrid (Repo)",
   "url": "https://github.com/codrops/HoverGrid"
  }
 ],
 "kombinierbar_mit": [
  "bild-zoom-in-maske",
  "nachbarn-reagieren-hover",
  "halbton-raster",
  "grain-noise-overlay"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hover/graustufen-zu-farbe/",
  "meta": "https://cecodesign.de/lab/fundus/hover/graustufen-zu-farbe/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hover/graustufen-zu-farbe/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json",
   "material3d.json",
   "patch-belege-1.json"
  ],
  "pruefnotizen": [
   "patch-belege-1.json: 2 Produktionsbelege (Schriftgießereien)."
  ],
  "zusammengelegt_aus": [
   "graustufen-zu-farbe",
   "duotone-bilder"
  ],
  "prioritaet_hinweis": "31.10.2026: C → B laut patch-belege-1.json (2 Produktionsbelege (Schriftgießereien).)",
  "querverweis_kategorien": [
   "Glas & Material"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Das Team-Raster steht ruhig in Graustufen oder im Duoton der Marke; nur die Person unter dem Zeiger bekommt ihre Farbe zurück.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "Graustufen cubic-bezier(0.42, 0, 1, 1) (ease-in, Future Fonts) · Duoton und Zoom cubic-bezier(0.4, 0, 0.22, 1) (Rezept) · Lichtblitz cubic-bezier(0.22, 1, 0.36, 1) (power4.out-Näherung)",
   "dauer_ms": "Graustufen 100 · Duoton-Ebene und Zoom 500 · Lichtblitz 950 · Unterstreichung Name 125",
   "graustufen": "filter: grayscale(1) contrast(1.05) → grayscale(0) contrast(1)",
   "duoton": "SVG-Filter: Luminanz (0.2126/0.7152/0.0722), Gamma 1.6, Gradient-Map #1E1E50 → #EFEBEB; zweite Ebene, Deckkraft 1 → 0",
   "lichtblitz": "brightness(3) → brightness(1) beim Einfärben (Codrops HoverGrid)",
   "zoom": "scale 1 → 1.03, Ursprung 50 % 62 %",
   "fokus": "outline 2px #00BEE6, Abstand 3px",
   "vorfuehrung": "Zeiger fährt die vier Köpfe ab, 6,4 s je Runde, jede Runde eine Variante"
  },
  "ausloeser": "hover",
  "touch": "Kein Hover, also keine Graustufen: alle Porträts stehen in Farbe (Graustufen nur, wenn (hover: hover) zutrifft). Varianten-Umschalter ausgeblendet.",
  "reduziert": "Der Farbwechsel bleibt, kommt aber sofort ohne Übergang. Kein Zoom, kein Lichtblitz.",
  "korrekturen": {
   "beschreibung": "Bilder stehen im Ruhezustand entsättigt oder als Duoton in der Markenfarbe. Beim Hover oder Fokus bekommt nur das berührte Bild seine Vollfarbe zurück: filter: grayscale(1) geht auf 0, oder eine Duoton-Ebene blendet aus. Oft kombiniert mit leichtem Zoom; als Variante kommt die Farbe überbelichtet und setzt sich (Lichtblitz).",
   "warum_es_wirkt": "Ein Raster aus vielen Fotos wird ruhig und einheitlich, auch wenn Licht und Hintergrund der Aufnahmen schwanken. Farbe wird zum Fokuszeichen: Wo sie auftaucht, liegt die Aufmerksamkeit. Im Duoton tragen alle Bilder die Markenfarbe und wirken grafisch und geschlossen.",
   "wann_einsetzen": "Team- und Köpfe-Raster, Kundenlogos, Projektraster mit uneinheitlichen Fotos, Archive. Event- und Kampagnenseiten mit starker Farbidentität.",
   "wann_nicht": "Wenn die Farbe verkauft, etwa bei Produkt- oder Food-Fotos. Wenn die meisten Besucher per Touch kommen und die Farbe sonst nie sähen.",
   "varianten": [
    "Graustufen zu Farbe: filter: grayscale(1) → 0 (Future Fonts, Klim)",
    "Duoton in Markenfarbe, das beim Hover ausblendet (SVG-Gradient-Map oder mix-blend-mode)",
    "Lichtblitz: brightness(300 %) → 100 % beim Einfärben (Codrops HoverGrid)",
    "Nur die Nachbarn werden grau (siehe nachbarn-reagieren-hover)",
    "Tritone oder kombiniert mit Halbton-Raster",
    "Statisches Duoton als Bildsprache, ganz ohne Hover"
   ],
   "umsetzung": "@media (hover: hover) { .tile img { filter: grayscale(1) contrast(1.05); transition: filter .1s cubic-bezier(.42,0,1,1), scale .5s cubic-bezier(.4,0,.22,1); } .tile:is(:hover, :focus-within) img { filter: none; scale: 1.03; } }\n\nDuoton: Zwei Ebenen übereinander, oben das Bild mit SVG-Filter (feColorMatrix für die Luminanz, dann feComponentTransfer type=\"table\" mit Schatten- und Lichtfarbe als Gradient-Map). Beim Hover blendet die obere Ebene per opacity aus. mix-blend-mode ist nicht animierbar, deshalb immer über opacity. Die einfache CSS-Variante: Container mit background: var(--marke), img { filter: grayscale(1); mix-blend-mode: multiply }. Die SVG-Variante ist genauer, ihre Farben lassen sich aber nicht per Custom Property ändern.\n\nFallstricke: filter auf vielen großen Bildern kostet; will-change nur sparsam. Die Duoton-Ebene ist eine Kopie und bekommt aria-hidden.",
   "mobil": "Ohne Hover alle Bilder in Farbe zeigen. Graustufen nur unter @media (hover: hover). Statisches Duoton kann bleiben.",
   "reduzierte_bewegung": "Unkritisch. Den Farbwechsel ohne Übergang zeigen, Zoom und Lichtblitz weglassen.",
   "barrierefreiheit": "Keine Information nur über Farbe. Tastaturfokus löst denselben Zustand aus wie Hover, dazu ein sichtbarer Fokusrahmen. Alt-Texte am Originalbild, die Duoton-Kopie ist aria-hidden. Kontrast von Text über Duoton-Bildern prüfen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept kanzlei-beratung-souveraen: Köpfe-Raster der erfundenen Kanzlei Gerdes Lüken (Oldenburg, Haarenufer). Die vier Porträts sind eigene SVG-Illustrationen mit einheitlichem Studiolicht als Platzhalter für Teamfotos, also kein Bild aus medien/. Umschalter Graustufen, Duoton (#1E1E50 → #EFEBEB per SVG-Gradient-Map) und Lichtblitz; die Werte stehen unter dem Raster. Graustufen-Dauer gemessen bei Future Fonts (100 ms ease-in), sonst die Rezeptkurve. Das Rezept will Teamfotos im einheitlichen Licht, genau dafür ist das Muster gemacht. AD-Review 01.11.2026: Note 4. Dr. Selin Aydın in Dr. Derya Yıldız umbenannt (Selin und Aydın kamen schon in anderen Demos vor); Steckbrief-Beschreibung ohne Aufzählungsziffern. Zugang 02.11.2026: --meta #8e7c6d → #73645a (5,4:1); Fachgebiet mit hyphens: auto und overflow-wrap: break-word (kein Querscrollen bei 320 px); Kontrastmodus-Rahmen für Knöpfe."
 }
}