<div class="c-newsroom-preview{{#if settings.newsroomPreviewContextClass}}--{{settings.newsroomPreviewContextClass}}{{else}}--default{{/if}}{{#if settings.newsroomPreviewClasses}} {{settings.newsroomPreviewClasses}}{{/if}}"
     data-css="c-newsroom-preview">
	{{#wrapWith "grid__container"}}
		{{#wrapWith "grid__row"}}
	<h2 class="newsroom-preview__headline">{{content.headline}}</h2>
	<div class="newsroom-preview__wrapper">
		{{#if content.teaserPremium }}
			<div class="newsroom-preview__premium">
				<div class="newsroom-preview__premium-content">
					{{#with content.teaserPremium}}
						{{> teaser-premium }}
					{{/with}}
				</div>
			</div>
		{{/if}}
		{{#if content.teaserFirst }}
			<div class="newsroom-preview__teaser-first{{#if content.teaserFirst.bgBlue}} is-bg-blue{{/if}}{{#if content.teaserFirst.bgGreen}} is-bg-green{{/if}}{{#if content.teaserFirst.bgDark}} is-bg-dark{{/if}}{{#if content.teaserFirst.bgLight}} is-bg-light{{/if}}">
				<div class="newsroom-preview__teaser-first-content">
					{{#with content.teaserFirst}}
						{{> teaser-single }}
					{{/with}}
				</div>
			</div>
		{{/if}}
		{{#if content.teaserSecond }}
			<div class="newsroom-preview__teaser-second{{#if content.teaserSecond.bgBlue}} is-bg-blue{{/if}}{{#if content.teaserSecond.bgGreen}} is-bg-green{{/if}}{{#if content.teaserSecond.bgDark}} is-bg-dark{{/if}}{{#if content.teaserSecond.bgLight}} is-bg-light{{/if}}">
				<div class="newsroom-preview__teaser-second-content">
					{{#with content.teaserSecond}}
						{{> teaser-single }}
					{{/with}}
				</div>
			</div>
		{{/if}}
		{{#if content.teaserThird }}
			<div class="newsroom-preview__teaser-third{{#if content.teaserThird.bgBlue}} is-bg-blue{{/if}}{{#if content.teaserThird.bgGreen}} is-bg-green{{/if}}{{#if content.teaserThird.bgDark}} is-bg-dark{{/if}}{{#if content.teaserThird.bgLight}} is-bg-light{{/if}}">
				<div class="newsroom-preview__teaser-third-content">
					{{#with content.teaserThird}}
						{{> teaser-single }}
					{{/with}}
				</div>
			</div>
		{{/if}}
		{{#if content.teaserFourth }}
			<div class="newsroom-preview__teaser-fourth{{#if content.teaserFourth.bgBlue}} is-bg-blue{{/if}}{{#if content.teaserFourth.bgGreen}} is-bg-green{{/if}}{{#if content.teaserFourth.bgDark}} is-bg-dark{{/if}}{{#if content.teaserFourth.bgLight}} is-bg-light{{/if}}">
				<div class="newsroom-preview__teaser-fourth-content">
					{{#with content.teaserFourth}}
						{{> teaser-single }}
					{{/with}}
				</div>
			</div>
		{{/if}}
		{{/wrapWith}}
	{{/wrapWith}}
	</div>
</div>

newsroom-preview.scss

/* ===================================================
component: newsroom-preview
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-newsroom-preview"] {
	position: relative;
	clear: both;
	overflow: hidden;
	margin-bottom: 60px;

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

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

	@include bp($bp-desktop-l) {
		display: block;
	}

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

	@include print() {
		display: none;
	}

	.is-visible & {
		@include print() {
			display: block;
		}
	}

	/*
	MODIFIER
	----------------------- */
	&.is-full-width {

		.grid__row {
			max-width: none;
		}
	}

	&.is-simple-panel {

		.newsroom-preview__teaser-first {

			@include bp($bp-tablet-p) {
				@include grid-box(4);
				@include grid-magnet(0, top, false);

				margin-bottom: 0;
			}

			@include bp($bp-tablet-l) {
				@include grid-box(4);
				@include grid-magnet(0, top, false);
			}

			@include bp(1100px) {
				@include grid-box(3);
				@include grid-magnet(0, top, false);
			}
		}

		.newsroom-preview__teaser-second {

			@include bp($bp-tablet-p) {
				@include grid-box(4);
				@include grid-magnet(0, top, false);
				@include grid-magnet(0, left, true);
			}

			@include bp($bp-tablet-l) {
				@include grid-box(4);
				@include grid-magnet(0, top, false);
				@include grid-magnet(0, left, true);
			}

			@include bp(1100px) {
				@include grid-box(3);
				@include grid-magnet(0, top, false);
				@include grid-magnet(0, left, true);
			}
		}

		.newsroom-preview__teaser-third {

			@include bp($bp-tablet-p) {
				@include grid-box(4);
				@include grid-magnet(0, left, false);
				@include grid-magnet(0, top, true);
			}

			@include bp($bp-tablet-l) {
				@include grid-box(4);
				@include grid-magnet(0, top, false);
				@include grid-magnet(0, left, true);
			}

			@include bp(1100px) {
				@include grid-box(3);
				@include grid-magnet(0, left, false);
				@include grid-magnet(0, top, true);
			}
		}

		.newsroom-preview__teaser-fourth {
			@include grid-column(12);
			position: relative;

			@include bp($bp-tablet-p) {
				@include grid-box(4);
				@include grid-magnet(0, top, false);
				@include grid-magnet(0, left, true);
			}

			@include bp($bp-tablet-l) {
				@include grid-box(4);
				@include grid-magnet(0, top, false);
				@include grid-magnet(0, left, true);
			}

			@include bp(1100px) {
				@include grid-box(3);
				@include grid-magnet(0, top, false);
				@include grid-magnet(0, left, true);
			}
		}

		.newsroom-preview__teaser-fourth-content {
			position: relative;
			width: 100%;

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

	.newsroom-preview__headline {

		@include headline-h2-styles();

		font-family: $font-bold;
		color: $color-dark;
		font-weight: 700;
	}

	.newsroom-preview__text {
		font-family: $font-regular;
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .25px;
		color: $color-dark;
		margin-bottom: 25px;

		@include bp($bp-tablet-p) {
			font-size: 1.5rem;
			line-height: (22/15);
			margin-bottom: 25px;
		}

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

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

	.newsroom-preview__right {
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;

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

	.newsroom-preview__wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		@include bp($bp-tablet-p) {

			display: block;
		}
	}

	.newsroom-preview__premium-content {
		position: relative;
		width: 100%;

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

	.newsroom-preview__teaser-first-content {
		position: relative;
		width: 100%;

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

	.newsroom-preview__teaser-second-content {
		position: relative;
		width: 100%;

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

	.newsroom-preview__teaser-third-content {
		position: relative;
		width: 100%;

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

	.newsroom-preview__teaser-fourth-content {
		position: relative;
		width: 100%;

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

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-newsroom-preview--default {
	/*
	PREMIUM TEASER
	----------------------- */
	.newsroom-preview__premium {
		@include grid-column(12);

		position: relative;
		display: flex;
		order: 1;

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

		}

		@include bp($bp-tablet-l) {
			@include grid-box(8);

		}

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

		}
	}

	/*
	TEASER FIRST
	----------------------- */
	.newsroom-preview__teaser-first {
		@include grid-column(12);

		position: relative;
		order: 3;
		border-top: 1px solid $color-white;

		@include bp($bp-tablet-p) {
			@include grid-box(4);
			@include grid-magnet(4, top, false);

			border-top: none;
			margin-bottom: .05px;
		}

		@include bp($bp-tablet-l) {
			@include grid-box(4);
			@include grid-magnet(4, top, false);

			border-top: none;
		}

		@include bp(1100px) {
			@include grid-box(3);
			@include grid-magnet(0, top, false);

			border-top: none;
		}
	}

	/*
	TEASER SECOND
	----------------------- */
	.newsroom-preview__teaser-second {
		@include grid-column(12);

		position: relative;
		order: 3;
		border-top: 1px solid $color-white;

		@include bp($bp-tablet-p) {
			@include grid-box(4);
			@include grid-magnet(0, top, false);
			@include grid-magnet(0, left, true);
			border-top: none;
		}

		@include bp($bp-tablet-l) {
			@include grid-box(4);
			@include grid-magnet(0, top, false);
			@include grid-magnet(0, left, false);

			border-top: none;
		}

		@include bp(1100px) {
			@include grid-box(3);
			@include grid-magnet(0, top, false);
			@include grid-magnet(0, left, true);
			border-top: none;
		}
	}

	/*
	TEASER THIRD
	----------------------- */
	.newsroom-preview__teaser-third {
		@include grid-column(12);
		position: relative;
		order: 4;

		@include bp($bp-tablet-p) {
			@include grid-box(4);
			@include grid-magnet(4, left, false);
			@include grid-magnet(0, top, true);
		}

		@include bp($bp-tablet-l) {
			@include grid-box(4);
			@include grid-magnet(4, left, false);
			@include grid-magnet(0, top, true);
		}

		@include bp(1100px) {
			@include grid-box(3);
			@include grid-magnet(6, left, false);
			@include grid-magnet(3, top, true);
		}
	}

	/*
	TEASER FOURTH
	----------------------- */
	.newsroom-preview__teaser-fourth {
		@include grid-column(12);
		position: relative;
		order: 4;

		@include bp($bp-tablet-p) {
			@include grid-box(4);
			@include grid-magnet(0, left, false);
			@include grid-magnet(0, top, true);
		}

		@include bp($bp-tablet-l) {
			@include grid-box(4);
			@include grid-magnet(0, left, false);
			@include grid-magnet(0, top, true);
		}

		@include bp(1100px) {
			@include grid-box(3);
			@include grid-magnet(9, left, false);
			@include grid-magnet(3, top, true);
		}
	}
}

/* ---------------------------------------------------
Context: Newsroom
--------------------------------------------------- */
.c-newsroom-preview--inverted {
	/*
	PREMIUM TEASER
	----------------------- */
	.newsroom-preview__premium {
		@include grid-column(12);

		position: relative;
		display: flex;
		order: 1;

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

			float: right;
		}

		@include bp($bp-tablet-l) {
			@include grid-box(8);

			float: right;

		}

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

			float: right;
		}
	}

	/*
	TEASER FIRST
	----------------------- */
	.newsroom-preview__teaser-first {
		@include grid-column(12);

		position: relative;
		order: 3;
		border-top: 1px solid $color-white;

		@include bp($bp-tablet-p) {
			@include grid-box(4);
			@include grid-magnet(4, top, false);

			border-top: none;
			margin-bottom: .05px;
		}

		@include bp($bp-tablet-l) {
			@include grid-box(4);
			@include grid-magnet(4, top, false);

			border-top: none;
		}

		@include bp(1100px) {
			@include grid-box(3);
			@include grid-magnet(0, top, false);
			@include grid-magnet(3, left, false);

			border-top: none;
		}
	}

	/*
	TEASER SECOND
	----------------------- */
	.newsroom-preview__teaser-second {
		@include grid-column(12);

		position: relative;
		order: 3;
		border-top: 1px solid $color-white;

		@include bp($bp-tablet-p) {
			@include grid-box(4);
			@include grid-magnet(0, top, false);
			@include grid-magnet(0, left, true);
			border-top: none;
		}

		@include bp($bp-tablet-l) {
			@include grid-box(4);
			@include grid-magnet(0, top, false);
			@include grid-magnet(0, left, false);

			border-top: none;
		}

		@include bp(1100px) {
			@include grid-box(3);
			@include grid-magnet(3, top, false);
			@include grid-magnet(0, left, false);

			border-top: none;
		}
	}

	/*
	TEASER THIRD
	----------------------- */
	.newsroom-preview__teaser-third {
		@include grid-column(12);
		position: relative;
		order: 4;

		@include bp($bp-tablet-p) {
			@include grid-box(4);
			@include grid-magnet(4, left, true);
			@include grid-magnet(8, top, false);
		}

		@include bp($bp-tablet-l) {
			@include grid-box(4);
			@include grid-magnet(4, left, true);
			@include grid-magnet(8, top, false);
		}

		@include bp(1100px) {
			@include grid-box(3);
			@include grid-magnet(0, left, false);
			@include grid-magnet(0, top, true);
		}
	}

	/*
	TEASER FOURTH
	----------------------- */
	.newsroom-preview__teaser-fourth {
		@include grid-column(12);
		position: relative;
		order: 4;

		@include bp($bp-tablet-p) {
			@include grid-box(4);
			@include grid-magnet(0, left, false);
			@include grid-magnet(0, top, true);
		}

		@include bp($bp-tablet-l) {
			@include grid-box(4);
			@include grid-magnet(0, left, false);
			@include grid-magnet(0, top, true);
		}

		@include bp(1100px) {
			@include grid-box(3);
			@include grid-magnet(0, left, true);
			@include grid-magnet(0, top, false);
		}
	}
}

Newsroom Preview (Einfach, mit 4 Teasern)

<div class="c-newsroom-preview--default is-simple-panel" data-css="c-newsroom-preview">
	<div class="grid__container">
		<div class="grid__row">
			<h2 class="newsroom-preview__headline">Alle News zum Thema Forschung</h2>
			<div class="newsroom-preview__wrapper">
				<div class="newsroom-preview__teaser-first is-bg-dark">
					<div class="newsroom-preview__teaser-first-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-news">
									Unbekannte Freunde:&lt;br&gt;EXOPET-Studie zur Haltung von Haustieren
								</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="newsroom-preview__teaser-second is-bg-light">
					<div class="newsroom-preview__teaser-second-content">
						<article class="c-teaser-single--default" data-css="c-teaser-single">
							<div class="teaser-single__text-section">
								<div class="teaser-single__dates">
									<div class="teaser-single__date">
										<span aria-label="10" class="teaser-single__date-day">10</span>
										<abbr aria-label="April" title="April" class="teaser-single__date-month">Apr</abbr>
									</div>
								</div>
								<h3 class="teaser-single__headline is-event">
									Vortrag: Imperativ der Aufmerksamkeit. Eine Kritik der Medienrealität
								</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="newsroom-preview__teaser-third is-bg-dark">
					<div class="newsroom-preview__teaser-third-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-news">
									ZeUS: Diagnostik-Training auf modernstem klinischen Niveau
								</h3>
							</div>
							<a class="teaser-single__link" href="#" target="_blank" title="Link öffnet im neuen Fenster">
								Weiterlesen
							</a>
							<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
							</a>
						</article>
					</div>
				</div>
				<div class="newsroom-preview__teaser-fourth is-bg-green">
					<div class="newsroom-preview__teaser-fourth-content">
						<article class="c-teaser-single--default" data-css="c-teaser-single">
							<div class="teaser-single__text-section">
								<h3 class="teaser-single__headline">
									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>

Newsroom Preview Premium (Box im Bild links unten)

<div class="c-newsroom-preview--default" data-css="c-newsroom-preview">
	<div class="grid__container">
		<div class="grid__row">
			<h2 class="newsroom-preview__headline">Alle News zum Thema Forschung</h2>
			<div class="newsroom-preview__wrapper">
				<div class="newsroom-preview__premium">
					<div class="newsroom-preview__premium-content">
						<div class="c-teaser-premium--default" data-css="c-teaser-premium">
							<div class="teaser-premium__image-wrapper">
								<picture class="c-picture--animated-objects
										 lazyload" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<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  " />
									<!--[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>
							<div class="teaser-premium__box is-bg-green is-bottom is-left">
								<div class="teaser-premium__box-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-news">
												Der LMU Studien-Informations-Service
											</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 class="newsroom-preview__teaser-first is-bg-light">
					<div class="newsroom-preview__teaser-first-content">
						<article class="c-teaser-single--default" data-css="c-teaser-single">
							<div class="teaser-single__text-section">
								<div class="teaser-single__dates">
									<div class="teaser-single__date">
										<span aria-label="10" class="teaser-single__date-day">10</span>
										<abbr aria-label="April" title="April" class="teaser-single__date-month">Apr</abbr>
									</div>
								</div>
								<h3 class="teaser-single__headline is-event">
									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="newsroom-preview__teaser-third is-bg-dark">
					<div class="newsroom-preview__teaser-third-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-news">
									ZeUS: Diagnostik-Training auf modernstem klinischen Niveau
								</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="newsroom-preview__teaser-fourth is-bg-green">
					<div class="newsroom-preview__teaser-fourth-content">
						<article class="c-teaser-single--default" data-css="c-teaser-single">
							<div class="teaser-single__text-section">
								<h3 class="teaser-single__headline">
									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>

Newsroom Preview Premium (Box im Bild links oben)

<div class="c-newsroom-preview--default" data-css="c-newsroom-preview">
	<div class="grid__container">
		<div class="grid__row">
			<h2 class="newsroom-preview__headline">Alle News zum Thema Forschung</h2>
			<div class="newsroom-preview__wrapper">
				<div class="newsroom-preview__premium">
					<div class="newsroom-preview__premium-content">
						<div class="c-teaser-premium--default" data-css="c-teaser-premium">
							<div class="teaser-premium__image-wrapper">
								<picture class="c-picture--animated-objects
										 lazyload" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<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  " />
									<!--[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>
							<div class="teaser-premium__box is-bg-green is-top is-left">
								<div class="teaser-premium__box-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-news">
												Der LMU Studien-Informations-Service
											</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 class="newsroom-preview__teaser-first is-bg-light">
					<div class="newsroom-preview__teaser-first-content">
						<article class="c-teaser-single--default" data-css="c-teaser-single">
							<div class="teaser-single__text-section">
								<div class="teaser-single__dates">
									<div class="teaser-single__date">
										<span aria-label="10" class="teaser-single__date-day">10</span>
										<abbr aria-label="April" title="April" class="teaser-single__date-month">Apr</abbr>
									</div>
								</div>
								<h3 class="teaser-single__headline is-event">
									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="newsroom-preview__teaser-third is-bg-dark">
					<div class="newsroom-preview__teaser-third-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-news">
									ZeUS: Diagnostik-Training auf modernstem klinischen Niveau
								</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="newsroom-preview__teaser-fourth is-bg-green">
					<div class="newsroom-preview__teaser-fourth-content">
						<article class="c-teaser-single--default" data-css="c-teaser-single">
							<div class="teaser-single__text-section">
								<h3 class="teaser-single__headline">
									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>

Newsroom Preview Premium Box in image right/down

<div class="c-newsroom-preview--default" data-css="c-newsroom-preview">
	<div class="grid__container">
		<div class="grid__row">
			<h2 class="newsroom-preview__headline">Alle News zum Thema Forschung (Box im Bild rechts unten)</h2>
			<div class="newsroom-preview__wrapper">
				<div class="newsroom-preview__premium">
					<div class="newsroom-preview__premium-content">
						<div class="c-teaser-premium--default" data-css="c-teaser-premium">
							<div class="teaser-premium__image-wrapper">
								<picture class="c-picture--animated-objects
										 lazyload" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<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  " />
									<!--[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>
							<div class="teaser-premium__box is-bg-green is-bottom is-right">
								<div class="teaser-premium__box-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-news">
												Der LMU Studien-Informations-Service
											</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 class="newsroom-preview__teaser-first is-bg-light">
					<div class="newsroom-preview__teaser-first-content">
						<article class="c-teaser-single--default" data-css="c-teaser-single">
							<div class="teaser-single__text-section">
								<div class="teaser-single__dates">
									<div class="teaser-single__date">
										<span aria-label="10" class="teaser-single__date-day">10</span>
										<abbr aria-label="April" title="April" class="teaser-single__date-month">Apr</abbr>
									</div>
								</div>
								<h3 class="teaser-single__headline is-event">
									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="newsroom-preview__teaser-third is-bg-dark">
					<div class="newsroom-preview__teaser-third-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-news">
									ZeUS: Diagnostik-Training auf modernstem klinischen Niveau
								</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="newsroom-preview__teaser-fourth is-bg-green">
					<div class="newsroom-preview__teaser-fourth-content">
						<article class="c-teaser-single--default" data-css="c-teaser-single">
							<div class="teaser-single__text-section">
								<h3 class="teaser-single__headline">
									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>

Newsroom Preview Premium Box in image right/up

<div class="c-newsroom-preview--default" data-css="c-newsroom-preview">
	<div class="grid__container">
		<div class="grid__row">
			<h2 class="newsroom-preview__headline">Alle News zum Thema Forschung (Box im Bild rechts oben)</h2>
			<div class="newsroom-preview__wrapper">
				<div class="newsroom-preview__premium">
					<div class="newsroom-preview__premium-content">
						<div class="c-teaser-premium--default" data-css="c-teaser-premium">
							<div class="teaser-premium__image-wrapper">
								<picture class="c-picture--animated-objects
										 lazyload" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<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  " />
									<!--[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>
							<div class="teaser-premium__box is-bg-green is-top is-right">
								<div class="teaser-premium__box-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-news">
												Der LMU Studien-Informations-Service
											</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 class="newsroom-preview__teaser-first is-bg-light">
					<div class="newsroom-preview__teaser-first-content">
						<article class="c-teaser-single--default" data-css="c-teaser-single">
							<div class="teaser-single__text-section">
								<div class="teaser-single__dates">
									<div class="teaser-single__date">
										<span aria-label="10" class="teaser-single__date-day">10</span>
										<abbr aria-label="April" title="April" class="teaser-single__date-month">Apr</abbr>
									</div>
								</div>
								<h3 class="teaser-single__headline is-event">
									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="newsroom-preview__teaser-third is-bg-dark">
					<div class="newsroom-preview__teaser-third-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-news">
									ZeUS: Diagnostik-Training auf modernstem klinischen Niveau
								</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="newsroom-preview__teaser-fourth is-bg-green">
					<div class="newsroom-preview__teaser-fourth-content">
						<article class="c-teaser-single--default" data-css="c-teaser-single">
							<div class="teaser-single__text-section">
								<h3 class="teaser-single__headline">
									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>

Newsroom Preview Premium inverted

<div class="c-newsroom-preview--inverted" data-css="c-newsroom-preview">
	<div class="grid__container">
		<div class="grid__row">
			<h2 class="newsroom-preview__headline">Alle News zum Thema Forschung (inverted version)</h2>
			<div class="newsroom-preview__wrapper">
				<div class="newsroom-preview__premium">
					<div class="newsroom-preview__premium-content">
						<div class="c-teaser-premium--default" data-css="c-teaser-premium">
							<div class="teaser-premium__image-wrapper">
								<picture class="c-picture--animated-objects
										 lazyload" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<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  " />
									<!--[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>
							<div class="teaser-premium__box is-bg-green is-bottom is-right">
								<div class="teaser-premium__box-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-news">
												Der LMU Studien-Informations-Service
											</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 class="newsroom-preview__teaser-first is-bg-light">
					<div class="newsroom-preview__teaser-first-content">
						<article class="c-teaser-single--default" data-css="c-teaser-single">
							<div class="teaser-single__text-section">
								<div class="teaser-single__dates">
									<div class="teaser-single__date">
										<span aria-label="10" class="teaser-single__date-day">10</span>
										<abbr aria-label="April" title="April" class="teaser-single__date-month">Apr</abbr>
									</div>
								</div>
								<h3 class="teaser-single__headline is-event">
									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="newsroom-preview__teaser-third is-bg-dark">
					<div class="newsroom-preview__teaser-third-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-news">
									ZeUS: Diagnostik-Training auf modernstem klinischen Niveau
								</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="newsroom-preview__teaser-fourth is-bg-green">
					<div class="newsroom-preview__teaser-fourth-content">
						<article class="c-teaser-single--default" data-css="c-teaser-single">
							<div class="teaser-single__text-section">
								<h3 class="teaser-single__headline">
									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>