# Bauplan: Industrie-Mittelstand: Datenblatt und Fachperson

Rezept `industrie-b2b-mittelstand` · Maschinen- und Anlagenbau / Zulieferer und Lohnfertiger / Hidden Champions / technische Dienstleister (B2B) · Stimmung: präzise, sachlich, belastbar, international · Stand 02.11.2026

Eine Seite, die sich liest wie ein gutes Datenblatt: Jede Angabe hat Einheit, Stand und Quelle, jede Anwendung hat eine Fachperson mit Namen und Durchwahl. Das sichtbare Konstruktionsraster ist die Signatur, die Beschriftung folgt der Normschrift technischer Zeichnungen statt einer Mono. Breite, ruhige Headlines in Strichpunkt Sans, Archivo mit Breitenachse für Text und Tabellen, kühles Blechgrau und Verkehrsblau nur für die Anfrage. Bewegt wird wie an einer Linearachse: nur waagerecht oder senkrecht, harte Masken, nichts glänzt. Anders als saas: keine Dashboards, kein Dunkelmodus, kein Glow, keine Mono-Labels.

## Dateien

- `tokens.css` in diesem Ordner: Schriften, Farben, Kurven, Dauern, Button-Grundwerte. Zuerst einbinden, dann nur diese Variablen verwenden.
- Rezept im Detail: https://cecodesign.de/lab/fundus/rezepte.json (id `industrie-b2b-mittelstand`) und https://cecodesign.de/lab/fundus/rezepte/industrie-b2b-mittelstand/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `strichpunkt-sans` · Text: `archivo`
- Größen: h1 Strichpunkt Sans clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), wght 600, wdth 116, Laufweite -0.03em, Zeilenhöhe 0.98; h2 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem), wght 600, wdth 110, -0.02em; h3 Archivo 1.25rem wght 600 wdth 100. Fließtext Archivo 1.0625rem (17 px), wght 400, wdth 100, Zeilenhöhe 1.55, max. 68ch. Tabellen (technische Daten, Messen, Downloads) Archivo 0.9375rem, wdth 87, Tabellenziffern, Einheit in eigener Spalte rechtsbündig neben dem Wert. Abschnittscodes und Achsbeschriftung des Rasters („01 · Anwendungen“, „A–D“, „1–12“) Archivo 0.75rem, wdth 75, wght 600, Versal, +0.08em. Artikelnummern Archivo wdth 87, Tabellenziffern, kopierbar. Höchstens zwei Gewichte je Familie (400/600).
- Techniken: [Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten](https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo) `fluide-typo-clamp-cqi`, [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty](https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/demo) `lesesatz-text-wrap`, [Eine Familie, wenige Gewichte (Hierarchie über Größe)](https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/demo) `eine-familie-wenig-gewichte`

## Farbe

Kühles Blechgrau als Grund, Graphit statt Schwarz, Rasterlinien in 13 % Graphit, dunkles Stahlblau für Kopf, Messen und Fußzeile. Genau ein Signal: Verkehrsblau (RAL 5017 als Beispiel; im Projekt die echte Hausfarbe, flach, nie als Verlauf) nur für „Projekt anfragen“, aktive Filter und Fokus. Keine Glanzflächen, kein Dunkelmodus als Gestaltungsidee, Farbe in Fotos kommt aus Maschine, Werkstoff und Halle.

- `--farbe-grund` #F3F3F0 (Grund (Blechgrau, Datenblattpapier))
- `--farbe-text` #111417 (Text Graphit (16,6 : 1))
- `--farbe-text-2` #4E555B (Sekundärtext, Einheiten, Meta (6,8 : 1))
- `--farbe-flaeche` #E4E5E1 (Tabellenkopf, Zellfläche bei Hover)
- `--farbe-dunkel` #16202A (Stahlblau dunkel: Kopf, Messen-Band, Fußzeile (Weiß darauf 16,5 : 1))
- `--farbe-signal` #0E518D (Signal Verkehrsblau: Projekt anfragen, aktiver Filter, Fokus (Weiß darauf 8,1 : 1; auf Grund 7,3 : 1))

## Bewegung

- Animationsstil: [Animationsstil „Swiss knackig“](https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/demo) `token-swiss-knackig`
- Kurve: cubic-bezier(0.25, 1, 0.5, 1) beim Eintritt, cubic-bezier(0.5, 0, 0.75, 0) beim Austritt (token-swiss-knackig, power3.out / power3.in)
- Dauer: 200 (Hover, Filter-Indikator, Reiter), 350 (Mega-Menü, Akkordeon, Listenzeilen nach Filterwechsel), 500 (Bild-Maske bei Referenzen, Schritt der Anfrage), 700 (H1 im Hero, einmal); Austritt 70 % davon, Versatz 40 ms
- Regel: Bewegung wie an einer Linearachse: nur x oder y, keine Rotation, keine Skalierung über 1.0, kein Überschwingen. Tabellen, Datenblätter, Downloads und Formulare stehen sofort; Reveals nur für die H1 und die Fotos der Referenzen. Das Raster zeichnet sich nicht ein, es ist einfach da. Bei prefers-reduced-motion 150 ms Deckkraft, Masken sofort offen.
- Hinweis: Kein eigener UI-Stil nötig: token-swiss-knackig schließt UI nicht aus und hat ein eigenes Austrittspaar (power3.in, 70 %). Spielart „Maske“ (clip-path inset) für die H1 und Referenzbilder, „Stufen“ (steps) nie für Zahlen in technischen Tabellen: Werte stehen sofort.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 48, 64, 96, 128
- Sektionsabstand: clamp(64px, 8vw, 128px)
- Dichte: dicht
- Hinweis: Datenblatt-Dichte: Tabellenzeilen 8 bis 12 px, Zellen mit 16 bis 24 px Innenabstand. Jedes Element sitzt auf einer Rasterlinie.
- Spalten: 12
- Seitenrand: clamp(16px, 3vw, 40px)
- Spaltenabstand: 0
- Maximale Breite: 1440px
- Raster: 12 Spalten ab 821 px, 8 bis 820 px, 4 darunter (Regel). Sichtbares Raster mit Plus-Markern nur an Schnittpunkten und Achsbeschriftung im Steg (blueprint-raster-sichtbar). Spaltenabstand 0, Linien sind die Zellkanten; Innenabstand der Zelle clamp(16px, 2vw, 24px).
- Radius klein: 0
- Radius groß: 0
- Pillenform für Buttons: False
- Linie: 1px rgba(17, 20, 23, .13) für Raster und Plus-Marker; Tabellenkopf auf #E4E5E1
- Schatten: keiner
- Form: Keine Rundung, kein Glanz. Nebenweg als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Verkehrsblau flach.

## Bildsprache

- Licht: Hallenlicht oder Licht beim Kunden, technisch scharf.
- Ausschnitt: Maschine im Einsatz, Mensch als Maßstab, Detail der Funktion.
- Personen: Ja: Fachpersonen mit Namen; Kundenwerke nur mit schriftlicher Freigabe.
- Formate: 3:2, 16:9, 4:3
- Nicht: Keine Renderings im Hero (außer das Produkt ist noch nicht gebaut), keine Stock-Ingenieur:innen mit Tablet, kein Globus, kein Glanz.

## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen)

- Anrede: Sie
- Sätze: Wie ein Datenblatt: Wert, Einheit, Bedingung. Verben sachlich, keine Adjektivketten.
- Haltung: Belastbar und präzise; jede Anwendung hat eine Person mit Durchwahl.
- Tonproben: Spannsysteme für Fräszentren, gefertigt in [Ort]., Ihre Ansprechperson für Holz: [Name], Durchwahl [Nummer].
- Nicht: „Hidden Champion“ als Selbstlob, „innovativ“, „Lösungen“ ohne Gegenstand, „weltweit führend“ ohne Beleg.

## Hero

Echtes Foto der eigenen Maschine oder Anlage im Einsatz beim Kunden oder in der eigenen Halle (keine Renderings im Hero, außer das Produkt ist noch nicht gebaut), im sichtbaren 12-Spalten-Raster (blueprint-raster-sichtbar: Linien als Zellkanten, Plus-Marker an den Schnittpunkten, Achsbeschriftung 1–12 im Steg). H1 sagt, was das Unternehmen herstellt und für wen („Vakuum-Greifsysteme für Blech, Holz und Glas“), darunter eine belegte Kennzahl mit Stand (seit, Länder, Anlagen im Feld) und zwei Knöpfe: „Projekt anfragen“ (gefüllt) und „Produkte und Datenblätter“ (Kontur mit Eckklammern). Sprache und Land oben rechts als Text. hero_variante bildsequenz-video-scrub nur, wenn 60 bis 120 gerenderte Einzelbilder aus dem CAD vorliegen und der Text daneben alles Wichtige auch ohne Bild sagt; mobil statt Scrub ein Standbild. Kein Video-Hero ohne eigenes, gutes Material.

- Raster: Sichtbares 12-Spalten-Raster mit Achsbeschriftung 1–12 im Steg: Text über Spalte 1 bis 6, Foto über 7 bis 12, beide auf Linien.
- Bild: Echtes Foto der eigenen Maschine im Einsatz, 3:2. bildsequenz-video-scrub nur als hero_variante mit 60 bis 120 CAD-Bildern, mobil Standbild.
- Überschrift: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), Strichpunkt Sans 600 wdth 116, links oben auf einer Rasterlinie.
- Handlung: „Projekt anfragen“ (Verkehrsblau gefüllt) und „Produkte und Datenblätter“ (Kontur mit Eckklammern), nebeneinander.
- Zusatz: Belegte Kennzahl mit Stand; Sprache und Land oben rechts als Text; Abschnittscode „01 · …“ in Archivo schmal.

- Hero: [Sichtbares Raster (Swiss/Blueprint-Linien)](https://cecodesign.de/lab/fundus/hero-layouts/blueprint-raster-sichtbar/demo) `blueprint-raster-sichtbar`
- Nur unter der Bedingung oben: [Bildsequenz-/Video-Scrub](https://cecodesign.de/lab/fundus/scroll/bildsequenz-video-scrub/demo) `bildsequenz-video-scrub`

## Sektionen in dieser Reihenfolge

1. **Ihre Anwendung, Ihre Fachperson (Branche und Land wählen → zuständige Vertriebs- oder Anwendungsingenieur:in mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail, Sprachen; darunter „Projekt anfragen“ in Schritten: Anwendung → Teil, Werkstoff, Stückzahl oder Takt → Land und Zeitraum → Kontakt und Datei-Upload für Zeichnung; Antwortzeit nennen)**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster) `team-ueber-mich-layout` · Variante „Raster mit Filter“, [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=senkrecht) `mehrschritt-anfrage` · Variante „Senkrechter Stepper“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste) `formular-fehlerzusammenfassung` · Variante „Liste mit Sprunglinks“, [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
2. **Anwendungen und Branchen (typografische Liste mit Bild bei Hover, mobil Daumenbild fest in der Zeile; je Branche eine Unterseite, Antwort zuerst: Aufgabe, passende Produktfamilie, eine Referenz, zuständige Person)**: [Bildvorschau beim Listen-Hover](https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/demo) `listen-hover-bildvorschau`, [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=handwerk) `leistungsseite-antwort-zuerst` · Variante „Handwerk“
3. **Produkte mit technischen Daten (Familie → Baureihe → Variante; Kenndaten als Tabelle mit Einheit und Normbezug, Varianten nebeneinander, Datenblatt als PDF je Sprache, CAD nach Klick, „Diese Variante anfragen“ mit vorausgefüllter Artikelnummer; Produktfinder mit Facetten erst ab etwa zehn Varianten)**: [Klebende Produkt-Unternavigation mit Handlung](https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/demo?v=abschnitte) `lokale-produktnavigation` · Variante „Abschnitte mit Scroll-Kopplung“, [Produktseite mit technischen Daten](https://cecodesign.de/lab/fundus/sektionen/technische-daten-produktseite/demo) `technische-daten-produktseite`, [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=seitenleiste) `facettenfilter-ergebnisliste` · Variante „Seitenleiste“, [Bild mit Markierungspunkten](https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=bauteil) `bild-hotspots` · Variante „Bauteile mit Nummern“
4. **Downloads (Datenblätter, Betriebsanleitungen, CAD-Daten, Konformitätserklärungen, Zertifikate; filterbar nach Produkt, Dokumentart, Sprache; je Datei Version, Stand, Format, Größe und eine dauerhafte Adresse)**: [Download-Center für technische Dokumente](https://cecodesign.de/lab/fundus/sektionen/download-center-dokumente/demo) `download-center-dokumente`, [Reparatur-Richtpreise und Reparaturweg](https://cecodesign.de/lab/fundus/sektionen/reparatur-richtpreise/demo?v=hersteller) `reparatur-richtpreise` · Variante „Hersteller: Richtpreise und Auftrag“
5. **Referenzen und Fallstudien (Aufgabe, Lösung, Ergebnis in Messwerten mit Einheit, Branche, Land, Jahr; Kundenname und Logo nur mit schriftlicher Freigabe, sonst anonymisiert; auf der Startseite drei bis fünf als Reihe)**: [Case-Study-Gerüst auf Award-Niveau](https://cecodesign.de/lab/fundus/hero-layouts/case-study-geruest/demo) `case-study-geruest`, [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“
6. **So läuft ein Projekt (Anfrage → Machbarkeit und Versuch mit Kundenteilen → Angebot → Konstruktion → Abnahme im Werk → Inbetriebnahme vor Ort → Service; Dauer je Schritt als ehrliche Spanne)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie`
7. **Unternehmen, Qualität und Zertifikate (wenige Kennzahlen mit Stand und Quelle als ruhige Tabelle; Zertifikate mit Norm, Nummer, Geltungsbereich, Zertifizierer, gültig bis und PDF)**: [Zahlen-/Fakten-Sektion als Typo-Ereignis](https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=tabelle) `zahlen-fakten-section` · Variante „Ruhige Tabelle“, [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=raster) `logo-wand-social-proof` · Variante „Ruhiges Raster“
8. **Messen und Termine (Tabelle mit Datum, Messe, Stadt und Land, Halle und Stand, Ticket-Code, Termin am Stand vereinbaren, .ics je Messe; Vergangenes fällt heraus; bei zwei oder drei Messen im Jahr eine einfache Liste)**: [Programm-Kalender mit Liste und Monat](https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm) `programm-kalender` · Variante „Liste und Monat“
9. **Standorte weltweit (Werke, Tochtergesellschaften, Vertretungen als Liste mit Land, Rolle, Sprachen, Ansprechperson, Ortszeit als Text; Entfernung erst nach PLZ oder Standortfreigabe, Karte erst nach zweitem Klick)**: [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=liste) `standortfinder-liste` · Variante „Liste mit Übersicht und Karte per 2-Klick“
10. **Karriere (Einstiege Ausbildung, Studium, Berufserfahrene; Stellen mit Gehaltsspanne oder Tarifgruppe, Ort, Schicht; Kurzbewerbung; ab vier Stellen Filter; bei eigener Karriere-Microsite Rezept arbeitgeber-karriere)**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=liste) `stellen-karriere` · Variante „Viele Stellen mit Filter“
11. **Kontakt, Service-Hotline und Anfahrt (Zentrale und Service getrennt, Erreichbarkeit mit Zeitzone; kurzes Formular für allgemeine Fragen; Adresse als Text; Werkszufahrt als eigene Skizze mit Besuchereingang und LKW-Tor)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin) `oeffnungszeiten-status` · Variante „Termin nach Vereinbarung“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=skizze) `karte-zwei-klick` · Variante „Lageskizze“, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=werkstatt) `firmendaten-strukturiert` · Variante „Kfz-Werkstatt (AutoRepair)“

## Signatur (Pflicht)

- [Sichtbares Raster (Swiss/Blueprint-Linien)](https://cecodesign.de/lab/fundus/hero-layouts/blueprint-raster-sichtbar/demo) `blueprint-raster-sichtbar`

## Buttons

- Haupthandlung: [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- Nebenhandlung: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=ecken) `kontur-button-zeichnen` · Variante „Eckklammern schließen sich“

## Weitere Bausteine

- Navigation: [Mega-Menü mit morphendem gemeinsamem Viewport](https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/demo) `mega-menue-morphing-viewport`, [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`
- Scroll: [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`
- Hover: [Bildvorschau beim Listen-Hover](https://cecodesign.de/lab/fundus/hover/listen-hover-bildvorschau/demo) `listen-hover-bildvorschau`
- Mikroanimation: [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=manuell) `tabs-pfeiltasten-focusgroup` · Variante „Manuell“, [Kopieren-Feedback](https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo) `kopieren-feedback`, [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`
- Galerie: [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis) `galerie-shared-element-vollbild` · Variante „Projektraster zu Vollbild oder Panel“
- Footer: [Mega-Footer mit Sitemap und Utility-Leiste](https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/demo) `mega-footer-sitemap`

## Grundausstattung (jede Seite)

- [Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo) `vt-cross-document-mpa`
- [Native CSS-Scroll-Reveals mit view()](https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo) `css-view-reveal-nativ`
- [Unterstreichungs-Varianten](https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo) `unterstreichung-varianten`
- [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
- [Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)](https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo) `consent-banner-gestaltet`
- [Fokus-Stil als Gestaltungssystem](https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo) `fokus-stil-system`
- [Sprunglinks und Landmarken](https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo) `sprunglinks-landmarken`
- [Schalter „Bewegung reduzieren“ mit Pause-Knöpfen](https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo) `bewegung-pausieren-schalter`
- [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo) `fehlerseite-leerzustand`
- [Natives Modal mit <dialog>](https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo) `dialog-modal-nativ`
- [Zoom- und textabstandfestes Layout](https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo) `zoom-und-textabstand-robust`
- [Kontrastmodus und contrast-color()](https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo) `kontrastmodus-forced-colors`
- [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=werkstatt) `firmendaten-strukturiert` · Variante „Kfz-Werkstatt (AutoRepair)“
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`

## Optional (nur als Zusatz)

- [Trennlinien im Raster (Gap Decorations)](https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/demo?v=kenndaten) `gap-decorations-raster` · Variante „Kenndaten-Raster“
- [Agentenformular mit WebMCP](https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/demo?v=projekt) `agentenformular-webmcp` · Variante „Projektanfrage“

## Nicht verwenden

- produkt-ui-hero-perspektiv-tilt / command-palette-und-ki-suche – Signaturen von saas; hier stehen Maschinen und Datenblätter im Vordergrund, keine Software-Oberflächen
- karten-spotlight-glow / verlaufs-rahmen / mesh-gradient-shader / liquid-glass-refraktion – SaaS-Glanz; das Rezept lebt von Linien, Zahlen und echten Fotos
- glas-button / frosted-glass-erweitert – Glas über Hallenfotos senkt den Kontrast und wirkt wie Konsumelektronik
- zahlen-odometer – hochgezählte Kennzahlen wirken verkäuferisch; Zahlen stehen still, mit Stand und Quelle
- smooth-scroll-lenis – Datenblätter, Tabellen und Downloads werden gelesen und verglichen
- marquee-laufband – Kundenlogos als Laufband; Referenzen nur mit Freigabe und als ruhiges Raster
- interaktives-3d-hero / scroll-3d-kamerafahrt – teuer und langsam; CAD-Modelle als Download oder Viewer erst nach Klick
- scramble-decode / typewriter-natural – Hacker- und Chat-Ästhetik statt Messtechnik
- mono-labels-versal – die Beschriftung folgt der Normschrift in Archivo schmal, eine Mono wäre die dritte Stimme
- prompt-hero-eingabefeld / ki-streaming-text-denkindikator – kein KI-Chat statt Fachperson; wenn ein Assistent kommt, nur gekennzeichnet (Art. 50 KI-VO)
- magnetische-elemente / cursor-follower-lerp / kontextueller-cursor – Agentur-Gesten ohne Nutzen für Einkäufer und Ingenieure
- stapelkarten / bento-grid-interaktiv – verstecken Daten oder verlangen Füllinhalt
- vorher-nachher-vergleichsregler – Signatur von handwerk
- konfetti-erfolg – nach der Anfrage eine sachliche Bestätigung mit Vorgangsnummer und Name der Fachperson
- Renderings und Stockfotos von Handschlägen, Weltkugeln und Zahnrädern – echte Fotos aus Halle, Prüffeld und Kundenanlage

## Regeln

- Erster Bildschirm: echtes Foto der Maschine im Einsatz, H1 mit Produkt und Anwendung, eine belegte Kennzahl mit Stand, „Projekt anfragen“ und „Produkte und Datenblätter“. Sprache und Land oben rechts als Text, keine Flaggen.
- Datenblatt-Regel: Jede technische Angabe hat Wert, Einheit und, wo es sie gibt, Norm oder Prüfbedingung („Saugkraft 550 N bei -250 mbar“). Einheiten immer an derselben Stelle (eigene Spalte), Dezimaltrenner je Sprache einheitlich (Schmalz mischt Komma und Punkt), Tabellenziffern. Leere Felder und leere Überschriften fallen weg.
- Fachperson statt Formular-Sackgasse: Jede Branche oder Region hat eine Person mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail und Sprachen. Die Anfrage nennt, wann geantwortet wird, und nimmt Zeichnungen an (STEP, DXF, PDF, mit Größengrenze); Hinweis, dass Daten vertraulich behandelt werden und eine Geheimhaltungsvereinbarung auf Wunsch vorab möglich ist (Text vom Kunden).
- Konstruktionsraster konsequent: 12 Spalten ab 821 px, 8 bis 820 px, 4 darunter; Linien als Zellkanten (blueprint-raster-sichtbar), Plus-Marker nur an Schnittpunkten, Achsbeschriftung und Abschnittscodes in Archivo schmal. Jedes Element sitzt auf einer Linie; was nicht passt, wird umgebaut, nicht verschoben. Ein Material-Effekt pro Ansicht: das Raster.
- Mehrsprachigkeit: Sprache und Land getrennt (Schmalz), hreflang je Fassung, keine automatische Umleitung nach IP ohne Rückweg; Maße auf englischen Seiten für Nordamerika zusätzlich in Zoll, wenn der Kunde das liefert (Herrenknecht: „0,8–1,5m (30–60")“). Jede Sprachfassung erreicht Impressum und Datenschutz.
- Produkte: Familie → Baureihe → Variante; die Varianten einer Baureihe stehen als Tabelle nebeneinander, die Artikelnummer ist mit einem Klick kopierbar (kopieren-feedback). Preise nur, wenn der Kunde sie nennen will; „Preis auf Anfrage“ ist erlaubt, ein toter Warenkorb nicht.
- Downloads: dauerhafte Adressen, die sich bei neuen Versionen nicht ändern (alte Version bleibt erreichbar und ist als ersetzt markiert), Version, Stand, Sprache, Format und Größe an jeder Datei. CAD-Viewer und Konfiguratoren von Dritten erst nach Klick bzw. Einwilligung.
- Referenzen zeigen Aufgabe, Lösung und Ergebnis in Messwerten (Herrenknecht: Strecke und Bauzeit). Kundenname, Logo und Fotos aus Kundenwerken nur mit schriftlicher Freigabe; sonst „Tier-1-Zulieferer, Süddeutschland“.
- Zertifikate nur gültig und vollständig: Norm mit Ausgabejahr (ISO 9001:2015), Zertifikatsnummer, Geltungsbereich, Standort, Zertifizierer, gültig bis, PDF. Abgelaufene Zertifikate sofort entfernen; ein Logo ohne Nachweis ist Irreführung (§ 5 UWG) – vom Kunden prüfen lassen.
- Messen als Tabelle mit Halle und Stand bei jedem Eintrag (bei ifm fehlen sie, bei Festo nur einmal), Ticket-Code, „Termin am Stand vereinbaren“ und .ics; vergangene Messen fallen automatisch heraus.
- Bewegung nach token-swiss-knackig: nur waagerecht oder senkrecht, Masken statt Fade, 200 bis 700 ms, Austritt 70 %. Tabellen, Filterergebnisse und Formulare stehen sofort, Filterwechsel ohne Animation der Werte.
- Pflichtangaben und Recht (Leitfaden 8a): Impressum nach § 5 DDG mit Rechtsform, Vertretungsberechtigten, Registergericht und -nummer, USt-IdNr., in jeder Sprachfassung erreichbar. Richtet sich ein Shop oder eine Preisliste nur an Unternehmen, das klar sagen und technisch durchhalten; sonst gilt die Preisangabenverordnung mit Endpreisen. Umweltaussagen („CO₂-neutral“, „nachhaltig produziert“) nur mit Nachweis. Betriebsanleitungen, die digital bereitgestellt werden: nach der Maschinenverordnung (EU) 2023/1230 ab 20.01.2027 herunterladbar und druckbar, mindestens zehn Jahre online bzw. für die Lebensdauer der Maschine, Papier auf Wunsch beim Kauf. Gibt es ein Hinweisgebersystem (HinSchG), den Zugang im Footer verlinken. Alles vom Kunden prüfen lassen; Claude schreibt keine Rechtstexte.
- Barrierefreiheit: Das BFSG zielt auf Leistungen für Verbraucher; reine B2B-Seiten sind meist nicht erfasst (vom Kunden prüfen lassen). Gebaut wird trotzdem nach WCAG 2.2 AA; Tabellen mit echten Kopfzellen, Linien des Rasters nie als einzige Trennung von Bedeutung.
- Karriere: Stellen mit Gehaltsspanne oder Tarifgruppe, geschlechtsneutral (AGG), Kurzbewerbung ohne Anschreiben; die Regeln stehen im Rezept arbeitgeber-karriere.

## Rezept-Varianten

- **Zulieferer und Lohnfertiger (Teile nach Zeichnung)**: Statt Produktfamilien die Fertigungsmöglichkeiten als Tabelle: Verfahren, Werkstoffe, größte Abmessungen, erreichbare Toleranzen, Losgrößen, Maschinenpark mit Baujahr. Die Anfrage beginnt mit dem Zeichnungs-Upload. Qualitätsnormen der Abnehmerbranche (z. B. IATF 16949) mit Nummer und Gültigkeit.
- **Technischer Dienstleister (Prüflabor, Ingenieurbüro, Instandhaltung, Montage)**: Leistungen statt Produkte, je Leistung eine Unterseite mit Antwort zuerst (Umfang, Dauer, Normen, Einsatzgebiet). Akkreditierungen mit Urkundennummer und Geltungsbereich; Rufbereitschaft und Reaktionszeit nur, wenn vertraglich gehalten. Reine Planungsbüros eher mit architektur-ruhiges-raster.
- **Hersteller mit B2B-Shop oder Ersatzteilportal**: Schnellbestellung über Artikelnummer und Menge, Preise nach Login nur, wenn der Kunde das will; ausdrücklich „nur für Unternehmer“ und Prüfung im Bestellprozess. Kaufbox und Warenkorb aus d2c-produkt-zuerst leihen (dessen nicht_verwenden gilt dann zusätzlich, seine Signaturen nicht). Ersatzteile über Seriennummer der Maschine finden.

## Vor der Abgabe

Checkliste in https://cecodesign.de/lab/fundus/leitfaden.txt, Abschnitt 12. Rechtliches immer „vom Kunden prüfen lassen“.