{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "gestapelte-drawer-navigation",
 "name": "Gestapelte bzw. mehrstufige Drawer-Navigation",
 "name_en": "Stacked drawer / multilevel drill-down navigation",
 "kurz": "Jede Menüebene eines Leinen-Shops schiebt sich als eigene Karte über die vorige; die zurückgetretenen Karten bleiben als 16-px-Kanten sichtbar und zeigen, wie tief man ist.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "strukturiert",
  "app-artig",
  "ruhig"
 ],
 "technik": [
  "css",
  "gsap",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein seitlicher Drawer zeigt die erste Ebene. Ein Klick auf einen Bereich mit Unterpunkten schiebt eine zweite Karte leicht versetzt über die erste, statt ein Akkordeon aufzuklappen. Die erste Karte skaliert minimal zurück und dunkelt ab. Ein Zurück-Button oder ein Wisch führt eine Ebene zurück. Die gestapelten Kanten bleiben sichtbar und zeigen die Tiefe.",
  "warum_es_wirkt": "Eine tiefe Informationsarchitektur wird räumlich verständlich, ohne lange Akkordeonlisten.",
  "wann_einsetzen": "Shops, Institutionen und große Agenturen mit vielen Leistungsseiten, vor allem mobil.",
  "wann_nicht": "Bei flachen Navigationen und bei mehr als drei Ebenen.",
  "varianten": [
   "Gestapelter Drawer mit sichtbaren Kanten",
   "Mehrstufige Navigation mit Slide",
   "Akkordeon als Fallback"
  ],
  "umsetzung": "Jede Ebene ist ein eigenes Panel, absolut im Drawer; die aktuelle Tiefe steht als Datenattribut. Neue Panels laufen von translateX(100 %) auf 0, das darunterliegende geht auf scale(0.96) und dunkelt ab. Beim Wechsel bekommt die Überschrift der neuen Ebene den Fokus, der Zurück-Button steht an erster Stelle. Fallstrick: Links der verdeckten Ebenen inert setzen.",
  "mobil": "Hauptanwendungsfall.",
  "reduzierte_bewegung": "Panels ohne Slide austauschen.",
  "barrierefreiheit": "Den Ebenenwechsel ansagen, indem die Überschrift den Fokus bekommt. Zurück per Escape oder Alt+Pfeil links. Untermenü-Auslöser sind Buttons mit aria-expanded."
 },
 "messwerte": {
  "easing": "power3.out",
  "dauer_ms": "350–450",
  "stagger_ms": "",
  "distanz": "Versatz der Stapelkante 8–16 px; scale 0.96",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0.25,
   1,
   0.5,
   1
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 400
 },
 "gesehen_bei": [
  {
   "seite": "Osmo: Stacked Drawer Navigation",
   "url": "https://www.osmo.supply/resource/stacked-drawer-navigation",
   "auszeichnung": "Osmo-Ressource",
   "beobachtung": "Nur Titel gesehen.",
   "art": "demo"
  },
  {
   "seite": "Osmo: Multilevel Navigation",
   "url": "https://www.osmo.supply/resource/multilevel-navigation",
   "auszeichnung": "Osmo-Ressource",
   "beobachtung": "Nur Titel gesehen.",
   "art": "demo"
  },
  {
   "seite": "Framer Marketplace: Osmo Menu Navigation (Two-step Mega Menu)",
   "url": "https://www.framer.com/marketplace/components/osmo-menu-navigation/",
   "auszeichnung": "",
   "beobachtung": "Zweistufiges Mega-Menü als Komponente.",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Osmo Collection (Navigation)",
   "url": "https://www.osmo.supply/collection"
  }
 ],
 "kombinierbar_mit": [
  "mobile-bottom-navigation",
  "mega-menue-morphing-viewport"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/gestapelte-drawer-navigation/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/gestapelte-drawer-navigation/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/gestapelte-drawer-navigation/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Kein Produktionsbeleg gefunden; bleibt C (nur Osmo-/Framer-Demos)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Jede Menüebene eines Leinen-Shops schiebt sich als eigene Karte über die vorige; die zurückgetretenen Karten bleiben als 16-px-Kanten sichtbar und zeigen, wie tief man ist.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "Ebene vor power3.out = cubic-bezier(0.25, 1, 0.5, 1) · Schublade und Akkordeon auf cubic-bezier(0, 0, 0.2, 1), zu cubic-bezier(0.4, 0, 1, 1) · UI-Hover 150 ms",
   "dauer_ms": "Ebene vor 400 · zurück: gehende Ebene 260 (Anlauf-Kurve), wieder aufgedeckte Ebene 340 power3.out · Schublade auf 300 / zu 200 · Abdunklung der Seite auf 300 / zu 200 · Akkordeon auf 300 / zu 200",
   "distanz": "neue Ebene translateX(calc(100% + 40px)) → 0 · Stapelkante left = Ebenen-Index × 16 px · darunterliegende Ebene scale(1 − 0,04 × Tiefe) = 0.96 bzw. 0.92, transform-origin 0 50 %",
   "abdunklung_ebene": "Overlay #2a2723 auf der zurückgetretenen Ebene, Deckkraft 0,08 + 0,1 × Tiefe (18 % bzw. 28 %), gleiche Dauer und Kurve wie der Wechsel",
   "karte": "Ebenen ab Tiefe 1 links Radius 14 px, Schatten −10px 0 30px rgba(33, 33, 33, 0.1); Schublade dahinter #dcd7cc",
   "schublade": "Breite min(440px, 100vw − 44px), translateX(−102 %) → 0; Seite darunter rgba(33, 33, 33, 0.42) und inert",
   "slide": "neue Ebene translateX(100%) → 0, alte translateX(−28 %) und Deckkraft 0, keine Kanten, 400 ms power3.out",
   "akkordeon": "Unterliste per grid-template-rows 0fr → 1fr, Pfeil rotate(90deg), eingerückt 14 px mit Linie",
   "ebenen": "höchstens 3 (Menü → Bettwäsche → Bettbezüge)",
   "touch": "Wisch nach rechts über 70 px (senkrecht unter 40 px) = eine Ebene zurück",
   "tastatur": "Escape eine Ebene zurück bzw. schließen, Alt+Pfeil links zurück; Fokus auf die Überschrift der neuen Ebene, beim Zurück auf den auslösenden Button; verdeckte Ebenen inert",
   "farben": "Grund #f5f4f1, Kacheln #ece9e2, Tinte und Primär-Button #212121, Sekundärtext #666666, Verfügbar #10714e, Sale #eb5c9d",
   "schrift": "Claim Young Serif 400 clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem)/1.05, −0.01em; Navigation, Preise, Produktnamen Instrument Sans 500/600; Preise tabular-nums; Badges 0.75rem Versal +0.06em"
  },
  "ausloeser": "klick",
  "touch": "Schublade fast bildschirmbreit (100vw − 44 px), Tippen statt Hover, Wisch nach rechts führt eine Ebene zurück. Keine Hover-Flächen; das Pult klappt zum Knopf ein.",
  "reduziert": "Ebenen tauschen ohne Slide mit 120 ms Überblenden, Stapelkante und Abdunklung bleiben stehen. Schublade blendet in 120 ms ein statt zu fahren, Akkordeon springt ohne Höhenanimation.",
  "korrekturen": {
   "beschreibung": "Ein seitlicher Drawer zeigt die erste Ebene. Ein Klick auf einen Bereich mit Unterpunkten schiebt eine zweite Karte leicht versetzt über die erste, statt ein Akkordeon aufzuklappen. Die erste Karte skaliert minimal zurück und dunkelt ab. Ein Zurück-Button oder ein Wisch führt eine Ebene zurück. Die gestapelten Kanten bleiben sichtbar und zeigen die Tiefe.",
   "warum_es_wirkt": "Eine tiefe Informationsarchitektur wird räumlich verständlich, ohne lange Akkordeonlisten.",
   "wann_einsetzen": "Shops, Institutionen und große Agenturen mit vielen Leistungsseiten, vor allem mobil.",
   "wann_nicht": "Bei flachen Navigationen und bei mehr als drei Ebenen.",
   "varianten": [
    "Gestapelter Drawer mit sichtbaren Kanten",
    "Mehrstufige Navigation mit Slide",
    "Akkordeon als Fallback"
   ],
   "umsetzung": "Jede Ebene ist ein eigenes Panel, absolut im Drawer; die aktuelle Tiefe steht als Datenattribut. Neue Panels laufen von translateX(100 %) auf 0, das darunterliegende geht auf scale(0.96) und dunkelt ab. Beim Wechsel bekommt die Überschrift der neuen Ebene den Fokus, der Zurück-Button steht an erster Stelle. Fallstrick: Links der verdeckten Ebenen inert setzen.",
   "mobil": "Hauptanwendungsfall.",
   "reduzierte_bewegung": "Panels ohne Slide austauschen.",
   "barrierefreiheit": "Den Ebenenwechsel ansagen, indem die Überschrift den Fokus bekommt. Zurück per Escape oder Alt+Pfeil links. Untermenü-Auslöser sind Buttons mit aria-expanded."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept d2c-produkt-zuerst. Erfundene Leinenmarke Sparrenlinnen aus Bielefeld (Bettwäsche, Bad, Tischwäsche); Shop-Startseite mit Claim in Young Serif und Kategorie-Kacheln, Produktbilder als eigene SVG-Wäschestapel mit Banderole. Die Demo öffnet die Schublade und geht eine Ebene tief, damit die Stapelkante sofort sichtbar ist. Umschalter Stapel, Slide, Akkordeon; Vorführung klickt sich mit gezeichnetem Zeiger bis Ebene 3 und zurück. Referenzen (nur Prinzipien): allbirds.com, ooia.de, korodrogerie.de, 032c.com, osmo.supply. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: Sekundärtext #6B6B6B auf #666666 (4,7:1 auf Kachel), Sale-Badge mit Tinte statt Weiß auf Pink (5:1), Icons aria-hidden, aria-controls an Ebenen-Knöpfen entfernt (Ebenen entstehen erst beim Öffnen, aria-expanded bleibt), Fußlinks mit 4 px padding-block (Ziel 25 px), Knopfrahmen im Kontrastmodus."
 }
}