{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "neo-skeuomorph-taktile-ui",
 "name": "Neo-Skeuomorphismus / taktile UI (Material mit Lichtkante)",
 "name_en": "Neo-skeuomorphism / tactile UI",
 "kurz": "Kaufbox einer Hautpflege-Manufaktur, in der jedes Bedienelement wie ein Objekt wirkt: Lichtkante oben, Haarlinie, gestaffelte Schatten, beim Drücken sinkt es ein.",
 "kategorie": "Glas & Material",
 "kategorie_slug": "glas-material",
 "kategorie_nr": 10,
 "bau_chat": "C5",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise",
  "luxuriös",
  "verspielt"
 ],
 "stimmung_roh": [
  "taktil",
  "hochwertig",
  "app-artig",
  "modern"
 ],
 "technik": [
  "css",
  "backdrop-filter"
 ],
 "technik_gruppen": [
  "css"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Flächen, Kacheln und Knöpfe wirken wie physische Objekte. Eine Lichtquelle von oben erzeugt eine feine helle Innenkante (inset 0 1px, Weiß mit 5–30 % Deckkraft). Dazu kommen ein Haarlinien-Ring (inset 0 0 0 1px oder .5px) und mehrere weiche Außenschatten mit gestaffelten Radien. Die Fläche trägt einen leichten Verlauf von hell nach dunkel oder einen radialen Glanz statt einer flachen Farbe. Beim Drücken verschwindet die Lichtkante, der Schatten wird kürzer und das Element sinkt 1–2 px ein. Anders als der Neumorphismus von 2020 (Ton in Ton, zu wenig Kontrast) arbeitet die heutige Form mit klaren Konturen, dunklen Gründen oder Glas und bleibt lesbar. Treiber sind Apples Liquid Glass (WWDC 2025) und App-Icon-artige Kacheln auf Produktseiten.",
  "warum_es_wirkt": "Nach zehn Jahren Flat Design signalisieren Tiefe und Lichtkanten wieder Anfassbarkeit und Wert. Was klickbar ist, erkennt man ohne Erklärung. Die feine Lichtkante kostet kaum etwas, wirkt aber wie sorgfältig gerendertes Material.",
  "wann_einsetzen": "Produkt- und App-Seiten: Icons, Feature-Kacheln, Keycaps, Fensterrahmen für Screenshots. Preiskarten, primäre Knöpfe, Kaufboxen und dunkle Themes. Templates, die ohne Fotos hochwertig wirken sollen.",
  "wann_nicht": "Lange Formulare, Tabellen und Einstellungen: dort flach bleiben. Helle Ton-in-Ton-Gestaltung, bei der Zustände nur über Schatten erkennbar wären. Marken mit bewusst flacher, grafischer Sprache.",
  "varianten": [
   "App-Icon-Kacheln mit Lichtkante und Doppelring (Raycast)",
   "Fensterrahmen für Produkt-Screenshots: Lichtkante oben, Haarlinie, zwei tiefe Außenschatten (Sunsama)",
   "Glas-Navigation mit innerer Lichtkante und Weißring (mymind, siehe frosted-glass-erweitert)",
   "Keycaps und Tastenkürzel als gedrückte Tasten mit dunklerer Unterkante",
   "Claymorphism: aufgeblasene, weiche 3D-Icons (eher Illustration als CSS)",
   "Klassischer Neumorphismus (heller und dunkler Zwillingsschatten): nur noch mit deutlicher Kontur vertretbar"
  ],
  "umsetzung": "Schatten als Token-Satz definieren, nicht pro Komponente: --edge-light: inset 0 1px rgb(255 255 255 / .1); --edge-ring: inset 0 0 0 1px rgb(255 255 255 / .06); --lift-1: 0 1px 4px rgb(0 0 0 / .4); --lift-2: 0 0 20px rgb(0 0 0 / .33). Kachel: background: linear-gradient(180deg, hsl(0 0% 100% / .06), transparent) über der Grundfarbe; box-shadow: var(--lift-1), var(--lift-2), var(--edge-light), var(--edge-ring). Gedrückt (:active und eine Klasse per pointerdown): Lichtkante auf Deckkraft 0, Außenschatten auf 0 1px 2px, translate: 0 1px, 80–120 ms ease-out; zurück in 150–200 ms. Gedrückte und normale Schattenliste mit gleicher Anzahl und Reihenfolge anlegen, sonst springt der Übergang. Helles Thema: Lichtkante kräftiger (.5–.9), Außenschatten weicher mit negativem Spread (0 40px 80px -20px). Die Lichtrichtung bleibt auf der ganzen Seite gleich, auch in Bildern.",
  "mobil": "Unverändert nutzbar. Große Blur-Radien bei vielen Elementen in Scroll-Listen sparsam einsetzen (Repaint). Den Druckzustand über pointerdown setzen, da es keinen Hover gibt und :active auf Mobilgeräten unzuverlässig greift.",
  "reduzierte_bewegung": "Kaum Bewegung. Das Einsinken darf bleiben, Übergänge auf 0–50 ms kürzen.",
  "barrierefreiheit": "Zustände nie nur über Schatten unterscheiden: gewählte Optionen zusätzlich über Textfarbe, Gewicht oder Markierung zeigen. Bedienelemente brauchen 3:1 Kontrast zum Grund (WCAG 1.4.11), Text 4.5:1. Fokusring zusätzlich zum Schatten. Echte Rollen setzen (aria-pressed, role=\"switch\", role=\"radiogroup\"). Bei Glas prefers-reduced-transparency beachten und eine opake Fläche als Fallback anbieten."
 },
 "messwerte": {
  "easing": "ease-out für Press (Lift zurück mit leichtem Überschwingen möglich)",
  "dauer_ms": "Press 80–120; Rückkehr 150–200",
  "stagger_ms": "",
  "distanz": "Einsinken 1–2 px",
  "sonstiges": "Raycast-Kachel: 0 1px 4px #0006, 0 0 20px #00000054, inset 0 1px #ffffff14, inset 0 0 0 1px #ffffff0d. Sunsama-Rahmen: inset 0 1px 0 0 rgba(255,255,255,.5), 0 0 0 1px rgba(0,0,0,.04), 0 40px 80px -20px rgba(0,0,0,.22), 0 8px 24px -8px rgba(0,0,0,.14)",
  "herkunft": "beobachtet",
  "quelle": "https://www.raycast.com/ (CSS-Bundle 1kl3ivnf311rq.css); https://www.sunsama.com/css/sunsama.css"
 },
 "kurve": {
  "bezier": [
   0.0,
   0.0,
   0.58,
   1.0
  ],
  "css": "cubic-bezier(0, 0, 0.58, 1)",
  "name": "ease-out",
  "dauer_ms": 100
 },
 "gesehen_bei": [
  {
   "seite": "Raycast",
   "url": "https://www.raycast.com/",
   "auszeichnung": "",
   "beobachtung": "Icon-Kacheln mit box-shadow: 0 1px 4px #0006, 0 0 20px #00000054, inset 0 1px #ffffff14, inset 0 0 0 1px #ffffff0d; die Raycast-Kachel zusätzlich mit farbigem Innenglühen (inset 0 0 15px 2px #ff493940, inset 0 .5px #ffccc785); Panels mit inset 0 .5px #ffffff4d, 0 0 0 .5px #000c, 0 4px 40px 8px #0006 (CSS-Bundle _next/static/immutable/chunks/1kl3ivnf311rq.css bzw. 0lrccwf1ua-z0.css, abgerufen 31.10.2026).",
   "art": "website"
  },
  {
   "seite": "Sunsama",
   "url": "https://www.sunsama.com/",
   "auszeichnung": "",
   "beobachtung": "Fensterrahmen der Produkt-Screenshots (.sslab-window.has-frame): border-radius 10px, box-shadow inset 0 1px 0 0 rgba(255,255,255,.5), 0 0 0 1px rgba(0,0,0,.04), 0 40px 80px -20px rgba(0,0,0,.22), 0 8px 24px -8px rgba(0,0,0,.14); im Dark Theme Lichtkante nur .04 (css/sunsama.css).",
   "art": "website"
  },
  {
   "seite": "mymind",
   "url": "https://www.mymind.com/",
   "auszeichnung": "",
   "beobachtung": "Sticky-Navigation als Glasplatte: backdrop-filter blur(22px) saturate(180%) mit box-shadow inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 1px rgba(255,255,255,.9), 0 8px 30px rgb(116 130 151 / 18%) (css/styles.css).",
   "art": "website"
  },
  {
   "seite": "Clay – Skeuomorphism Design Best Practices for 2026",
   "url": "https://clay.global/blog/skeuomorphism-ui",
   "auszeichnung": "",
   "beobachtung": "Einordnung des Comebacks (Liquid Glass, Poolsuite, Duolingo-Buttons mit dunklerer Unterkante); warnt, dass Neumorphismus in Produktion an WCAG-Kontrast scheiterte.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Clay – Skeuomorphism Design Best Practices for 2026",
   "url": "https://clay.global/blog/skeuomorphism-ui"
  },
  {
   "titel": "Is skeuomorphism back on the menu? (Simone, nach WWDC25)",
   "url": "https://blog.simone.computer/is-skeumorphism-back"
  }
 ],
 "kombinierbar_mit": [
  "druck-feedback",
  "frosted-glass-erweitert",
  "liquid-glass-refraktion",
  "grain-noise-overlay",
  "bento-grid-interaktiv",
  "verlaufs-rahmen"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/glas-material/neo-skeuomorph-taktile-ui/",
  "meta": "https://cecodesign.de/lab/fundus/glas-material/neo-skeuomorph-taktile-ui/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/glas-material/neo-skeuomorph-taktile-ui/demo"
 },
 "herkunft": {
  "quelldateien": [
   "patch-luecken-b.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Kaufbox einer Hautpflege-Manufaktur, in der jedes Bedienelement wie ein Objekt wirkt: Lichtkante oben, Haarlinie, gestaffelte Schatten, beim Drücken sinkt es ein.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0, 0, 0.58, 1) (ease-out) für Drücken, Rückkehr und Gleiten; cubic-bezier(0.25, 1, 0.5, 1) für Varianten- und Flakonwechsel (Rezept)",
   "dauer_ms": "Drücken 100, Rückkehr 180, Daumen/Schalter gleiten 240, Flakon-Größe 1000, Variantenwechsel 600 (Kampagnenfeld 1000)",
   "distanz": "Einsinken 1 px (Kacheln, Daumen, Schalterknopf), 2 px (Keycaps, Primärknopf)",
   "porzellan_klein": "Lichtkante inset 0 1px 0 0 rgba(255,255,255,.9); Ring 0 0 0 1px rgba(18,16,16,.08); Lift 0 1px 2px rgba(18,16,16,.07), 0 8px 18px -8px rgba(18,16,16,.24); gedrückt 0 1px 2px rgba(18,16,16,.14), Lichtkante Deckkraft 0",
   "porzellan_rahmen": "Sunsama: inset 0 1px 0 0 rgba(255,255,255,.5), 0 0 0 1px rgba(0,0,0,.04), 0 40px 80px -20px rgba(0,0,0,.22), 0 8px 24px -8px rgba(0,0,0,.14); border-radius 22px",
   "onyx_klein": "Raycast: 0 1px 4px #0006, 0 0 20px #00000054, inset 0 1px #ffffff14, inset 0 0 0 1px #ffffff0d; Fläche linear-gradient(180deg, hsl(0 0% 100% / .06), transparent) über #1d1819; gedrückt 0 1px 2px #0006, Lichtkante #ffffff00",
   "onyx_rahmen": "Raycast-Panel: inset 0 .5px #ffffff4d, 0 0 0 .5px #000c, 0 4px 40px 8px #0006",
   "onyx_primaer": "Innenglühen inset 0 0 15px 2px #ff9a4940, inset 0 .5px #ffdcc0d0 auf linear-gradient(180deg, #e3965a, #c8742f)",
   "glas": "mymind: backdrop-filter blur(22px) saturate(180%); inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 1px rgba(255,255,255,.9), 0 8px 30px rgb(116 130 151 / 18%); Fläche rgba(255,252,247,.6) → rgba(255,249,242,.36)",
   "mulde": "Hell inset 0 1px 2px rgba(18,16,16,.10), inset 0 0 0 1px rgba(18,16,16,.06) auf #e9e4dc; Dunkel inset 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px #ffffff0a auf #0e0b0c",
   "keycap": "Unterkante 0 2px 0 0 (hell #cfc8bd, dunkel #0a0808) + 0 3px 6px -2px rgba(0,0,0,.25); gedrückt Unterkante 0, translate 0 2px",
   "radien": "Kachel 15px (58 × 58), Mulde 14px, Daumen 10px, Keycap 10px (44 × 44), Primärknopf 14px (min. 56 px hoch), Schalter 60 × 34",
   "fokus": "outline 2px solid Textfarbe, offset 3px",
   "schriften": "Zalando Sans (wdth 125, wght 400) für Headline und Text, Fragment Mono 11px versal +0.06em für Labels und Wirkstoffe"
  },
  "ausloeser": "klick",
  "touch": "Druckzustand per pointerdown über die Klasse .gedrueckt (nicht nur :active), Größen-Daumen springt schon beim Antippen; Zielflächen mindestens 44 px, Segmente 48 px; kein Hover-Aufhellen.",
  "reduziert": "Einsinken (1–2 px) und Schattenwechsel bleiben, Drücken 0 ms, Rückkehr 50 ms; Daumen und Schalter springen, Flakon und Variantenwechsel ohne Übergang. Die Werte-Anzeige zeigt die reduzierten Dauern.",
  "korrekturen": {
   "beschreibung": "Flächen, Kacheln und Knöpfe wirken wie physische Objekte. Eine Lichtquelle von oben erzeugt eine feine helle Innenkante (inset 0 1px, Weiß mit 5–30 % Deckkraft). Dazu kommen ein Haarlinien-Ring (inset 0 0 0 1px oder .5px) und mehrere weiche Außenschatten mit gestaffelten Radien. Die Fläche trägt einen leichten Verlauf von hell nach dunkel oder einen radialen Glanz statt einer flachen Farbe. Beim Drücken verschwindet die Lichtkante, der Schatten wird kürzer und das Element sinkt 1–2 px ein. Anders als der Neumorphismus von 2020 (Ton in Ton, zu wenig Kontrast) arbeitet die heutige Form mit klaren Konturen, dunklen Gründen oder Glas und bleibt lesbar. Treiber sind Apples Liquid Glass (WWDC 2025) und App-Icon-artige Kacheln auf Produktseiten.",
   "warum_es_wirkt": "Nach zehn Jahren Flat Design signalisieren Tiefe und Lichtkanten wieder Anfassbarkeit und Wert. Was klickbar ist, erkennt man ohne Erklärung. Die feine Lichtkante kostet kaum etwas, wirkt aber wie sorgfältig gerendertes Material.",
   "wann_einsetzen": "Produkt- und App-Seiten: Icons, Feature-Kacheln, Keycaps, Fensterrahmen für Screenshots. Preiskarten, primäre Knöpfe, Kaufboxen und dunkle Themes. Templates, die ohne Fotos hochwertig wirken sollen.",
   "wann_nicht": "Lange Formulare, Tabellen und Einstellungen: dort flach bleiben. Helle Ton-in-Ton-Gestaltung, bei der Zustände nur über Schatten erkennbar wären. Marken mit bewusst flacher, grafischer Sprache.",
   "varianten": [
    "App-Icon-Kacheln mit Lichtkante und Doppelring (Raycast)",
    "Fensterrahmen für Produkt-Screenshots: Lichtkante oben, Haarlinie, zwei tiefe Außenschatten (Sunsama)",
    "Glas-Navigation mit innerer Lichtkante und Weißring (mymind, siehe frosted-glass-erweitert)",
    "Keycaps und Tastenkürzel als gedrückte Tasten mit dunklerer Unterkante",
    "Claymorphism: aufgeblasene, weiche 3D-Icons (eher Illustration als CSS)",
    "Klassischer Neumorphismus (heller und dunkler Zwillingsschatten): nur noch mit deutlicher Kontur vertretbar"
   ],
   "umsetzung": "Schatten als Token-Satz definieren, nicht pro Komponente: --edge-light: inset 0 1px rgb(255 255 255 / .1); --edge-ring: inset 0 0 0 1px rgb(255 255 255 / .06); --lift-1: 0 1px 4px rgb(0 0 0 / .4); --lift-2: 0 0 20px rgb(0 0 0 / .33). Kachel: background: linear-gradient(180deg, hsl(0 0% 100% / .06), transparent) über der Grundfarbe; box-shadow: var(--lift-1), var(--lift-2), var(--edge-light), var(--edge-ring). Gedrückt (:active und eine Klasse per pointerdown): Lichtkante auf Deckkraft 0, Außenschatten auf 0 1px 2px, translate: 0 1px, 80–120 ms ease-out; zurück in 150–200 ms. Gedrückte und normale Schattenliste mit gleicher Anzahl und Reihenfolge anlegen, sonst springt der Übergang. Helles Thema: Lichtkante kräftiger (.5–.9), Außenschatten weicher mit negativem Spread (0 40px 80px -20px). Die Lichtrichtung bleibt auf der ganzen Seite gleich, auch in Bildern.",
   "mobil": "Unverändert nutzbar. Große Blur-Radien bei vielen Elementen in Scroll-Listen sparsam einsetzen (Repaint). Den Druckzustand über pointerdown setzen, da es keinen Hover gibt und :active auf Mobilgeräten unzuverlässig greift.",
   "reduzierte_bewegung": "Kaum Bewegung. Das Einsinken darf bleiben, Übergänge auf 0–50 ms kürzen.",
   "barrierefreiheit": "Zustände nie nur über Schatten unterscheiden: gewählte Optionen zusätzlich über Textfarbe, Gewicht oder Markierung zeigen. Bedienelemente brauchen 3:1 Kontrast zum Grund (WCAG 1.4.11), Text 4.5:1. Fokusring zusätzlich zum Schatten. Echte Rollen setzen (aria-pressed, role=\"switch\", role=\"radiogroup\"). Bei Glas prefers-reduced-transparency beachten und eine opake Fläche als Fallback anbieten."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept mode-beauty-kollektion, erfundene Hautpflege-Manufaktur VERRA aus Regensburg (Zalando Sans + Fragment Mono, warmes Off-White, Formel in der Produktzeile). Taktile UI passt hier, weil die Kaufbox das Bedienbare ist; Bewegung bleibt knapp (UI ≤ 240 ms, Bildwechsel 1 s). Kaufbox mit Wirkstoff-Kacheln (App-Icon-Prinzip, gewählte Kachel mit farbigem Innenglühen), Größenwahl als Mulde mit gleitendem, erhabenem Daumen, Abo-Schalter, Keycap-Stepper mit Unterkante und Primärknopf. Flakon, Sockel und Kampagnenfeld als eigene SVG/CSS-Grafik, Licht überall von oben. Drei Varianten per Umschalter: Porzellan (Sunsama-Werte, hell), Onyx (Raycast-Werte, dunkel), Glas (mymind-Werte über einem Kampagnenfeld; Fallback opak bei fehlendem backdrop-filter und prefers-reduced-transparency). Vorführung: gedachter Zeiger drückt Größe, Kachel, Schalter, Plus und Primärknopf, je Runde eine Variante. AD-Review 01.11.2026: Note 5."
 }
}