Raster 50% 50%

Colorpalette

$color-sh-blau #003064
$color-sh-rot #D4004B
$color-itvsh-magenta #D62F87
$color-itvsh-blau #3A78B8
$color-sh-blau-05 #F2F4F7
$color-sh-blau-10 #E5EAEF
$color-sh-blau-20 #CCD6E0
$color-sh-blau-40 #99ACC1
$color-sh-blau-60 #6683A2
$color-sh-blau-80 #335983
$color-sh-blau-dunkel #001E49
$color-sh-grau #A4ADB6
$color-black #000000
$color-anthrazit #333333
$color-sh-grau-02 #72797F
$color-sh-grau-03 #52565B
$color-sh-grau-60 #666666
$color-sh-grau-20 #CCCCCC
$color-sh-grau-15 #DDDDDD
$color-sh-grau-10 #EEEEEE
$color-white #FFFFFF
$color-sek01-dunkel #1E897A
$color-sek02-dunkel #0F8085
$color-sek03-dunkel #027D9D
$color-sek04-dunkel #106C9E
$color-sek05-dunkel #2F5E90
$color-sek06-dunkel #605887
$color-sek07-dunkel #8E497B
$color-sek08-dunkel #972F6E
$color-sek01 #1EAE9C
$color-sek02 #00A2AB
$color-sek03 #00A0C9
$color-sek04 #008CCF
$color-sek05 #3A78B8
$color-sek06 #7A6FAC
$color-sek07 #B55C9C
$color-sek08 #CC3399
$color-sek02-10 #E6F6F7

Symbols

symbol-arrow-left
symbol-arrow-right
symbol-arrow-down
symbol-arrow-up
symbol-check
symbol-hamburger
symbol-dachzeile
symbol-close
symbol-icon-by
symbol-icon-cc
symbol-icon-nc
symbol-icon-os
symbol-icon-sa
symbol-lens
symbol-link-back
symbol-link-download-corner
symbol-link-download-paper
symbol-link-download
symbol-link-extern
symbol-link-fax-base
symbol-link-fax
symbol-link-intern
symbol-link-fax-paper
symbol-link-mail-paper
symbol-link-mail-upper
symbol-link-mail
symbol-link-phone
symbol-link-section
symbol-logo-instagram
symbol-logo-facebook
symbol-logo-kununu
symbol-logo-youtube
symbol-logo-xing
symbol-logo-linkedin
symbol-minus
symbol-logo-twitter
symbol-plus
symbol-quotation-left
symbol-quotation-right
symbol-video-play

Webfonts

AvenirNextLTPro-Regular AvenirNextLTPro-Demi

Grid

GridCol1Main-col

GridCol2Even-col

GridCol2MainAside-col-aside

GridCol2MainAside-col-main

GridCol3Even-col

Das ist eine Überschrift Level 1 dieser Bereich ist hervorgehoben

Das ist eine Überschrift Level 2 dieser Bereich ist hervorgehoben

Das ist eine Überschrift Level 2 mit Logo dieser Bereich ist hervorgehoben

Das ist eine Überschrift Level 3 dieser Bereich ist hervorgehoben

Das ist eine Überschrift Level 4 dieser Bereich ist hervorgehoben

Das ist eine Überschrift Level 4 mit underline dieser Bereich ist hervorgehoben

Das ist eine Überschrift Level 5 dieser Bereich ist hervorgehoben

Das ist eine Überschrift Level 6 dieser Bereich ist hervorgehoben

Paragraphs

Fließtext sollte immer eine maximale Breite von u-limitWidth-8 haben.

Das ist ein normaler Textabsatz. 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.

Das ist ein small Textabsatz. 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.

Das ist ein large Textabsatz. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

InlineElements

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein normaler Link ohne Icon zur unbestimmten Verlinkung

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein normaler Link ohne Icon mit viel Text, damit es über zwei Zeilen läuft zur unbestimmten Verlinkung

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein normaler Link mit SVG Icon mit viel Text, damit es über zwei Zeilen läuft zur unbestimmten Verlinkung

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein Icon Only Link

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein interner Icon Link zum verlinken auf einen Seiteabschnitt.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein Section Icon Link mit einem langen Text und Zeilenumbruch, Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. zum verlinken auf eine interne Seite

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein externer icon Link zum verlinken auf eine externe Seite

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein download Link PDF, 50 KB zum verlinken auf ein Download

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein E-Mail Link zum verlinken auf eine E-Mail Adresse

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. At vero eos et accusam et justo duo dolores et ea rebum. Es folgt ein Telefon Link zum verlinken auf eine Telefonnummer

Es folgt ein expliziter interner Link mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite

Es folgt ein expliziter Section Link zum verlinken auf einen Seiteabschnitt

Es folgt ein expliziter externer Link zum verlinken auf eine externe Seite

Es folgt ein expliziter download Link zum verlinken auf ein Download

Es folgt ein expliziter E-Mail Link zum verlinken auf eine E-Mail Adresse

Es folgt ein expliziter Telefon Link zum verlinken auf eine Telefonnummer

Es folgt ein expliziter Fax Link zum verlinken auf eine Faxnummer

Es folgt ein Link mit Tooltip

Es folgt ein interner Link mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite auf Large Text

Es folgt ein interner Link mit einem langen Text und Zeilenumbruch zum verlinken auf eine interne Seite auf Small Text

Dieser Text ist durch em hervorgehoben

Dieser Text ist durch strong hervorgehoben

Das u Element is unterstrichener Text

~~Dieser Text ist als gelöscht markiert~~

~~Dieser Text ist durchgestrichen~~

Das folgende Zeichen ist hochgestellt: ^®

Beispiel für das Zeichen H₂O

Dieser Text ist als small markiert

Beispiel einer Abkürzung: HTML

Das Markierungselement gibt ein Highlight an