3defacto Frontend-System / Styleguide
data-site

Media Objects

Ein Modul, zwei gleich breite Spalten, je ein Inhaltsbaustein aus einem geschlossenen Vorrat. Ein „Fall" ist keine Variante im Code, sondern eine Kombination zweier Slots — neue Fälle entstehen ohne Codeänderung. Sektion in src/templates/sections/media-object.html, Slots in components/media-slot.html, Styles in components/media-object.css.

Raster und Verhalten

Volle Contentbreite, 6/6 auf grid-12, Fuge --spacing-grid. Unter 64rem einspaltig gestapelt in DOM-Reihenfolge. Text gegen Foto oder Film steht oben: Die erste Zeile beginnt auf der Bildoberkante (seit Eintrag 114, vorher mittig). Nur der Freisteller steht mittig, weil er keine Bildkante hat. Das Foto trägt ein festes 3:2 — ein Verhältnis für das ganze System, keine Auswahl je Block. Der Text füllt seine Rasterspalte bewusst nicht: Ab 96rem Viewport misst eine 6er-Spalte rund 46rem, deshalb kappt das Maß nach innen (Lead 52, Fließtext 48, Statement 20 Zeichen). Einen Schalter reverse gibt es nicht — die Bildposition ist die Reihenfolge der Spalten, und damit stimmt die Stapelreihenfolge auf schmalen Geräten von selbst.

Der Vorrat

Vier Typen. Jeder ist eine Aussage über die Rolle der Spalte, keine freie Formatierung. intro und prose unterscheiden sich allein in der Textrolle — das sind zwei Typen und kein Schalter am selben Typ, weil die Textrolle eine Gestaltungsentscheidung ist und keine Redaktionsoption.

intro — diese Spalte eröffnet

Überschrift (optional), ein bis mehrere Lead-Absätze, Aktion (optional). Links mit Überschrift und ohne Aktion, rechts ohne Überschrift und mit Aktion. Von prose trennt ihn allein die Textrolle, nicht die Absatzzahl: Wer Lead wählt, eröffnet; wer Fließtext wählt, erklärt.

intro – diese Spalte eröffnet

Überschrift und Lead-Absätze. Die Aktion ist optional; hier steht keine.

Ohne Überschrift, mit Aktion: derselbe Typ trägt damit auch eine Spalte, die nur einen Satz und eine Handlung braucht.

prose — diese Spalte erklärt

Einordnung (optional), Überschrift (optional), Fließtext in 1–n Absätzen, Belege (optional), Aktion (optional). Auf der Wechselfläche. eyebrow und points kamen am 2026-09-09 mit der NEXUS-Sektion dazu — kein neuer Typ und kein Formatierungsschalter: Eine Spalte, die erklärt, darf aufzählen, und weil das Modul keinen Sektionskopf hat, trägt die Spalte ihre Einordnung selbst.

prose – diese Spalte erklärt

Überschrift und Fließtext in beliebig vielen Absätzen, in der leiseren Textfarbe und auf 48 Zeichen Maß gekappt.

Ein zweiter Absatz zeigt den Abstand innerhalb des Fließtexts gegenüber dem Abstand zur Aktion.

Auch prose kann ohne Überschrift stehen. Dann trägt die Nachbarspalte die Überschrift der Sektion.

statement — diese Spalte behauptet

Statement in H1-Größe, als Absatz und nicht als Überschrift ausgezeichnet: Es ist die Behauptung der Sektion, nicht ihre Gliederung. Hier auf dunkler Fläche.

statement – diese Spalte behauptet.

Das Statement trägt die H1-Stufe und ist ein Absatz, keine Überschrift: Es ist die Behauptung der Sektion, nicht ihre Gliederung.

Auf dunkler Fläche wechseln Lead und Fließtext auf Weiß beziehungsweise Silber; der Sekundärbutton bekommt seinen hellen Rahmen aus button.css.

photo — diese Spalte zeigt

Foto im festen 3:2. bare schaltet auf Freisteller: ein Objekt ohne Bildrand, das seine eigene Höhe trägt (NEXUS-Sektion). Das ist keine Auswahl am Verhältnis, gegen die dieses Modul gebaut ist, sondern eine andere Bildgattung — ein Foto ist eine Fläche, die man beschneiden darf, ein Freisteller hat keinen Rand, den man wegnehmen könnte. Zwei Fotos nebeneinander sind erlaubt, tragen aber keinen Text — die Kombination ist selten sinnvoll und steht hier nur, um das Verhältnis zu zeigen.

Schweißer an einer Schweißkonstruktion in der eigenen Fertigung
Technische Zeichnung auf dem Arbeitstisch

Die Fälle

Aufeinander aufbauend: Fall 1 zeigt, Fall 2 fügt Fließtext und Handlung hinzu, Fall 3 ersetzt das Foto durch eine Behauptung und wird damit zum reinen Textzweispalter.

Fall 1  ·  intro | photo

Überschrift und Lead neben einem Foto. Die ruhigste Form: eine Aussage, ein Bild, keine Handlung.

Ein Partner über den ganzen Lebenszyklus

Konstruktion, Bau, Vernetzung und Betreuung bleiben in einer Hand. Damit bleibt die Investition über Jahre flexibel und planbar.

Konstrukteur an einer Baugruppe im Konstruktionsbüro von 3defacto

Fall 2  ·  prose | photo

Wie Fall 1, aber die Spalte erklärt statt zu eröffnen und schließt mit einem Sekundärbutton. Die Primärhandlung der Seite bleibt dem Abschluss-CTA vorbehalten.

Getestet, bevor sie geliefert wird

Anlagen entstehen in Modulbauweise und werden im eigenen Technikum aufgebaut, verkabelt und gefahren. Beim Kunden wird verbunden und hochgefahren, nicht zum ersten Mal in Betrieb genommen.

Die Werksvorabnahme findet statt, solange Änderungen noch günstig sind: bei uns in der Halle.

Montage einer Anlage im Technikum in Mühltal

Fall 3  ·  statement | intro

Kein Foto: Behauptung links, Erläuterung und Handlung rechts. Zeigt, warum das Modul aus Slots besteht und nicht aus Bildvarianten. Das Beispiel ist der Elevator Pitch der Startseite — bis zum 2026-09-07 eine eigene Sektion mit 8/4-Raster, seither dieser Fall. Er steht auf align: end und tight, weil auf der Startseite die Faktenzeile unmittelbar als Beleg folgt. Beim Statement-Paar setzt das Raster beide Breiten, nicht das Zeichenmaß — die drei Kappungen (20ch Statement, 52ch Lead, 48ch Fließtext) ergäben sonst drei verschiedene Breiten in derselben Zeile, und ab 96rem Viewport überholte der Lead das Statement sogar.

Konstruktion, Fertigung, Software und Service in einer Hand. Damit Ihre Investition über Jahre flexibel und planbar bleibt.

Vom 3D-Modell bis zur Fernwartung entsteht alles im eigenen Haus: Konstruktion, CNC-Fertigung, Schweißbau, Elektro und SPS, Hydraulik, Messraum und Technikum.

Die Geschäftsbereiche arbeiten im Verbund. Jeder ist Spezialist in seinem Feld, alle teilen dieselbe Fertigungs- und Softwarebasis.

Fall 4  ·  prose | photo, mit Belegen und neutral

Die NEXUS-Sektion von Startseite und IPS. Wie Fall 2, dazu Einordnung und vier Belege unter dem Fließtext. neutral nimmt der Sektion die Bereichsfarbe: Marker und Häkchen laufen auf Silber, weil NEXUS das Merkmal ist, das alle drei Bereiche verbindet und deshalb auf jeder Site gleich aussieht. Löste am 2026-09-09 den eigenen Sektionstyp feature ab, der als einziger ein 7/5-Raster trug. Auf der IPS-Seite steht dasselbe Modul mit vertauschten Spalten — einen Schalter reverse braucht es dafür nicht.

NEXUS

Jede Anlage kommt vernetzt. Serienmäßig.

NEXUS ist keine Software neben der Anlage, sondern ein Teil von ihr. In jede 3defacto-Anlage ab Baujahr 2018 ist es eingebaut, ohne Nachrüstung und ohne zweiten Anbieter.

Sie sehen, was die Anlage tut, und bestimmen, wer an sie herankommt. Jeder Fernzugriff läuft verschlüsselt über einen einzigen Übergang.

  • Live-OEE und Verfügbarkeit je Anlage
  • Predictive Maintenance und Grenzwert-Alarme
  • Warnungen per App und E-Mail
  • ISO-zertifizierter VPN-Fernzugriff
NEXUS-App auf einem Tablet: Geräteübersicht mit acht Maschinen, drei davon online mit rotem Knopf „Verbinden“, fünf offline

Fall 5  ·  prose | video

Die DNA-Sektion der Startseite (2026-09-16, aus der Design-Studie). Der Film ist ein Medium wie das Foto: Der Text beginnt auf seiner Oberkante. Seit dem Abend desselben Tages läuft er über YouTube (youtube: <id>): Vor dem Klick steht nur das lokale Poster mit rotem Abspielzeichen, erst der Klick setzt das iframe von youtube-nocookie.com ein – vorher keine Anfrage an Google. 16:9 statt 3:2, eckig und flach. Ohne JavaScript führt ein Pfeillink auf YouTube. Eine eigene MP4 (src) spielt weiter als natives Video.

Das ist unsere DNA.

Der Name ist Programm: de facto – tatsächlich, in der Praxis bewiesen. Wir sind Ingenieure, die Verantwortung übernehmen, jede Aufgabe zu Ende denken und lieber einmal mehr nachfragen als einmal zu wenig. Aus Anspruch wird bei uns Technik, die im Produktionsalltag einfach funktioniert.

Film auf YouTube ansehen(öffnet in neuem Tab)

Fall 6  ·  prose | photo, mit Bildunterschrift

Vision / Mission (Eintrag 113). Das Foto trägt optional caption: Meta-Größe in Stahl, 0.75rem unter dem Bild, dieselbe Rolle wie im Media-Fluss (Rich Text, nur Links). Der Text beginnt auf der Bildoberkante; die Unterschrift verschiebt ihn deshalb nicht.

Unsere Mission

Aus einer Anforderung wird eine laufende Anlage.

Wir begleiten Industrieunternehmen über den gesamten Weg: von der ersten Konzeptstudie über Konstruktion, Fertigung und Automatisierung bis zur Inbetriebnahme und darüber hinaus. Die Gewerke dafür sitzen im eigenen Haus, in Mühltal und Rieste. Konstruiert, gefertigt und abgenommen wird in Deutschland, die Verantwortung bleibt bei uns.

Viele Kunden kommen mit einer Anforderung, aber ohne fertige Lösung. Genau dort setzen wir an.

Ein Konstrukteur skizziert eine erste Maschinenidee, während die Produktionsleiterin des Kunden die Anforderung an der Linie erklärt
PLATZHALTER Bildunterschrift: Die Anforderung kommt aus der Produktion, die erste Skizze entsteht direkt daneben.

Fall 7  ·  prose | compare

Das Ergebnis einer Referenz (Eintrag 209). Der sechste Slot-Typ compare stellt gegenüber: Parameter | Vorher | Nachher, eine Linie unter jeder Zeile wie an der Linienliste, der Kopf mit der Tintenlinie der Haustabelle. Nachher in 700 mit Pfeil davor, vorher in der Nebenstufe – das Gewicht trägt die Gegenüberstellung, keine Farbe bewertet. Die Spaltenköpfe kommen aus strings.json. Zählt als Satzspalte: Beide Spalten teilen sich die Eingangslinie. In Craft ein Table-Feld mit drei festen Spalten. Werte kurz halten, ein bis zwei Wörter – schmal gibt das längste Wort die Spaltenbreite vor.

Reproduzierbar statt erfahrungsabhängig

Die modernisierte Anlage schafft deutlich reproduzierbarere Prozesse bei gleichbleibend hoher Qualität – ohne die permanente Abhängigkeit von hoch spezialisiertem Personal. Kleinmengen verarbeitet sie zuverlässig mit Quasi-Prepolymer.

Vorher und nachher im Vergleich
Parameter Vorher Nachher
Zugabe der Rohstoffe manuell automatisiert
Kleinmengen kritisch reproduzierbar
Reinigung mit DMF mit Glykol
Bedienung Spezialwissen angeleitet

Ausrichtung zweier Satzspalten

Zwei ungleich lange Satzspalten teilen sich eine Kante: die Eingangslinie (align: start, Vorgabe) oder die Schlusslinie (align: end). Mittig ist für Satz gegen Satz ausgeschlossen — dann schwebte die kürzere Spalte in der Mitte der längeren, ohne gemeinsame Leselinie. Foto gegen Text steht immer mittig und kennt das Feld nicht. Oben dasselbe Beispiel auf der Eingangslinie:

Konstruktion, Fertigung, Software und Service in einer Hand. Damit Ihre Investition über Jahre flexibel und planbar bleibt.

Vom 3D-Modell bis zur Fernwartung entsteht alles im eigenen Haus: Konstruktion, CNC-Fertigung, Schweißbau, Elektro und SPS, Hydraulik, Messraum und Technikum.

Die Geschäftsbereiche arbeiten im Verbund. Jeder ist Spezialist in seinem Feld, alle teilen dieselbe Fertigungs- und Softwarebasis.

Craft

Ein Matrix-Blocktyp mediaObject mit zwei verschachtelten Spalteneinträgen, je ein Dropdown kind mit den sechs Typen (seit Eintrag 209 mit compare, Table-Feld mit drei festen Spalten) und bedingt eingeblendeten Feldern. Verschachtelte Matrix ist im Content Model bereits gesetzt (stats → stat), das Muster ist nicht neu. mediaObject tritt an die Stelle von imageText. Seit dem 2026-09-09 auch an die Stelle von feature; die Spalte prose trägt dafür zwei Felder mehr (eyebrow, points) und die Sektion einen Lightswitch neutral. Für die id der Sektion nimmt Craft block.id; im Prototyp wird sie aus der Überschrift abgeleitet.

Offen

Die Aktion ist heute genau ein Sekundärbutton und sitzt in einem eigenen Container .media-object__actions. Das Konzept für die Redaktionswahl — ein Button, zwei gruppiert, funktionaler Link oder nichts — folgt noch und tauscht dann den Inhalt dieses Containers aus, nicht das Modul.