Regelung

Allgemein:

• Der Werbe-Layer ist in der Breite variabel und in der Höhe fest. Er ist geeignet für die responsive Werbung mit HTML 5/CSS3.
• Die maximale Breite beträgt 1260 Pixel.
• Die maximale Gesamthöhe (Kopfzeile und Content-Bereich) beträgt 720 Pixel.
• Die Größe des Layers richtet sich nach der Größe der dargestellten Werbung.
• Nach dem Einscrollen steht der Layer zentriert im Content-Bereich mit Abstand nach oben und unten (von jeweils 100 Pixeln in der Desktop-Ansicht).

Aufbau des Layers:

• Die Kopfzeile besteht aus der Kennzeichnung „Anzeige“ und dem X-Button zum Schließen des Layers. Die Höhe beträgt 40 Pixel.
• Im Content-Bereich wird die Werbe-Anzeige gespielt. Die maximale Höhe beträgt 680 Pixel.
• Standardhintergrund: #ffffff (weiß).
• Hintergrund „Kopfzeile“: #00335f (dunkelblau).
• Typografie „Kopfzeile“: Open Sans Normal 400.
• Schriftgröße: 16 pt.
• Schriftfarbe: #ffffff (weiß).
• Layer-Schatten CSS: box-shadow: 0 Pixel, 0 Pixel, 20 Pixel, 0 Pixel, rgba (0, 0, 0, 0.2).

Verhalten des Layers:

• Der Layer ist beim Aufruf der entsprechenden Seite im Off-Canvas.
• Scrollt man auf der Seite zum Ende eines Textes oder Abschnitts, schiebt sich der Layer mit der Scrollbewegung von links in den Sichtbereich.
• Der Layer scrollt weiter über den Content.
• Der Layer positioniert sich vertikal zentriert über den Text beziehungsweise im Content.
• Mit einem Click auf den X-Button kann der Layer wieder geschlossen werden. Wahlweise kann man einfach weiter scrollen.

Responsives Verhalten:

• Ist die Breite des Browser-Fensters beziehungsweise des Viewports geringer als die maximale Breite des Werbe-Layers, so wird er mit einer Breite von 100 Prozent und mit einem Randabstand von 30 Pixeln angezeigt.
• Auf mobilen Endgeräten unter der Größe eines Tablets beträgt der Abstand zum Rand 15 Pixel - unabhängig von der Ansicht (Portrait oder Landscape).
• Die Höhe des Layers passt sich dabei an den Inhalt (der Werbung) an, damit diese möglichst optimal dargestellt werden kann.