{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "tiefen-taste-3d",
 "name": "Tiefen-Taste (3D-Button)",
 "name_en": "3D depth button (stacked, brutalist offset, keycap, soft)",
 "kurz": "Der Button hat sichtbare Tiefe: Hover hebt die Fläche an, Druck setzt sie fast auf. Als Stapel, harter Versatz, Keycap oder Soft-Taste mit Kontur.",
 "kategorie": "Buttons",
 "kategorie_slug": "buttons",
 "kategorie_nr": 18,
 "bau_chat": "B",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "verspielt",
  "taktil",
  "freundlich",
  "laut"
 ],
 "technik": [
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Button mit sichtbarer Tiefe. Eine Fläche liegt über einer Kante oder einem Schatten. Hover hebt sie etwas an, Druck setzt sie fast auf. Der Weg zwischen Ruhe, Hover und Druck ist die Rückmeldung: Man sieht, dass etwas nachgibt. Vier Spielarten mit derselben Mechanik: Stapel aus Schatten, Kante und Front; harter Versatzschatten im Brutalismus-Stil; Keycap mit dunklerer Unterkante; weiche Soft-Taste mit Kontur.",
  "warum_es_wirkt": "Tiefe macht die Handlung greifbar. Der Button sieht drückbar aus, bevor man ihn berührt, und der Druck antwortet sofort mit einem kurzen Weg nach unten. Das wirkt freundlich und ermutigend, gerade bei Zielgruppen, die zögern (Anmeldung, Probetraining, erste Buchung).",
  "wann_einsetzen": "Für die eine Hauptaktion einer Ansicht in freundlichen, lauten oder spielerischen Marken: Fahrschule, Kurse und Coaching, Direktvertrieb von Produkten (Stapel); Fitnessstudio, Kultur und Festival (Versatz); Tastenkürzel und Werkzeug-Oberflächen (Keycap).",
  "wann_nicht": "Nicht bei Luxus, Kanzlei, Praxis und Immobilien: Tiefe wirkt dort spielerisch. Nie mehrere Tiefen-Tasten nebeneinander (Spielzeug-Look); Nebenaktionen bleiben flach. Die Soft-Taste nie ohne Kontur und nie als einzige Zustandsanzeige: Neumorph hat zu wenig Kontrast, Buttons sind schwer als bedienbar zu erkennen. Nicht für Formularfelder, Reiter und Menüs.",
  "varianten": [
   "stapel: drei Ebenen (Schatten, Kante, Front); Front in Ruhe -4 px, Hover -6 px mit Überschwinger, Druck -2 px (nach Josh W. Comeau)",
   "versatz-brutal: harter Versatzschatten ohne Unschärfe, dicker Rand; Druck schiebt die Fläche in den Schatten, Bewegung in Stufen",
   "keycap: Taste mit dunklerer Unterkante als Schatten; Druck nimmt die Unterkante weg und senkt die Fläche um denselben Weg",
   "soft: Neumorph-Zwilling mit Licht- und Schattenseite, nur mit 1 px Kontur und Text mindestens 4,5:1; Druck kehrt die Schatten nach innen"
  ],
  "umsetzung": "Echter <button> mit drei Kindern: span.taste__schatten und span.taste__kante liegen absolut, span.taste__front trägt Text und Größe. Die Zustände laufen über Variablen am Button (--fy Front, --sy Schatten, --t/--k Dauer und Kurve): Ruhe -4 px, :hover -6 px (nur unter @media (hover: hover)), :active -2 px. Die Übergangsdauer steht am Zielzustand: hin 250 ms mit Überschwinger, Druck 34 ms, zurück 600 ms. Reduzierte Bewegung setzt nur die Variablen gleich. Varianten tauschen die Variablen (Versatz, Keycap, Soft) und blenden Schatten und Kante aus. Deaktiviert: aria-disabled statt disabled, damit der Button fokussierbar bleibt und seine Begründung (aria-describedby) vorgelesen wird; die Front liegt flach. Laden: data-zustand=\"laedt\" hält die Taste gedrückt, Label wechselt, Status über role=status. Nur eine Tiefen-Taste je Ansicht, Nebenaktionen flach (in der Demo „Lieber anrufen“ als Link).",
  "mobil": "Ohne Hover kein Anheben: Die Taste ruht in ihrer Tiefe, der Druck wirkt über :active sofort. Trefferfläche mindestens 44 px hoch (Front plus Kante). Kein Tap-Highlight, damit der Druck die Rückmeldung bleibt.",
  "reduzierte_bewegung": "Kein Weg: Front und Schatten bleiben stehen. Hover und Druck zeigen sich nur über Farbe (heller bzw. dunkler) in 80 ms linear.",
  "barrierefreiheit": "Echter <button> mit sichtbarem Text, :focus-visible mit eigener Kontur (nie nur über Schatten). Text auf der Front mindestens 4,5:1. Die Tiefe ist Zusatz, nie die einzige Zustandsanzeige: Gedrückt-Zustände (aria-pressed) und Deaktiviert zusätzlich über Text oder Farbe. Im Kontrastmodus (forced-colors) fallen Schatten weg: Rahmen in ButtonText. Trefferfläche mindestens 44 × 44 px (WCAG 2.5.8 verlangt 24 px, 44 px nach Apple HIG)."
 },
 "messwerte": {
  "easing": "Hover cubic-bezier(0.3, 0.7, 0.4, 1.5); Rückweg cubic-bezier(0.3, 0.7, 0.4, 1); Druck linear",
  "dauer_ms": "Hover 250, Druck 34, Rückweg 600",
  "stagger_ms": "",
  "distanz": "Front -4 px Ruhe, -6 px Hover, -2 px Druck; Schatten 2 / 4 / 1 px",
  "sonstiges": "Hover filter brightness(110%). Versatz-Variante: Versatz 4 px ohne Unschärfe, Rand 3 px (Superdesign).",
  "herkunft": "beobachtet",
  "quelle": "https://www.joshwcomeau.com/animation/3d-button/"
 },
 "kurve": {
  "bezier": [
   0.3,
   0.7,
   0.4,
   1.5
  ],
  "css": "cubic-bezier(0.3, 0.7, 0.4, 1.5)",
  "name": "eigene Kurve",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Josh W. Comeau: Building a Magical 3D Button",
   "url": "https://www.joshwcomeau.com/animation/3d-button/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 02.11.2026: button.pushable mit drei Kindern .shadow, .edge, .front (DOM-Reihenfolge = Stapel). Front translateY(-4px), Hover -6px mit transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5), Druck -2px mit 34ms, Rückweg 600ms cubic-bezier(0.3, 0.7, 0.4, 1). Schatten 2/4/1 px, Hover filter brightness(110%). Fokus über :focus-visible, outline-offset 4px. Reduzierte Bewegung behandelt der Artikel nicht.",
   "art": "tutorial"
  },
  {
   "seite": "TOFU Driving (Fahrschule, London)",
   "url": "https://www.tofudriving.com/",
   "auszeichnung": "",
   "beobachtung": "Aus der Rezept-Referenz fahrschule-freundlich-buchbar (live geprüft 31.10.2026): Buttons mit transform .35s cubic-bezier(.34,1.56,.64,1) (Überschwinger) plus box-shadow. Belegt Federung und Schatten am Button einer Fahrschule, nicht den kompletten Stapel.",
   "art": "website"
  },
  {
   "seite": "Superdesign: Brutalism Components",
   "url": "https://www.superdesign.dev/styles/brutalism/components",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 02.11.2026: Rand 3px solid #000, box-shadow 4px 4px 0 #000 ohne Unschärfe; bei :active rückt der Button um den Versatz in den Schatten und der Schatten fällt auf 0. Fokus als kräftige 3-px-Kontur mit Abstand. Dauer und Kurve nicht angegeben.",
   "art": "demo"
  },
  {
   "seite": "Interaction Design Foundation: Neumorphism",
   "url": "https://ixdf.org/literature/topics/neumorphism",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 02.11.2026: Neumorph lebt von geringem Kontrast; Buttons sind dadurch schwer zu erkennen, im Dunkelmodus besonders. Empfehlung: WCAG-Kontraste einhalten, klare Text-Labels und zusätzliche Hinweise auf Bedienbarkeit, Hauptaktionen konventionell gestalten. Grundlage für die Pflicht-Kontur der Variante soft.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Josh W. Comeau: Building a Magical 3D Button",
   "url": "https://www.joshwcomeau.com/animation/3d-button/"
  }
 ],
 "kombinierbar_mit": [
  "button-zustaende",
  "druck-feedback",
  "fokus-stil-system",
  "kontrastmodus-forced-colors",
  "token-federnd-verspielt",
  "token-brutal-hart",
  "neo-skeuomorph-taktile-ui",
  "termin-buchung-zwei-klick"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/",
  "meta": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/buttons/tiefen-taste-3d/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Buttons/SR-Recherche 02.11.2026"
  ],
  "pruefnotizen": [
   "Stapel-Werte direkt aus dem Comeau-Artikel (WebFetch 02.11.2026). Der Artikel nennt am Ende filter 250 ms, im Text 600 ms; übernommen ist der Endcode.",
   "Versatz-Variante: Superdesign belegt 4 px Versatz und 3 px Rand, keine Dauer. Framer-Komponente „Neo Brutalist Button“ aus der Recherche war am 02.11.2026 nicht mehr abrufbar und ist deshalb nicht als Beleg geführt.",
   "Keycap-Werte stammen aus neo-skeuomorph-taktile-ui (dort belegt) und werden dort gepflegt.",
   "Kein Produktionsbeleg einer Seite mit dem kompletten Drei-Ebenen-Stapel geprüft; TOFU belegt nur Federung plus Schatten. Deshalb teilbelegt."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Button hat sichtbare Tiefe: Hover hebt die Fläche an, Druck setzt sie fast auf. Als Stapel, harter Versatz, Keycap oder Soft-Taste mit Kontur.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "stapel": {
    "front_px": "Ruhe -4, Hover -6, Druck -2",
    "schatten_px": "2 / 4 / 1, rgba(20,43,80,.32), blur 2px",
    "hover": "250 ms cubic-bezier(0.3, 0.7, 0.4, 1.5), filter brightness(1.1)",
    "druck": "34 ms linear",
    "zurueck": "600 ms cubic-bezier(0.3, 0.7, 0.4, 1)",
    "kante": "linear-gradient(to left, #0b1a33 0%, #142b50 8%, #142b50 92%, #0b1a33 100%)",
    "front": "#ffd60a, Text #142b50 (10:1), Rand inset 2px #142b50",
    "radius_px": 14
   },
   "hoehe_front_px": 52,
   "fokus": "outline 3px solid #142b50, offset 6px",
   "deaktiviert": "Front flach (0 px), Schatten weg, Fläche #e3e4d4, Text #3f4a5e (6,9:1), aria-disabled + aria-describedby mit Begründung",
   "laden": "Taste bleibt gedrückt, Label „Wird gebucht …“, Ring 18 px 700 ms linear, aria-disabled, Status per role=status; Erfolg nach 1400 ms (Demo)",
   "farben": {
    "grund": "#f8f8ec",
    "wechsel": "#eef0d8",
    "navy": "#142b50",
    "nacht": "#0b1a33",
    "gelb": "#ffd60a",
    "leise": "#566175 (5,8:1)",
    "fehler": "#b3261e"
   },
   "ui_uebrige": "Chips und Termin-Felder 150 ms cubic-bezier(0.4, 0, 0.2, 1), ohne Federung (Rezept: Formulare ohne Feder)",
   "vorfuehrung": "Zeiger fährt 700 ms cubic-bezier(0.16, 1, 0.3, 1) auf die Taste, Hover bei 900 ms, Druck 1900–2150 ms, Laden 1400 ms, Schleife 5600 ms"
  },
  "ausloeser": "hover",
  "touch": "Kein Anheben ohne Hover; die Taste ruht in ihrer Tiefe und gibt bei :active sofort nach. Volle Breite unter 520 px, Front 52 px hoch, kein Tap-Highlight.",
  "reduziert": "Kein Weg: Ruhe, Hover und Druck haben dieselbe Lage. Hover hellt auf (brightness 1.1), Druck dunkelt ab (brightness .9), 80 ms linear. Lade-Ring steht still.",
  "korrekturen": {
   "umsetzung": "Echter <button> mit drei Kindern: span.taste__schatten und span.taste__kante liegen absolut, span.taste__front trägt Text und Größe. Die Zustände laufen über Variablen am Button (--fy Front, --sy Schatten, --t/--k Dauer und Kurve): Ruhe -4 px, :hover -6 px (nur unter @media (hover: hover)), :active -2 px. Die Übergangsdauer steht am Zielzustand: hin 250 ms mit Überschwinger, Druck 34 ms, zurück 600 ms. Reduzierte Bewegung setzt nur die Variablen gleich. Varianten tauschen die Variablen (Versatz, Keycap, Soft) und blenden Schatten und Kante aus. Deaktiviert: aria-disabled statt disabled, damit der Button fokussierbar bleibt und seine Begründung (aria-describedby) vorgelesen wird; die Front liegt flach. Laden: data-zustand=\"laedt\" hält die Taste gedrückt, Label wechselt, Status über role=status. Nur eine Tiefen-Taste je Ansicht, Nebenaktionen flach (in der Demo „Lieber anrufen“ als Link)."
  },
  "geprueft": "02.11.2026",
  "notiz": "Rezept fahrschule-freundlich-buchbar (Federung bei Buttons ist dort ausdrücklich gewünscht, TOFU-Referenz), erfundene Fahrschule Traunufer in Wels. Kontext: Hero mit Klassenwahl und Preisen, Buchungskarte mit Terminwahl, Fehler (leerer Vorname), Laden und Erfolg; darunter Intensivkurse mit ausgebuchtem (flach, aria-disabled) und buchbarem Kurs. Vier Varianten statt drei, weil der Auftrag alle vier nennt. Stapel-Werte aus joshwcomeau.com, Versatz nach superdesign.dev, Keycap-Werte aus neo-skeuomorph-taktile-ui, Soft-Kontur nach ixdf.org. Prüfung: pruef.sh alle Varianten ok, zugang.sh regeln/breite320 ohne Fehler. AD-Review 02.11.2026: Note 4. Fahrschule mit genau einer Tiefen-Taste im Buchungsformular, Varianten Versatz, Keycap und Soft deutlich verschieden; nichts nachgebessert.",
  "varianten": [
   {
    "id": "stapel",
    "name": "Stapel aus Schatten, Kante und Front",
    "wann": "Freundliche, ermutigende Marken mit einer klaren Hauptaktion: Fahrschule, Kurse und Coaching, Direktvertrieb.",
    "werte": {
     "front_px": "-4 / -6 / -2",
     "dauer_ms": "Hover 250, Druck 34, zurück 600",
     "easing": "cubic-bezier(0.3, 0.7, 0.4, 1.5) hin, cubic-bezier(0.3, 0.7, 0.4, 1) zurück"
    }
   },
   {
    "id": "versatz-brutal",
    "name": "Harter Versatz (Brutalismus)",
    "wann": "Laute Marken mit Takt statt Kurve: Fitnessstudio, Kultur und Festival, junge Kampagnen; passt zu token-brutal-hart.",
    "werte": {
     "rand": "inset 3px #142b50",
     "versatz_px": 5,
     "hover": "translate(-2px, -2px), Schatten 7 px, Fläche #ffe14d, 160 ms steps(2, end)",
     "druck": "translate(5px, 5px), Schatten 0, 0 ms steps(1, end)",
     "zurueck": "160 ms steps(2, end)",
     "radius_px": 6
    }
   },
   {
    "id": "keycap",
    "name": "Keycap mit Unterkante",
    "wann": "Werkzeug- und Produkt-Oberflächen mit Tastenkürzeln (Enter-Hinweis im Button), SaaS, Lernplattformen.",
    "werte": {
     "unterkante": "0 4px 0 0 #0b1a33 plus 0 7px 10px -3px rgba(20,43,80,.45)",
     "front": "linear-gradient(180deg, #21406f, #142b50 70%), Text #fff (14:1), Lichtkante inset 0 1px rgba(255,255,255,.22)",
     "hover": "-1 px, Unterkante 5 px, 180 ms cubic-bezier(0, 0, 0.58, 1)",
     "druck": "+4 px, Unterkante 0, 100 ms cubic-bezier(0, 0, 0.58, 1)",
     "zurueck": "180 ms",
     "radius_px": 12,
     "kbd": "↵ in Geist Mono 12 px"
    }
   },
   {
    "id": "soft",
    "name": "Soft-Taste mit Kontur",
    "wann": "Ruhige, helle Oberflächen, in denen die Taste weich wirken soll; nur mit 1-px-Kontur und vollem Textkontrast, nie auf dunklem Grund.",
    "werte": {
     "kontur": "inset 0 0 0 1px #566175 (5,8:1), Hover #142b50",
     "schatten": "-6px -6px 14px rgba(255,255,255,.95), 7px 7px 16px rgba(20,43,80,.2); Hover -8/-8/18 und 9/9/20",
     "druck": "Schatten nach innen (inset 5px 5px 10px rgba(20,43,80,.2), inset -5px -5px 10px rgba(255,255,255,.9)), +1 px, 100 ms",
     "zurueck": "180 ms cubic-bezier(0, 0, 0.58, 1)",
     "fläche": "gleich dem Grund #f8f8ec",
     "punkt": "8 px #ffd60a mit 1,5 px Navy-Rand als Signal",
     "radius_px": 16
    }
   }
  ]
 }
}