Die Typografie

Als Primärschrift wird die Unternehmensschrift „Apex New“ verwendet. Als Fallback Schrift die Schrift „Trebuchet MS“

Die Farben

siehe Farben

Die Textformate

  • Die Texte werden alle in Gemischtschreibweise geschrieben
  • Texte werden in der Regel linksbündig gesetzt
  •  Es gibt unterschiedliche Textformate und Listen, um die Inhalte sauber zu strukturieren. Siehe Vorgaben.

 

<h1>Überschrift 1 Apex New, medium, Schriftgröße 40px, Zeilenabstand 50px </h1>

Tipp: Die H1 sollte und darf nur 1 mal pro Seite verwendet werden! Muss mehr als 3 Worte enthalten und die definierten Keywords, diese tauchen auch Bildtitel der Seite auf.

h1{font-family: 'Apex New','Trebuchet MS' sans-serif; color:#1C4086; text-transform: none; }

<h2>Überschrift 2  Apex New, medium, Schriftgröße 32px, Zeilenabstand 40px </h2>

h2{font-family: 'Apex New', 'Trebuchet MS'  sans-serif; color:#1C4086; text-transform: none; font-weight: 100 text-align: left}

<h3> Überschrift 3 Apex New, medium, Schriftgröße 24px, Zeilenabstand 30px </h3>

Überschrift 4

Überschrift 5
Überschrift 6

 

  • Der gesamte Text bekommt eine größere Schriftlaufweite von (ca. 0,005em) mum eine bessere Lesbarkeit zu gewährleisten.
  • Der Abstand zwischen den Textabschnitten sollte einheitlich sein und zusätzlich Struktur in die Inhalte bringen. Die Abstände richten sich in etwa an den nachfolgenden Vorgaben.

Beispiel eines Textes mit verschiedenen Passagen:

Seitentitel: H1, Apex New, medium

Inhalt Gendi quam, omnihicia int fuga. Olo ea di alit ut omnisquid maximus, velibus. Ullatiist, ut iscid esequide si coribusdae. Itas idelest lat rest eum quo magniscium sandaecearum nem

Themenüberschrift: H2, Apex New, medium

Gendi quam, omnihicia int fuga. Olo ea di alit ut omnisquid maximus, velibus. Ullatiist, ut iscid esequide si coribusdae. Itas idelest lat rest eum quo magniscium sandaecearum nem

Unterüberschrift: H3, Apex New, medium

Wo quam, omnihicia int fuga. Olo ea di alit ut omnisquid maximus, velibus. Ullatiist, ut isicid esequide si coribusdae. Itas idelest lat rest eum quo magniscium sandaecearum nem derionsecus di omnistem hicia cum faccaecae dolupta sperchi.

Checkliste – Listenheadline: P, Apex New, Medium

  • Listenpunkt 1
  • Listenpunkt 2
  • Listenpunkt 3
  • Listenpunkt 4

Unterüberschrift 2: H3, Apex New, medium (h4?)

Tulo ea di alit ut omnisquid maximus, velibus. Ullatiist, ut iquide si coribusdae. Itas idelest lat rest eum quo magniscium sandaecearum nem derion. Inhalt Gendi quam, omnihicia int fuga. Olo ea di alit ut omnisquid maximus, velibus. Ullatiist, ut iquide si coribusdae. Itas idelest lat rest eum quo magniscium sanda?


Themenüberschrift 2: H2, Apex New, medium

Gendi quam, omnihicia int fuga. Olo ea di alit ut omnisquid maximus, velibus. Ullatiist, ut iscid esequide si coribusdae. Itas idelest lat rest eum quo magniscium sandaecearum nem omnistem hicia cum faccaecae dolupta sperchi.

Listenheadline (?): P, Apex New, Medium

  • Listenpunkt 1
  • Listenpunkt 2
  • Listenpunkt 3
  • Listenpunkt 4

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Fett

Kursive

Zitat Lorem ipsum dolor sit amet, consetetur sadipscing elitr,

 

Paragraph (h2)

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.


Verlinkungen und Button

Es stehen folgende Möglichkeiten der Verlinkung im Text zur Verfügung.

Das Mouseover ist immer in der Unternehmensfarbe.

normale Ansicht vs. mouseover Ansicht:

Link im Text zu weitern Details : … lorem stw-produkt Info kam…

Link am Ende des Textes „mehr Infos“: … kramen. Mehr Informationen…

Externer Link im Text: … Kleben. Da innogy eine der… 

 

 

Formulare

[contact-form-7 404 "Not Found"]

 

Misc Stuff – abbr, acronym, pre, code, sub, sup, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

“This stylesheet is going to help so freaking much.”
-Blockquote

 

Tabs

Tabs

Tab 1 content goes here.

Tab 2 content goes here.

Tab 3 content goes here.

Tabbed Layout Keyfacts

  • Listenpunkt
  • Listenpunkt
  • Listenpunkt

  • Weitere Liste
  • Mit weiteren punkten

Dritter Titel content goes here.

Fliesstext: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

BezeichnungWertEinheit
Minimaldruck50mbar
Maximaldruck500mbar

Infokasten

Jeder Infokasten hat eine abgerundete Ecke.

Keyfactbox, fullsize, zweispaltig


  • ListItem 1
  • ListItem 2
  • ListItem 3


  • ListItem 4
  • ListItem 5
  • ListItem 6


Keyfactbox, fullsize



Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Keyfacts Half



Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Accordions

  • In Deutschland gibt es zwei verschiedene „Arten“ von Erdgas, L- und H-Gas.
  • Diese unterscheiden sich in ihrer chemischen Zusammensetzung und ihrem Energiegehalt.
  • Die Bezeichnung „L-“ steht dabei für „low“ (niedrig), „H-“ steht für „high“ (hoch). Der Brennwert von H-Gas ist höher als der von L-Gas (rund 11,5 kWh/m³ zu 10 kWh/m³).
  • L-Gas wird in den Niederlanden und in Deutschland gefördert, H-Gas z. B. in Russland und Norwegen.

  • Die Erdgasversorgung in Deutschland erfolgt entweder mit L-Gas oder mit H-Gas. Das Versorgungsgebiet der Stadtwerke Meerbusch wird mit dem sogenannten L-Gas versorgt.
  • Die L-Gas-Versorgung wurde bislang hauptsächlich durch Importe aus den Niederlanden sichergestellt.
  • Diese Quellen stehen aber in Zukunft nicht mehr unbegrenzt zur Verfügung. Daher ist eine Umstellung auf H-Gas erforderlich.
  • Aus der unterschiedlichen Beschaffenheit der Gasarten L- und H-Gas ergeben sich auch unterschiedliche Anforderungen an die Gasgeräte in Haushalten und Industrieanlagen.
  • Diese müssen auf die jeweilige Erdgasqualität eingestellt werden.

Die Erfassung der Gasgeräte nn Meerbusch findet ab März 2021 statt, gefolgt von der Anpassung ab Mai 2022 und der Umstellung auf H-Gas am 6.09.2022

  • Mit L-Gas aus den Niederlanden werden heute ca. 23 % aller deutschen Haushalte und der regionalen Industrie versorgt.
  • Alle diese Haushalte und Industriebetriebe sind von der Umstellung betroffen.
  • Insgesamt sind in der Zeit bis 2030 ca. 5,5 Mio. Gasgeräte anzupassen.
  • Die Umstellung wird nicht in allen Netzgebieten gleichzeitig, sondern nach einem von den Ferngasleitungsnetzbetreibern vereinbarten Plan schrittweise umgesetzt.
  • L-Gas-Versorgungsgebiete befinden sich schwerpunktmäßig in den Bundesländern Niedersachsen, Bremen, Nordrhein-Westfalen und der Region Mittelhessen sowie in Teilen Sachsen-Anhalts.

Buttons

Mithilfe von Buttons werden verschiedene Handlungsmöglichkeiten des Nutzers dargestellt und klar hierarchisiert. Welche Zielseite durch sie aufgerufen oder welche Aktion ausgelöst wird, kommunizieren Buttons mit einem Label, mit einem Icon oder einer Kombination aus beidem. Buttons geben bei Klick bzw. Tap ein visuelles Feedback in Form eines Response-Effekts sofern die Buttons nicht deaktiviert sind.

Different Colors:

Default Red Orange Green Aqua Teal Purple Pink Silver

Multiple Sizes

Extra Large Large Normal Small

Buttons with Icons

Alert Tick Info Note Download

Icon Links

Tick Download Link

Externe Link

Info Note Alert

Info Boxes

Sample Content
Sample Content
Sample Content
Text sample

Columns

2 Columns

Two Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Two Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

3 Columns

Three Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Three Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Three Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

4 Columns

Four Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Four Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Four Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Four Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Four Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Four Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Four Columns
Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam. Pellentesque risus diam vestibulum phasellus, aliquam vivamus, tempus urna habitant tempus a et, aliquam maecenas molestie nullam.

Unordered Lists

  • Sample Item 1
  • Sample Item 2
  • Sample Item 3
  • Sample Item 4
  • Sample Item 5

  • Sample Item 1
  • Sample Item 2
  • Sample Item 3
  • Sample Item 4
  • Sample Item 5

  • Sample Item 1
  • Sample Item 2
  • Sample Item 3
  • Sample Item 4
  • Sample Item 5

  • Sample Item 1
  • Sample Item 2
  • Sample Item 3
  • Sample Item 4
  • Sample Item 5

  • Sample Item 1
  • Sample Item 2
  • Sample Item 3
  • Sample Item 4
  • Sample Item 5

  • Aufzählung
  • Aufzählung
  • Aufzählung
  1. Nummerierte liste
  2. Nummerierte liste
  3. Nummerierte liste