{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "technische-daten-produktseite",
 "name": "Produktseite mit technischen Daten",
 "name_en": "B2B product page with technical data, variant table and inquiry hand-off",
 "kurz": "Baureihe als echte Variantentabelle mit fester Kopfzeile und Artikelnummer-Spalte; Zeile wählen zieht die Maßzeichnung waagerecht auf die neue Länge, Kenndaten stehen mit Wert, Einheit und Prüfbedingung, die Anfrage übernimmt die Artikelnummer.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "sachlich",
  "technisch",
  "strukturiert"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "svg",
  "intl",
  "dialog",
  "json-ld",
  "clipboard-api",
  "position-sticky"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine Produktseite für Maschinen, Komponenten und Zulieferteile ohne Warenkorb. Oben steht die gewählte Variante mit Artikelnummer zum Kopieren, Maßzeichnung und zwei Wegen: „Diese Variante anfragen“ und Datenblatt. Darunter liegen Reiter für technische Daten, Downloads und Zubehör. Die Varianten einer Baureihe stehen als echte Tabelle nebeneinander, mit fester Kopfzeile und fester erster Spalte. Kenndaten haben je Zeile Wert, Einheit und Prüfbedingung. Wer eine Zeile wählt, sieht Maßzeichnung und Kenndaten ohne Sprung wechseln. „Nur Unterschiede“ blendet gleiche Spalten aus, ein Schalter rechnet in Zoll und Pfund um. Die Anfrage übernimmt die Artikelnummer.",
  "warum_es_wirkt": "Einkäufer und Ingenieure kommen mit einer Aufgabe: Werte vergleichen, die passende Baugröße finden, genau diese anfragen oder in die Konstruktion übernehmen. Eine Tabelle mit Einheit in eigener Spalte und Prüfbedingung lässt sich schneller lesen und belastbarer zitieren als Werte im Fließtext. Die kopierbare Artikelnummer und die vorausgefüllte Anfrage nehmen die zwei häufigsten Fehlerquellen heraus: abgetippte Nummern und Anfragen ohne Variante.",
  "wann_einsetzen": "Maschinen- und Anlagenbau, Zulieferer, Antriebs-, Mess- und Vakuumtechnik, Werkzeuge und Komponenten: überall, wo eine Baureihe mehrere Baugrößen hat und der Preis auf Anfrage kommt. Auch für technische Konsumgüter mit vielen Kennwerten, wenn statt Warenkorb ein Händler oder eine Fachperson folgt.",
  "wann_nicht": "Nicht für Shops mit Preis und Warenkorb (dafür produkt-kaufbox-varianten). Nicht für Immobilien und Fahrzeuge mit gesetzlichen Pflichtangaben (objekt-steckbrief-expose). Nicht für Pakete und Tarife (vergleichstabelle-sticky). Ab etwa zehn Varianten oder mehreren Merkmalen gehört ein Produktfinder davor (facettenfilter-ergebnisliste), die Tabelle zeigt dann nur die Treffer.",
  "varianten": [
   "Baureihe: bis etwa acht Varianten als Tabelle nebeneinander, Zeile wählen wechselt Zeichnung und Kenndaten (Komponenten in mehreren Baugrößen)",
   "Einzel: eine Variante je Seite mit Zubehör und Ersatzteilen, andere Baugrößen nur als Sprungliste (wie bei Schmalz je Artikelnummer)",
   "Konfiguriert: Merkmale wählen, daraus entsteht die passende Artikelnummer; unmögliche Kombinationen sind begründet gesperrt; ein externer Konfigurator öffnet erst nach Klick"
  ],
  "umsetzung": "Die Daten liegen einmal als Objekt je Variante vor (Werte immer in SI-Einheiten, Text-Werte getrennt). Daraus entstehen Variantentabelle, Kenndaten, Maßzeichnung, Maßliste und JSON-LD. Variantentabelle: <table> mit <caption>, <th scope=\"col\"> mit Einheit in eigener Zeile, erste Zelle je Zeile ein <th scope=\"row\"> mit Radio und Artikelnummer. Wrapper mit overflow: auto und max-height; thead th { position: sticky; top: 0 } und die erste Spalte { position: sticky; left: 0 }. „Nur Unterschiede“ blendet Spalten aus, deren Werte in allen Varianten gleich sind. Kenndaten: Merkmal, Wert (rechtsbündig, Tabellenziffern), Einheit, Prüfbedingung; leere Werte erzeugen keine Zeile. Zahlen nur über Intl.NumberFormat der Seitensprache, Umrechnung metrisch zu imperial erst bei der Ausgabe. Maßzeichnung als inline-SVG mit role=\"img\" und Verweis auf eine sichtbare Liste der Maße. Variantenwechsel: Länge der Zeichnung wird nur waagerecht nachgeführt, Tabellen tauschen Werte ohne Animation. Artikelnummer mit navigator.clipboard und Rückfall. „Diese Variante anfragen“ öffnet ein <dialog> mit der Artikelnummer als festem Feld. JSON-LD Product (sku, mpn, additionalProperty als PropertyValue mit unitCode) wird bei jedem Wechsel aus denselben Daten neu geschrieben und enthält nur sichtbare Werte. Druckansicht über @media print und denselben Zustand am Bildschirm. CAD-Viewer und Konfigurator von Dritten laden erst nach Klick.",
  "mobil": "Die Variantentabelle scrollt in ihrem Rahmen waagerecht, die Artikelnummer bleibt links stehen. Reiter bleiben eine Zeile und dürfen umbrechen. Maßzeichnung über volle Breite, darunter die Maße als Liste. Anfrage-Knopf mindestens 44 px hoch.",
  "reduzierte_bewegung": "Die Zeichnung springt auf die neue Länge, Reiter und Zeilenmarke wechseln ohne Übergang. Werte wechseln ohnehin ohne Animation.",
  "barrierefreiheit": "Tabellen mit caption, th scope=\"col\" und scope=\"row\" (WCAG 1.3.1). Auswahl der Variante über echte Radios in der ersten Spalte, nicht nur über Klick auf die Zeile. Gewählte Zeile mit Balken und Text „gewählt“, nicht nur Farbe (1.4.1). Der waagerecht scrollende Tabellenrahmen ist fokussierbar und benannt (2.1.1). Reiter nach dem APG-Muster mit manueller Aktivierung (Pfeile bewegen den Fokus, Eingabe oder Leertaste wählt). Maßzeichnung mit Text-Alternative als sichtbare Liste der Maße (1.1.1). Kopieren meldet „Artikelnummer kopiert“ über role=\"status\" (4.1.3). Anfrage als modales dialog mit Überschrift und Esc."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.25, 1, 0.5, 1) beim Eintritt, cubic-bezier(0.5, 0, 0.75, 0) beim Austritt (token-swiss-knackig)",
  "dauer_ms": "200 UI (Hover, Reiter, Zeilenmarke), 350 Maßzeichnung folgt der neuen Länge, 2000 Kopiert-Rückmeldung",
  "stagger_ms": "",
  "distanz": "nur waagerecht: Zeichnung ändert die Länge, Zeilenmarke 3 px Balken links",
  "sonstiges": "Tabellenwerte wechseln ohne Animation (Rezeptregel: Werte stehen sofort)",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept industrie-b2b-mittelstand, Animationsstil token-swiss-knackig"
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "J. Schmalz GmbH: Produktseite Flächengreifer 10.01.38.10028",
   "url": "https://www.schmalz.com/en-us/products/automation-743270/vacuum-grippers-746238/gripping-systems-and-end-of-arm-tooling-eoat-746240/10.01.38.10028",
   "auszeichnung": "",
   "beobachtung": "Am 02.11.2026 per WebFetch als Text geprüft: eine Seite je Artikelnummer, Tabellen „Attribute | Value“, getrennt in Übersicht, „Design Data“ mit Maßzeichnung und „Technical Data“ (550 N, 350 l/min, -700 mbar, 75 dB(A)). Datenblatt als PDF je Artikel, CAD-Modell zum Download, Zubehör und Ersatzteile mit eigenen Artikelnummern. Schwächen: Einheiten mal in Klammern, mal angehängt; Komma und Punkt als Dezimaltrenner gemischt; leere Überschriften.",
   "art": "website"
  },
  {
   "seite": "Herrenknecht AG: Startseite mit Maschinenkarten",
   "url": "https://herrenknecht.com/en",
   "auszeichnung": "",
   "beobachtung": "Am 02.11.2026 per WebFetch geprüft: Maschinenkarten mit Einsatzbereich und Durchmesser-Spanne, auf der englischen Seite metrisch und in Zoll („Direct Pipe 0,8–1,5m (30–60\")“).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "W3C WAI: Tables Tutorial",
   "url": "https://www.w3.org/WAI/tutorials/tables/"
  },
  {
   "titel": "WAI-ARIA APG: Tabs mit manueller Aktivierung",
   "url": "https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/"
  },
  {
   "titel": "schema.org: Product",
   "url": "https://schema.org/Product"
  },
  {
   "titel": "MDN: Intl.NumberFormat",
   "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat"
  }
 ],
 "kombinierbar_mit": [
  "tabs-pfeiltasten-focusgroup",
  "kopieren-feedback",
  "button-zustaende",
  "kontur-button-zeichnen",
  "tabellenziffern",
  "blueprint-raster-sichtbar",
  "dialog-modal-nativ",
  "facettenfilter-ergebnisliste",
  "mehrschritt-anfrage",
  "validierung-nach-interaktion"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/technische-daten-produktseite/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/technische-daten-produktseite/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/technische-daten-produktseite/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Rezept-Runde 02.11.2026"
  ],
  "pruefnotizen": [
   "Schmalz und Herrenknecht am 02.11.2026 per WebFetch als Text geprüft; CSS, Kurven und Tabellenverhalten (sticky, Umrechnung) nicht gemessen.",
   "Ein Vorbild mit fester erster Spalte, „Nur Unterschiede“ und Umrechnung in einer B2B-Variantentabelle fehlt noch als Beleg; Bewegungswerte sind eigene Festlegung nach token-swiss-knackig.",
   "JSON-LD Product für Artikel ohne Preis: ob Suchmaschinen ein Rich Result zeigen, hängt vom Angebot ab. Nicht versprechen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Baureihe als echte Variantentabelle mit fester Kopfzeile und Artikelnummer-Spalte; Zeile wählen zieht die Maßzeichnung waagerecht auf die neue Länge, Kenndaten stehen mit Wert, Einheit und Prüfbedingung, die Anfrage übernimmt die Artikelnummer.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.25, 1, 0.5, 1) (power3.out) beim Eintritt, cubic-bezier(0.5, 0, 0.75, 0) (power3.in) beim Austritt; Zeichnung in JS mit 1 − (1 − t)³",
   "dauer_ms": "200 UI (Reiter-Indikator, Schalter, Kontur-Ecken, Hover), Austritt 140; 350 Zeichnung auf neue Länge und Ecken schließen; Kopiert-Rückmeldung 2000, Häkchen 300 nach 80; Senden simuliert 900, Download simuliert 1100",
   "distanz": "nur waagerecht: Länge der Seitenansicht und Draufsicht folgt L × 0,47 SVG-Einheiten je mm; Reiter-Indikator scaleX 0 → 1 von links; Pfeil im Hauptknopf 4 px; Zeilenmarke inset 3px Balken",
   "werte_wechsel": "Tabellen, Kenndaten und Kurzwerte wechseln ohne Animation (Rezeptregel)",
   "tabelle": "Rahmen overflow auto, max-height 27rem, position relative (hält .sr-Spans im Rahmen); thead th sticky top 0, erste Spalte th[scope=row] sticky left 0 mit Radio; Archivo wdth 87, tabular-nums; Einheit als zweite Kopfzeile; ‚Nur Unterschiede‘ blendet gleiche Spalten aus und nennt sie darunter einmal",
   "kenndaten": "Merkmal | Wert (rechtsbündig, 600) | Einheit | Prüfbedingung; leere Werte erzeugen keine Zeile; Telefon: Prüfbedingung klein unter dem Merkmal",
   "zahlen": "Intl.NumberFormat('de-DE', useGrouping 'min2'), Minus U+2212; imperial: in = mm / 25,4 (1 Stelle), lbf = N × 0,224809, cfm/scfm = l/min × 0,0353147, inHg = mbar × 0,02953, psi = bar × 14,5038, lb = kg × 2,20462, °F = °C × 9/5 + 32",
   "zeichnung": "viewBox 1000 × 420, Seitenansicht und Draufsicht im Maßstab 0,47 Einheiten/mm, X0 46; Stirnseite (Ansicht A) und Saugzelle im Schnitt (Detail Z) fest; Maßzahlen als HTML in % der viewBox; Strich 1,6 Kontur, 0,8 Maßlinie, Mittellinie 14 3 2 3",
   "raster": "12 Spalten ab 821 px, 8 bis 820, 4 bis 640; Spaltenlinien rgba(17, 20, 23, .055), Zonenkanten rgba(17, 20, 23, .13), Plus-Marker 11 px an Zonenkante × Außenkante; Achse 1–12 in Archivo wdth 75",
   "typo": "h1 Strichpunkt Sans 600 clamp(2.1rem, 1.3rem + 2.5vw, 3.5rem)/.98, font-stretch 114 %, -0.03em; Text Archivo 17 px/1.55; Codes Archivo 0.75rem 600 wdth 75 versal +0.08em",
   "farben": "Grund #f3f3f0, Papier #fbfbf9, Graphit #111417, Leise #4e555b, Kopfzelle #e4e5e1, Stahlblau #16202a, Signal #0e518d (Hover #0a3f6f, Zeile #e3eaf1), Hinweis #8a4b00 auf #f6ecdc",
   "knoepfe": "gefüllt Signal min-height 48 (Downloads 44), Kontur inset 1px rgba(17, 20, 23, .4) mit Eckklammern 10 px → 50 % bei Hover/Fokus, Kreisel 600 ms linear beim Senden",
   "vorfuehrung": "Takt 1500 ms: Varianten 600 → 900 → 1800, Nur Unterschiede an, imperial an, 1200, metrisch, Nur Unterschiede aus, Kopieren, 300"
  },
  "ausloeser": "klick",
  "touch": "Tabelle scrollt im Rahmen waagerecht, die Artikelnummer bleibt links stehen (Typ unter der Nummer). Alle Ziele mindestens 44 px; Eckklammern bleiben ohne Hover klein. Ansichtsnamen der Zeichnung entfallen unter 640 px, die Maße stehen darunter als Liste.",
  "reduziert": "Zeichnung springt auf die neue Länge, Reiter, Schalter und Eckklammern ohne Übergang, Kreisel steht.",
  "korrekturen": {},
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept industrie-b2b-mittelstand, erfundener Hersteller Vahlberg Vakuumtechnik GmbH, Olpe; Baureihe Flächengreifer FGL in acht Längen (41.20.LLLL.XY). Eine Datenquelle für Tabelle, Kenndaten, Maßzeichnung (eigenes SVG), Maßliste und JSON-LD Product (nur sichtbare Werte, wird bei jedem Wechsel neu geschrieben). Zustände: Variante gewählt, Nur Unterschiede, metrisch/imperial, leere Werte (IO-Link, Schutzart) fallen weg, Datenblatt in fehlender Sprache mit englischer Fassung, Druckansicht (gleiches Bild wie @media print, gleiche Spalten werden einmal genannt), 3D-Vorschau und Konfigurator von Dritten erst nach Klick (Platzhalter), Anfrage-Dialog mit fester Artikelnummer und Zubehör. Reiter nach APG mit manueller Aktivierung (roving tabindex; zugang meldet die inaktiven Reiter als ‚klickbar, nicht fokussierbar‘, das ist so gewollt). Pult als feste Leiste oben statt fixed, damit es nichts verdeckt. Rechtstexte als Platzhalter ‚vom Kunden prüfen lassen‘. Schrift-CDN für Strichpunkt Sans nicht prüfbar (Netz gesperrt), lokal woff mit wght 400–900 und wdth 100–200. Quellen: schmalz.com, herrenknecht.com. AD-Review-Nachbesserung: Maßstab in der Bildunterschrift auf „Detail Z, 8 : 1“ korrigiert (Detail ist viermal so groß wie Ansicht A mit 2 : 1). AD-Review 02.11.2026: Note 5",
  "varianten": [
   {
    "id": "baureihe",
    "name": "Baureihe",
    "wann": "Komponenten und Zulieferteile in mehreren Baugrößen (bis etwa acht), bei denen Einkäufer Werte nebeneinander vergleichen.",
    "werte": {
     "tabelle": "8 Varianten, feste Kopfzeile und erste Spalte, Nur Unterschiede",
     "zeichnung_ms": 350
    }
   },
   {
    "id": "einzel",
    "name": "Einzelartikel",
    "wann": "Große Kataloge mit eigener Adresse je Artikel (wie Schmalz) oder Ersatzteile: Kenndaten, Downloads und Zubehör einer Variante, andere Längen als Sprungliste.",
    "werte": {
     "tabelle": "keine Variantentabelle",
     "sprungliste": "Links min-height 44 px, aktuelle Länge aria-current=page"
    }
   },
   {
    "id": "konfiguriert",
    "name": "Konfiguriert",
    "wann": "Baukästen mit Optionen (Ansteuerung, Werkstoff, Flansch), bei denen Kombinationen eine Nummer ergeben und manche gesperrt sind; ein 3D-Konfigurator von Dritten erst nach Klick.",
    "werte": {
     "nummer": "41.20.LLLL.XY(-F): X 0 pneumatisch / 2 IO-Link, Y 1 NBR / 3 Silikon",
     "sperre": "IO-Link erst ab 900 mm, Grund sichtbar und per aria-describedby",
     "extern": "Hinweis und Übergabe-URL erst nach Klick"
    }
   }
  ]
 }
}