{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "lokale-produktnavigation",
 "name": "Klebende Produkt-Unternavigation mit Handlung",
 "name_en": "Sticky local product navigation (secondary nav with CTA)",
 "kurz": "Produktleiste eines Spannsystems: Der globale Kopf scrollt weg, die Leiste mit Name, fünf Abschnitten und „Angebot anfordern“ klebt, der aktive Abschnitt trägt aria-current und eine gleitende Linie.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "ruhig"
 ],
 "technik": [
  "css",
  "scroll-driven",
  "vanilla-js",
  "popover"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Unter dem globalen Kopf steht eine zweite, schmale Leiste nur für dieses Produkt oder diese Leistung: links der Name, in der Mitte drei bis fünf Abschnitte oder Unterseiten, rechts ein einziger Handlungsknopf. Beim Scrollen geht der globale Kopf weg, die Leiste bleibt oben kleben. Der aktive Abschnitt ist markiert, der Knopf bleibt immer erreichbar.",
  "warum_es_wirkt": "Lange Produkt- und Leistungsseiten verlieren sonst ihren Ort und ihre Handlung. Die Leiste macht aus einer Scrollseite ein kleines Dokument mit Kapiteln und hält „Angebot anfordern“ oder „Termin“ im Blick, ohne schwebenden Knopf.",
  "wann_einsetzen": "Produkt-, Fahrzeug-, Kurs- und Leistungsseiten mit mindestens vier echten Abschnitten oder Unterseiten (Übersicht, Technik, Preise, FAQ) und einer klaren Handlung.",
  "wann_nicht": "Bei drei kurzen Abschnitten. Wenn der globale Kopf selbst klebt (sticky-shrink-header): Zwei klebende Leisten fressen den Bildschirm, dann den globalen Kopf wegscrollen lassen. Bei mehr als fünf Punkten. Nicht als zweite Hauptnavigation auf jeder Seite.",
  "varianten": [
   "abschnitte: Sprungziele auf derselben Seite, aktiver Abschnitt per Scroll-Kopplung",
   "unterseiten: Punkte führen auf eigene Seiten (Übersicht, Technische Daten, Vergleich); die aktuelle Seite trägt aria-current=\"page\" statt eines Links",
   "kompakt-mobil: Name und Knopf bleiben, die Punkte wandern in ein Popover „Abschnitte“"
  ],
  "umsetzung": "1. nav mit aria-label aus dem Produktnamen; darin ein Name-Link nach oben, eine Liste mit 3 bis 5 Links und ein Knopf bzw. Link für die Handlung (button-zustaende). 2. position: sticky; top: 0 auf der Leiste; der globale Kopf scrollt weg oder nutzt hide-on-scroll-header. 3. html { scroll-padding-top: Höhe der Leiste }, damit Sprungziele und Fokus nicht darunter verschwinden. 4. Aktiver Abschnitt: IntersectionObserver setzt aria-current=\"location\"; als Verbesserung gleitet die Markierung wie bei gleitender-indikator. 5. Mobil unter etwa 40rem Containerbreite: Liste in ein Popover „Abschnitte“, Name und Knopf bleiben. 6. Bei 200 % Zoom bzw. geringer Viewporthöhe (@media (max-height: 30rem)) nicht kleben lassen. 7. Fallback: ohne JS eine normale Linkleiste ohne Markierung.",
  "mobil": "Name gekürzt, Knopf rechts, Abschnitte im Popover; Leiste mindestens 44 px hoch.",
  "reduzierte_bewegung": "Leiste erscheint ohne Gleiten; Anker springen ohne weiches Scrollen.",
  "barrierefreiheit": "Eigener nav-Name, aria-current für den aktiven Punkt, Fokus nie verdeckt (scroll-padding-top, WCAG 2.4.11). Kontrast 4,5:1 auch über Bildern (deckender Grund). 320 px: kein waagerechtes Scrollen der Leiste. 200 % Zoom: Kleben aus. Keine Bewegung über 5 s."
 },
 "messwerte": {
  "easing": "Token des Rezepts (--ui-ease)",
  "dauer_ms": "300–400 für das Einblenden der Leiste",
  "stagger_ms": "",
  "distanz": "Leistenhöhe 44–56 px",
  "sonstiges": "höchstens 5 Punkte",
  "herkunft": "eigene Festlegung",
  "quelle": "Smashing 12.05.2023 (Empfehlung nach NN/g); Leistenhöhe eigene Festlegung"
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 350
 },
 "gesehen_bei": [
  {
   "seite": "Apple: AirPods Pro 3",
   "url": "https://www.apple.com/airpods-pro/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026: Unter der globalen Navigation eine Produktleiste mit Name, Overview, Hearing Health, Tech Specs, Compare und dem Knopf „Buy AirPods Pro 3“. Auf der Unterseite /airpods-pro/specs/ ist der aktuelle Punkt nicht verlinkt, die Punkte führen also auch auf Unterseiten. Kleben im Text nicht prüfbar.",
   "art": "website"
  },
  {
   "seite": "BMW Deutschland: BMW iX3",
   "url": "https://www.bmw.de/de/neufahrzeuge/x/ix3/bmw-ix3.html",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026: Abschnittsleiste Probefahrt, Exterieur, Digital, Interieur, Performance, Laden, FAQ mit den Handlungen „Konfigurieren & Preise“ und „Angebot anfordern“. Kleben im Text nicht prüfbar.",
   "art": "website"
  },
  {
   "seite": "Smashing Magazine: Sticky Menus Are Problematic, But Here's How To Fix Them",
   "url": "https://www.smashingmagazine.com/2023/05/sticky-menus-ux-guidelines/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 03.11.2026 (Artikel vom 12.05.2023): höchstens fünf Punkte in klebenden Leisten, Einblenden 300 bis 400 ms nach NN/g, Sprungziele mit scroll-padding.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Smashing: Sticky Menus UX Guidelines",
   "url": "https://www.smashingmagazine.com/2023/05/sticky-menus-ux-guidelines/"
  }
 ],
 "kombinierbar_mit": [
  "gleitender-indikator",
  "hide-on-scroll-header",
  "button-zustaende",
  "technische-daten-produktseite",
  "leistungsseite-antwort-zuerst",
  "native-popover-dropdowns"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Techniken-Recherche 03.11.2026"
  ],
  "pruefnotizen": [
   "Ob die Leisten bei Apple und BMW kleben und mit welcher Kurve sie einblenden, war im Text nicht sichtbar; im Browser messen.",
   "Abgrenzung zu scrollspy-kapitelnavigation: dort senkrechter Index für langen Text, hier waagerechte Produktleiste mit Handlung."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Produktleiste eines Spannsystems: Der globale Kopf scrollt weg, die Leiste mit Name, fünf Abschnitten und „Angebot anfordern“ klebt, der aktive Abschnitt trägt aria-current und eine gleitende Linie.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "Eintritt cubic-bezier(0.25, 1, 0.5, 1), Austritt cubic-bezier(0.5, 0, 0.75, 0) (token-swiss-knackig aus dem Rezept)",
   "dauer_ms": "Indikator 350 (translate und width); Klebe-Zustand 350 ein, 245 aus; Popover 350 auf, 245 zu; Hover 200",
   "stagger_ms": "",
   "distanz": "Art.-Nr. beim Kleben y 8 px → 0; Popover y -8 px → 0; Indikator 2 px hoch, 14 px Einzug je Seite",
   "leiste": "Höhe 56 px, position: sticky; top: 0; Grund deckend #F3F3F0, beim Kleben #FFFFFF mit Linie rgba(17, 20, 23, .28)",
   "klebe_zustand": "@container produkt scroll-state(stuck: top) (container-type: inline-size scroll-state); ohne Unterstützung Wächter-IntersectionObserver, Klasse .klebt",
   "sprungziele": "html { scroll-padding-top: 68px } (Leiste 56 + 12); scroll-behavior: smooth, aus bei :focus-visible und reduziert",
   "aktiv": "Scroll-Kopplung per rAF: letzter Abschnitt, dessen Oberkante 56 px + min(160 px, 25 % Viewporthöhe) überschritten hat; am Seitenende der letzte; aria-current=\"location\"",
   "kompakt": "Containerbreite < 46rem: Punkte im Popover „Abschnitte“ (popover=auto, Anchor Positioning position-area: bottom span-right, Fallback flip-inline, 300 px breit); < 30rem Knopftext „Angebot“",
   "nicht_kleben": "@media (max-height: 30rem): position: relative, scroll-padding-top 12 px (200 % Zoom, Querformat)",
   "farben": "Grund #F3F3F0, Text #111417, Meta #4E555B, Fläche #E4E5E1, Kopf #16202A, Signal #0E518D nur Knopf, Indikator und Fokus",
   "schrift": "Strichpunkt Sans 650 wdth 112 für den Namen, Archivo 400/600 für Punkte und Text, Archivo wdth 75 Versal für Codes"
  },
  "ausloeser": "scroll",
  "touch": "Unter 46rem Containerbreite bleiben Name, Abschnitte-Knopf und „Angebot“ in einer 56 px hohen Leiste; die Abschnitte öffnen als Popover mit 48 px hohen Einträgen und Häkchen am aktiven. Kein waagerechtes Scrollen bei 320 px.",
  "reduziert": "Indikator, Klebe-Zustand und Popover wechseln ohne Übergang; Sprünge zu Abschnitten ohne weiches Scrollen.",
  "korrekturen": {},
  "geprueft": "03.11.2026",
  "notiz": "Rezept industrie-b2b-mittelstand: erfundene Hollmer Spanntechnik aus Aalen, Produkt Raster 160 (Nullpunkt-Spannsystem) mit eigener Maßzeichnung als SVG. Globaler Kopf in Stahlblau scrollt weg, Brotkrumen darunter, dann die Produktleiste. Varianten: abschnitte (Grundvariante, eine lange Seite, Scroll-Kopplung), unterseiten (Übersicht, Technische Daten, Vergleich, Downloads; aktuelle Seite aria-current=\"page\" ohne href, Seitenwechsel im Demo nachgestellt, Fokus auf die h1), kompakt-mobil (Abschnitte immer im Popover, Knopftext zeigt den aktiven Abschnitt). Vorführung scrollt durch die Abschnitte bzw. wechselt die Unterseiten bzw. öffnet das Popover und springt. Werte: Einblenden 350 ms liegt im Musterbereich 300–400 (Smashing nach NN/g); Leistenhöhe 56 px eigene Festlegung im Bereich 44–56. Selbsturteil 4.",
  "varianten": [
   {
    "id": "abschnitte",
    "name": "Abschnitte mit Scroll-Kopplung",
    "wann": "Produkt-, Fahrzeug- und Leistungsseiten, die alles auf einer langen Seite erzählen (Übersicht, Anwendung, Technik, Zubehör, Fragen).",
    "werte": {
     "punkte": "5 Sprungziele #uebersicht … #faq",
     "aria_current": "location",
     "indikator": "350 ms, cubic-bezier(0.25, 1, 0.5, 1)"
    }
   },
   {
    "id": "unterseiten",
    "name": "Unterseiten",
    "wann": "Produkte mit eigenen Seiten für technische Daten, Vergleich und Downloads, etwa im Maschinenbau oder bei Software mit Preisseite.",
    "werte": {
     "punkte": "4 Seiten: Übersicht, Technische Daten, Vergleich, Downloads",
     "aria_current": "page, aktuelle Seite ohne href",
     "seitenwechsel": "Inhalt opacity 0 → 1 und y 8 px → 0 in 350 ms, Fokus auf h1"
    }
   },
   {
    "id": "kompakt-mobil",
    "name": "Kompakt mit Abschnitte-Popover",
    "wann": "Lange Produktnamen, Telefon oder schmale Spalten; auch am Desktop, wenn die Leiste ruhig bleiben soll.",
    "werte": {
     "knopf": "„Abschnitt“ + aktiver Name, min. 230 px, Chevron dreht 180° in 350 ms",
     "popover": "position-area: bottom span-right; position-try-fallbacks: flip-inline; 48 px je Eintrag; Pfeiltasten"
    }
   }
  ]
 }
}