Steinmann Schließ- und Sicherheitstechnik GmbH
Diese Seite ist die verbindliche Quelle für Schrift, Farben, Textgrößen, Raster und Bausteine der Website. Sie richtet sich an zwei Leser: an die Person, die das Master-Design in Elementor hinterlegt, und an jeden externen Dienstleister, der später etwas für Steinmann gestaltet oder umsetzt.
Das ist keine Neuwahl, sondern der Bestand. Die heutige Website lädt Proxima Nova über Adobe Fonts. Genau diese Familie wird weitergeführt — es gibt keine zweite Schriftfamilie, keine Monospace und keine Kursive. Das technische Register des neuen Entwurfs entsteht nicht durch eine Zweitschrift, sondern durch Versalien mit weiter Laufweite aus derselben Familie (Rolle „Planmarke“).
| Merkmal | Wert |
|---|---|
| Familie | proxima-nova |
| Bezugsquelle | Adobe Fonts (früher Typekit), Web-Projekt-ID nvn2jlb |
| Einbindung heute | <link rel="stylesheet" href="https://use.typekit.net/nvn2jlb.css"> |
| Ausgelieferte Schnitte | 400 Regular, 500 Medium, 600 Semibold, 700 Bold |
| Schriftlagen | normal — im Kit sind keine Kursiven enthalten |
| Schriftstapel im Template | proxima-nova,sans-serif |
https://use.typekit.net/nvn2jlb.css und steinmann-tec.com/templates/steinmann_j4/css/template.css, abgerufen am 18.09.2026. Nichts davon ist geschätzt.Proxima Nova gibt es bei Adobe in acht Stärken. Das bestehende Web-Projekt von Steinmann enthält vier davon. Der neue Entwurf setzt Überschriften eine Stufe fetter, damit die Hierarchie ohne zweite Schrift trägt.
nvn2jlb den Schnitt Extrabold (800) zusätzlich aktivieren. Das kostet nichts, das Kit behält seine ID, die Bestandsseite bleibt unberührt. Geschieht das nicht, ersetzt der Browser 800 durch den nächstliegenden vorhandenen Schnitt — dann sehen Überschrift und Fettung im Text gleich aus und die Hierarchie flacht ab. Die Prüfung darüber zeigt live, welcher Fall gerade gilt.Die Familie bleibt, die Größen ändern sich. Der Bestand setzt alle Überschriften in Medium (500) und arbeitet mit sehr enger Zeilenhöhe. Der neue Entwurf trennt stärker zwischen Überschrift und Text und gibt dem Fließtext mehr Zeilenabstand.
| Rolle auf der Bestandsseite | Größe | Gewicht | Zeilenhöhe |
|---|---|---|---|
| Fließtext | 18px | 400 | 1.2 |
| H1 | 36px | 500 | erbt 1.2 |
| H2 | 30px | 500 | erbt 1.2 |
| H3 | 24px | 500 | erbt 1.2 |
| H4 | 20px | 400 | erbt 1.2 |
| H5 | 18px | 400 | erbt 1.2 |
| Fett im Text | erbt | 600 | erbt 1.2 |
| Schaltfläche | 23px | 500 | erbt 1.2 |
line-height:1.2 global, auch für Fließtext. Das ist für Überschriften richtig und für Lesetext zu eng. Der neue Entwurf trennt beides: Überschriften 1.04, Fließtext 1.6.Es gibt zwei Wege. Weg A ist der kürzere und in Elementor vorgesehen. Weg B funktioniert immer, auch ohne Integration, und ist der Rückfallweg.
In den Adobe-Fonts-Web-Projekten das Projekt nvn2jlb öffnen und die Domains ergänzen, auf denen die neue Seite läuft: Produktivdomain, Staging-Domain und die lokale Entwicklungsadresse. Ohne Eintrag lädt die Schrift dort nicht.
Im selben Projekt bei Proxima Nova den Schnitt Extrabold (800) zusätzlich anhaken und speichern. Die Kit-ID bleibt gleich, die Bestandsseite merkt davon nichts.
WordPress-Backend: Elementor → Einstellungen → Integrationen → Adobe Fonts (Typekit). Dort die Projekt-ID nvn2jlb eintragen und speichern. Danach steht proxima-nova in jeder Schriftauswahl von Elementor zur Verfügung.
Site Settings → Global Fonts: die Rollen aus Abschnitt S—04 anlegen und dort Proxima Nova wählen. In einzelnen Widgets nie eine Schrift auswählen.
Falls die Integration nicht zur Verfügung steht: das Stylesheet des Kits selbst in den Kopfbereich laden und die Familie global setzen. Mit Elementor Pro geht das ohne Theme-Datei über Elementor → Custom Code, Position <head>. Alternativ im Child-Theme über wp_enqueue_style.
<link rel="preconnect" href="https://use.typekit.net" crossorigin> <link rel="stylesheet" href="https://use.typekit.net/nvn2jlb.css">
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'adobe-proxima-nova', 'https://use.typekit.net/nvn2jlb.css', array(), null );
} );
| Frage | Antwort |
|---|---|
| Lizenz | Proxima Nova wird über das Adobe-Fonts-Abonnement genutzt. Die Web-Nutzung ist damit abgedeckt, solange das Abonnement läuft. Endet es, fällt die Schrift auf der Website aus. Diese Abhängigkeit besteht heute schon. |
| Selbst hosten | Adobe Fonts erlaubt kein Herunterladen und Selbsthosten der Webfont-Dateien. Wer die Schrift vom eigenen Server ausliefern will, braucht eine separate Webfont-Lizenz beim Hersteller. Das ist eine Kosten- und Vertragsfrage, keine technische. |
| Datenschutz | Die Schriftdateien kommen von use.typekit.net. Dabei wird die IP-Adresse der Besucherin oder des Besuchers an Adobe übertragen. Das gehört in die Datenschutzerklärung, mit Adobe Fonts als benanntem Dienst. Für die Bestandsseite gilt das bereits — es ist also kein neues Thema, sondern ein bestehendes, das mitgenommen werden muss. |
| Google Fonts | Werden nicht eingesetzt. Sollte ein Plugin oder Theme sie nachladen, ist das abzuschalten: Elementor → Einstellungen → Erweitert → Google Fonts laden: Deaktivieren. |
| Rückfallschrift | "proxima-nova","Proxima Nova",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif — greift nur, wenn das Kit nicht lädt. |
Die Markenfarbe bleibt unverändert. Was sich ändert, ist die Menge: Rot war bisher Flächenfarbe und hatte damit keine Signalwirkung mehr. Künftig markiert Rot ausschließlich Berechtigung, Status und die eine primäre Handlung.
#E30613, die Schaltflächen und Textlinks im Template dagegen #F00000 — ein grelleres, leicht orangestichiges Rot. Verbindlich ist das Logo-Rot #E30613; es wird überall geführt. #F00000 entfällt ersatzlos.#E30613 · rgb(227, 6, 19)Berechtigungskreuz, primärer Knopf, Statusmarke, Akzentkante. Höchstens 4 % der sichtbaren Fläche.
--rot · Global: Primary
#A80410 · rgb(168, 4, 16)Nur Hover- und Aktivzustand des roten Knopfes.
--rot-tief · Global: Accent
rgba(227,6,19,.16)Fokusring und der weiche Schein hinter der Schließmatrix.
--rot-schimmer · Custom
#121417 · rgb(18, 20, 23)Fließtext, Überschriften, dunkle Kontrastsektionen.
--tinte · Global: Text
#4B5157 · rgb(75, 81, 87)Beschreibungen, Lead-Absätze, Bildunterschriften.
--tinte-2 · Custom
#6A7077 · rgb(106, 112, 119)Planmarken, Labels, Metaangaben. Nicht für Fließtext.
--tinte-3 · Custom
#FFFFFF · rgb(255, 255, 255)Hauptfläche der Seite.
--papier · Custom
#F3F3F1 · rgb(243, 243, 241)Abgesetzte helle Sektion, zum Beispiel Prüfpflichten.
--nebel · Custom
#E9E9E6 · rgb(233, 233, 230)Hover auf hellen Zeilen.
--nebel-2 · Custom
#E1E1DD · rgb(225, 225, 221)Haarlinien im hellen Bereich. Das wichtigste Gestaltungsmittel.
--linie · Custom
#CFCFCA · rgb(207, 207, 202)Formularrahmen, betonte Trennungen.
--linie-2 · Custom
#121417 · rgb(18, 20, 23)Schließplan, Standort, Fußzeile, Kopfleiste.
--anthrazit · Global: Secondary
#1A1D21 · rgb(26, 29, 33)Karten und Rahmen innerhalb dunkler Sektionen.
--anthrazit-2 · Custom
#272B31 · rgb(39, 43, 49)Haarlinien auf Anthrazit.
--kante · Custom
#343942 · rgb(52, 57, 66)Betonte Linien und Knopfrahmen auf Anthrazit.
--kante-2 · Custom
#F2F3F1 · rgb(242, 243, 241)Fließtext in dunklen Sektionen.
--hell · Custom
#A3AAB2 · rgb(163, 170, 178)Beschreibungen in dunklen Sektionen.
--hell-2 · Custom
#7B828B · rgb(123, 130, 139)Planmarken in dunklen Sektionen.
--hell-3 · Custom
Gerechnet, nicht geschätzt: das Kontrastverhältnis jeder Text-Grund-Kombination, die im Entwurf vorkommt. Maßstab ist Stufe AA — 4,5 : 1 für normalen Text, 3 : 1 für großen Text ab 24 px oder ab 18,66 px fett.
| Kombination | gemessen | gefordert | Ergebnis |
|---|---|---|---|
Fließtext auf Weiß#121417 auf #FFFFFF | 18,45 : 1 | 4,5 : 1 | erfüllt |
Sekundärtext auf Weiß#4B5157 auf #FFFFFF | 8,03 : 1 | 4,5 : 1 | erfüllt |
Label / Planmarke auf Weiß#6A7077 auf #FFFFFF | 5,00 : 1 | 4,5 : 1 | erfüllt |
Rote Schrift auf Weiß#E30613 auf #FFFFFF | 4,88 : 1 | 4,5 : 1 | erfüllt |
Weiße Schrift auf rotem Knopf#FFFFFF auf #E30613 | 4,88 : 1 | 4,5 : 1 | erfüllt |
Fließtext auf Anthrazit#F2F3F1 auf #121417 | 16,58 : 1 | 4,5 : 1 | erfüllt |
Sekundärtext auf Anthrazit#A3AAB2 auf #121417 | 7,86 : 1 | 4,5 : 1 | erfüllt |
Planmarke auf Anthrazit#7B828B auf #121417 | 4,75 : 1 | 4,5 : 1 | erfüllt |
Rote Marke auf Anthrazit#E30613 auf #121417 | 3,78 : 1 | 3,0 : 1 | erfüllt |
Die Größen sind fließend gesetzt: Der erste Wert gilt auf dem Smartphone, der zweite am großen Bildschirm. Elementor bildet das ab, indem je Gerät ein Wert eingetragen wird. Die Hierarchie entsteht über Maßstab und Laufweite, nicht über ständigen Schnittwechsel.
| Rolle | klein | groß | Gewicht | Laufweite | Zeilenhöhe | Versalien | Global Font |
|---|---|---|---|---|---|---|---|
Display / H1h1 | 38 px | 70 px | 800 | -.048em | 1.04 ° | nein | Primary |
Überschrift H2.h2 | 28 px | 48 px | 800 | -.038em | 1.04 ° | nein | Secondary |
Überschrift H3.bt .etikett b | 15.5 px | 19 px | 800 | -.025em | 1.2 | nein | Custom |
Lead.lead | 16.5 px | 18.5 px | 400 ° | 0 ° | 1.6 ° | nein | Custom |
Fließtextbody | 17 px | 17 px | 400 ° | 0 ° | 1.6 | nein | Text |
Text klein.bt .etikett .bs | 13.5 px | 13.5 px | 400 ° | 0 ° | 1.4 | nein | Custom |
Planmarke / Label.pm | 11 px | 11 px | 700 | .17em | 1.35 | ja | Accent |
Kennzahl.kennband b | 26 px | 36 px | 800 | -.035em ° | 1 | nein | Custom |
Normbezeichnung.pf-z .n | 13.5 px | 13.5 px | 800 | 0 ° | 1.6 ° | nein | Custom |
Statusmarke.pf-z .t | 11 px | 11 px | 800 | .12em | 1.6 ° | ja | Custom |
Formularlabel.fd label | 11 px | 11 px | 700 | .13em | 1.6 ° | ja | Custom |
Schaltfläche.knopf | 15 px | 15 px | 700 | 0 ° | 1.2 | nein | Custom |
em.Alles, was an einer Tür zusammenkommt
Planung, Montage und Wartung von Schließanlagen und Zutrittssystemen für Industrie, Medizintechnik, Kliniken, Verwaltungen und Wohnanlagen im Hegau und am Bodensee.
Schließhoheit, Zutritt, Fluchtweg, Brandschutz und Einbruchhemmung hängen am selben Bauteil. Wir bearbeiten sie zusammen. Es gibt keine Stelle, an der die Verantwortung an ein anderes Gewerk übergeht.
Schließanlagen · Zutrittskontrolle · Türtechnik · Rettungswege
Die Seite ist kein zentrierter Standardcontainer, sondern ein Planblatt: links eine schmale Markenspalte mit Koordinate und Sektionsbezeichnung, rechts das Inhaltsfeld. Inhalte spannen asymmetrisch, nie halbe-halbe.
| Größe | Wert | Einsatz |
|---|---|---|
| Maximale Inhaltsbreite | 1440px | Äußerer Container, mittig. |
| Seitenabstand | clamp(20px,4vw,56px) | Links und rechts, wächst mit der Bildschirmbreite. |
| Markenspalte | 72px | Linke Spalte mit Koordinate und Sektionsmarke. Entfällt unter 1020 px. |
| Sektionsabstand | clamp(64px,8vw,120px) | Oben und unten je Sektion. |
| Abstand Feld | clamp(20px,3vw,40px) | Zwischen Markenspalte und Inhalt. |
| Fuge Bildtafel | 3px | Abstand zwischen den Bildkacheln. |
| Fuge Teamraster | 3px | Abstand zwischen den Personenkacheln. |
| Bereich | Was passiert |
|---|---|
| ab 1200 px | Volles Raster: Bildtafel siebenspaltig, Team achtspaltig. |
| 1020 – 1199 px | Team sechsspaltig, Navigation ohne Nummern. |
| bis 1019 px | Markenspalte entfällt, Hero einspaltig mit Bild zuerst, Klappmenü. |
| bis 700 px | Bildtafel zweispaltig, Team zweispaltig, Schließmatrix wird zum Register. |
Alle Bausteine sind mit Elementor-Bordmitteln baubar. Eine einzige Ausnahme braucht ein HTML-Widget: die Schließmatrix.
Primäre Handlung. Rechteckig, kein Radius, kein Schatten.
Elementor: Button-Widget, Typ Custom, eckig · Aufwand gering
Sekundäre Handlung, nur Kontur.
Elementor: Button-Widget, Hintergrund transparent, Rahmen 1,5 px · Aufwand gering
Versalien-Label mit weiter Laufweite, ersetzt eine Monospace.
Elementor: Text-Widget mit Global Font Accent · Aufwand gering
Linke Randspalte mit A—0X und senkrechter Sektionsbezeichnung.
Elementor: Container mit zwei Text-Widgets, Schrift gedreht · Aufwand gering
Foto mit weißem Textfeld unten links, roter Linie beim Überfahren.
Elementor: Container mit Hintergrundbild, innen Container absolut positioniert · Aufwand mittel
Drei Zahlen nebeneinander, durch Haarlinien getrennt.
Elementor: Grid-Container, Counter- oder Heading-Widget · Aufwand gering
Porträt mit Verlauf und Beschriftung, Standortmarke oben links.
Elementor: Loop Grid über Inhaltstyp Mitarbeiter · Aufwand mittel
Norm, Gegenstand, Intervall in einer Zeile mit Haarlinie.
Elementor: Loop Grid über Inhaltstyp Prüfpflicht · Aufwand mittel
Interaktive Berechtigungstafel.
Elementor: HTML-Widget, einmalig gebaut · Aufwand mittel
Beschriftung in Versalien über dem Feld, Rahmen 1,5 px.
Elementor: Form-Widget, Feldbeschriftung oben · Aufwand gering
Roter Randstrich links, kleiner Text. Für Platzhalter und Anmerkungen.
Elementor: Container mit linker Rahmenlinie · Aufwand gering
Reihenfolge einhalten. Wer zuerst Seiten baut und danach die Werte global setzt, muss alles nachziehen.
Abschnitt S—02 abarbeiten: Domains freischalten, Extrabold aktivieren, Kit-ID in Elementor eintragen. Erst danach weitermachen, sonst werden die Global Fonts mit der falschen Familie angelegt.
Site Settings → Global Colors. Die vier Systemfarben belegen: Primary Rot, Secondary Anthrazit, Text dunkel, Accent Rot gedrückt. Alle übrigen als eigene Farben mit den Namen aus Abschnitt S—03.
Site Settings → Global Fonts. Je Rolle Familie, Größe, Gewicht, Laufweite und Zeilenhöhe eintragen — Werte aus Abschnitt S—04, je Gerät ein Wert.
Site Settings → Layout: Inhaltsbreite und Seitenabstände aus S—05. Breakpoints prüfen, damit der Umbruch bei 1020 px und 700 px liegt.
Theme Builder: Header mit Logo, Menü und rotem Telefonknopf; Footer vierspaltig. Sticky über Motion Effects.
Vier eigene Inhaltstypen, damit der Betrieb ohne Dienstleister pflegen kann: Mitarbeiter, Prüfpflicht, Produktkategorie, Beitrag. Ausgabe über Loop Grid mit eigener Loop-Vorlage.
Erst jetzt die Startseite, dann Produkte, dann die übrigen Seiten. Immer globale Farben und Schriften verwenden, nie lokale Werte in einzelne Widgets schreiben.
Optimized DOM Output und Improved CSS Loading einschalten, nicht genutzte Widgets abschalten, Bilder als WebP ausliefern, Google Fonts deaktivieren.
Dieser Abschnitt richtet sich ausdrücklich auch an externe Dienstleister: Wer eine Anzeige, ein Datenblatt, eine Landingpage oder eine Stellenausschreibung für Steinmann gestaltet, findet hier den verbindlichen Rahmen.
#F00000 aus dem alten Template wird nicht weitergeführt.Für alle, die nicht in Elementor arbeiten, sondern in einem anderen Werkzeug: die Kurzfassung und die Werte als Code.
| Punkt | Vorgabe |
|---|---|
| Schrift | Proxima Nova (Adobe Fonts, Web-Projekt nvn2jlb). Verwendete Schnitte: 600, 700, 800. Keine Kursive, keine Zweitschrift. |
| Markenrot | #E30613 — nur als Signal, höchstens 4 % der Fläche. |
| Dunkelfläche | #121417 mit Text #F2F3F1. |
| Fließtext | #121417 auf #FFFFFF, 17 px, Zeilenhöhe 1.6. |
| Überschrift | Gewicht 800, Laufweite -.048em, Zeilenhöhe 1.04. |
| Formen | Rechteckig. Kein Radius, kein Schatten, kein Verlauf. |
| Raster | Höchstens 1440px breit, Seitenabstand clamp(20px,4vw,56px). |
| Rückfragen | Steinmann Schließ- und Sicherheitstechnik GmbH, 07731 6 66 55, info@steinmann-tec.com. |
:root{
--rot: #E30613; /* Markenrot */
--rot-tief: #A80410; /* Markenrot gedrückt */
--rot-schimmer: rgba(227,6,19,.16); /* Roter Schimmer */
--tinte: #121417; /* Text und dunkle Flächen */
--tinte-2: #4B5157; /* Text sekundär */
--tinte-3: #6A7077; /* Text tertiär */
--papier: #FFFFFF; /* Grundfläche */
--nebel: #F3F3F1; /* Dokumentfläche */
--nebel-2: #E9E9E6; /* Dokumentfläche dunkler */
--linie: #E1E1DD; /* Rasterlinie hell */
--linie-2: #CFCFCA; /* Rasterlinie betont */
--anthrazit: #121417; /* Kontrastfläche */
--anthrazit-2: #1A1D21; /* Kontrastfläche abgesetzt */
--kante: #272B31; /* Rasterlinie dunkel */
--kante-2: #343942; /* Rasterlinie dunkel betont */
--hell: #F2F3F1; /* Text auf Anthrazit */
--hell-2: #A3AAB2; /* Text auf Anthrazit sekundär */
--hell-3: #7B828B; /* Text auf Anthrazit tertiär */
--cd: "proxima-nova","Proxima Nova",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--max: 1440px;
--seite: clamp(20px,4vw,56px);
--mark: 72px;
}
| Datei | Inhalt |
|---|---|
prototyp.css | Das komplette Stylesheet des Prototypen. Alle Werte dieser Seite stammen daraus. |
produkte.css | Ergänzungen für die Produktseiten. Keine neuen Farben oder Größen. |
leitentwurf.html | Die Startseite des Prototypen mit allen Bausteinen. |
produkte.html | Produktübersicht und zehn Unterseiten. |
noindex und erscheint deshalb nicht in Suchmaschinen. Vor dem Livegang ist zu entscheiden, ob der Fußzeilen-Link bleibt oder die Seite künftig nur noch intern weitergegeben wird.