Gestaltungsrichtlinie (Web + PDF)

0. Zweck, Geltung und Grundprinzip

Diese Gestaltungsrichtlinie ist ein verbindlicher Bauplan für Webseiten und PDF-Dateien (DIN‑A4‑Layout). Sie wird nicht „frei nach Gefühl“ umgesetzt, sondern als reproduzierbares System: Logo, Hausfarben, Typografie, Raster, Weißräume und Markerelemente werden so konsistent eingesetzt, dass Inhalte sofort als ESW erkennbar sind.

Grundprinzip:

Ruhige Grundstruktur durch Raster, Grundlinienraster und definierte Weißräume.
Sehr sparsame Akzente, dafür streng standardisiert:
- Ultramarinblau als dominierende Hausfarbe,
- Gelb ausschließlich als Überschriften‑Kästchen,
- die fein gestrichelte Linie als Führungs‑ und Strukturkante.

Wichtig: Diese Richtlinie beschränkt sich auf CSS‑Möglichkeiten. Farbangaben sind daher primär in Hex zu führen; wo nötig zusätzlich in RGB.

1. Logo (Wort‑Bild‑Marke) – Regeln für Web und PDF

1.1 Position und Einbindung

Die Wort‑Bild‑Marke steht immer oben rechts.
Sie steht vorzugsweise auf einem blauen Streifen (Hausfarbe).
Der Schriftzug ist rechtsbündig gesetzt.
Das Emblem (Zahnrad mit zwölf Zähnen und integrierten, untereinander angeordneten Großbuchstaben „ESW“) schließt rechtsbündig an.
Die Emblemhöhe entspricht exakt der Gesamthöhe des Schriftzuges.
Das Logo darf niemals animiert oder in Bewegung gesetzt werden.

1.2 Farbvarianten (Vollton, ohne Verläufe/Muster)

Standard: Logo in Ultramarinblau #003399 (RGB 0/51/153).
Negativ auf dunklem Hintergrund: Logo weiß #FFFFFF.
Einfarbig (z. B. s/w‑Ausgabe): Logo vollständig schwarz #000000.

1.3 Strenge Verbote

Graustufen sind verboten (weder Logo noch Emblem in Graustufen).
Keine Verläufe, keine Muster, keine Transparenzen.
Das Emblem darf nicht modifiziert werden (keine Abwandlungen, keine zusätzlichen Symbole, keine grafischen Veränderungen).

1.4 Mindestgröße

Mindestbreite (kleinste Verwendung): 22 mm
Darüber hinaus gilt: Lesbarkeit hat Vorrang.

2. Farben (verbindlich, CSS‑tauglich)

2.1 Grundfarben

Ultramarinblau (Hausfarbe): #003399 (RGB 0/51/153)
Weiß (Gegenfarbe): #FFFFFF (RGB 255/255/255)
Schwarz (Textfarbe): #000000 (RGB 0/0/0)

2.2 Akzentfarbe Gelb (strikte Zweckbindung)

Gelb: #FFFF00 (RGB 255/255/0)
Gelb wird ausschließlich als definiertes Überschriften‑Kästchen verwendet.
Gelb wird nicht dekorativ verteilt.

2.3 Ergänzungsfarben (nur für Grafiken, sparsam)

Cyan: #00FFFF (RGB 0/255/255)
Cyan 30%: #B3FFFF (RGB 179/255/255)

Hinweis: Diese Farben sind für grafische Elemente zulässig, die Grundwirkung bleibt jedoch Blau/Gelb/Weiß/Schwarz.

3. Typografie (Web + PDF) – Schriften und Rollen

3.1 Primärschriften und Ersatzschriften

Überschriften, Vorspann, Bildunterschriften: „Neue Praxis“
Ersatz: Arial (CSS: var(--font-heading); Sans)
Fließtext, Zitate: „Neue Demos“
Ersatz: Times New Roman (CSS: var(--font-body); Serif)

3.2 Zeilenabstand (verbindlich)

Standard: 130% bis 140% (CSS: line-height: 1.3–1.4).
Der Bereich wird konsequent eingehalten; keine willkürlichen Abweichungen.

3.3 Konkrete Rollen (Sollwerte, pt‑Angaben für PDF / Web‑Mapping)

Für Web werden die pt‑Werte als Zielmaß verstanden und in CSS über rem/Variablen abgebildet.

Überschrift

Schrift: Heading (Bold)
Farbe: #003399
Größe: 20 pt
Spationierung: 2 (dezent erhöhte Laufweite)
Ausrichtung: linksbündig

Unterüberschrift / Grafiküberschrift

Schrift: Heading (Bold)
Farbe: #003399
Größe: 13 pt
Spationierung: 2
Ausrichtung: linksbündig

Zwischenüberschrift im Fließtext

Schrift: Heading (Bold)
Farbe: #003399
Größe: 9 pt
Spationierung: 2
Ausrichtung: linksbündig

Kapitelname

Schrift: Heading (Bold)
Farbe: #003399
Größe: 10 pt
Spationierung: 2
Ausrichtung: links- oder rechtsbündig exakt am definierten Rand

Vorspann

Schrift: Heading (Bold)
Farbe: #003399
Größe: 9 pt
Spationierung: 2
Ausrichtung: Blocksatz

Fließtext

Schrift: Body
Farbe: #000000
Größe: 9 pt
Spationierung: 2
Ausrichtung: Blocksatz

Zitat

Schrift: Body Italic
Farbe: #003399
Größe: 13 pt bzw. 8 pt (je nach Zitatlayout)
Spationierung: 2
Ausrichtung: links bzw. rechts (folgt Zitatlayout)

Bildunterschrift

Schrift: Heading (Bold)
Farbe: #003399
Größe: 8 pt
Spationierung: 2
Ausrichtung: links- oder rechtsbündig exakt am definierten Rand

4. Raster (DIN‑A4‑PDF) und Web‑Ableitung

4.1 DIN‑A4‑Raster (PDF)

Basis: DIN‑A4 mit 5‑spaltigem Multifunktionsraster.

Satzspiegel (präzise Abstände):

Abstand vom oberen Seitenrand bis Satzspiegelbeginn: 50 mm
Abstand vom linken Seitenrand bis Satzspiegel: 10 mm
Abstand vom rechten Seitenrand bis Satzspiegel: 10 mm
Abstand vom unteren Seitenrand bis Satzspiegelende: 22 mm

Grundlinienraster:

Startversatz: 5 mm
Schrittweite: 12,756 pt

Regel:

Grundtext bleibt strikt im Satzspiegel.
Außerhalb des Satzspiegels dürfen nur Überschriften, Bilder und Grafiken laufen.
Überschriften haben zum Satzspiegel einen Abstand von genau 5 mm (eine Grundlinienraster‑Startzeile).

4.2 Web‑Ableitung (CSS‑konform)

Für Web wird das Raster als konsistenter Container + wiederkehrende Abstände umgesetzt:

feste Inhaltsbreite (Container) und definierte Seitenabstände,
vertikale Abstände orientiert am Grundlinienraster‑Prinzip (gleichmäßige, wiederholbare Steps),
Elemente dürfen nicht „optisch“ frei geschoben werden; Abstände sind standardisiert.

5. Gestaltungselemente (Kästchen + Linie) – CSS‑nachbaubare Geometrie

5.1 Elementübersicht (feste Abmessungen)

Gelbes Überschriften‑Kästchen

Farbe: #FFFF00
Größe: 5 mm × 9 mm (hochkant)

Blaues Abschluss‑Kästchen

Farbe: #003399
Größe: 2 mm × 2 mm

Blaue Bullet‑Kästchen

Farbe: #003399
Größe: 2 mm × 2 mm (identisch zum Abschluss‑Kästchen)

Führungs‑Linie

Farbe: #003399
Linienstärke: 0,5 pt
Strichart: fein gestrichelt (filigran; kurze Striche/kurze Lücken; keine groben Dashes)

5.2 Überschriftenblock (A–B–C‑Sequenz)

Horizontal (links → rechts): A) gelbes Rechteck
B) unmittelbar rechts daneben: senkrechte gestrichelte Linie
C) rechts davon: Überschriftstext

5.3 Baseline‑Ausrichtung (präzise)

Bezug ist die Baseline der ersten Überschriftszeile.
Unterkante gelbes Kästchen liegt exakt auf der Baseline.
Linie startet exakt auf derselben Baseline.

Alternative (zulässig): Linie startet an der Oberkante des gelben Kästchens; Kästchen bleibt baseline‑ausgerichtet.

5.4 Linienlänge

Die Linie endet bewusst:

am Ende des zugehörigen Abschnitts (Unterkante der letzten Textzeile), oder
an einer definierten unteren Begrenzung (z. B. Satzspiegelunterkante).

5.5 Aufzählungen (Bullets rechts an der Linie)

Geometrie:

Bullet‑Quadrat sitzt rechts der Linie.
Linke Quadratkante berührt die Linie (kein Abstand).
Text beginnt rechts vom Quadrat mit konstantem Einzug.
Die Linie läuft zwischen Überschrift und Aufzählung durch.

Vertikal:

Unterkante des 2×2‑mm‑Quadrats liegt auf der Baseline der Bullet‑Zeile.
Falls technisch nicht möglich: konsequente, einheitliche Alternative (z. B. Zentrierung), niemals gemischt.

5.6 Abschluss‑Kästchen (Pflicht)

Am Ende jedes Grundtextes steht ein blaues 2×2‑mm‑Quadrat.
Es sitzt in der letzten Textzeile am rechten Spaltenrand (PDF) bzw. in Web als definierter Abschlussmarker am rechten Rand des Blocks.
Keine „optional wenn Platz“‑Logik.

6. Grafiken (Web + PDF, CSS‑konform)

Grafiken sind rastergebunden zu platzieren; keine beliebige Textumfließung.
Farben: primär #003399, Gelb nur als Überschriften‑Kästchen, ergänzend #00FFFF / #B3FFFF in Grafiken möglich.
Keine Verläufe, keine Muster, keine dekorative Farbstreuung.

7. Bildsprache (Web + PDF)

Bilder sollen Einblick geben und Interesse wecken, bleiben aber sachlich.
Kleidung muss korrekt sein; Sicherheitsausrüstung soll sichtbar sein (z. B. Helm, Handschuhe, Rettungsweste, Sicherungsgurt), sofern passend.
Gesichter dürfen nicht erkennbar sein.
Es ist auf urheberrechtsfreies bzw. nutzbares Material zu achten.

8. Nachbau‑Anweisung ohne Bilder (für CSS‑Umsetzung)

Definiere Farben als CSS‑Variablen (#003399, #FFFF00, #FFFFFF, #000000, optional #00FFFF, #B3FFFF).
Definiere Typorollen über CSS‑Variablen (Heading‑Font, Body‑Font, Größen, Laufweiten, line-height 1.3–1.4).
Setze Logo oben rechts; keine Animation; nur Volltonfarben; keine Graustufen.
Setze Überschriften stets mit Markerverbund: gelbes 5×9‑mm‑Rechteck links, feine gestrichelte blaue Linie daneben, Überschrift rechts der Linie.
Setze Bullets als 2×2‑mm‑Quadrat rechts an der Linie berührend; Linie zwischen Überschrift und Aufzählung durchlaufen lassen.
Schließe jeden Grundtext mit blauem 2×2‑mm‑Quadrat ab (Pflicht).
Halte Raster/Weißräume konsistent; keine „optischen Sonderfälle“ oder ungerasterte Verschiebungen.