{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "brotkrumen-pfad",
 "name": "Brotkrumen-Pfad mit Strukturdaten",
 "name_en": "Breadcrumb trail with aria-current, mobile truncation and BreadcrumbList",
 "kurz": "Produktseite eines Tuttlinger Spanntechnik-Herstellers mit klickbarem Pfad: aria-current, Trenner aus CSS, auf dem Telefon nur der Weg eine Ebene zurück, JSON-LD BreadcrumbList aus denselben Daten.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "sachlich",
  "ruhig"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "json-ld",
  "view-transitions",
  "container-queries"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Pfad über der H1 zeigt, wo die Seite im Angebot steht: Start › Produkte › Spannsysteme › Nullpunkt-Spannsysteme › KSN 120. Er ist eine geordnete Liste in einem <nav aria-label=\"Brotkrumen\">, die aktuelle Seite trägt aria-current=\"page\", Trenner kommen aus CSS. Auf dem Telefon kürzt er sich auf den Weg eine Ebene zurück oder klappt die Mitte zu einem Knopf „…“ ein. Dieselben Daten erzeugen das JSON-LD BreadcrumbList. Jeder Eintrag hat einen view-transition-name, damit der Pfad beim Seitenwechsel stehen bleibt und nur der neue Teil hinzukommt.",
  "warum_es_wirkt": "Wer über eine Suchmaschine mitten auf einer Produkt- oder Leistungsseite landet, sieht sofort, wo er ist und wie er eine Ebene höher kommt. Das spart Menüklicks und hält Besucher, die nicht genau das Gesuchte gefunden haben. Für den Betrieb ist es die billigste Form von Ordnung: Die Seitenstruktur wird sichtbar, ohne dass ein Mega-Menü sie erklären muss.",
  "wann_einsetzen": "Auf jeder Seite ab der zweiten Ebene in Mehrseitern: Leistungen, Produkte, Ratgeber, Standorte, Stellen. Besonders bei Industrie, Handwerk, Praxis, Kanzlei, Kfz und Immobilien mit vielen Unterseiten.",
  "wann_nicht": "Nicht auf Einseitern und nicht auf der Startseite. Nicht als Ersatz für die Hauptnavigation. Nicht bei flachen Seiten mit nur einer Ebene: Ein Pfad aus „Start › Kontakt“ sagt nichts. Nicht für Filterzustände oder Suchergebnisse.",
  "varianten": [
   "Voll: ganzer Pfad am Desktop, auf dem Telefon nur „‹ Eine Ebene zurück“",
   "Gekürzt: lange Pfade mit eingeklapptem Mittelteil hinter einem Knopf „…“",
   "Übergang: Pfad bleibt beim Seitenwechsel per View Transition stehen, nur neue Einträge kommen hinzu"
  ],
  "umsetzung": "1. HTML: <nav aria-label=\"Brotkrumen\"><ol> mit <li><a href> je Ebene, letzter Eintrag <a href aria-current=\"page\"> oder <span aria-current=\"page\">. 2. Trenner über li + li::before mit content: \"›\" / \"\" (leerer Alternativtext), nicht als Zeichen im HTML. 3. Lange Namen mit max-inline-size und text-overflow: ellipsis nur in der Mitte, die aktuelle Seite nie kürzen; der volle Name steht im title und im Text. 4. Mobil über eine Container Query auf das <nav>: unter 34rem nur der Elterneintrag als „‹ Nullpunkt-Spannsysteme“; Variante gekürzt: erster Eintrag, ein <button aria-expanded> „…“, die letzten zwei. 5. JSON-LD BreadcrumbList aus denselben Daten wie das HTML (position ab 1, name, item als absolute URL). 6. Für Seitenwechsel @view-transition { navigation: auto } und je Eintrag view-transition-name: krume-1 … krume-n, damit gleiche Ebenen stehen bleiben. 7. Fokus sichtbar, Trefferfläche mindestens 24 × 24 px (WCAG 2.5.8).",
  "mobil": "Unter 34rem Breite nur der Weg eine Ebene zurück, mit Pfeil und großer Trefferfläche, oder der eingeklappte Mittelteil hinter „…“. Kein waagerechtes Scrollen des Pfads.",
  "reduzierte_bewegung": "Neue Einträge und der ausgeklappte Mittelteil erscheinen ohne Weg. Die View Transition fällt weg.",
  "barrierefreiheit": "nav mit eigenem Namen „Brotkrumen“, damit er sich von der Hauptnavigation unterscheidet. Geordnete Liste, Screenreader sagen „Liste mit 5 Einträgen“. aria-current=\"page\" am letzten Eintrag. Trenner nicht vorgelesen. Der Knopf „…“ heißt „Weitere 2 Ebenen zeigen“ und trägt aria-expanded. Gekürzte Namen stehen vollständig im Text, nicht nur im title."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.25, 1, 0.5, 1) beim Eintritt, cubic-bezier(0.5, 0, 0.75, 0) beim Austritt",
  "dauer_ms": "200 Hover, 350 Ausklappen und neuer Eintrag, 245 Schließen",
  "stagger_ms": "40",
  "distanz": "12 px waagerecht",
  "sonstiges": "Kurvenpaar token-swiss-knackig aus dem Rezept industrie-b2b-mittelstand; Bewegung nur auf der x-Achse",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept industrie-b2b-mittelstand"
 },
 "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": "W3C WAI-ARIA APG: Breadcrumb Pattern",
   "url": "https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: Der Pfad steht in einer navigation-Landmarke mit aria-label oder aria-labelledby. Der Link zur aktuellen Seite trägt aria-current=\"page\". Ist die aktuelle Seite kein Link, ist aria-current optional. Keine eigene Tastaturbedienung. Im Beispiel kommen die Trenner aus CSS und erscheinen nicht im Barrierefreiheitsbaum.",
   "art": "artikel"
  },
  {
   "seite": "Google Search Central: Breadcrumb (BreadcrumbList)",
   "url": "https://developers.google.com/search/docs/appearance/structured-data/breadcrumb",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: BreadcrumbList mit mindestens zwei ListItem, je position, name und item; beim letzten Eintrag ist item nicht nötig. Google empfiehlt den typischen Weg der Nutzer statt der URL-Struktur. Die Darstellung im Suchergebnis gibt es laut Seite nur am Desktop.",
   "art": "artikel"
  },
  {
   "seite": "Fundus-Starter (10 Seiten)",
   "url": "https://cecodesign.de/lab/fundus/",
   "auszeichnung": "",
   "beobachtung": "Intern laut Recherche Runde 4: 10 Starter-Seiten bauen Brotkrumen ohne gemeinsames Muster, z. B. handwerk-werkstatt-klartext/bad.html, praxis-gesundheit-ruhig/kurse.html, friseur-salon-handschrift/leistung-balayage.html. Jede Lösung ist anders.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "W3C APG: Breadcrumb Example",
   "url": "https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/"
  },
  {
   "titel": "Google: Breadcrumb-Strukturdaten",
   "url": "https://developers.google.com/search/docs/appearance/structured-data/breadcrumb"
  },
  {
   "titel": "MDN: @view-transition",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition"
  }
 ],
 "kombinierbar_mit": [
  "vt-cross-document-mpa",
  "sticky-shrink-header",
  "lokale-produktnavigation",
  "technische-daten-produktseite",
  "leistungsseite-antwort-zuerst",
  "blueprint-raster-sichtbar"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Recherche Runde 4: 10 Starter-Seiten bauen Brotkrumen ohne Muster, jede anders.",
   "APG und Google am 04.11.2026 abgerufen. Award-Beleg mit beobachteter Bewegung fehlt; die Bewegung ist eigene Festlegung aus dem Rezept.",
   "Laut Google erscheinen Brotkrumen im Suchergebnis nur am Desktop. Der Pfad auf der Seite bleibt trotzdem nützlich."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Produktseite eines Tuttlinger Spanntechnik-Herstellers mit klickbarem Pfad: aria-current, Trenner aus CSS, auf dem Telefon nur der Weg eine Ebene zurück, JSON-LD BreadcrumbList aus denselben Daten.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "markup": "<nav aria-label=\"Brotkrumen\"><ol><li><a> … <a aria-current=\"page\">",
   "trenner": "li + li::before { content: \"/\" / \"\" } (leerer Alternativtext)",
   "mobil": "@container krumen (width < 34rem): nur li.eltern mit „‹“, min-height 44px",
   "kuerzen": "ab 5 Ebenen: erster Eintrag, <button aria-expanded> „…“, letzte zwei",
   "namen": "max-width 26ch mit Ellipse, aktuelle Seite nie gekürzt",
   "json_ld": "BreadcrumbList, position ab 1, item als absolute URL, letzter Eintrag ohne item",
   "view_transition": "je li view-transition-name: krume-<ebene>, Inhalt und Titel eigene Namen",
   "easing": "cubic-bezier(0.25, 1, 0.5, 1)",
   "easing_austritt": "cubic-bezier(0.5, 0, 0.75, 0)",
   "dauer_ms": 350,
   "austritt_ms": 245,
   "hover_ms": 200,
   "stagger_ms": 40,
   "distanz": "12 px waagerecht (nur x-Achse)"
  },
  "ausloeser": "klick",
  "touch": "Unter 34rem Containerbreite nur der Link eine Ebene zurück mit 44 px Trefferfläche. Die Telefon-Vorschau zeigt am Desktop denselben Pfad in einem 360 px breiten Container.",
  "reduziert": "Neue Einträge und der ausgeklappte Mittelteil erscheinen ohne Weg und ohne Versatz, die View Transition entfällt.",
  "korrekturen": {},
  "geprueft": "04.11.2026",
  "notiz": "Rezept industrie-b2b-mittelstand, Marke Kerber Spanntechnik, Stadt Tuttlingen. Neu am 04.11.2026 (Runde 4). Abgrenzung: lokale-produktnavigation ist die Unterseiten-Leiste, hier der Pfad nach oben. URLs im JSON-LD auf .example. View Transition in der Demo als same-document startViewTransition, im Projekt @view-transition { navigation: auto }. Selbsturteil 4.",
  "varianten": [
   {
    "id": "voll",
    "name": "Voll",
    "wann": "Mehrseiter mit 3 bis 4 Ebenen: Leistungen, Produkte, Ratgeber.",
    "werte": {
     "ebenen": 5,
     "mobil": "nur Elternseite"
    }
   },
   {
    "id": "gekuerzt",
    "name": "Gekürzt",
    "wann": "Tiefe Produktkataloge und Shops mit 5 und mehr Ebenen oder langen Namen.",
    "werte": {
     "ebenen": 6,
     "mitte": "„…“-Knopf, Fokus danach auf den ersten aufgeklappten Eintrag",
     "einblenden": "translate -12px → 0, 350 ms, Versatz 40 ms"
    }
   },
   {
    "id": "uebergang",
    "name": "Übergang",
    "wann": "Seiten mit Cross-Document View Transitions (@view-transition { navigation: auto }); der Pfad bleibt stehen, nur der neue Teil kommt hinzu.",
    "werte": {
     "vt": "document.startViewTransition in der Demo, im Projekt @view-transition",
     "alt": "translate -12px, 245 ms, cubic-bezier(0.5, 0, 0.75, 0)",
     "neu": "translate 12px → 0, 350 ms, cubic-bezier(0.25, 1, 0.5, 1)"
    }
   }
  ]
 }
}