{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "token-tech-praezise",
 "name": "Animationsstil „Tech präzise“ (Produkt-UI)",
 "name_en": "Productive / tech precise motion",
 "kurz": "Produkt-UI einer Saarbrücker Beleg-Software: Panel, Reiter, Buchen und Toast laufen exakt auf den Carbon-Token, ein Protokoll zeigt jede Bewegung mit Dauer und Kurve.",
 "kategorie": "Animationsstile",
 "kategorie_slug": "animationsstile",
 "kategorie_nr": 14,
 "bau_chat": "C6",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "technisch",
  "nüchtern",
  "effizient",
  "kühl"
 ],
 "technik": [
  "css",
  "web-animations-api",
  "view-transitions"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Bewegungssprache von Software- und SaaS-Seiten: sehr kurze Dauern von 70 bis 240 ms für die Bedienung, 400 bis 700 ms für Einblendungen. Bewegt werden Deckkraft und ein kleiner Weg von 4 bis 8 px, optional ein Blur von 4 px auf 0. Die Kurven starten knapp und laufen klar aus (Carbon productive). Austritte sind schneller als Eintritte. Nichts federt, nichts dreht sich.",
  "warum_es_wirkt": "Die Oberfläche reagiert so schnell wie die Software selbst. Bewegung erklärt nur, woher ein Element kommt und wohin es geht, ohne Aufmerksamkeit zu ziehen. Das wirkt effizient und verlässlich.",
  "wann_einsetzen": "SaaS, Tools, Dashboards, Dokumentationen, technische Produktseiten, Formulare.",
  "wann_nicht": "Emotionale Kampagnen, Mode, Kunst.",
  "varianten": [
   "Productive (Carbon): kurz und funktional, für die ganze Bedienung",
   "Expressive (Carbon): länger und weicher, nur für Hero-Momente",
   "Mit Blur: Einblendungen zusätzlich von blur(4px) auf 0"
  ],
  "umsetzung": "Token direkt aus Carbon: --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9), --ease-enter: cubic-bezier(0, 0, 0.38, 0.9), --ease-exit: cubic-bezier(0.2, 0, 1, 0.9), --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1). Dauern fast-01 70, fast-02 110, moderate-01 150, moderate-02 240, slow-01 400, slow-02 700 ms. Zuordnung: Hover und Farbe 70, Reiter 110, Austritte 150, Panels 240, Einblendungen 400, Hero 700. Hover per CSS-Transition, Panels und Toasts per Web Animations API.",
  "mobil": "Gleiche Token. Seitenpanels werden zu Sheets von unten, der Weg wechselt von x auf y.",
  "reduzierte_bewegung": "Translation und Blur entfallen, die Deckkraft bleibt (höchstens 150 ms).",
  "barrierefreiheit": "Zustandswechsel zusätzlich per ARIA melden: aria-selected für Zeilen und Reiter, aria-busy beim Speichern, role=\"status\" für Toasts. Reiter per Pfeiltasten, Panel per Escape schließen."
 },
 "messwerte": {
  "easing": "Produktion IBM: productive cubic-bezier(0.2,0,0.38,0.9), expressive cubic-bezier(0.4,0.14,0.3,1), entrance cubic-bezier(0,0,0.38,0.9), exit cubic-bezier(0.2,0,1,0.9); SaaS: cubic-bezier(0.4,0,0.2,1) (basement, Resend, Vercel-Umfeld)",
  "dauer_ms": "IBM: 70 (57×) / 110 (53×) / 150 (37×) / 240 / 400 / 500; basement 150; Resend 150 / 300",
  "stagger_ms": "20–40",
  "distanz": "4–8 px; Blur 4 px → 0",
  "sonstiges": "GSAP-Namen sind Näherungen",
  "herkunft": "beobachtet",
  "quelle": "https://www.ibm.com/etc.clientlibs/adobe-cms/clientlibs/clientlib-idlStylesCarbon.lc-be7d2847dfdb7e200310550a1f065ccb-lc.min.css"
 },
 "kurve": {
  "bezier": [
   0.2,
   0.0,
   0.38,
   0.9
  ],
  "css": "cubic-bezier(0.2, 0, 0.38, 0.9)",
  "name": "eigene Kurve",
  "dauer_ms": 70
 },
 "gesehen_bei": [
  {
   "seite": "IBM Carbon – Motion",
   "url": "https://carbondesignsystem.com/elements/motion/overview/",
   "auszeichnung": "",
   "beobachtung": "Productive Standard cubic-bezier(0.2,0,0.38,0.9), Entrance (0,0,0.38,0.9), Exit (0.2,0,1,0.9); Expressive Standard (0.4,0.14,0.3,1), Entrance (0,0,0.3,1), Exit (0.4,0.14,1,1); Dauer-Token fast-01 70, fast-02 110, moderate-01 150, moderate-02 240, slow-01 400, slow-02 700 ms.",
   "art": "artikel"
  },
  {
   "seite": "IBM",
   "url": "https://www.ibm.com/us-en",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Carbon-Motion im CSS: productive cubic-bezier(.2,0,.38,.9) 171× mit 70ms/110ms/150ms/240ms; expressive cubic-bezier(.4,.14,.3,1) 31× mit .4s/.5s; Eintritt (0,0,.38,.9), Austritt (.2,0,1,.9).",
   "art": "website"
  },
  {
   "seite": "basement.studio",
   "url": "https://basement.studio/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): Material-Standard cubic-bezier(.4,0,.2,1) mit .15s für Transitions (Tailwind-Default).",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Resend",
   "url": "https://resend.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft 31.10.2026 (HTML/Bundle per curl abgerufen): cubic-bezier(0.4,0,0.2,1) mit 300ms für Popover/Scale, Buttons 150ms ease-in-out.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "IBM Carbon: Motion",
   "url": "https://carbondesignsystem.com/elements/motion/overview/"
  }
 ],
 "kombinierbar_mit": [
  "css-native-karussell",
  "flip-zustandswechsel"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/",
  "meta": "https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: 3 Produktionsseiten; Carbon-Skala auf ibm.com 1:1 bestätigt."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Produkt-UI einer Saarbrücker Beleg-Software: Panel, Reiter, Buchen und Toast laufen exakt auf den Carbon-Token, ein Protokoll zeigt jede Bewegung mit Dauer und Kurve.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "kurven": "productive cubic-bezier(0.2, 0, 0.38, 0.9) · entrance cubic-bezier(0, 0, 0.38, 0.9) · exit cubic-bezier(0.2, 0, 1, 0.9) · expressive cubic-bezier(0.4, 0.14, 0.3, 1) · expressive entrance cubic-bezier(0, 0, 0.3, 1) · expressive exit cubic-bezier(0.4, 0.14, 1, 1)",
   "dauer_token_ms": "fast-01 70 · fast-02 110 · moderate-01 150 · moderate-02 240 · slow-01 400 · slow-02 700",
   "productive": "Hover/Farbe 70 · Reiter-Strich 110 productive · Reiter-Inhalt 150 entrance · Panel rein 240 entrance, raus 150 exit · Prüfpunkte 240 entrance, Versatz 30 · Toast rein 240, raus 150 · Hero 400 entrance, Versatz 60 · Tabellenzeilen beim Auftakt 240 entrance ab 200 ms, Versatz 30",
   "expressive": "Hover 70 · Reiter-Strich 150 expressive · Reiter-Inhalt 240 · Panel rein 400 expressive entrance, raus 240 expressive exit · Prüfpunkte 400, Versatz 40 · Toast rein 400, raus 240 · Hero 700, Versatz 80 · Tabellenzeilen beim Auftakt 400 ab 200 ms, Versatz 40",
   "blur": "wie productive, zusätzlich filter blur(4px) → 0 bei allen Einblendungen",
   "distanz": "Panel x 8 → 0 (Telefon: Sheet y 8 → 0) · Toast y 8 → 0, raus y 0 → 4 · Prüfpunkte und Reiter-Inhalt y 4 → 0 · Hero y 8 → 0; keine Skalierung, keine Rotation, kein Federn",
   "buchen": "aria-busy während 520 ms linearem Fortschrittsbalken (scaleX), danach Status-Pill-Farbwechsel 150 productive und Toast; Toast verschwindet nach 2600 ms",
   "reduziert": "nur opacity, 150 ms linear rein, 100 ms raus; Strich und Hover ohne Übergang",
   "schriften": "Geist 580 (h1, clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), -0.022em, 1.0), 400–560 UI; Geist Mono 450 für Nummern, Beträge, Labels",
   "farben": "#08090a Grund · #161718 Panel · #0f1011 App-Fläche · #242728 Linien · #f7f8f8 / #c2c7ca / #8a8f98 Text · Markenton #7b70ff (Primärknopf abgedunkelt #6458f0, Hover #6a5ff4) · Status #59d499 / #57c1ff / #ffc533 / #ff6161 mit 15 % Fläche",
   "zeiger_vorfuehrung": "gedachter Zeiger 400 ms productive (nur Demo-Ebene)"
  },
  "ausloeser": "klick",
  "touch": "Tippen auf eine Zeile öffnet das Panel. Unter 640 px wird es zum Sheet von unten (y statt x), die Tabelle zeigt Lieferant mit Nummer und Datum, Betrag und Status. Hover-Zustände entfallen, Schließen-Knopf 36 px.",
  "reduziert": "Translation und Blur entfallen. Panel, Toast und Prüfpunkte blenden nur in 150 ms ein, Hover und Reiter-Strich wechseln ohne Übergang.",
  "korrekturen": {
   "beschreibung": "Bewegungssprache von Software- und SaaS-Seiten: sehr kurze Dauern von 70 bis 240 ms für die Bedienung, 400 bis 700 ms für Einblendungen. Bewegt werden Deckkraft und ein kleiner Weg von 4 bis 8 px, optional ein Blur von 4 px auf 0. Die Kurven starten knapp und laufen klar aus (Carbon productive). Austritte sind schneller als Eintritte. Nichts federt, nichts dreht sich.",
   "warum_es_wirkt": "Die Oberfläche reagiert so schnell wie die Software selbst. Bewegung erklärt nur, woher ein Element kommt und wohin es geht, ohne Aufmerksamkeit zu ziehen. Das wirkt effizient und verlässlich.",
   "wann_einsetzen": "SaaS, Tools, Dashboards, Dokumentationen, technische Produktseiten, Formulare.",
   "wann_nicht": "Emotionale Kampagnen, Mode, Kunst.",
   "varianten": [
    "Productive (Carbon): kurz und funktional, für die ganze Bedienung",
    "Expressive (Carbon): länger und weicher, nur für Hero-Momente",
    "Mit Blur: Einblendungen zusätzlich von blur(4px) auf 0"
   ],
   "umsetzung": "Token direkt aus Carbon: --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9), --ease-enter: cubic-bezier(0, 0, 0.38, 0.9), --ease-exit: cubic-bezier(0.2, 0, 1, 0.9), --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1). Dauern fast-01 70, fast-02 110, moderate-01 150, moderate-02 240, slow-01 400, slow-02 700 ms. Zuordnung: Hover und Farbe 70, Reiter 110, Austritte 150, Panels 240, Einblendungen 400, Hero 700. Hover per CSS-Transition, Panels und Toasts per Web Animations API.",
   "mobil": "Gleiche Token. Seitenpanels werden zu Sheets von unten, der Weg wechselt von x auf y.",
   "reduzierte_bewegung": "Translation und Blur entfallen, die Deckkraft bleibt (höchstens 150 ms).",
   "barrierefreiheit": "Zustandswechsel zusätzlich per ARIA melden: aria-selected für Zeilen und Reiter, aria-busy beim Speichern, role=\"status\" für Toasts. Reiter per Pfeiltasten, Panel per Escape schließen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept saas-produkt-praezise, erfundene Beleg-Software Klarbeleg aus Saarbrücken (Kanzlei Weiler & Hahn, Mandant Bäckerei Ruppert). Hero mit echtem HTML-Produkt-UI statt Screenshot: Zeile anklicken öffnet das Panel, Reiter wechseln, Buchen mit aria-busy und Toast. Ein Protokoll im App-Fuß zeigt jede Bewegung mit Dauer, Kurve und Weg; das Pult darunter lässt die benutzten Token aufleuchten. Umschalter Productive, Expressive, Mit Blur. Vorführung mit gedachtem Zeiger, nach jeder Runde die nächste Variante. Reine Web Animations API, Token aus CSS-Variablen. Referenzen: are.na, amie.so, notion.com, figma.com (Prinzipien: Produkt-UI als Hero, Graustufen, ein Markenton). AD-Review 01.11.2026: Note 5. Zugang 02.11.2026: Primärknopf #7b70ff → #6458f0 (Weiß 5:1), Hover #6a5ff4. Bis 360 px brechen Lieferant und Belegnummer in der Belegliste um (Zeile min-height 52 px statt fester Höhe), statt abgeschnitten zu werden. Kontrastmodus: Knöpfe mit Rahmen ButtonText."
 }
}