<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}}
			</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.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;
			}
		}
	}
}

Header Landingpage

<div class="c-stage--default" data-css="c-stage">
	<div class="stage__wrapper">
		<div class="stage__image-section-wrapper">
			<div class="stage__image-section">
				<figure class="c-figure--header-landingpage" data-css="c-figure" data-js-module="true">
					<div class="figure__wrapper">
						<picture class="c-picture--animated-objects
									 lazyload" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source data-srcset="
									 https://via.placeholder.com/400x200  400w  , 
									 https://via.placeholder.com/800x400  800w  , 
									 https://via.placeholder.com/1600x800  1600w  " sizes=" 
									  (min-width:1440px) 1440px 
									  ,   100% " media=" (min-width:1024px)" />
							<source data-srcset="
									 https://via.placeholder.com/400x200  400w  , 
									 https://via.placeholder.com/800x400  800w  , 
									 https://via.placeholder.com/1600x800  1600w  , 
									 https://via.placeholder.com/2400x1200  2400w  , 
									 https://via.placeholder.com/3200x1600  3200w  " sizes=" 
									   100% " media=" (min-width: 641px)" />
							<source data-srcset="
									 https://via.placeholder.com/400x400  400w  , 
									 https://via.placeholder.com/800x800  800w  , 
									 https://via.placeholder.com/1600x1600  1600w  , 
									 https://via.placeholder.com/2400x2400  2400w  , 
									 https://via.placeholder.com/3200x3200  3200w  " sizes=" 
									   100% " media=" (max-width: 640px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
									 picture__image lazyload" src="https://via.placeholder.com/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
						</picture>
					</div>
				</figure>
			</div>
		</div>
		<div class="grid__container">
			<div class="grid__row">
				<div class="stage__text-box is-bg-dark ">
					<div class="stage__text-box-content">
						<h1 class="stage__text-box-headline">Header Landingpage (H1)</h1>
						<p class="stage__text-box-text">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.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Header Newsroom

<div class="c-stage--newsroom" data-css="c-stage">
	<div class="stage__wrapper">
		<div class="stage__image-section-wrapper">
			<div class="stage__image-section">
				<figure class="c-figure--header-newsroom" data-css="c-figure" data-js-module="true">
					<div class="figure__wrapper">
						<picture class="c-picture--animated-objects
									 lazyload" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source data-srcset="
									 https://via.placeholder.com/400x200  400w  , 
									 https://via.placeholder.com/800x400  800w  , 
									 https://via.placeholder.com/1200x600  1200w  , 
									 https://via.placeholder.com/1600x800  1600w  , 
									 https://via.placeholder.com/2000x1000  2000w  , 
									 https://via.placeholder.com/2400x1200  2400w  , 
									 https://via.placeholder.com/2800x1400  2800w  , 
									 https://via.placeholder.com/3200x1600  3200w  " media=" (min-width:1024px)" />
							<source data-srcset="
									 https://via.placeholder.com/400x200  400w  , 
									 https://via.placeholder.com/800x400  800w  , 
									 https://via.placeholder.com/1200x600  1200w  , 
									 https://via.placeholder.com/1600x800  1600w  , 
									 https://via.placeholder.com/2000x1000  2000w  , 
									 https://via.placeholder.com/2400x1200  2400w  , 
									 https://via.placeholder.com/2800x1400  2800w  , 
									 https://via.placeholder.com/3200x1600  3200w  " media=" (min-width: 641px)" />
							<source data-srcset="
									 https://via.placeholder.com/400x400  400w  , 
									 https://via.placeholder.com/800x800  800w  , 
									 https://via.placeholder.com/1200x1200  1200w  , 
									 https://via.placeholder.com/1600x1600  1600w  , 
									 https://via.placeholder.com/2000x2000  2000w  , 
									 https://via.placeholder.com/2400x2400  2400w  , 
									 https://via.placeholder.com/2800x2800  2800w  , 
									 https://via.placeholder.com/3200x3200  3200w  " media=" (max-width: 640px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
									 picture__image lazyload" src="https://via.placeholder.com/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
						</picture>
					</div>
				</figure>
			</div>
		</div>
		<div class="grid__container">
			<div class="grid__row">
				<div class="stage__text-box is-bg-dark ">
					<div class="stage__text-box-content">
						<h1 class="stage__text-box-headline">Newsroom (Bereich)</h1>
						<p class="stage__text-box-text">Informationen zum Bereich</p>
					</div>
				</div>
				<ul class="stage__link-box">
					<li class="stage__link-box-item">
						<a class="stage__link-box-link" href="newsroom-filter-page.html?stage&#x3D;Forshung">
							<span class="stage__link-box-item-text">Newsroom</span>
						</a>
					</li>
					<li class="stage__link-box-item">
						<a class="stage__link-box-link" href="newsroom-filter-page.html?stage&#x3D;Uni-Campus">
							<span class="stage__link-box-item-text">Press Room</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

Header Event Detail

<div class="c-stage--default" data-css="c-stage">
	<div class="stage__wrapper">
		<div class="stage__image-section-wrapper">
			<div class="stage__image-section">
			</div>
		</div>
		<div class="grid__container">
			<div class="grid__row">
				<div class="stage__event-box is-bg-dark">
					<div class="stage__event-box-content">
						<div class="stage__event-box-dates">
							<div class="stage__event-box-dates-wrapper">
								<div class="stage__event-box-date">
									<span aria-label="24" class="stage__event-box-date-day">24</span>
									<abbr aria-label="Januar" title="Januar" class="stage__event-box-date-month">Jan</abbr>
								</div>
								<div class="stage__event-box-date is-connector">
									<abbr aria-label="bis" title="bis" class="stage__event-box-date-connect">&mdash;</abbr>
								</div>
								<div class="stage__event-box-date">
									<span aria-label="27" class="stage__event-box-date-day">27</span>
									<abbr aria-label="Januar" title="Januar" class="stage__event-box-date-month">Jan</abbr>
								</div>
							</div>
						</div>
						<div class="stage__event-box-content-wrapper">
							<h1 class="stage__event-box-headline">Header Event Detail (H1)</h1>
							<div class="stage__event-box-content-column is-first">
								<h2 class="stage__event-box-content-column-headline">Öffnungszeiten / Beginn:</h2>
								<dl class="stage__event-box-content-column-definition-list">
									<dt class="stage__event-box-content-column-definition-term">Di bis So:</dt>
									<dd class="stage__event-box-content-column-definition">13.00 - 17.00 Uhr</dd>
								</dl>
								<p class="stage__event-box-content-column-paragraph">24. Januar 2018 - 27. Januar 2018</p>
							</div>
							<div class="stage__event-box-content-column">
								<h2 class="stage__event-box-content-column-headline">Veranstaltungsort:</h2>
								<address class="stage__event-box-content-column-address">
									<span class="stage__event-box-content-column-addressline">Museum Reich der Kristalle</span>
									<span class="stage__event-box-content-column-addressline">Mineraogisches Staatssammlung München</span>
									<span class="stage__event-box-content-column-addressline">Theresienstraße 41</span>
									<span class="stage__event-box-content-column-addressline is-city">80333 München</span>
								</address>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Header Verteilerseite

<div class="c-stage--default" data-css="c-stage">
	<div class="stage__wrapper">
		<div class="stage__image-section-wrapper">
			<div class="stage__image-section">
				<figure class="c-figure--header-distrubutorpage" data-css="c-figure" data-js-module="true">
					<div class="figure__wrapper">
						<picture class="c-picture--animated-objects
									 lazyload" data-css="c-picture">
							<!--[if IE 9]><audio><![endif]-->
							<source data-srcset="
									 https://via.placeholder.com/400x195  400w  , 
									 https://via.placeholder.com/800x389  800w  , 
									 https://via.placeholder.com/1600x777  1600w  , 
									 https://via.placeholder.com/2400x1166  2400w  , 
									 https://via.placeholder.com/3200x1554  3200w  " sizes=" 
									  (min-width:1440px) 1440px 
									  ,   100% " media=" (min-width:1024px)" />
							<source data-srcset="
									 https://via.placeholder.com/400x200  400w  , 
									 https://via.placeholder.com/800x400  800w  , 
									 https://via.placeholder.com/1600x800  1600w  , 
									 https://via.placeholder.com/2400x1200  2400w  , 
									 https://via.placeholder.com/3200x1600  3200w  " sizes=" 
									   100% " media=" (min-width: 641px)" />
							<source data-srcset="
									 https://via.placeholder.com/400x400  400w  , 
									 https://via.placeholder.com/800x800  800w  , 
									 https://via.placeholder.com/1600x1600  1600w  , 
									 https://via.placeholder.com/2400x2400  2400w  , 
									 https://via.placeholder.com/3200x3200  3200w  " sizes=" 
									   100% " media=" (max-width: 640px)" />
							<!--[if IE 9]></audio><![endif]-->
							<img class="
									 picture__image lazyload" src="https://via.placeholder.com/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
						</picture>
					</div>
				</figure>
			</div>
		</div>
		<div class="grid__container">
			<div class="grid__row">
				<div class="stage__text-box is-bg-white  is-top-left">
					<div class="stage__text-box-content">
						<h1 class="stage__text-box-headline">HM5 | Header Verteilerseite</h1>
						<p class="stage__text-box-text">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.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>