Demo Section

Each variation will be presented in the following section.

Header Landingpage

Alternative text that describes the image

Header Landingpage (H1)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque e.

Header Newsroom

Newsroom (Bereich)

Informationen zum Bereich

Header Event Detail

24 Jan

—

27 Jan

Header Event Detail (H1)

Öffnungszeiten / Beginn:

Di bis So:: 13.00 - 17.00 Uhr

24. Januar 2018 - 27. Januar 2018

Veranstaltungsort:

Museum Reich der Kristalle Mineraogisches Staatssammlung München Theresienstraße 41 80333 München

Header Verteilerseite

HM5 | Header Verteilerseite

Header Landingpage with Slider

Header Landingpage (H1) with Slider

Diese Variante erweitert den Landingpage-Header um die Option einen Slider in den Bildbereich zu integrieren. Bei dieser Variante könnte man auch eine Sliderlösung mit autoplay einbauen. (siehe auch Modul Slider)

Readme

stage (`component`)

Description

Content header in three variants:

with dark colored textbox (stage-text-box.hbs)
with dark colored eventbox (stage-event-box.hbs)
with white colored textbox (stage-text-box.hbs)
with green colored linkbox (stage-link-box.hbs)

JIRA

LMU-154

Requirements

@veams/component-figure - Figure component in Veams.

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/stage

Fields

`stage.hbs`

Settings

Parameter	Type	Default	Description
settings.stageClasses	String	`''`	Modifier classes for component
settings.stageContextClass	String	`'default'`	Context class of component

Content

Parameter	Type	Description
content.slider	Boolean	‘false’
content.figure	Object	Data for embedded figure component
content.textBox	Object	Data for text box
content.eventBox	Object	Data for event box

`stage__text-box.hbs`

Settings

Parameter	Type	Default	Description
settings.bgWhite	String	`''`	Modifier for background of the stage-text-box
settings.bgDark	String	`''`	Modifier for background of the stage-text-box
settings.modifierPosition	String	`''`	Modifier class for positioning of textbox to the top/left

Content

Parameter	Type	Description
content.headline	String	Headline from the stage-text-box
content.paragraph	String	Paragraph from the stage-text-box

`stage__event-box.hbs`

Content

Parameter	Type	Description
content.dates	Array	Data for the date
content.headline	String	Headline
content.openingHoursHeadline	String	Headline for the opening hours
content.openingDays	String	Opening day
content.openingHours	String	Opening hours
content.openingDate	String	Opening date
content.eventLocation	String	Headline for the location
content.addressLine1	String	Address line
content.addressLine2	String	Address line
content.addressLine3	String	Address line
content.addressLine4	String	Address line

`stage__event-box-dates.hbs`

Content

Parameter	Type	Description
content.dateDay	String	Day
content.dateMonth	String	Month
content.dateMonthAbbr	String	Abbreviation for month

`stage__link-box.hbs`

Content

Parameter	Type	Description
content.items	Array	Data for the links

`stage__link-box-item.hbs`

Settings

Parameter	Type	Default	Description
settings.itemClasses	String	`''`	Modifier classes for the item
settings.linkClasses	String	`''`	Modifier classes for the link

Content

Parameter	Type	Description
content.linkHref	String	Location the link points to
content.linkText	String	Text of the link

`stage__slider.hbs`

Includes a modul from the ‘slider’. Content Element slider must be ‘true’ in the json-File. The corresponding slider is from type ‘head’ and get the specific Picture information vom the Modul slider

Templates

stage.hbs

<div class="c-stage{{#if settings.stageContextClass}}--{{settings.stageContextClass}}{{else}}--default{{/if}}{{#if
		settings.stageClasses}} {{settings.stageClasses}}{{/if}}" data-css="c-stage">
	<div class="stage__wrapper">
		<div class="stage__image-section-wrapper">
			<div class="stage__image-section">
				{{#with content.figure}}
					{{> figure}}
				{{/with}}
				{{#with content.slider}}
					{{> stage__slider }}
				{{/with}}
			</div>
		</div>

		{{#wrapWith "grid__container"}}
			{{#wrapWith "grid__row"}}
				{{#with content.textBox }}
					{{> stage__text-box }}
				{{/with}}

				{{#with content.eventBox }}
					{{> stage__event-box }}
				{{/with}}

				{{#with content.linkBox }}
					{{> stage__link-box }}
				{{/with}}
			{{/wrapWith}}
		{{/wrapWith}}
	</div>
</div>

stage__event-box.hbs

<div class="stage__event-box is-bg-dark">
	<div class="stage__event-box-content">
		{{#with content}}
			<div class="stage__event-box-dates">
				<div class="stage__event-box-dates-wrapper">
				{{#each dates}}
					{{> stage__event-box-dates}}
				{{/each}}
				</div>
			</div>

			<div class="stage__event-box-content-wrapper">
				<h1 class="stage__event-box-headline">{{headline}}</h1>

				<div class="stage__event-box-content-column is-first">
					<h2 class="stage__event-box-content-column-headline">{{openingHoursHeadline}}</h2>
					<dl class="stage__event-box-content-column-definition-list">
						<dt class="stage__event-box-content-column-definition-term">{{openingDays}}</dt>
						<dd class="stage__event-box-content-column-definition">{{openingHours}}</dd>
					</dl>
					<p class="stage__event-box-content-column-paragraph">{{openingDate}}</p>
				</div>

				<div class="stage__event-box-content-column">
					<h2 class="stage__event-box-content-column-headline">{{eventLocation}}</h2>
					<address class="stage__event-box-content-column-address">
						<span class="stage__event-box-content-column-addressline">{{addressLine1}}</span>
						<span class="stage__event-box-content-column-addressline">{{addressLine2}}</span>
						<span class="stage__event-box-content-column-addressline">{{addressLine3}}</span>
						<span class="stage__event-box-content-column-addressline is-city">{{addressLine4}}</span>
					</address>
				</div>
			</div>
		{{/with}}
	</div>
</div>

stage__event-box-dates.hbs

{{#if @last}}
	{{#unless @first}}
		<div class="stage__event-box-date is-connector">
			<abbr aria-label="bis" title="bis" class="stage__event-box-date-connect">&mdash;</abbr>
		</div>
	{{/unless}}
{{/if}}
<div class="stage__event-box-date">
	<span aria-label="{{content.dateDay}}" class="stage__event-box-date-day">{{content.dateDay}}</span>
	<abbr aria-label="{{content.dateMonth}}" title="{{content.dateMonth}}" class="stage__event-box-date-month">{{content.dateMonthAbbr}}</abbr>
</div>

stage__text-box.hbs

<div class="stage__text-box{{#if settings.bgWhite}} is-bg-white{{/if}}{{#if settings.bgDark}} is-bg-dark{{/if}} {{#if settings.modifierPosition}} is-top-left{{/if}}">
	{{#with content}}
	<div class="stage__text-box-content">
		<h1 class="stage__text-box-headline">{{headline}}</h1>
		<p class="stage__text-box-text">{{paragraph}}</p>
	</div>
	{{/with}}
</div>

stage__link-box.hbs

<ul class="stage__link-box">
	{{#each content.items }}
		{{> stage__link-box-item }}
	{{/each}}
</ul>

stage__link-box-item.hbs

<li class="stage__link-box-item{{#if settings.itemClasses}} {{itemClasses}}{{/if}}">
	<a class="stage__link-box-link{{#if settings.linkClasses}} {{linkClasses}}{{/if}}" href="{{content.linkHref}}">
		<span class="stage__link-box-item-text">{{content.linkText}}</span>
	</a>
</li>

stage__slider.hbs

{{! wrapWith START: Slider }}

{{#deepMerge @root.slider.variations.head
			with='{"settings": {"sliderContextClass": "head"}, "content":{"headline": null, "introText": null}}'
			arrayMerge="overwrite"}}

			{{#wrapWith "slider" settings=this.settings content=this.content}}
			{{! WrapWith START: Slider List }}
			{{#wrapWith "slider__list" settings=this.settings}}

			{{#wrapWith "slider__item"}}
			{{#deepMerge @root.slider.variations.head.content.sliderPicture
			with='{"settings": {"ariaDescribedBy": "image-description-1"}}'
			arrayMerge="extend"}}
			{{> picture }}
			{{/deepMerge}}
			{{/wrapWith}}

			{{#wrapWith "slider__item"}}
			{{#deepMerge @root.slider.variations.head.content.sliderPicture
			with='{"settings": {"ariaDescribedBy": "image-description-2"}}'
			arrayMerge="extend"}}
			{{> picture }}
			{{/deepMerge}}
			{{/wrapWith}}

			{{#wrapWith "slider__item"}}
			{{#deepMerge @root.slider.variations.head.content.sliderPicture
			with='{"settings": {"ariaDescribedBy": "image-description-3"}}'
			arrayMerge="extend"}}
			{{> picture }}
			{{/deepMerge}}
			{{/wrapWith}}

			{{#wrapWith "slider__item"}}
			{{#deepMerge @root.slider.variations.head.content.sliderPicture
			with='{"settings": {"ariaDescribedBy": "image-description-4"}}'
			arrayMerge="extend"}}
			{{> picture }}
			{{/deepMerge}}
			{{/wrapWith}}

			{{#wrapWith "slider__item"}}
			{{#deepMerge @root.slider.variations.head.content.sliderPicture
			with='{"settings": {"ariaDescribedBy": "image-description-5"}}'
			arrayMerge="extend"}}
			{{> picture }}
			{{/deepMerge}}
			{{/wrapWith}}

			{{/wrapWith}}
			{{! WrapWith END: Slider List }}
			{{/wrapWith}}
			{{/deepMerge}}
{{! wrapWith END: Slider}}

Data File

stage.hjson

{
	"title": "Stage",
	"variations": {
		"landingpage": {
			"docs": {
				"variationName": "Header Landingpage"
			},
			"settings": {
				"stageContextClass": "default",
				"stageClasses": false
			},
			"content": {
				"figure": {
					"settings": {
						"figureId": false,
						"figureContextClass": "header-landingpage",
						"figureJsModule": true
					},
					"content": {
						"figurePicture": {
							"settings": {
								"pictureContextClass": "animated-objects",
								"pictureClasses": false,
								"lazyload": true,
								"autoSizes": true
							},
							"content": {
								"fallbackSrc": "https://placehold.co/40x40",
								"alt": "Alternative text that describes the image",
								"items": [
									{
										"srcset": [
											{
												"src": "https://placehold.co/600x300",
												"imageWidth": "600w"
											},
											{
												"src": "https://placehold.co/1200x600",
												"imageWidth": "1200w"
											},
											{
												"src": "https://placehold.co/2400x1200",
												"imageWidth": "2400w"
											}
										],
										"media": "(min-width: 641px)",
										"sizes": [
											{
												"screenWidth": "(min-width:1440px)",
												"imageWidth": "1440px"
											},
											{
												"screenWidth": "",
												"imageWidth": "100vw"
											}
										]
									},
									{
										"srcset": [
											{
												"src": "https://placehold.co/300x300",
												"imageWidth": "300w"
											},
											{
												"src": "https://placehold.co/600x600",
												"imageWidth": "600w"
											},
											{
												"src": "https://placehold.co/1200x1200",
												"imageWidth": "1200w"
											}
										],
										"media": "(max-width: 640px)",
										"sizes": [
											{
												"screenWidth": "",
												"imageWidth": "100vw"
											}
										]
									}
								]
							}
						}
					}
				},
				"textBox": {
					"settings": {
						"bgDark": true
					},
					"content": {
						"headline": "Header Landingpage (H1)",
						"paragraph":
							"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque e."
					}
				}
			}
		},
		"newsroom": {
			"docs": {
				"variationName": "Header Newsroom"
			},
			"settings": {
				"stageContextClass": "newsroom",
				"stageClasses": false
			},
			"content": {
				"figure": {
					"settings": {
						"figureId": false,
						"figureContextClass": "header-newsroom",
						"figureJsModule": true
					},
					"content": {
						"figurePicture": {
							"settings": {
								"pictureContextClass": "animated-objects",
								"pictureClasses": false,
								"lazyload": true,
								"autoSizes": true
							},
							"content": {
								"fallbackSrc": "https://placehold.co/40x40",
								"alt": "Alternative text that describes the image",
								"items": [
									{
										"srcset": [
											{
												"src": "https://placehold.co/400x200",
												"imageWidth": "400w"
											},
											{
												"src": "https://placehold.co/800x400",
												"imageWidth": "800w"
											},
											{
												"src": "https://placehold.co/1200x600",
												"imageWidth": "1200w"
											},
											{
												"src": "https://placehold.co/1600x800",
												"imageWidth": "1600w"
											},
											{
												"src": "https://placehold.co/2000x1000",
												"imageWidth": "2000w"
											},
											{
												"src": "https://placehold.co/2400x1200",
												"imageWidth": "2400w"
											},
											{
												"src": "https://placehold.co/2800x1400",
												"imageWidth": "2800w"
											},
											{
												"src": "https://placehold.co/3200x1600",
												"imageWidth": "3200w"
											}
										],
										"media": "(min-width:1024px)"
									},
									{
										"srcset": [
											{
												"src": "https://placehold.co/400x200",
												"imageWidth": "400w"
											},
											{
												"src": "https://placehold.co/800x400",
												"imageWidth": "800w"
											},
											{
												"src": "https://placehold.co/1200x600",
												"imageWidth": "1200w"
											},
											{
												"src": "https://placehold.co/1600x800",
												"imageWidth": "1600w"
											},
											{
												"src": "https://placehold.co/2000x1000",
												"imageWidth": "2000w"
											},
											{
												"src": "https://placehold.co/2400x1200",
												"imageWidth": "2400w"
											},
											{
												"src": "https://placehold.co/2800x1400",
												"imageWidth": "2800w"
											},
											{
												"src": "https://placehold.co/3200x1600",
												"imageWidth": "3200w"
											}
										],
										"media": "(min-width: 641px)"
									},
									{
										"srcset": [
											{
												"src": "https://placehold.co/400x400",
												"imageWidth": "400w"
											},
											{
												"src": "https://placehold.co/800x800",
												"imageWidth": "800w"
											},
											{
												"src": "https://placehold.co/1200x1200",
												"imageWidth": "1200w"
											},
											{
												"src": "https://placehold.co/1600x1600",
												"imageWidth": "1600w"
											},
											{
												"src": "https://placehold.co/2000x2000",
												"imageWidth": "2000w"
											},
											{
												"src": "https://placehold.co/2400x2400",
												"imageWidth": "2400w"
											},
											{
												"src": "https://placehold.co/2800x2800",
												"imageWidth": "2800w"
											},
											{
												"src": "https://placehold.co/3200x3200",
												"imageWidth": "3200w"
											}
										],
										"media": "(max-width: 640px)"
									}
								]
							}
						}
					}
				},
				"textBox": {
					"settings": {
						"bgDark": true
					},
					"content": {
						"headline": "Newsroom (Bereich)",
						"paragraph":
							"Informationen zum Bereich"
					}
				},
				"linkBox": {
					"settings": {},
					"content": {
						"items": [
							{
								"settings": {
									"linkClasses": "",
									"itemClasses": ""
								},
								"content": {
									"linkHref": "newsroom-filter-page.html?stage=Forshung",
									"linkText": "Newsroom"
								}
							},
							{
								"settings": {
									"linkClasses": "",
									"itemClasses": ""
								},
								"content": {
									"linkHref": "newsroom-filter-page.html?stage=Uni-Campus",
									"linkText": "Press Room"
								}
							}
						]
					}
				}
			}
		},
		"event": {
			"docs": {
				"variationName": "Header Event Detail"
			},
			"settings": {
				"stageContextClass": "default",
				"stageClasses": false
			},
			"content": {
				"eventBox": {
					"settings": {},
					"content": {
						"dates": [
							{
								"content": {
									"dateDay": "24",
									"dateMonth": "Januar",
									"dateMonthAbbr": "Jan"
								}
							},
							{
								"content": {
									"dateDay": "27",
									"dateMonth": "Januar",
									"dateMonthAbbr": "Jan"
								}
							}
						],
						"headline": "Header Event Detail (H1)",
						"openingHoursHeadline": "Öffnungszeiten / Beginn:",
						"openingDays": "Di bis So:",
						"openingHours": "13.00 - 17.00 Uhr",
						"openingDate": "24. Januar 2018 - 27. Januar 2018",
						"eventLocation": "Veranstaltungsort:",
						"addressLine1": "Museum Reich der Kristalle",
						"addressLine2": "Mineraogisches Staatssammlung München",
						"addressLine3": "Theresienstraße 41",
						"addressLine4": "80333 München"
					}
				}
			}
		},
		"distributorPage": {
			"docs": {
				"variationName": "Header Verteilerseite"
			},
			"settings": {
				"stageContextClass": "default",
				"stageClasses": false
			},
			"content": {
				"figure": {
					"settings": {
						"figureId": false,
						"figureContextClass": "header-distrubutorpage",
						"figureJsModule": true
					},
					"content": {
						"figurePicture": {
							"settings": {
								"pictureContextClass": "animated-objects",
								"pictureClasses": false,
								"lazyload": true,
								"autoSizes": true
							},
							"content": {
								"fallbackSrc": "https://placehold.co/40x40",
								"alt": "Alternative text that describes the image",
								"items": [
									{
										"srcset": [
											{
												"src": "https://placehold.co/400x195",
												"imageWidth": "400w"
											},
											{
												"src": "https://placehold.co/800x389",
												"imageWidth": "800w"
											},
											{
												"src": "https://placehold.co/1600x777",
												"imageWidth": "1600w"
											},
											{
												"src": "https://placehold.co/2400x1166",
												"imageWidth": "2400w"
											},
											{
												"src": "https://placehold.co/3200x1554",
												"imageWidth": "3200w"
											}
										],
										"media": "(min-width:1024px)",
										"sizes": [
											{
												"screenWidth": "(min-width:1440px)",
												"imageWidth": "1440px"
											},
											{
												"screenWidth": "",
												"imageWidth": "100%"
											}
										]
									},
									{
										"srcset": [
											{
												"src": "https://placehold.co/400x200",
												"imageWidth": "400w"
											},
											{
												"src": "https://placehold.co/800x400",
												"imageWidth": "800w"
											},
											{
												"src": "https://placehold.co/1600x800",
												"imageWidth": "1600w"
											},
											{
												"src": "https://placehold.co/2400x1200",
												"imageWidth": "2400w"
											},
											{
												"src": "https://placehold.co/3200x1600",
												"imageWidth": "3200w"
											}
										],
										"media": "(min-width: 641px)",
										"sizes": [
											{
												"screenWidth": "",
												"imageWidth": "100%"
											}
										]
									},
									{
										"srcset": [
											{
												"src": "https://placehold.co/400x400",
												"imageWidth": "400w"
											},
											{
												"src": "https://placehold.co/800x800",
												"imageWidth": "800w"
											},
											{
												"src": "https://placehold.co/1600x1600",
												"imageWidth": "1600w"
											},
											{
												"src": "https://placehold.co/2400x2400",
												"imageWidth": "2400w"
											},
											{
												"src": "https://placehold.co/3200x3200",
												"imageWidth": "3200w"
											}
										],
										"media": "(max-width: 640px)",
										"sizes": [
											{
												"screenWidth": "",
												"imageWidth": "100%"
											}
										]
									}
								]
							}
						}
					}
				},
				"textBox": {
					"settings": {
						"bgWhite": true,
						"modifierPosition": true
					},
					"content": {
						"headline": "HM5 | Header Verteilerseite",
						"paragraph":
							"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque e."
					}
				}
			}
		},
		"landingpageslider": {
			"docs": {
				"variationName": "Header Landingpage with Slider"
			},
			"settings": {
				"stageContextClass": "default",
				"stageClasses": false
			},
			"content": {
				"slider": true,
				"textBox": {
					"settings": {
						"bgDark": true
					},
					"content": {
						"headline": "Header Landingpage (H1) with Slider",
						"paragraph":
							"Diese Variante erweitert den Landingpage-Header um die Option einen Slider in den Bildbereich zu integrieren. Bei dieser Variante könnte man auch eine Sliderlösung mit autoplay einbauen. (siehe auch Modul Slider)"
					}
				}
			}
		}

	}
}

Styles

stage.scss

/* ===================================================
component: stage
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-stage"] {
	width: 100%;
	position: relative;
	margin: 0 auto 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}

	.stage__wrapper {
		@include clearfix();

		position: relative;
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		@include bp($bp-tablet-p) {
			display: block;
		}
	}

	.stage__image-section-wrapper {
		max-width: $max-width;
		margin: 0 auto;
		width: 100%;

		@include print() {
			display: none;
		}
	}

	.stage__image {
		position: relative;
		z-index: 0;
		width: calc(100% - .5px);
	}

	/*
	TEXT BOX
	----------------------- */
	.stage__text-box {
		@include grid-column-width(12);

		position: relative;
		display: flex;

		@include bp($bp-tablet-p) {
			@include grid-column-width(8);
		}

		@include bp($bp-tablet-l) {
			@include grid-column-width(6);
		}

		&.is-bg-white {

			* {
				color: $color-dark;
			}
		}

		&.is-top-left {
			@include grid-column-width(13);
			@include grid-magnet(5, top, true);
			@include grid-magnet(1, left, true);

			@include bp(641px) {
				@include grid-column-width(12);
				@include grid-magnet(3, top, true);
			}

			@include bp($bp-tablet-p) {
				@include grid-column-width(8);
				@include grid-magnet(3, top, true);
				@include grid-magnet(1, left, true);
			}

			@include bp($bp-tablet-l) {
				@include grid-column-width(6);

				position: absolute;
				left: 0;
				top: 0;
				padding: 0;
				height: auto;
				margin-top: 0;
				margin-left: 0;
			}

			@include bp($bp-desktop-l + 1px) {
				@include grid-column-width(5);

				left: auto;
			}

			.stage__text-box-content {

				@include bp($bp-tablet-l) {
					background: $color-white;
					height: auto;
				}
			}

			@include print() {
				position: relative;
				margin-top: 0;
			}
		}
	}

	.stage__text-box-content {
		@include grid-push-h(1);

		position: relative;
		width: 100%;
		padding: 30px;
		padding-bottom: 5px;
		padding-left: 1%;

		@include bp($bp-tablet-p) {
			@include grid-push-h(1);

			padding-left: 5%;
		}

		@include bp($bp-tablet-l) {
			@include grid-push-h-wide(2);

			padding: 60px;
			padding-left: 0;
			padding-bottom: 35px;
		}

		@include bp($bp-desktop-l + 1px) {
			margin-left: 0;
			padding: 60px;
			padding-bottom: 30px;
		}

		@include print() {
			position: relative;
			margin-left: 0;
			padding-left: 0;
		}
	}

	.stage__text-box-headline {
		@include headline-h1-styles();

		color: $color-white;

		@include bp($bp-mobile-p) {
			margin-bottom: 25px;
		}
	}

	.stage__text-box-text {
		font-family: $font-light;
		font-size: 1.9rem;
		line-height: (28/19);
		letter-spacing: .25px;
		color: $color-white;
		margin-bottom: 25px;

		@include bp($bp-tablet-l) {
			font-size: 2rem;
			line-height: (30/20);
		}

		@include bp($bp-desktop-l) {
			font-size: 2rem;
			line-height: (30/20);
			margin-bottom: 30px;
		}
	}

	/*
	EVENT BOX
	----------------------- */
	.stage__event-box {
		width: 100%;

		position: relative;

		@include bp($bp-tablet-p) {
			@include grid-column-wide(14);
		}

		@include bp($bp-tablet-l) {
			@include grid-column-wide(11);
		}

		@include print() {
			border: 1px solid $color-dark;
		}

		&::before {
			@include pseudo();

			width: 100vw;
			height: 100%;
			background-color: $color-dark;
			left: -50vw;

			@include print() {
				display: none;
			}
		}
	}

	.stage__event-box-content {
		position: relative;
		display: flex;
		width: 100%;
		padding: 30px 30px 30px 0;
		flex-direction: column;

		@include bp($bp-tablet-p) {
			padding: 55px 55px 55px 0;
			flex-direction: row;
		}

		@include print() {
			border: 1px solid $color-dark;
			padding: 30px;
		}
	}

	.stage__event-box-content-wrapper {

		@include bp($bp-tablet-l) {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
	}

	.stage__event-box-headline {
		@include headline-h1-styles();

		color: $color-white;

		@include bp($bp-tablet-l) {
			flex: 0 0 calc(100%);
		}
	}

	.stage__event-box-text {
		font-family: $font-regular;
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .25px;
		color: $color-white;
		margin-bottom: 25px;

		@include bp($bp-desktop-l) {
			font-size: 1.6rem;
			line-height: (24/16);
			margin-bottom: 30px;
		}
	}

	.stage__event-box-dates {
		display: flex;
		margin-bottom: 40px;

		@include bp($bp-tablet-p) {
			display: inline-block;
		}
	}

	.stage__event-box-dates-wrapper {
		border: 1px solid $color-white;
		padding: 15px 15px 12px;
		margin-right: 40px;

		@include print() {
			border: 1px solid $color-dark;
		}
	}

	.stage__event-box-date {
		display: table-cell;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		vertical-align: top;
	}

	.stage__event-box-date-day {
		font-family: $font-bold;
		font-weight: 700;
		font-size: 2.3rem;
		line-height: (17/23);
		color: $color-white;
		display: block;
		transition: color $animation-duration-std $animation-easing-std;

		@include bp($bp-tablet-l) {
			font-size: 2.8rem;
			line-height: (21/28);
		}

		@include bp($bp-desktop-m) {
			font-size: 3.7rem;
			line-height: (27/37);
		}

		&::after {
			@include print() {
				display: none;
			}
		}
	}

	.stage__event-box-date-month {
		margin-top: 5px;
		display: block;
		font-family: $font-bold;
		font-weight: 700;
		font-size: 1.4rem;
		line-height: (17/14);
		color: $color-white;
		text-transform: uppercase;
		text-decoration: none;
		transition: color $animation-duration-std $animation-easing-std;

		@include bp($bp-tablet-l) {
			font-size: 1.8rem;
			line-height: (21/18);
		}

		@include bp($bp-desktop-m) {
			font-size: 2.3rem;
			line-height: (27/23);
		}

		&::after {
			@include print() {
				display: none;
			}
		}
	}

	.stage__event-box-date-connect {
		font-family: $font-bold;
		font-weight: 700;
		font-size: 2rem;
		line-height: (26/20);
		letter-spacing: .2px;
		color: $color-white;
		display: block;
		transition: color $animation-duration-std $animation-easing-std;
		text-decoration: none;
		margin: 0 10px;

		@include bp($bp-tablet-l) {
			font-size: 2.2rem;
		}

		@include bp($bp-desktop-m) {
			font-size: 2.4rem;
		}

		@include bp($bp-desktop-l) {
			font-size: 2.6rem;
		}

		&::after {
			@include print() {
				display: none;
			}
		}
	}

	.stage__event-box-content-column {
		color: $color-white;
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .3px;
		font-family: $font-regular;
		font-weight: 400;

		@include bp($bp-desktop-m) {
			font-size: 1.6rem;
			line-height: (24/16);
		}

		&.is-first {
			margin-bottom: 30px;
		}

		@include bp($bp-tablet-l) {
			@include grid-column(6);

			&.is-first {
				margin-bottom: 0;
			}
		}

	}

	.stage__event-box-content-column-headline {
		@include headline-h5-styles();

		margin-bottom: 10px;
	}

	.stage__event-box-content-column-definition-term {
		display: inline-block;
	}

	.stage__event-box-content-column-definition {
		display: inline-block;
	}

	.stage__event-box-content-column-addressline {
		display: block;

		&.is-city {

			@include bp($bp-tablet-p) {
				margin-top: 12px;
			}
		}
	}

	/*
	LINK BOX
	----------------------- */
	.stage__link-box {
		@include grid-column-width(12);

		position: relative;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		@include bp($bp-tablet-p) {
			@include grid-column-width(6);

		}

		@include bp($bp-tablet-l+1) {
			@include grid-column-width(6);
			@include grid-magnet(6, left, false);

		}

		@include print() {
			display: none;
		}
	}

	.stage__link-box-item {
		display: flex;
		flex: 0 0 100%;
		text-align: center;

		@include bp($bp-tablet-l+1) {
			flex: 0 0 50%;
		}

		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { //IE10
			display: block;
		}

		/*
		MODIFIERS
		----------------------- */
		&:nth-child(2n+0) {

			.stage__link-box-link {
				border-top: 0;

				@include bp($bp-tablet-l+1) {
					border-left: 0;
					border-top: 5px solid $color-green;
				}
			}
		}
	}

	.stage__link-box-link {
		background-color: $color-white;
		color: $color-green;
		text-decoration: none;
		display: flex;
		flex: 0 100%;
		align-items: center;
		justify-content: center;
		border: 3px solid $color-green;
		font-family: $font-bold;
		font-size: 2rem;
		line-height: (28/20);
		letter-spacing: .3px;
		transition: background-color $animation-duration-std $animation-easing-std, color $animation-duration-std $animation-easing-std;
		padding: 15px;
		word-break: break-word;

		@include bp($bp-desktop-l) {
			padding: 20px 25px;
		}

		/*
		MODIFIERS
		----------------------- */
		&:hover,
		&:focus,
		&.a11y-focus-key {
			background-color: $color-green;
			color: $color-white;

			.stage__link-box-item-text {
				position: relative;

				&::before {
					@include sprites-icon-arrow-white();
					transform: translateX(5px);
				}
			}

			@include hcm() {
				text-decoration: underline;
			}
		}

		&.a11y-focus-key {
			@include a11y-focus-key();
		}
	}

	.stage__link-box-item-text {
		position: relative;
		padding-left: 30px;
		display: inline-block;
		text-align: left;
		word-break: break-word;
		word-wrap: break-word;

		@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { //IE10
			max-width: 200px;
		}

		&::before {
			@include pseudo();
			@include sprites-icon-arrow-green100();
			left: 0px;
			top: calc(50% - 7px);
			transition: transform $animation-duration-std $animation-easing-std;
			display: block;
		}
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-stage--default {

	.stage__text-box {
		@include grid-column-width(12);
		@include grid-magnet(4, top, true);

		/* Wegen Bildformatwechsel bei 641px von 1:1 zu 2:1 nötig */
		@include bp(641px) {
			@include grid-column-width(12);
			@include grid-magnet(2, top, true);
		}

		@include bp($bp-tablet-p) {
			@include grid-column-width(8);
			@include grid-magnet(2, top, true);
		}

		@include bp($bp-tablet-l) {
			@include grid-column-width(6);
			@include grid-magnet(3, top, true);
		}

		@include print() {
			width: auto;
			flex: none;
			margin-top: 0;
			display: block;
		}
	}
}

/* ---------------------------------------------------
Context: Newsroom
--------------------------------------------------- */
.c-stage--newsroom {

	.stage__link-box-item {

		@include bp($bp-tablet-l+1) {
			flex: 0 0 100%;
		}

		@include bp($bp-tablet-l+80) {
			flex: 0 0 50%;
		}

		&:nth-child(2n+0) {

			.stage__link-box-link {
				border-top: 0;

				@include bp($bp-tablet-l+1) {
					border-left: 3px solid $color-green;
					border-top: 0px;
				}

				@include bp($bp-tablet-l+80) {
					border-left: 0;
					border-top: 3px solid $color-green;
				}
			}
		}
	}

	.stage__text-box {
		@include grid-column-width(12);
		@include grid-magnet(4, top, true);
		/* Wegen Bildformatwechsel bei 641px von 1:1 zu 2:1 nötig */
		@include bp(641px) {
			@include grid-column-width(12);
			@include grid-magnet(1, top, true);
		}

		@include bp($bp-tablet-p) {
			@include grid-column-width(6);
			@include grid-magnet(2, top, true);
			float: left;
		}

		@include bp($bp-tablet-l+1) {
			@include grid-column-width(6);
			@include grid-magnet(2, top, true);
		}

		@include print() {
			width: auto;
			flex: none;
			margin-top: 0;
			display: block;
		}

		.stage__text-box-content {
			@include bp($bp-tablet-p) {
				min-height: 300px;
			}
			@include bp($bp-tablet-l) {
				min-height: 0;
			}
		}
	}
}

HTML Output