<div class="c-stage-frontpage{{#if settings.stageFrontpageContextClass}}--{{settings.stageFrontpageContextClass}}{{else}}--default{{/if}}{{#if settings.stageFrontpageClasses}} {{settings.stageFrontpageClasses}}{{/if}}"
     data-css="c-stage-frontpage">
	{{#wrapWith "grid__container"}}
		<div class="stage-frontpage__image-wrapper">
			{{#with content.figure}}
			{{> figure}}
			{{/with}}
			{{#with content.slider}}
			{{> stage-frontpage__slider }}
			{{/with}}

		</div>
		<div class="stage-frontpage__row">
			{{#with content.imgtitle}}
				{{> stage-frontpage__imgtitle }}
			{{/with}}
			{{#with content.largeTeaser}}
				{{> stage-frontpage__large-teaser }}
			{{/with}}
			{{#with content.linkBox}}
				{{> stage-frontpage__link-box }}
			{{/with}}
			{{#if content.teaserCollect}}
			<div class="stage-frontpage__teaser-collect-wrapper">
				{{#each content.teaserCollect }}
					{{> stage-frontpage__teaser-collect }}
				{{/each}}
			</div>
			{{/if}}
		</div>

	{{/wrapWith}}
</div>

stage-frontpage__figure.hbs

{{#with content.figure}}
		{{> figure}}
	{{/with}}

stage-frontpage__slider.hbs

{{! wrapWith START: Slider }}

{{#deepMerge @root.slider.variations.starthead
			with='{"settings": {"sliderContextClass": "starthead"}, "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.starthead.content.sliderPicture
			with='{"settings": {"ariaDescribedBy": "image-description-1"}}'
			arrayMerge="extend"}}
			{{> picture }}
			{{/deepMerge}}
			{{/wrapWith}}

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

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

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

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

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

stage-frontpage__large-teaser.hbs

<div class="stage-frontpage__large-teaser{{#if settings.largeTeaserClasses}} {{settings.largeTeaserClasses}}{{/if}}">
	<div class="stage-frontpage__large-teaser-content {{#if content.image}}is-with-logo{{/if}}{{#if settings.largeTeaserContentClasses}} {{settings.largeTeaserContentClasses}}{{/if}}"  {{#if settings.data-bgcolor}}style="background-color:{{settings.data-bgcolor}};{{#if settings.data-color}}color:{{settings.data-bgcolor}};{{/if}}"{{/if}}>
		{{#if content.image}}
			<div class="stage-frontpage__large-teaser-content-logo">
				<img src="{{content.image.content.imageurl}}" class="{{content.image.settings.imageContextClass}}">
			</div>
		{{/if}}
		<h1 class="stage-frontpage__headline"{{#if settings.data-color}} style="color:{{settings.data-color}};"{{/if}}>
		{{#if content.preheadlinehdinfo}}
			<span class="stage-frontpage__preheadlinehdinfo">{{content.preheadlinehdinfo}}</span>
		{{/if}}
		{{#if content.preheadlinehdsubinfo}}
			<span class="stage-frontpage__preheadlinehdsubinfo">{{content.preheadlinehdsubinfo}}</span>
		{{/if}}
		{{#if content.preheadlineinfo}}
		<span class="stage-frontpage__preheadlineinfo">{{content.preheadlineinfo}}</span>
		{{/if}}
		{{#if content.postheadlinehdinfo}}
			<span class="stage-frontpage__postheadlinehdinfo">{{content.postheadlinehdinfo}}</span>
		{{/if}}
		{{content.headline}}</h1>
		{{#each content.paragraphs}}
			{{> stage-frontpage__large-teaser-paragraph }}
		{{/each}}
		{{#with content.link}}
			{{> stage-frontpage__large-teaser-link }}
		{{/with}}
	</div>
</div>

stage-frontpage__large-teaser-link.hbs

<a class="stage-frontpage__large-teaser-link{{#if settings.linkClasses}} {{settings.linkClasses}}{{/if}}" href="{{content.linkHref}}">{{content.linkText}}</a>
<a class="stage-frontpage__large-teaser-a11y-clickarea" href="{{content.linkHref}}" aria-hidden="true" tabindex="-1"></a>

stage-frontpage__large-teaser-paragraph.hbs

<p class="stage-frontpage__large-teaser-paragraph" {{#if settings.data-color}} style="color:{{settings.data-color}};"{{/if}}>{{content.text}}</p>

stage-frontpage__teaser-collect.hbs

<div class="stage-frontpage__teaser-collect{{#if settings.teaserCollectClasses}} {{settings.teaserCollectClasses}}{{/if}}">
	{{#each content.items }}
		{{> stage-frontpage__teaser-item }}
	{{/each}}
</div>

stage-frontpage__teaser-item.hbs

<div class="stage-frontpage__teaser{{#if
		settings.bgBlue}} is-bg-blue{{/if}}{{#if
		settings.bgDark}} is-bg-dark{{/if}}{{#if
		settings.bgLight}} is-bg-light{{/if}}{{#if
			settings.bgGreen}} is-bg-green{{/if}}">
	<div class="stage-frontpage__teaser-content">
		{{#with content.teaser }}
			{{> teaser-single }}
		{{/with}}
	</div>
</div>

stage-frontpage__imgtitle.hbs

<div class="stage-frontpage__imgtitle{{#if settings.imgTitleClasses}} {{settings.imgTitleClasses}}{{/if}}">
	<div class="stage-frontpage__imgtitle-pos">
	{{#if content.imgtitle}}
		<div class="stage-frontpage__imgtitle-main">
			{{content.imgtitle}}
		</div>
	{{/if}}
	{{#if content.imgsubtitle}}
		<div class="stage-frontpage__imgtitle-sub">
			{{content.imgsubtitle}}
		</div>
	{{/if}}
	</div>
</div>

stage-frontpage__link-box.hbs

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

stage-frontpage__link-box-item.hbs

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

stage-frontpage.scss

/* ===================================================
component: stage-frontpage
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-stage-frontpage"] {
	@include clearfix();

	margin: 0 auto 60px;
	display: block;
	overflow: hidden;
	width: 100%;

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

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

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

	.stage-frontpage__wrapper {
		width: 100%;
		margin: 0 auto;
		max-width: 1440px;
	}

	.stage-frontpage__row {
		@include clearfix();
		@include grid-container();
		margin: 0 auto;
	}

	.stage-frontpage__image-wrapper {
		@include print() {
			display: none;
		}
	}

	.stage-frontpage__headline {
		@include headline-h1-styles();

		transition: color $animation-duration-std $animation-easing-std;
	}

	.stage-frontpage__large-teaser-paragraph {
		font-family: $font-light;
		font-size: 1.9rem;
		line-height: (28/19);
		letter-spacing: .25px;
		color: $color-dark;
		margin-bottom: 25px;
		transition: color $animation-duration-std $animation-easing-std;
		flex: 1;

		@include bp(990px) {
			margin-bottom: 5px;
		}

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

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

	.stage-frontpage__large-teaser-link {
		@include hidden-text();

		text-decoration: none;
		display: block;

		@include hcm() {
			font-size: 1.6rem;
			color: $color-dark;
			display: block;
			visibility: visible;
			text-decoration: underline;
		}

		@include print() {
			font-family: $font-regular;
		}

		&::before {
			@include pseudo();
			@include sprites-icon-arrow-green100();

			display: block;
			position: relative;
			transition: transform $animation-duration-std $animation-easing-std;

			@include print() {
				display: none;
			}

		}
	}

	.stage-frontpage__large-teaser-a11y-clickarea {
		@include hidden-text();
		@include clickarea();

		background-color: transparent;
		cursor: pointer;
		border: none;
	}



	/*
	TEASER COLLECT
	----------------------- */
	.stage-frontpage__teaser-collect-wrapper {
		@include clearfix();
	}

	.stage-frontpage__teaser-collect {
		@include clearfix();

		position: relative;

		/*
		MODIFIERS
		----------------------- */
		&.is-first {
			@include grid-column(12);

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

				float: right;
			}

			@include bp(990px) {
				@include grid-column(6);

				float: right;
			}

			.stage-frontpage__teaser {
				@include grid-column(12);

				@include bp($bp-tablet-p) {
					@include grid-box(12);
				}

				@include bp(990px) {
					@include grid-box(6);
				}
			}
		}

		&.is-second {
			@include grid-column(12);

			@include bp($bp-tablet-p) {
				@include grid-column(8);
				@include grid-magnet(3, right, false);

				float: right;
			}

			@include bp(990px) {
				@include grid-column(6);
				@include grid-magnet(2, right, false);

				float: right;
			}

			.stage-frontpage__teaser {
				@include grid-column(12);

				@include bp($bp-tablet-p) {
					@include grid-box(6);
				}

				@include bp(1200px) {
					@include grid-box(6);
				}
			}
		}
	}

	/*
	TEASERS
	----------------------- */
	.stage-frontpage__teaser {
		position: relative;
	}

	.stage-frontpage__teaser-content {
		position: relative;

		@include bp($bp-tablet-p) {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}

	.stage-frontpage__imgtitle {
			width: 100%;
			height: 100%;
	}


}

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

	.stage-frontpage__row {
		max-width: calc(100% - ((100% / 14) * 2));
	}
	/*
	LARGE TEASER
	----------------------- */
	.stage-frontpage__large-teaser {
		@include grid-column(12);
		@include grid-magnet(2, top, true);
		@include grid-magnet(0, right, true, $absolute: true);

		position: relative;
		display: block;

		@include bp($bp-tablet-p) {
			@include grid-column-width(8);
			@include grid-magnet(1, right, true);
			float: right;
			padding-bottom: calc(1% * 86.666);
			margin-top: -20%;
		}


		@include bp(990px) {
			@include grid-box(6);
			@include grid-magnet(3, top, true);
			@include grid-magnet(1, right, true);

			height: auto;
			float: right;
			right: -1px;
			margin-bottom: 0;
		}

		&:hover,
		&.a11y-focus-key {

			&::before {
				opacity: 1;
			}

			.stage-frontpage__headline {
				color: $color-green;
			}

			.stage-frontpage__large-teaser-link {

				&::before {
					transform: translateX(10px);
				}
			}

			.stage-frontpage__large-teaser-paragraph {
				color: $color-green;
			}
		}

		&::before {
			@include pseudo();

			position: absolute;
			top: 0;
			left: 0;
			width: calc(100% - 2px);
			height: calc(100% - 2px);
			display: block;
			border: 1px solid $color-green;
			z-index: 2;
			opacity: 0;
			transition: opacity $animation-duration-std $animation-easing-std;

		}

		@include print() {
			margin-top: 0;
			border: 1px solid $color-gray-border;
		}
	}

	.stage-frontpage__large-teaser-content {
		position: relative;
		padding: 20px;
		background-color: $color-white;

		@include bp($bp-tablet-p) {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 35px 35px 20px;
		}

		@include bp($bp-tablet-l) {
			padding: 40px 40px 20px;
		}

		@include bp($bp-desktop-m) {
			padding: 40px 40px 30px;
		}

		@include bp($bp-desktop-l) {
			padding: 60px 60px 30px;
		}

	}

}

.c-stage-frontpage--bp {

	.stage-frontpage__row {
		max-width: calc(100% - ((100% / 14) * 2));

		@include bp($bp-tablet-p) {
			max-width: calc(100%);
		}
	}

	.stage-frontpage__large-teaser {
		@include grid-column(12);
		@include grid-magnet(2, top, true);
		@include grid-magnet(0, right, true, $absolute: true);

		position: relative;
		display: block;

		@include bp($bp-tablet-p) {
			@include grid-column(6);
			@include grid-magnet(1, right, true);

			height: auto;
			float: right;
			right: -1px;
			margin-bottom: 0;
			margin-right: 0;
		}

		@include print() {
			margin-top: 0;
			border: 1px solid $color-gray-border;
		}
	}

	.stage-frontpage__large-teaser-content {

		position: relative;
		padding: 20px;
		background-color: $color-white;

		@include bp($bp-tablet-p) {
			padding: 40px 40px 20px;
			height: 100%;
			width: 100%;
			display: block;
		}

		@include bp($bp-desktop-m) {
			padding: 40px 40px 30px;
		}

		@include bp($bp-desktop-l) {
			padding: 60px 60px 30px;
		}

		&.is-with-logo {
			@include bp($bp-tablet-l) {
				padding: 25px 40px 20px;
			}
			@include bp($bp-desktop-m) {
				padding: 25px 40px 30px;
			}
			@include bp($bp-desktop-l) {
				padding: 25px 60px 30px;
			}
		}


		.stage-frontpage__large-teaser-content-logo {
			margin-bottom: 25px;
			display: block;
			width: 300px;
			max-height: 100px;
			text-align: left;

			.stage-frontpage__logo {
				width: auto;
				display: block;
				max-height: 100px;
				max-width: 100%;
			}
		}
	}
}

.c-stage-frontpage--einsichten {
	.stage-frontpage__row {
		max-width: calc(100% - ((100% / 14) * 2));
	}

	.stage-frontpage__image-wrapper {
		@include print() {
			display: block;
		}
	}

	.stage-frontpage__imgtitle-pos {
		@include grid-column(12);
		@include grid-magnet(12, top, true);
		@include grid-magnet(0, right, true, $absolute: true);



		@include bp($bp-mobile-p) {
			@include grid-magnet(7, top, true);
		}

		@include bp($bp-tablet-p) {
			@include grid-magnet(6, top, true);
		}

		@include bp($bp-tablet-l) {
			@include grid-magnet(5, top, true);
		}

		@include bp($bp-desktop-m) {
			@include grid-magnet(4, top, true);
		}

		position: relative;
		display: block;
		background-color: transparent;

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

	.stage-frontpage__imgtitle-main {
		text-align: center;
		color: $color-white;
		letter-spacing: 0;
		font-family: $font-serif;
		font-weight: 600;
		font-size: 4.6rem;
		line-height: (64/46);

		@include bp($bp-mobile-p) {
			font-size: 6.8rem;
			line-height: (96/68);
		}

		@include bp($bp-tablet-l) {
			font-size: 9.1rem;
			line-height: (128/91);
		}
	}

	.stage-frontpage__imgtitle-sub {
		text-align: center;
		color: $color-white;
		font-weight: bold;
		letter-spacing: 1.6px;
		font-family: $font-light;

		font-size: 1.5rem;
		line-height: (20/15);

		@include bp($bp-tablet-p) {
			font-size: 1.7rem;
			line-height: (24/17);
		}
	}

	.stage-frontpage__large-teaser {
		@include grid-column(12);
		@include grid-magnet(6, top, true);
		@include grid-magnet(0, right, true, $absolute: true);

		position: relative;
		display: block;


		@include bp($bp-mobile-p) {
			@include grid-magnet(3, top, true);
		}

		@include bp($bp-tablet-p) {
			@include grid-magnet(3, top, true);
		}

		@include bp($bp-tablet-l) {
			@include grid-magnet(2, top, true);
		}


		@include print() {
			margin-top: 0;
			border: 0px;
		}
	}

	.stage-frontpage__large-teaser-content {

		position: relative;
		padding: 20px;
		background-color: $color-white;
		text-align: center;

		&.is-es-color1, &.is-es-color2, &.is-es-color3, &.is-es-color4, &.is-es-color5, &.is-es-color6, &.is-es-color7, &.is-es-color8, &.is-es-color9, &.is-es-color10 {
			color: $color-white;

		}

		&.is-es-color1 {
			//Pomona Green
			background-color: $color-es-green1;
		}

		&.is-es-color2 {
			//Jungle Green
			background-color: $color-es-green2;
		}

		&.is-es-color3 {
			//Indigo Blue
			background-color: $color-es-blue1;
		}

		&.is-es-color4 {
			// Dark Slate Blue
			background-color: $color-es-blue2;
		}

		&.is-es-color5 {
			// Violet
			background-color: $color-es-purple1;
		}

		&.is-es-color6 {
			// Purple
			background-color: $color-es-purple2;
		}

		&.is-es-color7 {
			// Wine
			background-color: $color-es-red1;
		}

		&.is-es-color8 {
			//  Seal Brown
			background-color: $color-es-brown1;
		}

		&.is-es-color9 {
			//  Saddle Brown
			background-color: $color-es-brown2;
		}

		&.is-es-color10 {
			// Olive brown
			background-color: $color-es-brown3;
		}

		@include bp($bp-tablet-p) {
			padding: 40px;
		}

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

	.stage-frontpage__headline {
		margin-bottom: 8px;

		@include bp($bp-tablet-l) {
			margin-bottom: 24px;
		}

	}

	.stage-frontpage__preheadlinehdinfo, .stage-frontpage__preheadlinehdsubinfo, .stage-frontpage__postheadlinehdinfo {
		width: 1px;
		height: 1px;
		overflow: hidden;
		left: -9999px;
		position: absolute;
		display: block;
		text-align: center;

		@include print() {
			position: relative;
			width: auto;
			height: auto;
			left: 0px;
			color: $color-black;
		}
	}

	.stage-frontpage__preheadlineinfo, .stage-frontpage__preheadlinehdinfo, .stage-frontpage__preheadlinehdsubinfo, .stage-frontpage__postheadlinehdinfo {
		font-family: $font-light;
		font-size: 1.5rem;
		line-height: (20/15);
		color: $color-white;
		margin-bottom: 8px;
		transition: color $animation-duration-std $animation-easing-std;
		flex: 1;
		display: block;



		@include bp($bp-tablet-l) {
			font-size: 1.5rem;
			line-height: (20/15);
			margin-bottom: 24px;
		}
	}

	.stage-frontpage__preheadlinehdinfo {
		@include print() {
			letter-spacing: 0;
			font-family: $font-serif;
			font-weight: 600;
			font-size: 6.8rem;
			line-height: (96/68);
			padding: 12px 0px 8px 0px;
		}
	}

	.stage-frontpage__preheadlinehdsubinfo {
		@include print() {
			font-weight: bold;
			letter-spacing: 1.6px;
			font-family: $font-light;

			font-size: 1.7rem;
			line-height: (24/17);
			padding: 0px 0px 8px 0px;
		}
	}

	.stage-frontpage__large-teaser-paragraph {
		margin-bottom: 0px;
		color: $color-white;
	}

	/*
	LINK BOX
	----------------------- */
	.stage-frontpage__link-box {
		clear: both;
		position: relative;
		display: flex;
		flex-flow: column wrap;
		justify-content: flex-start;

		@include bp($bp-tablet-p) {
			flex-flow: row wrap;
			justify-content: flex-end;
			padding-top: 10px;
		}

		@include bp($bp-desktop-m) {
			padding-top: 15px;
		}

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

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

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

		@include bp($bp-tablet-p) {
			flex: 0 0 auto;
		}

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

		/*
		MODIFIERS
		----------------------- */
		&:first-child {


			.stage-frontpage__link-box-link {
				border-top: 3px solid $color-green;

				@include bp($bp-tablet-p) {
					border-left: 3px solid $color-green;
				}
			}
		}

		&.is-filled {
			padding-top: 8px;

			@include bp($bp-tablet-p) {
				padding-left: 8px;
				padding-top: 0;
			}
			.stage-frontpage__link-box-link {
				border: 3px solid $color-green;
			}
		}
	}

	.stage-frontpage__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-left: 3px solid $color-green;
		border-right: 3px solid $color-green;
		border-bottom: 3px solid $color-green;
		font-family: $font-bold;
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .28px;
		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-tablet-p) {
			border-top: 3px solid $color-green;
			border-left: 0px;
		}

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

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

			.stage-frontpage__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();
		}

		&.is-download {
			background-color: $color-green;
			color: $color-white;

			.stage-frontpage__link-box-item-text {

				&::before {
					@include sprites-icon-download-white();

				}
			}

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

				.stage-frontpage__link-box-item-text {

					&::before {
						@include sprites-icon-download-green100();

					}
				}
			}

		}
	}

	.stage-frontpage__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;
		}
	}
}

Default

<div class="c-stage-frontpage--default" data-css="c-stage-frontpage">
	<div class="grid__container">
		<div class="stage-frontpage__image-wrapper">
			<figure class="c-figure--header-frontpage" 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://placehold.co/400x200  400w  , 
							 https://placehold.co/800x400  800w  , 
							 https://placehold.co/1200x600  1200w  , 
							 https://placehold.co/1600x800  1600w  , 
							 https://placehold.co/2000x1000  2000w  , 
							 https://placehold.co/2400x1200  2400w  , 
							 https://placehold.co/2800x1400  2800w  , 
							 https://placehold.co/3200x1600  3200w  " media=" (min-width:1024px)" />
						<source data-srcset="
							 https://placehold.co/300x200  300w  , 
							 https://placehold.co/600x400  600w  , 
							 https://placehold.co/900x600  900w  , 
							 https://placehold.co/1200x800  1200w  , 
							 https://placehold.co/1500x1000  1500w  , 
							 https://placehold.co/1800x1200  1800w  , 
							 https://placehold.co/2100x1400  2100w  , 
							 https://placehold.co/2400x1600  2400w  " media=" (min-width: 641px)" />
						<source data-srcset="
							 https://placehold.co/400x400  400w  , 
							 https://placehold.co/800x800  800w  , 
							 https://placehold.co/1200x1200  1200w  , 
							 https://placehold.co/1600x1600  1600w  , 
							 https://placehold.co/2000x2000  2000w  , 
							 https://placehold.co/2400x2400  2400w  , 
							 https://placehold.co/2800x2800  2800w  , 
							 https://placehold.co/3200x3200  3200w  " media=" (max-width: 640px)" />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
							 picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
		</div>
		<div class="stage-frontpage__row">
			<div class="stage-frontpage__large-teaser">
				<div class="stage-frontpage__large-teaser-content ">
					<h1 class="stage-frontpage__headline">
						HM1 | Header Startseite</h1>
					<p class="stage-frontpage__large-teaser-paragraph">Die Perspektive wechseln, um die Dimensionen wissenschaftlichen Fortschritts zu hinterfragen: Michael John Gorman, Professor für Life Sciences in Society und Gründungsdirektor des Museums Biotopia, will für Forschung begeistern.</p>
					<a class="stage-frontpage__large-teaser-link" href="#">Weiterlesen</a>
					<a class="stage-frontpage__large-teaser-a11y-clickarea" href="#" aria-hidden="true" tabindex="-1"></a>
				</div>
			</div>
			<div class="stage-frontpage__teaser-collect-wrapper">
				<div class="stage-frontpage__teaser-collect is-first">
					<div class="stage-frontpage__teaser is-bg-dark">
						<div class="stage-frontpage__teaser-content">
							<article class="c-teaser-single--event" data-css="c-teaser-single">
								<div class="teaser-single__text-section">
									<div class="teaser-single__dates">
										<div class="teaser-single__date">
											<span aria-label="24" class="teaser-single__date-day">24</span>
											<abbr aria-label="Januar" title="Januar" class="teaser-single__date-month">Jan</abbr>
										</div>
										<div class="teaser-single__date is-connector">
											<abbr aria-label="bis" title="bis" class="teaser-single__date-connect">&mdash;</abbr>
										</div>
										<div class="teaser-single__date">
											<span aria-label="27" class="teaser-single__date-day">27</span>
											<abbr aria-label="Januar" title="Januar" class="teaser-single__date-month">Jan</abbr>
										</div>
									</div>
									<h3 class="teaser-single__headline is-stage-frontpage">
										Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich
									</h3>
								</div>
								<a class="teaser-single__link" href="#">
									Weiterlesen
								</a>
								<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
								</a>
							</article>
						</div>
					</div>
					<div class="stage-frontpage__teaser is-bg-light">
						<div class="stage-frontpage__teaser-content">
							<article class="c-teaser-single--event" data-css="c-teaser-single">
								<div class="teaser-single__text-section">
									<div class="teaser-single__dates">
										<div class="teaser-single__date">
											<span aria-label="24" class="teaser-single__date-day">24</span>
											<abbr aria-label="Januar" title="Januar" class="teaser-single__date-month">Jan</abbr>
										</div>
									</div>
									<h3 class="teaser-single__headline is-stage-frontpage">
										Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich
									</h3>
								</div>
								<a class="teaser-single__link" href="#">
									Weiterlesen
								</a>
								<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
								</a>
							</article>
						</div>
					</div>
				</div>
				<div class="stage-frontpage__teaser-collect is-second">
					<div class="stage-frontpage__teaser is-bg-dark">
						<div class="stage-frontpage__teaser-content">
							<article class="c-teaser-single--default" data-css="c-teaser-single">
								<div class="teaser-single__text-section">
									<div class="teaser-single__news">
										<div class="teaser-single__news-text">News</div>
									</div>
									<h3 class="teaser-single__headline is-stage-frontpage">
										Wissenschaft Macht Politik: Die Münchener Räterepublik
									</h3>
								</div>
								<a class="teaser-single__link" href="#">
									Weiterlesen
								</a>
								<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
								</a>
							</article>
						</div>
					</div>
					<div class="stage-frontpage__teaser is-bg-green">
						<div class="stage-frontpage__teaser-content">
							<article class="c-teaser-single--default" data-css="c-teaser-single">
								<div class="teaser-single__text-section">
									<h3 class="teaser-single__headline is-stage-frontpage">
										Zum Newsroom
									</h3>
								</div>
								<a class="teaser-single__link" href="#">
									Weiterlesen
								</a>
								<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
								</a>
							</article>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Blueprint with Logo

<div class="c-stage-frontpage--bp" data-css="c-stage-frontpage">
	<div class="grid__container">
		<div class="stage-frontpage__image-wrapper">
			<figure class="c-figure--header-frontpage" 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://placehold.co/400x200  400w  , 
							 https://placehold.co/800x400  800w  , 
							 https://placehold.co/1200x600  1200w  , 
							 https://placehold.co/1600x800  1600w  , 
							 https://placehold.co/2000x1000  2000w  , 
							 https://placehold.co/2400x1200  2400w  , 
							 https://placehold.co/2800x1400  2800w  , 
							 https://placehold.co/3200x1600  3200w  " media=" (min-width:1024px)" />
						<source data-srcset="
							 https://placehold.co/300x200  300w  , 
							 https://placehold.co/600x400  600w  , 
							 https://placehold.co/900x600  900w  , 
							 https://placehold.co/1200x800  1200w  , 
							 https://placehold.co/1500x1000  1500w  , 
							 https://placehold.co/1800x1200  1800w  , 
							 https://placehold.co/2100x1400  2100w  , 
							 https://placehold.co/2400x1600  2400w  " media=" (min-width: 641px)" />
						<source data-srcset="
							 https://placehold.co/400x400  400w  , 
							 https://placehold.co/800x800  800w  , 
							 https://placehold.co/1200x1200  1200w  , 
							 https://placehold.co/1600x1600  1600w  , 
							 https://placehold.co/2000x2000  2000w  , 
							 https://placehold.co/2400x2400  2400w  , 
							 https://placehold.co/2800x2800  2800w  , 
							 https://placehold.co/3200x3200  3200w  " media=" (max-width: 640px)" />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
							 picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
		</div>
		<div class="stage-frontpage__row">
			<div class="stage-frontpage__large-teaser">
				<div class="stage-frontpage__large-teaser-content is-with-logo">
					<div class="stage-frontpage__large-teaser-content-logo">
						<img src="https://placehold.co/300x200" class="stage-frontpage__logo">
					</div>
					<h1 class="stage-frontpage__headline">
						HM1 | Header Startseite</h1>
					<p class="stage-frontpage__large-teaser-paragraph">Das Logo soll direkt im Template der Bühne gepflegt werden. Hier muss zum Einbinden das Original verwendet werden. Um nicht zu große Ladezeiten zu haben sollten wir uns um das Logo kümmern.</p>
				</div>
			</div>
		</div>
	</div>
</div>

Blueprint ohne Logo und mit farblicher Box

<div class="c-stage-frontpage--bp" data-css="c-stage-frontpage">
	<div class="grid__container">
		<div class="stage-frontpage__image-wrapper">
			<figure class="c-figure--header-frontpage" 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://placehold.co/400x200  400w  , 
							 https://placehold.co/800x400  800w  , 
							 https://placehold.co/1200x600  1200w  , 
							 https://placehold.co/1600x800  1600w  , 
							 https://placehold.co/2000x1000  2000w  , 
							 https://placehold.co/2400x1200  2400w  , 
							 https://placehold.co/2800x1400  2800w  , 
							 https://placehold.co/3200x1600  3200w  " media=" (min-width:1024px)" />
						<source data-srcset="
							 https://placehold.co/300x200  300w  , 
							 https://placehold.co/600x400  600w  , 
							 https://placehold.co/900x600  900w  , 
							 https://placehold.co/1200x800  1200w  , 
							 https://placehold.co/1500x1000  1500w  , 
							 https://placehold.co/1800x1200  1800w  , 
							 https://placehold.co/2100x1400  2100w  , 
							 https://placehold.co/2400x1600  2400w  " media=" (min-width: 641px)" />
						<source data-srcset="
							 https://placehold.co/400x400  400w  , 
							 https://placehold.co/800x800  800w  , 
							 https://placehold.co/1200x1200  1200w  , 
							 https://placehold.co/1600x1600  1600w  , 
							 https://placehold.co/2000x2000  2000w  , 
							 https://placehold.co/2400x2400  2400w  , 
							 https://placehold.co/2800x2800  2800w  , 
							 https://placehold.co/3200x3200  3200w  " media=" (max-width: 640px)" />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
							 picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
		</div>
		<div class="stage-frontpage__row">
			<div class="stage-frontpage__large-teaser">
				<div class="stage-frontpage__large-teaser-content " style="background-color:#003399;color:#003399;">
					<h1 class="stage-frontpage__headline" style="color:#ffffff;">
						HM1 | Header Startseite</h1>
					<p class="stage-frontpage__large-teaser-paragraph" style="color:#ffffff;">Die Farbe der Box und des Textes werden als Hexawerte mitgegeben (in FS Eingabefelder) und als Inline-style-Element eingebunden.</p>
				</div>
			</div>
		</div>
	</div>
</div>

Blueprint ohne Logo und mit farblicher Box und Slider

<div class="c-stage-frontpage--bp" data-css="c-stage-frontpage">
	<div class="grid__container">
		<div class="stage-frontpage__image-wrapper">
			<div class="c-slider--starthead is-unresolved is-head-embed" data-css="c-slider" aria-hidden="true" aria-label="Diashow/Image-Slider" data-js-module="slider" data-js-options='{&quot;infinite&quot;:true}'>
				<div class="slider__content is-container">
					<div class="slider__list-wrapper" data-js-item="slider-wrapper">
						<ol class="slider__list" data-js-item="slider-ribbon">
							<li class="slider__item" data-js-item="slider-item">
								<picture class="c-picture--slider-starthead
							" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<source srcset="
							 https://placehold.co/400x200  400w  , 
							 https://placehold.co/800x400  800w  , 
							 https://placehold.co/1600x800  1600w  " sizes=" 
							  (min-width:1440px) 1440px 
							  ,   100vw " media=" (min-width:1024px)" />
									<source srcset="
							 https://placehold.co/600x400  600w  , 
							 https://placehold.co/1200x800  1200w  , 
							 https://placehold.co/2400x1600  2400w  " sizes=" 
							   100vw " media=" (min-width: 641px)" />
									<source srcset="
							 https://placehold.co/300x300  300w  , 
							 https://placehold.co/600x600  600w  , 
							 https://placehold.co/1200x1200  1200w  " sizes=" 
							   100vw " media=" (max-width: 640px)" />
									<!--[if IE 9]></audio><![endif]-->
									<img class="
							 picture__image" src="https://placehold.co/400x200" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-1" />
								</picture>
							</li>
							<li class="slider__item" data-js-item="slider-item">
								<picture class="c-picture--slider-starthead
							" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<source srcset="
							 https://placehold.co/400x200  400w  , 
							 https://placehold.co/800x400  800w  , 
							 https://placehold.co/1600x800  1600w  " sizes=" 
							  (min-width:1440px) 1440px 
							  ,   100vw " media=" (min-width:1024px)" />
									<source srcset="
							 https://placehold.co/600x400  600w  , 
							 https://placehold.co/1200x800  1200w  , 
							 https://placehold.co/2400x1600  2400w  " sizes=" 
							   100vw " media=" (min-width: 641px)" />
									<source srcset="
							 https://placehold.co/300x300  300w  , 
							 https://placehold.co/600x600  600w  , 
							 https://placehold.co/1200x1200  1200w  " sizes=" 
							   100vw " media=" (max-width: 640px)" />
									<!--[if IE 9]></audio><![endif]-->
									<img class="
							 picture__image" src="https://placehold.co/400x200" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-2" />
								</picture>
							</li>
							<li class="slider__item" data-js-item="slider-item">
								<picture class="c-picture--slider-starthead
							" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<source srcset="
							 https://placehold.co/400x200  400w  , 
							 https://placehold.co/800x400  800w  , 
							 https://placehold.co/1600x800  1600w  " sizes=" 
							  (min-width:1440px) 1440px 
							  ,   100vw " media=" (min-width:1024px)" />
									<source srcset="
							 https://placehold.co/600x400  600w  , 
							 https://placehold.co/1200x800  1200w  , 
							 https://placehold.co/2400x1600  2400w  " sizes=" 
							   100vw " media=" (min-width: 641px)" />
									<source srcset="
							 https://placehold.co/300x300  300w  , 
							 https://placehold.co/600x600  600w  , 
							 https://placehold.co/1200x1200  1200w  " sizes=" 
							   100vw " media=" (max-width: 640px)" />
									<!--[if IE 9]></audio><![endif]-->
									<img class="
							 picture__image" src="https://placehold.co/400x200" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-3" />
								</picture>
							</li>
							<li class="slider__item" data-js-item="slider-item">
								<picture class="c-picture--slider-starthead
							" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<source srcset="
							 https://placehold.co/400x200  400w  , 
							 https://placehold.co/800x400  800w  , 
							 https://placehold.co/1600x800  1600w  " sizes=" 
							  (min-width:1440px) 1440px 
							  ,   100vw " media=" (min-width:1024px)" />
									<source srcset="
							 https://placehold.co/600x400  600w  , 
							 https://placehold.co/1200x800  1200w  , 
							 https://placehold.co/2400x1600  2400w  " sizes=" 
							   100vw " media=" (min-width: 641px)" />
									<source srcset="
							 https://placehold.co/300x300  300w  , 
							 https://placehold.co/600x600  600w  , 
							 https://placehold.co/1200x1200  1200w  " sizes=" 
							   100vw " media=" (max-width: 640px)" />
									<!--[if IE 9]></audio><![endif]-->
									<img class="
							 picture__image" src="https://placehold.co/400x200" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-4" />
								</picture>
							</li>
							<li class="slider__item" data-js-item="slider-item">
								<picture class="c-picture--slider-starthead
							" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<source srcset="
							 https://placehold.co/400x200  400w  , 
							 https://placehold.co/800x400  800w  , 
							 https://placehold.co/1600x800  1600w  " sizes=" 
							  (min-width:1440px) 1440px 
							  ,   100vw " media=" (min-width:1024px)" />
									<source srcset="
							 https://placehold.co/600x400  600w  , 
							 https://placehold.co/1200x800  1200w  , 
							 https://placehold.co/2400x1600  2400w  " sizes=" 
							   100vw " media=" (min-width: 641px)" />
									<source srcset="
							 https://placehold.co/300x300  300w  , 
							 https://placehold.co/600x600  600w  , 
							 https://placehold.co/1200x1200  1200w  " sizes=" 
							   100vw " media=" (max-width: 640px)" />
									<!--[if IE 9]></audio><![endif]-->
									<img class="
							 picture__image" src="https://placehold.co/400x200" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" aria-describedby="image-description-5" />
								</picture>
							</li>
						</ol>
					</div>
				</div>
				<div class="slider__counter-controls-panel">
					<div class="slider__controls-wrapper">
						<button type="button" class="slider__control is-previous" data-js-item="slider-prev">
							Vorheriges
						</button>
						<button type="button" class="slider__control is-next" data-js-item="slider-next">
							Nächstes
						</button> </div>
				</div>
			</div>
		</div>
		<div class="stage-frontpage__row">
			<div class="stage-frontpage__large-teaser">
				<div class="stage-frontpage__large-teaser-content " style="background-color:#003399;color:#003399;">
					<h1 class="stage-frontpage__headline" style="color:#ffffff;">
						HM1 | Header Startseite</h1>
					<p class="stage-frontpage__large-teaser-paragraph" style="color:#ffffff;">Die Farbe der Box und des Textes werden als Hexawerte mitgegeben (in FS Eingabefelder) und als Inline-style-Element eingebunden.</p>
				</div>
			</div>
		</div>
	</div>
</div>

Einsichten mit farblicher Box

<div class="c-stage-frontpage--einsichten" data-css="c-stage-frontpage">
	<div class="grid__container">
		<div class="stage-frontpage__image-wrapper">
			<figure class="c-figure--einsichten" 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://placehold.co/400x200  400w  , 
							 https://placehold.co/800x400  800w  , 
							 https://placehold.co/1200x600  1200w  , 
							 https://placehold.co/1600x800  1600w  , 
							 https://placehold.co/2000x1000  2000w  , 
							 https://placehold.co/2400x1200  2400w  , 
							 https://placehold.co/2800x1400  2800w  , 
							 https://placehold.co/3200x1600  3200w  " media=" (min-width:1024px)" />
						<source data-srcset="
							 https://placehold.co/300x200  300w  , 
							 https://placehold.co/600x400  600w  , 
							 https://placehold.co/900x600  900w  , 
							 https://placehold.co/1200x800  1200w  , 
							 https://placehold.co/1500x1000  1500w  , 
							 https://placehold.co/1800x1200  1800w  , 
							 https://placehold.co/2100x1400  2100w  , 
							 https://placehold.co/2400x1600  2400w  " media=" (min-width: 481px)" />
						<source data-srcset="
							 https://placehold.co/400x400  400w  , 
							 https://placehold.co/800x800  800w  , 
							 https://placehold.co/1200x1200  1200w  , 
							 https://placehold.co/1600x1600  1600w  , 
							 https://placehold.co/2000x2000  2000w  , 
							 https://placehold.co/2400x2400  2400w  , 
							 https://placehold.co/2800x2800  2800w  , 
							 https://placehold.co/3200x3200  3200w  " media=" (max-width: 480px)" />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
							 picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
		</div>
		<div class="stage-frontpage__row">
			<div class="stage-frontpage__imgtitle">
				<div class="stage-frontpage__imgtitle-pos">
					<div class="stage-frontpage__imgtitle-main">
						Einsichten
					</div>
					<div class="stage-frontpage__imgtitle-sub">
						Das Forschungsmagazin der LMU München
					</div>
				</div>
			</div>
			<div class="stage-frontpage__large-teaser">
				<div class="stage-frontpage__large-teaser-content  is-es-color1">
					<h1 class="stage-frontpage__headline">
						<span class="stage-frontpage__preheadlinehdinfo">Einsichten</span>
						<span class="stage-frontpage__preheadlinehdsubinfo">Das Forschungsmagazin der LMU München</span>
						<span class="stage-frontpage__preheadlineinfo">Ausgabe 01/2025</span>
						<span class="stage-frontpage__postheadlinehdinfo"> - </span>
						Ruf der Wildnis</h1>
					<p class="stage-frontpage__large-teaser-paragraph" style="color:#ffffff;">Die Farbe der Box des Textes wird als spezielle Klasse oder Flexibel als Hexawerte mitgegeben (in FS Eingabefelder) und im letzteren Fall als Inline-style-Element eingebunden.</p>
				</div>
			</div>
			<ul class="stage-frontpage__link-box">
				<li class="stage-frontpage__link-box-item">
					<a class="stage-frontpage__link-box-link" href="newsroom-filter-page.html?stage&#x3D;Forshung">
						<span class="stage-frontpage__link-box-item-text">Alle Ausgaben</span>
					</a>
				</li>
				<li class="stage-frontpage__link-box-item">
					<a class="stage-frontpage__link-box-link" href="newsroom-filter-page.html?stage&#x3D;Uni-Campus">
						<span class="stage-frontpage__link-box-item-text">Rubriken</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>