Zuerst die Grundlagen: Farbe, Schriftstufen, Abstände, Raster.
Danach jede Komponente einmal, in jeder Variante, mit ihrem Klassennamen.
Die Werte kommen aus tokens.css, die Bausteine aus
komponenten/. Beides wird gelesen, nicht abgeschrieben: wer einen Token
ändert, ändert diese Seite mit. Erzeugt von _tools/bauen.py,
nicht von Hand bearbeiten.
Farbe
Vier Farben, mehr hat das System nicht. Der gelbe Punkt steht auf jedem Grund.
Navy --zj-navy#142864 Dunkle Flächen, Text auf Hell, Kamm-Zähne.Elektroblau --zj-blue#0049E3 CTA-Band, Akzentfläche, Linkfarbe beim Überfahren.Markengelb --zj-yellow#FFCD00 Primärknopf, Schrägstrich, Punkt auf jedem Grund.Grau --zj-grey#EDEDED Karten, Marken-Band, ruhige Flächen.
Typografie
Mark Pro, überall. Neun Stufen, von der Seitenüberschrift bis zur Logo-Unterzeile. Die Probe links steht in der Standardgröße und im echten Schnitt, daneben die Stufen für schmale Fenster.
Probe
Stufe
Größe / Zeile
Wofür
Adalbert Zajadacz
Seitenüberschrift --zj-h1-size
54px / 62px unter 900: 40px / 46px unter 480: 32px / 38px
Einmal pro Seite, im Hero.
Adalbert Zajadacz
Sektionsüberschrift --zj-h2-size
42px / 54px unter 900: 32px / 40px unter 480: 26px / 32px
Über jedem Abschnitt.
Adalbert Zajadacz
Kartentitel --zj-h3-size
24px / 28px unter 480: 20px / 26px
In Karten, Personen, Megakarten.
Adalbert Zajadacz
Fließtext --zj-body-size
18px / 25px unter 700: 16px / 24px
Absätze, Listen, Kartentexte.
Adalbert Zajadacz
Navigation --zj-nav-size
18px / 25px
Kopfzeilen-Links, fett.
Adalbert Zajadacz
Spitzmarke --zj-eyebrow-size
18px / 25px
Kleine Zeile über der Überschrift.
Adalbert Zajadacz
Knopf- und Linktext --zj-small-size
16px / 24px
Knöpfe, Sekundärlinks, fett.
Adalbert Zajadacz
Funktionszeile --zj-person-fn-size
16px / 22px
Unter einem Personennamen, 2 px kleiner als der Fließtext.
Adalbert Zajadacz
Logo-Unterzeile --zj-logo-caption-size
14px / auto
Unter einem Herstellerlogo.
Abstände
Eine Leiter mit zwölf Sprossen. Der Balken zeigt die Breite in echt.
Die Leiter
Zwölf Sprossen. Jeder Abstand im System ist eine davon.
Breite
Token
Wert
Wofür
--zj-abstand-4
4px
Haarabstand: Zeilen im Klappmenü, Lead unter Megakartentitel
--zj-abstand-8
8px
Icon zu Text, Aufzählungszeile, Bildunterzeile
--zj-abstand-12
12px
Zeilenlücke in Listen und Fußzeilen, Marken-Vorspann
Von der Steckdose bis zur Industrieanlage. Von fachkundiger Beratung bis zum passenden Produkt.
Die Anschaffung ist nur der Anfang. Über zehn Jahre kommen Stromkosten dazu, Wartung, Lampenwechsel und CO2.
In dieser Spreizung entscheidet sich, welcher Sanierungsweg sich für Sie rechnet. Wer lieber schreibt, bekommt aus dem Innendienst eine Antwort mit den Eckdaten zurück.
Hinweis aus dem Wireframe. Steht im Design auf hidden und ist nur für den Textvergleich da.
Wir bringen Spannung in Ihr Leben
Wir sind ein Familienunternehmen in vierter Generation.
Wir entscheiden schnell, weil die Wege kurz sind.
Deshalb bekommen Sie bei uns eine Antwort und keine Warteschleife.
05
Liste
.zj-liste
Varianten und Slots
Varianten
haken, punkt, auftakt, linie, icon
Slots
Einträge, bei linie Titel plus Text
Schnelle Lieferung
Persönliche Beratung
Auch per Telefon
Beschaffung. Ein Ansprechpartner für alle Gewerke.
Planung. Norm und Förderung in einem Schritt geprüft.
Normgerechte AuslegungMindestbeleuchtungsstärke und Blendung im Plan, gute Beleuchtung ist aber mehr als das.
Förderung mit BegleitungDen Antrag stellen wir nicht selbst, aber wir kennen, was förderfähig ist.
30Urlaubstage
JTJobticket für den Nahverkehr
Beratung und Konzept für Ihre Beleuchtung, vor Ort und mit DIALux geplant.
Förderung, Energieeffizienz, Normen und Finanzierbarkeit, in einem Schritt geprüft.
Produkt-Know-how aus dem Lichttechnik-Team.
05a
Zeiten
.zj-zeiten
Varianten und Slots
Varianten
keine (Grund erbt die Fläche: weiß, grau, gelb)
Slots
Tage (dt, Bold), Uhrzeit (dd)
Mo.–Do.
7:00–17:00 Uhr
Fr.
7:00–14:00 Uhr
Öffnungszeiten
Mo.–Do.
6:30–17:00 Uhr
Fr.
6:30–14:00 Uhr
06
Pille
.zj-pill
Varianten und Slots
Varianten
neutral, erfolg, warnung, is-aktiv, is-versteckt, is-leer (leere Kategorie, nicht wählbar)
Shell mit zj-inhalt, zj-inhalt--schmal, main als Inhaltsbereich
Slots
alle Sektionen
zj-inhalt
Diese Fläche ist bei 1728 px genau 1268 px breit und beginnt bei x 230. Der Rand fällt fließend bis auf 24 px.
zj-inhalt--schmal
Schmale Textspalte, 894 px, für Fließtextsektionen und die TCO-Strecke.
Aufbau einer gebauten Seite: body.zj-seite enthält header.zj-kopfzeile, dann main mit allen Sektionen, dann div.zj-kamm und footer.zj-fusszeile. Den main setzt bauen.py seite um den Inhaltsbereich.
Filialbild-Platzhalter · Außenansicht der Niederlassung, Eingang links im Bild frei für das Schild unten links, Querformat 2:1 über die volle Inhaltsbreite
keine, die Zeile „Zum Zajadacz Shop“ ist in Hero-Bento und Branchenraster wortgleich; die Huelle (zj-hero__kachel bzw. zj-karte, mit zj-kachel--shop) gehoert dem Raster und bleibt in der Seite
keine; die zwei Verbund-Karten (DEHA Gruppe, DEHA CE) mit Text und verlinktem Logo-Platzhalter sind auf das-unternehmen und mitgliedschaften wortgleich, mitgliedschaften zeigt dazu je Karte Titel und Kurzsatz (titel=ja)
DEHA Gruppe
Wir sind breit aufgestellt. Für Ihre ganz speziellen Wünsche.
Wir sind Teil der DEHA, einem Zusammenschluss von fünf Elektrogroßhandlungen, die Marktführer in ihren Regionen sind. Dieser Verbund besteht bereits seit 50 Jahren und erwirtschaftet aktuell einen Umsatz von über 1,5 Mrd. Euro. Mit den beiden strategischen Kernpunkten Gebäude- und Industrietechnik verfolgen die Unternehmen der DEHA ein Ziel: Gemeinsam zeigen, wie kraft- und wirkungsvoll ein Verbund unabhängiger Partner im Elektromarkt handeln kann. Zusätzlich gewährleistet die Zusammenarbeit in der DEHA deutschlandweit eine schnelle Versorgung mit qualitativen Produkten zu marktgerechten Preisen.
Die DEHA consumer electronics GmbH & Co. KG ist ein Zusammenschluss von uns und zwei weiteren regional führenden Elektrogroßhandelspartnern. Ziel ist es, den Vertriebsbereich Consumer Electronics zukunftsfähig auszubauen und weiterzuentwickeln. Zur Kooperation zählen insgesamt 90 CE-Spezialisten im Innen- und Außendienst an 60 Standorten. Jahrzehntelang gewachsene Nähe zum Elektrofachhandel und höchste Fachkompetenz für Consumer Electronics – all diese Qualitäten finden Sie bei uns.
Raster 2, 3, optional Zitatkarte davor · Vertrauens-Karten OHNE eigene Überschrift als weitere Reihe der Sektion davor (kein zj-trust, Karten 13 --strich, Stand 13.10.2026)
Slots
H2, Zitat, weisse Karten
DIN-zertifiziert
DIN-zertifizierter Lichttechniker an der Spitze, Prüfzeichen PZ-LTI-046.
BEG-Förderung mit Begleitung
Den Antrag stellen wir nicht selbst, aber wir kennen, was förderfähig ist, und begleiten Sie durch den Förder-Dschungel.
Normgerechte Auslegung
Mindestbeleuchtungsstärke und Blendung im Plan, gute Beleuchtung ist aber mehr als das. Das Konzept entwickeln wir mit Ihnen zusammen.
Vertrauen
Warum Industriebetriebe bei uns bleiben.
Platzhalter für ein Kundenzitat aus der Industrie.
Die Vertrauens-Karte als Reihe der Sektion, ohne eigene Fläche.
Lieferung im Regelfall über Nacht.
Zweite Karte der Reihe, gleicher Aufbau.
15
Logo-Streifen
.zj-logostrip
Varianten und Slots
Varianten
kennzahlen
Slots
Zahl plus Label
1934gegründet700Mitarbeitende29Standorte
15a
Logo-Band
.zj-logoband
Varianten und Slots
Varianten
Standard (umbrechend), laufend (Endlosband, zwei identische Gruppen, mit Pause-Knopf zj-pause)
Slots
Logo (img mit width/height), Unterzeile, Wortmarke (Marken ohne freies Logo, auch reine Namenslisten), Trenner zwischen den Eintraegen (__trenner zj-vh, nur fuer Vorlesesoftware, keine eigene Regel noetig)
die Markenliste je Seite in der Schreibweise des Masters; der Bau setzt das laufende Band (15a --laufend) mit Pause-Knopf, Trennern, erster Gruppe mit Namen fuer Vorlesesoftware und den Kopiergruppen (aria-hidden, alt="", Wortmarken als data-kopie), mit dreifach eine zweite Kopie (--dreifach)
Rittal·Siemens·ABB·Lapp·Mennekes
16
Personen
.zj-personen
Varianten und Slots
Varianten
Gruppe mit Label, leitung (allein, 634), watch (Foto folgt), Kontaktabsatz
Slots
Gruppenlabel, Foto, Name, Funktion
[Die Profis am Werk]
Unsere Spezialisten kümmern sich um Ihr Projekt.
Jörn Kischkel leitet das Lichttechnik-Kompetenzzentrum in Neu Wulmstorf. Für jede Anforderung gibt es den richtigen Ansprechpartner.
Leitung
FotoJörn KischkelLeiter Kompetenzzentrum und Produktbereich Lichttechnik, DIN-zertifizierter Lichttechniker
Aussendienst Norddeutschland
FotoHeiko BorghardtLichtplaner
FotoBritta DahnkenIHK-Fachkraft für LED-Beleuchtung
FotoHagen HoffmeierLichtplaner im Fachhandel (IHK)
Telefonisch unter 040 70077-440. Anfragen direkt an kpz.licht@zajadacz.de, wir verbinden Sie an die richtige Person.
17
Querverweis
.zj-querverweis
Varianten und Slots
Varianten
Standard (3 Bildkarten plus Sammel-Link)
Slots
Eyebrow, H2, Lead, Bild, Name mit /z (nur der Schraegstrich gelb, Figma 384:2880), Lead je Karte, Link
Unsere Kompetenzzentren
Wenn Ihr Projekt mehr braucht als Licht.
Wird Ihr Projekt größer als Licht, hält das Kompetenzzentrum Ganzheitliche Gebäudelösungen und Installation alle Gewerke zusammen. Häufig in einem Atemzug mit Lichttechnik gefragt:
Thumbnail · Hero-Bild Netzwerk- und Gebäudesystemtechnik
Thumbnail · Hero-Bild Industrietechnik und Automation
Thumbnail · Hero-Bild Ganzheitliche Gebäudelösungen und Installation
Thumbnail · Hero-Bild Regenerative Energien und E-Mobilität
Thumbnail · Hero-Bild Raumklima und Warmwassersysteme
Thumbnail · Hero-Bild Kabel und Leitungen
Thumbnail · Hero-Bild Multimedia
Thumbnail · Hero-Bild Konsumgüter
Thumbnail · Hero-Bild Kooperationen, Training und Services
Lichttechnik
Netzwerk- und Gebäudesystemtechnik
Industrietechnik und Automation
Ganzheitliche Gebäudelösungen und Installation
Regenerative Energien und E-Mobilität
Kabel und Leitungen
Multimedia
Konsumgüter
Kooperationen, Training und Services
Raumklima und Warmwassersysteme
18
CTA-Band
.zj-ctaband
Varianten und Slots
Varianten
Standard (H2, Text, zwei Buttons), kurz (H2 mit Slash, ein Button), 3-buttons, tiger, tiger-unten und tatzen (Karriere-Unterseiten, 07.10.2026)
Slots
H2, Text, Buttons. KEIN Eyebrow (Simeon 08.09.)
Norm im Hinterkopf, ein Telefonat zu Beginn.
Ein Anruf genügt, und Sie sprechen direkt mit dem Lichtteam, ohne Hotline und ohne Weiterleitung. Wer lieber schreibt, bekommt aus dem Innendienst eine Antwort mit den Eckdaten zurück.
keine, auf Ausbildung und allen sechs Berufsbildern wortgleich (Band 18 --kurz --tiger --tiger-unten, Slash-H2, Knopf „Zu den Jobs“ auf das Jobportal mit Zielgruppe Auszubildende)
/Sie haben die Energie, wir haben den Ausbildungsplatz.
Parameter am Marker @ctaband-kunde text=<seite> (ohne Parameter: Standard)
Slots
nur der Absatz unter der H2; die H2 „Sie können lange nach Lösungen suchen. Oder Sie kommen zu uns.“, der Knopf „Kunde werden“ und das Gerüst sind auf allen neun Seiten gleich
Sie können lange nach Lösungen suchen. Oder Sie kommen zu uns.
Als Zajadacz Kunde profitieren Sie von: Zugriff auf mehr als 850.000 Artikel, kostenloser Vor-Ort-Betreuung durch 29 Niederlassungen, Angebote und Aktionen, Zugriff auf Zajadacz-Kompetenzzentren und digitale Servicefunktionen
Als Zajadacz Kunden profitieren Sie von: Zugriff auf mehr als 850.000 Artikel, kostenloser Vor-Ort-Betreuung durch 29 Niederlassungen, Angebote und Aktionen, Zugriff auf Zajadacz-Kompetenzzentren und digitale Servicefunktionen.
Als Zajadacz Kunden profitieren Sie von: Zugriff auf mehr als 850.000 Artikel, kostenloser Vor-Ort-Betreuung durch 29 Niederlassungen, Angebote und Aktionen, Zugriff auf Zajadacz-Kompetenzzentren und digitale Servicefunktionen
Als Zaladacz Kunden profitieren Sie von: Zugriff auf mehr als 850.000 Artikel, kostenloser Vor-Ort-Betreuung durch 29 Niederlassungen, Angebote und Aktionen, Zugriff auf Zajadacz-Kompetenzzentren und digitale Servicefunktionen
19
Bild und Text
.zj-bildtext
Varianten und Slots
Varianten
Bild links (Standard), bild-rechts, video, mit Liste linie, mit QR-Kasten, mit Zitaten und Badges
Slots
Bild, Eyebrow, H2, Absätze, Liste, Button, QR
Bild-Platzhalter · Firmenwagen vor der Halle Neu Wulmstorf
[Individuell auf Ihre Bedürfnisse zugeschnitten]
Wir haben unsere eigene Halle so geplant.
Wenn Sie wissen wollen, wie wir Lichtplanung in der Praxis machen, kommen Sie nach Neu Wulmstorf. In der Lessingstraße 46 steht unsere eigene Erweiterung, 7.500 Quadratmeter Halle, Büroflächen und Logistikbereich, von denselben sieben Lichtplanern geplant.
BesichtigungTermin auf Anfrage, Anruf unter 040 70077-440.
Im BetriebSie sehen die Anlage im Alltag, mit echten Arbeitsplätzen darunter.
Parameter am Marker @fragen-karriere text=<berufsbild>
Slots
der Satz unter „Fragen?“ steht live je Berufsbild anders (1:1 aus den Karriere-Mastern), alles andere ist gleich (Kasten 21 --gelb auf Weiß, Slash-H2, Sekundärknopf „E-MAIL SCHREIBEN“ auf bewerbung@)
/Fragen?
Wir hoffen, dass wir Ihnen einen kleinen Einblick geben konnten. Wenn Sie weitere Fragen haben, melden Sie sich gerne. Wir freuen uns über Ihren Anruf!
Wir hoffen, dass wir Ihnen einen kleinen Einblick geben konnten. Wenn Sie weitere Fragen haben, melden Sie sich gerne. Wir freuen uns über Ihren Anruf!
Wir hoffen, das hat Ihnen einen guten Überblick über das duale Studium bei Zajadacz gegeben. Wenn Sie weitere Fragen haben, stehen wir Ihnen gerne zur Verfügung!
Konnten wir Ihr Interesse wecken? Wir würden uns über Ihre Bewerbung freuen! Wenn Sie weitere Fragen haben, melden Sie sich gerne.
Soweit ein erster Überblick über diesen Ausbildungsberuf. Bei weiteren Fragen stehen wir Ihnen gerne zur Verfügung!
Wir hoffen, dass Sie jetzt einen umfassenden Eindruck von diesem Ausbildungsberuf gewonnen haben. Falls Sie noch weitere Fragen haben, sind wir jederzeit für Sie da!
Wir hoffen, dass diese Zusammenfassung des Ausbildungsberufs Ihnen geholfen hat. Sollten Sie noch mehr Informationen benötigen, können Sie uns jederzeit kontaktieren.
22
Standort
.zj-standort
Varianten und Slots
Varianten
Standard (Text links zentriert, Karte rechts), Detail-Panel
keine, Text der Startseite (Figma, Merle #175), auf startseite und niederlassungen gleich; die Kartenflaeche (mit der festen Beschreibung fuer Vorlesesoftware, 29 Punkte) gibt es auch allein als Marker @standort-karte (elektrohandwerk)
Ihr Partner vor Ort.
29 Niederlassungen in Deutschland. Wenn's brennt, sind wir da. Wenn's kompliziert wird, kommen wir vorbei.
Ihre Ansprechpartnerin Jacqueline Janischewsky Telefon: 040 700 77 130
Ihre Ansprechpartnerin Corinne Scholz-Klatt Telefon: 040 700 77 428
23c
Kontakt Kunst und Kultur
.zj-kontakt-kuk
Varianten und Slots
Varianten
Parameter am Marker @kontakt-kuk titel="…"
Slots
nur die Ueberschrift (live je Seite verschieden: „Haben Sie Fragen? Gerne“ auf kunst-und-kultur, „Kontakt“ auf dem Detail), der gelbe Punkt kommt dazu; die drei Ansprechpartnerinnen mit Telefon und kuk@ sind gleich
Standard (mit gelbem Schrägstrich), data-schraegstrich="aus"
Slots
keine
Blaue Sektion darüber.
Der Kamm sitzt immer zwischen einer blauen Sektion darüber und einer Navy-Fläche darunter. Sichtbar ist er 58 px hoch, gebaut ist er 123,94 px: die untere Hälfte deckt das Navy darunter ab. Die Zähne stehen 26,06 Grad zur Senkrechten als Backslash, über die volle Höhe versetzt um 60,62 px. Links vom gelben Strich sind sie 13,47 px breit im Abstand 72,75 px, rechts davon 24,25 px im Abstand 83,52 px.
Dieselbe Komponente ohne Schrägstrich, für jeden weiteren Übergang auf einer Seite: kein Gelb, nur die dünnen Zähne, durchgehend über die ganze Breite.
data-schraegstrich="aus"
25
Fußzeile
.zj-fusszeile
Varianten und Slots
Varianten
Standard (Probe A „ruhig in Spalten“, Simeon 05.10.2026)
Slots
Logo, Claim (Bold-Zeile plus Zeile), Niederlassungs-Link, Social-Zeile, vier Spalten (Branchen, Kompetenzzentren, Unternehmen, Kontakt), Copyright und Rechtslinks
26
Stellendetail
.zj-stellendetail
Varianten und Slots
Varianten
Standard (Anzeige links, klebende Aktionskarte rechts), softgarden-Platz (links statt eigener Anzeige ein zj-kasten ohne Modifier mit aria-hidden als Platzhalter der eingebetteten Fremd-Anzeige, so auf job-detail-muster)
Slots
Kopfbild, Intro, Titel, drei Listen, Abbinder, Primärknopf, Teilen-Pills
Kopfbild-Platzhalter · Arbeitsplatz im Innendienst
Stellen-Detailseite
Elektroniker für Betriebstechnik
Neu Wulmstorf, Vollzeit, ab sofort.
Ihre Aufgaben
Instandhaltung und Störungsbeseitigung an den Anlagen im Haus.
Begleitung von Umbauten in Lager und Logistik.
Ihr Profil
Abgeschlossene Ausbildung im Bereich Elektrotechnik.
Freude daran, Dinge zum Laufen zu bringen.
Wir bieten
Ein Familienunternehmen mit kurzen Wegen.
30 Urlaubstage und ein Jobticket.
Fragen vorab? Rufen Sie an, wir gehen ran.
27
Artikel
.zj-artikel
Varianten und Slots
Varianten
keine
Slots
Bild (figure.zj-figur mit Bildnachweis zj-bildnachweis), Lead, Absätze, H2, H3, Zitat, Link
Bild-Platzhalter · Gruppenfoto der Meisterstipendiaten 2024 mit Vertretern des Vereins
Text: Die Stipendiaten des Jahres 2024 mit Vertretern des Vereins und der Elektrobranche.Foto: Constantin Meyer
Auf engagierte Meisteranwärter warten 7.000 Euro: Der Verein „Elektromarken. Starke Partner.“ vergibt wieder seine zehn begehrten Meisterstipendien.
Auch in diesem Jahr können sich angehende E-Handwerksmeister aus Deutschland wieder für eines von zehn Meisterstipendien des Vereins „Elektromarken. Starke Partner.“ bewerben. Jedes Stipendium ist mit 7.000 Euro dotiert.
Die Kriterien der Bewertung.
Neben dem Gesellenzeugnis gibt es grundsätzlich keine weiteren Bewerbungsvoraussetzungen. Zusätzlich zum Gesellenzeugnis und einem Motivationsschreiben werden Markenverständnis, Teamgeist und ein reflektierter Blick auf die Zukunft der Branche bewertet.
Der Verein Elektromarken. Starke Partner. e.V.
Im Verein engagieren sich 16 Markenhersteller der deutschen Elektrobranche.
27a
Richtext
.zj-richtext
Varianten und Slots
Varianten
keine
Slots
freier Fliesstext aus dem CMS-Editor ohne Klassen (p, h2, h3, h4, ul, ol, a, strong, blockquote)
Auf engagierte Meisteranwärter warten 7.000 Euro: Der Verein „Elektromarken. Starke Partner.“ vergibt wieder seine zehn begehrten Meisterstipendien.
Auch in diesem Jahr können sich angehende E-Handwerksmeister aus Deutschland wieder für eines von zehn Meisterstipendien bewerben. Mehr dazu auf der Seite des Vereins.
Die Kriterien der Bewertung
Neben dem Gesellenzeugnis gibt es grundsätzlich keine weiteren Bewerbungsvoraussetzungen. Bewertet werden:
Gesellenzeugnis und Motivationsschreiben
Markenverständnis und Teamgeist
ein reflektierter Blick auf die Zukunft der Branche
Der Verein Elektromarken. Starke Partner. e.V.
Bewerbung einreichen
Auswahl durch die Jury
Übergabe der Stipendien
Zwischenüberschrift vierter Stufe
Im Verein engagieren sich 16 Markenhersteller der deutschen Elektrobranche.
28
Nachladen
.zj-nachladen
Varianten und Slots
Varianten
Ruhe, Ladezustand is-laedt (mit aria-busy="true" am Knopf)
Slots
Umriss-Knopf
29
Formular
.zj-formular
Varianten und Slots
Varianten
auf Weiß (Rahmen mit Trennlinie), auf Blau oder Navy (weiße Fläche ohne Linie)
Slots
Platzhalter zj-formular__platzhalter bis zur Einbettung, danach das JotForm-iframe
Formular (JotForm, Einbindung durch Entwicklung)
Formular (JotForm, Einbindung durch Entwicklung)
30
Galerie
.zj-galerie
Varianten und Slots
Varianten
keine (drei Spalten, ab 900 zwei)
Slots
Bild als Knopf zj-galerie__bild (Name aus dem Alternativtext), optional data-gross mit der großen Datei
31
Slider
.zj-slider
Varianten und Slots
Varianten
keine (eine Folie sichtbar, kein Auto-Lauf)
Slots
Folien zj-slider__folie (beliebiger Inhalt, hier Zitat --linie), Steuerung mit Pfeilen aus dem Sprite und Positionsknoepfen (system.js baut die Knoepfe)
„Erstes Beispielzitat. Ein Satz, der zeigt, wie die Folie mit einem kurzen Zitat aussieht.“
„Zweites Beispielzitat, etwas länger: die Höhe des Sliders richtet sich nach der höchsten Folie, damit die Seite beim Blättern nicht springt.“
„Drittes Beispielzitat.“
32
Tigerbuehne
.zj-tigerbuehne
Varianten und Slots
Varianten
keine
Slots
Tiger (Zajadacz-Tiger, gedreht, unten angeschnitten), Text als EIN Absatz mit Frage, Antwort, Wort, Rest
Eine Frage, die den Satz vorbereitet, in einer bis drei Zeilen.Die Antwort:einWort.Ein Satz zur Erklärung, mit hervorgehobenen Begriffen in Gelb.
33
Zeitachse
.zj-zeitachse
Varianten und Slots
Varianten
keine (sechs Stationen nebeneinander über 1200, drei je Reihe bis 1200, senkrecht unter 700; für Navy gebaut)
Slots
je Station li mit __jahr (H2-Größe, gelb) und __text (Kleintext); Knopfzeile direkt danach 48 Abstand
In den letzten knapp 100 Jahren hat sich viel verändert.
1934Gegründet von Adalbert Zajadacz in Hamburg-Harburg.
1949Gründung der ersten Niederlassung in Celle.
1964Ehefrau und Sohn führen die Geschäfte weiter.
1972Neubau des Stammhauses in Neu Wulmstorf.
1984Zentrallager um 12.000 m2 erweitert.
2016Die Stiftung übernimmt die Gesellschafterfunktion.
keine (breit über 700, schmal bis 700; welche sichtbar ist, regelt die CSS)
Slots
figure mit Marker @diagramm <name> (bauen.py setzt assets/diagramme/<name>-breit.svg und -schmal.svg inline ein; je Diagramm ein Generator, Umsatz: _tools/umsatzdiagramm.py, Daten aus assets/original-unternehmen/Umsatzentwicklung_2026.svg); SVG role=img mit title und desc (alle Werte als Satz), Zeichnung aria-hidden
35
Logofläche
.zj-logofeld
Varianten und Slots
Varianten
Standard (Logo höchstens 44 hoch), --siegel (120), als a mit Hover-Kante; Fläche weiß auf Grau, grau auf Weiß; Karte zj-karte--logokopf (Logofläche als Kartenkopf, Marker @deha logo=kopf); Raster zj-raster--logo (Logo 5/12, Satz 7/12)
Slots
ein img (gelieferte Datei, kein Platzhalter; Platzhalter bleiben zj-badges)
Logo links, Satz rechts.
Karte mit Logokopf: die Logofläche oben, Linie darunter, Text 32 tiefer.
Hover und Fokus zeigen eine Navy-Innenkante an der Logofläche.
36
Siegelreihe
.zj-siegel
Varianten und Slots
Varianten
Kachel mit Siegel (zj-logofeld--siegel plus Link), Kachel --pq (H3, Text, Logo rechts, doppelt breit)
Die Kachel --pq läuft über zwei Spalten, das Logo steht rechts, auf dem Handy darüber.
38
Bildplatz leer
.zj-bild--leer
Varianten und Slots
Varianten
Hero-Bildfläche (Blaugrau, Zeichen 72), Bild der KPZ-Karte (helles Blaugrau, Zeichen 48), breite Fläche an der Kernaussage (zj-bildplatz, Systemgrau), Videoplatz (zj-bild--video, Wiedergabe-Zeichen), Niederlassungs-Schild (Block 37, Systemgrau auf Weiß)
Slots
zj-bild mit data-platzhalter und zj-bild__text zj-vh (Briefing nur für Vorlesesoftware); Foto-Karte im Branchenraster (zj-karte mit zj-karte__bild zj-hat-foto vor dem Inhalt)
Ruhiger Bildplatz.
Wo es kein Foto gibt, steht keine Werkstattsprache auf der Seite: eine ruhige Fläche mit Zeichen. Gleiche Regel auf Hero, Karte, breiter Fläche und Video.
Thumbnail · Bild der KPZ-Karte, ohne Foto
KPZ-Karte ohne Foto
Das Bild der Karte, solange das Foto fehlt.
Video-Embed-Platzhalter
Videoplatz
Wiedergabe-Zeichen statt Bildzeichen.
Karte mit Foto
Foto oben, wie die Karte Elektrohandwerk im Branchenraster.
Hero ohne Foto
Bildfläche im Hero.
Hero-Bild-Platzhalter
39
Meldungsliste
.zj-meldungen
Varianten und Slots
Varianten
Aufmacher (zj-meldung--aufmacher, die neueste größer), Meldung
Slots
__meta (Datum, Kategorie), __text (__titel als Link über die ganze Zeile, Teaser, weiterlesen)
Meldungsliste.
Meldungen ohne Bilder als ruhige Liste: links Datum und Kategorie, rechts Titel und Teaser, eine Linie trennt. Die ganze Zeile ist der Link.
Auf engagierte Meisteranwärter warten 7.000 Euro: Der Verein „Elektromarken. Starke Partner.“ vergibt wieder seine zehn begehrten Meisterstipendien. Die Bewerbung ist bis zum 30. September 2025 möglich.
WAGO hat in Sondershausen sein kürzlich errichtetes Zentrallager in Betrieb genommen. Mit der Anlage erweitert das Familienunternehmen die Kapazitäten an seinem „Tor zur Welt“ deutlich und stellt die Weichen für weiteres Wachstum.
Vom 5. bis 9. September lädt die IFA ein, in Berlin die Innovationen im Bereich Home & Consumer Tech unter die Lupe zu nehmen. Damit das einfach gelingt, haben die Veranstalter Reisetipps zusammengestellt.
weiterlesen
40
Kontakt kurz
.zj-hero--kurz, zj-kasten--wege, zj-kontaktwege
Varianten und Slots
Varianten
keine
Slots
Kopf nur mit Eyebrow und H1; Formular links, rechts die klebende Spalte (zj-raster--detail > aside) mit den Kontaktwegen untereinander (Telefon als Primärknopf)
Kontakt
Hier fragen Sie richtig.
Formular (JotForm, Einbindung durch Entwicklung) · Quelle: https://formular.zajadacz.de/team/evi/kontaktformular-website
41
Kuk magazin
.zj-kuk-*
Varianten und Slots
Varianten
Aufmacher (Bild 7/12, Text 5/12; in der Suche normale Karte), zwei mittlere Beiträge (zj-kuk-duo), Raster (zj-kuk-raster); Detail: Aufmacherfoto 21:9 (zj-kuk-aufmacherfoto), Zitat gross, Bildpaar, Galerie 3 + 4
Slots
zj-kuk-liste (data-zj-kuk-liste) um Aufmacher, Duo und Raster; Karten mit data-zj-mehr hidden werden per "Mehr laden" (assets/kuk-liste.js) gezeigt
Was hat ein Elektrogroßhandel wie Zajadacz mit Kunst und Kultur zu tun?
Die Antwort ist einfach: Kultur verbindet – und genau das möchten wir mit unserem vielfältigen Programm erlebbar machen. Für unsere Mitarbeitenden und Interessierten schaffen wir regelmäßig besondere Momente: Ob inspirierende Kunstausstellungen, bewegende Filmabende oder mitreißende Konzerte – jede Veranstaltung lädt dazu ein, gemeinsam zu entdecken, zu genießen und sich auszutauschen. Je nach Veranstaltungsrahmen laden wir herzlich zur Teilnahme ein.
Es sind Gesichter, die mich faszinieren, Emotionen, die mich unmittelbar treffen, Momentaufnahmen, das perfekt Unperfekte in einem Augenblick. Auf der Suche nach etwas Wahrem, etwas Echtem male ich oft Bruchstücke naher Momente, zoome den Ausschnitt heran, zeige lediglich Details. Bilder werden zu visuellen Umarmungen.
42
Suchfeld
.zj-suchfeld
Varianten und Slots
Varianten
keine (Fokus Navy-Kante 2, Hover Kante 2)
Slots
Label nur für Vorlesesoftware (zj-vh), Lupe aus dem Sprite, Eingabe type=search mit sichtbarem Platzhalter
43
Jobsuche
.zj-jobsuche-*
Varianten und Slots
Varianten
Desktop (Leiste klebt unter der Kopfzeile, Auswahlknöpfe mit Panel), Handy unter 900 (Filter hinter einem Knopf, Klappe von unten)
Slots
Leiste (Auswahl je Gruppe, Treffer, Chips), Stellenzeilen (zj-jobsuche-stelle mit data-zielgruppe, data-kategorie, data-standort), Leerzustand; Skript assets/jobsuche.js
Band mit Suche und Karte · Liste nach Bundesland (ruhige Karten, ganze Karte klickbar) · Trefferansicht nach Entfernung (erste Karte blau, doppelt breit) · Zustand is-hover (Karte und Kartenpunkt)
Slots
H1, Lead, Suchfeld, Anzahl, Zentrale, Gruppenlabel, Ortskarte (Name als Link zur Detailseite, Adresse, Telefon, Route)
Ihr Partner vor Ort.
29 Niederlassungen in Deutschland. Wenn’s brennt, sind wir da. Wenn’s kompliziert wird, kommen wir vorbei.
Marker @projekte kpz=<seite> [anzahl=3] (Kompetenzzentrum-Seite: bis zu drei Projekte dieses Zentrums, Spitzmarke „Projekte“, H2 „Ein Auszug aus unseren Projekten.“ linksbuendig, ohne Knopf zum Zentrum; ohne Projekt baut der Marker GAR NICHTS) und @projekte alle mischen [anzahl=3] (Startseite: Spitzmarke „Ach, das könnt ihr auch?“, H2 „Ein Auszug aus unseren Projekten.“ zentriert, Knopf „Zum Kompetenzzentrum“ je Karte, zur Bauzeit die ersten drei, assets/projekte.js mischt beim Laden aus den eingebetteten Daten neu)
Slots
je Projekt Spitzmarke (Name des Zentrums), Titel, zwei Absaetze (absaetze, erlaubt nur <strong>), Foto 1 : 1 mit Alt-Text oder Magenta-Flaeche, Knopf unten; Daten in assets/projekte.json (id, kpz, titel, text, absaetze, foto, foto_alt, freigabe; freigabe ist NUR ein Vermerk fuer die Abstimmung mit Merle und KEIN Veroeffentlichungsfilter: der Bau zeigt jedes Projekt der Datei, auch mit freigabe offen; wer ein Projekt nicht zeigen will, nimmt es aus der Datei; der Bau prueft alle Datensaetze vor dem Filtern: Pflichtfelder, gueltiges kpz, eindeutige id, Foto vorhanden, absaetze gegen text), Karte = zj-karte mit zj-karte__bild (13), nur der Knopf ist ein Link, die Karte nicht