<div class="c-person-overview{{#if settings.personOverviewContextClass}}--{{settings.personOverviewContextClass}}{{else}}--default{{/if}}{{#if settings.personOverviewClasses}} {{settings.personOverviewClasses}}{{/if}}"
     data-css="c-person-overview"
     data-js-module="person-overview"{{#if settings.personOverviewJsOptions}}
     data-js-options='{{stringify settings.personOverviewJsOptions}}'{{/if}}>
	 {{#if content.headline}}
	 	<h2 class="person-overview__headline">
			 {{content.headline}}
		 </h2>
	 {{/if}}
	{{#if content.teasertext}}
	 	<div class="person-overview__teasertext">
			 <p>{{content.teasertext}}</p>
		 </div>
	 {{/if}}
	 {{#if content.subheadline}}
	 	<h3 class="person-overview__subheadline">
			 {{content.subheadline}}
		 </h3>
	 {{/if}}
	 {{#if content.subteasertext}}
	 	<div class="person-overview__subteasertext">
			<p>{{content.subteasertext}}</p>
		 </div>
	 {{/if}}
	{{#if content.items.[0]}}
		<div class="person-overview__area{{#if content.items.[1]}}{{else}}-one{{/if}}" {{#if settings.filterEnabled}} data-js-filter-element="filter-person-overview"{{/if}}>
			{{#each content.items}}
				<div class="person-overview__element" data-id="{{@index}}" itemscope itemtype="http://schema.org/Person" data-js-item="js-person-overview-element" {{#if
		settings.dataSort}} data-sort="{{settings.dataSort}}"{{/if}}>
					{{> person-overview__element}}
				</div>
			{{/each}}
		</div>
	{{/if}}
</div>

person-overview__element.hbs

{{#if content.figure}}
	{{#with content.figure}}
		{{> figure }}
	{{/with}}
{{/if}}
	<div class="person-overview__info" >
		{{#if content.personname}}<div class="person-overview__personname{{#if settings.noLightbox}}-nocursor{{/if}}" {{#if settings.noLightbox}}{{else}}data-js-item="js-person-overview-name"{{/if}} itemprop="name">{{content.personname}}</div>{{/if}}
		{{#if content.organization_unit}}
			<p class="person-overview__organization-unit" itemprop="affiliation">{{content.organization_unit}}</p>
		{{/if}}
		{{#if content.function}}
			<p class="person-overview__function" itemprop="jobTitle">{{content.function}}</p>
		{{/if}}
		{{#if content.job_description}}
				<p class="person-overview__job-description" itemprop="knowsAbout">{{content.job_description}}</p>
		{{/if}}
		{{#if content.room}}
				<p class="person-overview__room" itemprop="knowsAbout">{{content.room}}</p>
		{{/if}}
		{{#if content.mapsitem}}
			{{#each content.mapsitem}}
				<p class="person-overview__linkarea">
					{{> person-overview__link}}
				</p>
			{{/each}}
		{{/if}}
		{{#if content.roomfinderitem}}
			{{#each content.roomfinderitem}}
				<p class="person-overview__linkarea">
					{{> person-overview__link}}
				</p>
			{{/each}}
		{{/if}}
		<div class = "person-overview__communication">
		{{#if content.contactitems}}
			{{#each content.contactitems}}
				<p class="person-overview__linkarea">
					{{> person-overview__link}}
				</p>
			{{/each}}
		{{/if}}
		{{#if content.phone}}
			<p class="person-overview__phone" itemprop="telephone">
				{{content.phone}}
			</p>
		{{/if}}
		{{#if content.fax}}
			<p class="person-overview__fax" itemprop="faxNumber">
				{{content.fax}}
			</p>
		{{/if}}
		{{#if content.webitems}}
			{{#each content.webitems}}
				<p class="person-overview__linkarea" itemprop="url">
					{{> person-overview__link}}
				</p>
			{{/each}}
		{{/if}}
		</div>
	</div>

	<div class="person-overview__more" {{#if settings.noLightbox}}{{else}}data-js-module="overlay-handler"{{/if}} >
		{{#if settings.noLightbox}}
		<a href="#" class="person-overview__morebutton is-internal">Weitere Informationen</a>
		{{else}}
		<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "person": { "personname": "{{#if content.personname}}{{content.personname}}{{/if}}"{{#if content.organization_unit}}, "organizationunit": "{{content.organization_unit}}"{{/if}}{{#if content.function}}, "jobfunction": "{{content.function}}"{{/if}}{{#if content.job_description}}, "jobdescription": "{{content.job_description}}"{{/if}}{{#if content.personinfo}}, "personinfo": "{{content.personinfo}}"{{/if}}{{#if content.office}}, "office": "{{content.office}}"{{/if}}{{#if content.room}}, "room": "{{content.room}}"{{/if}}{{#if content.street}}, "street": "{{content.street}}"{{/if}}{{#if content.plz_city}}, "city":"{{content.plz_city}}"{{/if}}, "addressitems": [{{#each content.addressitems}}{{#unless @first}},{{/unless}}{"content": {"linkText": "{{this.content.linkText}}"{{#if this.content.linkClasses}},"linkClasses": "{{this.content.linkClasses}}"{{/if}},"linkHref": "{{this.content.linkHref}}"{{#if this.content.linkTarget}},"linkTarget": "{{this.content.linkTarget}}"{{/if}} }}{{/each}}], "contactitems":[{{#each content.contactitems}}{{#unless @first}},{{/unless}}{"content": {"linkText": "{{this.content.linkText}}"{{#if this.content.linkClasses}},"linkClasses": "{{this.content.linkClasses}}"{{/if}},"linkHref": "{{this.content.linkHref}}"{{#if this.content.linkTarget}},"linkTarget": "{{this.content.linkTarget}}"{{/if}} }}{{/each}}]{{#if content.phone}},"phone":"{{content.phone}}"{{/if}}{{#if content.figure}},"img":{"imgSrc":"https://placehold.co/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://placehold.co/300x300","format_l":"600w","format_l_url":"https://placehold.co/600x600","format_xl":"1200w","format_xl_url":"https://placehold.co/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"}{{/if}} }}'
	 class="person-overview__morebutton is-internal">Weitere Informationen</button>
	 {{/if}}
	</div>

person-overview__link.hbs

<a {{#if content.linkTarget}}target="{{content.linkTarget}}" {{/if}}href="{{content.linkHref}}"
			class="person-overview__link{{#if content.linkClasses}} {{content.linkClasses}}{{/if}}{{#is
					content.linkTarget "_blank"}} is-external{{/is}}" {{#is
			content.linkTarget "_blank"}} title="Link öffnet in neuem Fenster"{{/is}}>{{content.linkText}}</a>

person-overview.scss

/* ===================================================
component: person-overview
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-person-overview"] {

	.person-overview__element {
		border: 1px solid $color-gray-light;
		width: 100%;
		position: relative;
		display: flex;
		flex-flow: column nowrap;

		@include bp($bp-mobile-p) {
			flex-flow: row nowrap;
		}

		@include print() {
			border: 1px solid $color-gray-border;
			flex-flow: row nowrap;
		}
	}

	.person-overview__area-one {
		display: flex;
		flex-flow: row wrap;

		.person-overview__element {
			margin:0 0 4% 0;
		}
	}

	.person-overview__area {
		display: flex;
		flex-flow: column wrap;

		@include bp($bp-desktop-m) {
			flex-flow: row wrap;
		}

		.person-overview__element {
			margin:0 0 3.6% 0;

			&.is-not-included {
				display: none;
			}

			@include bp($bp-desktop-m) {
				width: 48.2%;
				margin-right: 1.8%;
				margin-left: 0;
			}

			&:nth-child(even) {
				@include bp($bp-desktop-m) {
					margin-right: 0;
					margin-left: 1.8%;
				}
			}
		}
	}

	.person-overview__figure {
		@include grid-column(3);
		display: inline-block;
		max-width: 266px;
		margin-bottom: 0;


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

	.person-overview__picture {
		cursor: pointer;
	}

	.person-overview__info {
		padding: 18px 30px 0 30px;
		margin-bottom: 60px;
	}

	.person-overview__personname, .person-overview__personname-nocursor {
		font-size: 2rem;
		line-height: (28/20);
		letter-spacing: .3px;
		font-family: $font-bold;
		font-weight: 700;
		margin-bottom: 10px;
		margin-left: 0;
	}

	.person-overview__personname{
		cursor: pointer;
	}

	.person-overview__organization-unit {
		font-family: $font-bold;
		font-weight: 700;
		margin-bottom: 10px;
	}
	.person-overview__communication {
		margin-top: 10px;
		display: inline-block;
	}

	.person-overview__function, .person-overview__job-description, .person-overview__room {
		color: $color-gray;
		margin-bottom: 10px;
	}

	.person-overview__job-description {
		font-size: 1.3rem;
		line-height: (17/13);
		max-width: 650px;
	}

	.person-overview__linkarea {

		a {

		}
	}

	.person-overview__link,
	.person-overview__linkarea > a
	 {
		font-family: $font-bold;
		font-weight: 700;
		font-size: 1.5rem;
		color: $color-green;
		text-decoration: none;
		transition: color $animation-duration-std/2 $animation-easing-std;
		margin-bottom: 8px;

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

		@include print() {
			text-decoration: underline !important;
		}

		&:focus {
			outline: none;
		}

		&:hover,
		&:focus {
			color: $color-dark;

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

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

			position: relative;
			display: inline-block;
			top: 1px;
			margin-right: 10px;
			margin-left: 0;
			vertical-align: unset;
			transition: transform $animation-duration-std $animation-easing-std;


		}

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

		&.is-internal {

			&:hover,
			&.a11y-focus-key {
				color: $color-dark;
			}

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

		&.is-mail,
		&[href*="mailto:"] {
			color: $color-green;
			transition: color $animation-duration-std/3 $animation-easing-std;
			display: inline-block;

			&:focus {
				outline: none;
			}

			&:hover,
			&.a11y-focus-key {
				color: $color-dark;

				&::before {
					@include sprites-icon-mail-grey();
				}
			}

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

			&::before {
				@include pseudo();
				@include sprites-icon-mail-green();

				position: relative;
				display: inline-block;
				top: 1px;
				margin-right: 10px;
				margin-left: 0;
				vertical-align: unset;

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

		&.is-phone {
			color: $color-dark;
			transition: color $animation-duration-std/3 $animation-easing-std;
			display: inline-block;

			&:focus {
				outline: none;
			}

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

				&::before {
					@include sprites-icon-phone-green();
				}
			}

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

			&::before {
				@include pseudo();

				@include sprites-icon-phone-grey();

				position: relative;
				display: inline-block;
				top: 3px;
				margin-right: 10px;
				margin-left: 0;
				vertical-align: unset;

				@include print() {
					top: 0px;
					width: auto;
					background-image: none;
					content: "Tel.:"
				}
			}
		}

		&.is-external {

			color: $color-green;
			transition: color $animation-duration-std/3 $animation-easing-std;
			display: inline-block;

			&:focus {
				outline: none;
			}

			&:hover,
			&.a11y-focus-key {
				color: $color-dark;

				&::before {
					@include sprites-icon-externalarrow-black();
				}
			}

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

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

				position: relative;
				display: inline-block;
				top: 1px;
				margin-right: 10px;
				margin-left: 0;
				vertical-align: unset;

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

	}

	.person-overview__phone {

		font-family: $font-bold;
		font-weight: 700;
		display: block;
		margin-bottom: 8px;

		&::before {
			@include pseudo();

			@include sprites-icon-phone-grey();

			position: relative;
			display: inline-block;
			top: 3px;
			margin-right: 10px;
			vertical-align: unset;

			@include print() {
				top: 0px;
				width: auto;
				background-image: none;
				content: "Tel.:"
			}
		}
	}

	.person-overview__fax {
		font-family: $font-bold;
		font-weight: 700;
		display: block;
		margin-bottom: 8px;

		&::before {
			@include pseudo();

			@include sprites-icon-fax-grey();

			position: relative;
			display: inline-block;
			top: 3px;
			margin-right: 10px;
			vertical-align: unset;

			@include print() {
				top: 0px;
				width: auto;
				background-image: none;
				content: "Fax:"
			}
		}
	}

	.person-overview__more {
		position: absolute;
		bottom: 0px;
		right: 0px;
		padding: 10px 8px 10px 10px;
	}

	.person-overview__morebutton {
		outline: 0;
		cursor: pointer;
		border: 1px solid transparent;
		background-color: transparent;

		font-family: $font-bold;
		font-weight: 700;
		font-size: 1.5rem;
		color: $color-green;
		text-decoration: none;
		transition: color $animation-duration-std/2 $animation-easing-std;

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

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

		&:focus {
			outline: none;
		}

		&:hover,
		&:focus {
			color: $color-dark;

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

				transform: translateX(5px);
			}
		}

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

			position: relative;
			display: inline-block;
			top: 1px;
			margin-right: 10px;
			vertical-align: unset;
			transition: transform $animation-duration-std $animation-easing-std;

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

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

		&.is-internal {

			&:hover,
			&.a11y-focus-key {
				color: $color-dark;
			}

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

}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-person-overview--default {

	margin-bottom: calc(60px - 3.6%);

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

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

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

	.person-overview__headline {
		@include headline-h2-styles();
		font-family: $font-bold;
		color: $color-dark;
		font-weight: 700;

		margin-bottom: 30px;

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

		@include bp($bp-desktop-m) {
			margin-bottom: 32px;
		}
	}

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

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

	.person-overview__subteasertext {
		p {
			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) {
				margin-bottom: 21px;
			}

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

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

	.person-overview__subheadline {
		@include headline-h3-styles();

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

.c-person-overview--rte {
	margin-bottom: calc(60px - 3.6%);

	.person-overview__figure {
		margin-left: 0;
	}

	.person-overview__teasertext, .person-overview__subteasertext {
		p {
			@include rte-dimensions();
			@include content-p-styles();
		}
	}

	.person-overview__area-one {
		@include rte-dimensions();
	}

	.person-overview__area {
		@include rte-dimensions();

		@include bp($bp-desktop-m) {
			@include grid-column-width(12);
			@include grid-push-h(0);
		}
	}
}

Default mit nur einer Person

<div class="c-person-overview--default" data-css="c-person-overview" data-js-module="person-overview" data-js-options='{}'>
	<h2 class="person-overview__headline">
		Übersicht der Personen in Rasterdarstellung (Einzelner Eintrag)
	</h2>
	<div class="person-overview__teasertext">
		<p>Große und kleine Ansichtsvariante wird identisch dargestellt und unterscheidet sich nur in den angezeigten Informationen. Im Beispiel große Ansichts-Variante: mit Foto, Name(n)+Titel , Einrichtung, Funktion, Aufgabengebiet, Mail, Telefon, persönliche Website, Link auf Overlay</p>
	</div>
	<h3 class="person-overview__subheadline">
		Unterüberschrift
	</h3>
	<div class="person-overview__subteasertext">
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
	</div>
	<div class="person-overview__area-one">
		<div class="person-overview__element" data-id="0" itemscope itemtype="http://schema.org/Person" data-js-item="js-person-overview-element">
			<figure class="c-figure--default person-overview__figure" data-css="c-figure">
				<div class="figure__wrapper">
					<picture class="c-picture--default
											 person-overview__picture" data-css="c-picture" data-js-item='js-person-overview-img'>
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
											 https://placehold.co/300x300  300w  , 
											 https://placehold.co/600x600  600w  , 
											 https://placehold.co/1200x1200  1200w  " sizes=" 
											   25vw 
											  ,  (min-width: 768px) 33.33333vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
											 picture__image" src="https://placehold.co/400x400" alt="Thal-Roser Alternative text that describes the image" title="Thal-Roser Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
			<div class="person-overview__info">
				<div class="person-overview__personname" data-js-item="js-person-overview-name" itemprop="name">Prof. Dr. Irene Götz mit einem ganz langen Namen</div>
				<p class="person-overview__organization-unit" itemprop="affiliation">Einrichtung</p>
				<p class="person-overview__function" itemprop="jobTitle">Funktion</p>
				<p class="person-overview__job-description" itemprop="knowsAbout">Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig, da ich genauere Beschreibungen vorgesehen sind.)</p>
				<p class="person-overview__room" itemprop="knowsAbout">Erdgeschoss, Raum 404 B</p>
				<p class="person-overview__linkarea">
					<a target="_blank" href="http://www.zuendfunk.de" class="person-overview__link is-external" title="Link öffnet in neuem Fenster">Google-Maps-URL</a>
				</p>
				<p class="person-overview__linkarea">
					<a target="_blank" href="http://www.zuendfunk.de" class="person-overview__link is-external" title="Link öffnet in neuem Fenster">Roomfinder-URL</a>
				</p>
				<div class="person-overview__communication">
					<p class="person-overview__linkarea">
						<a href="mailto:info@lmu.de" class="person-overview__link is-mail">Email schreiben</a>
					</p>
					<p class="person-overview__linkarea">
						<a href="tel:+4908923232314" class="person-overview__link is-phone">+49(0)8933298657</a>
					</p>
					<p class="person-overview__phone" itemprop="telephone">
						+49(0)8933298657
					</p>
					<p class="person-overview__fax" itemprop="faxNumber">
						+49(0)8933298657
					</p>
					<p class="person-overview__linkarea" itemprop="url">
						<a target="_blank" href="http://www.zuendfunk.de" class="person-overview__link is-external is-external" title="Link öffnet in neuem Fenster">Persönliche Website</a>
					</p>
				</div>
			</div>
			<div class="person-overview__more" data-js-module="overlay-handler">
				<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "person": { "personname": "Prof. Dr. Irene Götz mit einem ganz langen Namen", "organizationunit": "Einrichtung", "jobfunction": "Funktion", "jobdescription": "Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig, da ich genauere Beschreibungen vorgesehen sind.)", "personinfo": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, et.", "office": "Dienststelle", "room": "Erdgeschoss, Raum 404 B", "street": "Martiusstr.2", "city":"80333 München", "addressitems": [{"content": {"linkText": "Roomfinder-URL","linkHref": "http://www.zuendfunk.de","linkTarget": "_blank" }}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de" }},{"content": {"linkText": "+49(0)8933298657","linkClasses": "is-phone","linkHref": "tel:+4908923232314" }}],"phone":"+49(0)8933298657","img":{"imgSrc":"https://placehold.co/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://placehold.co/300x300","format_l":"600w","format_l_url":"https://placehold.co/600x600","format_xl":"1200w","format_xl_url":"https://placehold.co/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"} }}' class="person-overview__morebutton is-internal">Weitere Informationen</button>
			</div>
		</div>
	</div>
</div>

Default

<div class="c-person-overview--default" data-css="c-person-overview" data-js-module="person-overview" data-js-options='{}'>
	<h2 class="person-overview__headline">
		Übersicht der Personen in Rasterdarstellung (Mehrere Personen)
	</h2>
	<div class="person-overview__teasertext">
		<p>Große Ansichts-Variante: mit Foto, Name(n)+Titel , Einrichtung, Funktion, Aufgabengebiet, Mail, Telefon, persönliche Website, Link auf Overlay</p>
	</div>
	<h3 class="person-overview__subheadline">
		2-spaltige Darstellung
	</h3>
	<div class="person-overview__subteasertext">
		<p>Aufgrund dessen, dass hier mehr Informationen im rechten Bereich erscheinen, wird die 2-spaltige Darstellung bei einem Viewport von &lt; 1280px zu einer einspaltigen Darstellung</p>
	</div>
	<div class="person-overview__area">
		<div class="person-overview__element" data-id="0" itemscope itemtype="http://schema.org/Person" data-js-item="js-person-overview-element">
			<figure class="c-figure--default person-overview__figure" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
											 person-overview__picture" data-css="c-picture" data-js-item='js-person-overview-img'>
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
											 https://placehold.co/300x300  300w  , 
											 https://placehold.co/600x600  600w  , 
											 https://placehold.co/1200x1200  1200w  " sizes=" 
											   25vw 
											  ,  (min-width: 768px) 33.33333vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
											 picture__image" src="https://placehold.co/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
			<div class="person-overview__info">
				<div class="person-overview__personname" data-js-item="js-person-overview-name" itemprop="name">Prof. Dr. Irene Götz mit einem ganz langen Namen</div>
				<p class="person-overview__organization-unit" itemprop="affiliation">Einrichtung</p>
				<p class="person-overview__function" itemprop="jobTitle">Funktion</p>
				<p class="person-overview__job-description" itemprop="knowsAbout">Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig, da ich genauere Beschreibungen vorgesehen sind.)</p>
				<p class="person-overview__room" itemprop="knowsAbout">Erdgeschoss, Raum 404 B</p>
				<div class="person-overview__communication">
					<p class="person-overview__linkarea">
						<a href="mailto:info@lmu.de" class="person-overview__link is-mail">Email schreiben</a>
					</p>
					<p class="person-overview__phone" itemprop="telephone">
						+49(0)8933298657
					</p>
					<p class="person-overview__linkarea" itemprop="url">
						<a target="_blank" href="http://www.zuendfunk.de" class="person-overview__link is-external is-external" title="Link öffnet in neuem Fenster">Persönliche Website</a>
					</p>
				</div>
			</div>
			<div class="person-overview__more" data-js-module="overlay-handler">
				<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "person": { "personname": "Prof. Dr. Irene Götz mit einem ganz langen Namen", "organizationunit": "Einrichtung", "jobfunction": "Funktion", "jobdescription": "Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig, da ich genauere Beschreibungen vorgesehen sind.)", "personinfo": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr eirmod tempor intus est Lorem ipsum dolor sit amet.", "office": "Dienststelle", "room": "Erdgeschoss, Raum 404 B", "street": "Martiusstr.2", "city":"80333 München", "addressitems": [{"content": {"linkText": "Wegbeschreibung","linkHref": "http://www.zuendfunk.de","linkTarget": "_blank" }}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de" }}],"phone":"+49(0)8933298657","img":{"imgSrc":"https://placehold.co/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://placehold.co/300x300","format_l":"600w","format_l_url":"https://placehold.co/600x600","format_xl":"1200w","format_xl_url":"https://placehold.co/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"} }}' class="person-overview__morebutton is-internal">Weitere Informationen</button>
			</div>
		</div>
		<div class="person-overview__element" data-id="1" itemscope itemtype="http://schema.org/Person" data-js-item="js-person-overview-element">
			<figure class="c-figure--default person-overview__figure" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
											 person-overview__picture" data-css="c-picture" data-js-item='js-person-overview-img'>
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
											 https://placehold.co/300x300  300w  , 
											 https://placehold.co/600x600  600w  , 
											 https://placehold.co/1200x1200  1200w  " sizes=" 
											   25vw 
											  ,  (min-width: 768px) 33.33333vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
											 picture__image" src="https://placehold.co/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
			<div class="person-overview__info">
				<div class="person-overview__personname" data-js-item="js-person-overview-name" itemprop="name">Prof. Mark Meier</div>
				<p class="person-overview__organization-unit" itemprop="affiliation">Einrichtung</p>
				<p class="person-overview__function" itemprop="jobTitle">Funktion</p>
				<p class="person-overview__job-description" itemprop="knowsAbout">Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig, da ich genauere Beschreibungen vorgesehen sind.)</p>
				<div class="person-overview__communication">
					<p class="person-overview__linkarea">
						<a href="mailto:info@lmu.de" class="person-overview__link is-mail">Email schreiben</a>
					</p>
					<p class="person-overview__phone" itemprop="telephone">
						+49(0)8933298657
					</p>
					<p class="person-overview__linkarea" itemprop="url">
						<a target="_blank" href="http://www.zuendfunk.de" class="person-overview__link is-external is-external" title="Link öffnet in neuem Fenster">Persönliche Website</a>
					</p>
				</div>
			</div>
			<div class="person-overview__more" data-js-module="overlay-handler">
				<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "person": { "personname": "Prof. Mark Meier", "organizationunit": "Einrichtung", "jobfunction": "Funktion", "jobdescription": "Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig, da ich genauere Beschreibungen vorgesehen sind.)", "personinfo": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ipsum dolor sit amet.", "office": "Dienststelle", "street": "Martiusstr.2", "city":"80333 München", "addressitems": [{"content": {"linkText": "Wegbeschreibung","linkHref": "http://www.zuendfunk.de","linkTarget": "_blank" }}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de" }}],"phone":"+49(0)8933298657","img":{"imgSrc":"https://placehold.co/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://placehold.co/300x300","format_l":"600w","format_l_url":"https://placehold.co/600x600","format_xl":"1200w","format_xl_url":"https://placehold.co/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"} }}' class="person-overview__morebutton is-internal">Weitere Informationen</button>
			</div>
		</div>
		<div class="person-overview__element" data-id="2" itemscope itemtype="http://schema.org/Person" data-js-item="js-person-overview-element">
			<figure class="c-figure--default person-overview__figure" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
											 person-overview__picture" data-css="c-picture" data-js-item='js-person-overview-img'>
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
											 https://placehold.co/300x300  300w  , 
											 https://placehold.co/600x600  600w  , 
											 https://placehold.co/1200x1200  1200w  " sizes=" 
											   25vw 
											  ,  (min-width: 768px) 33.33333vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
											 picture__image" src="https://placehold.co/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
			<div class="person-overview__info">
				<div class="person-overview__personname" data-js-item="js-person-overview-name" itemprop="name">Prof. Dr. Elmar Thal-Roser</div>
				<p class="person-overview__organization-unit" itemprop="affiliation">Einrichtung Thal-Roser</p>
				<p class="person-overview__function" itemprop="jobTitle">Funktion Thal-Roser</p>
				<p class="person-overview__job-description" itemprop="knowsAbout">Thal-Roser Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig, da ich genauere Beschreibungen vorgesehen sind.)</p>
				<p class="person-overview__room" itemprop="knowsAbout">Erdgeschoss, Raum 404 B (Thal-Roser)</p>
				<div class="person-overview__communication">
					<p class="person-overview__linkarea">
						<a href="mailto:info@lmu.de" class="person-overview__link is-mail">Email schreiben</a>
					</p>
					<p class="person-overview__phone" itemprop="telephone">
						+49(0)8933298657
					</p>
				</div>
			</div>
			<div class="person-overview__more" data-js-module="overlay-handler">
				<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "person": { "personname": "Prof. Dr. Elmar Thal-Roser", "organizationunit": "Einrichtung Thal-Roser", "jobfunction": "Funktion Thal-Roser", "jobdescription": "Thal-Roser Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig, da ich genauere Beschreibungen vorgesehen sind.)", "personinfo": "Thal-Roser Lorem ipsum dolor sit amet, consetetur sadipscing elitr.", "office": "Thal-Roser Dienststelle", "room": "Erdgeschoss, Raum 404 B (Thal-Roser)", "street": "Thal-Roser_str.", "city":"80333 Thal-Rosen", "addressitems": [{"content": {"linkText": "Wegbeschreibung zu Thal-Roser","linkClasses": "is-thal is-external","linkHref": "http://www.zuendfunk.de","linkTarget": "Thal" }}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de" }}],"phone":"+49(0)8933298657","img":{"imgSrc":"https://placehold.co/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://placehold.co/300x300","format_l":"600w","format_l_url":"https://placehold.co/600x600","format_xl":"1200w","format_xl_url":"https://placehold.co/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"} }}' class="person-overview__morebutton is-internal">Weitere Informationen</button>
			</div>
		</div>
		<div class="person-overview__element" data-id="3" itemscope itemtype="http://schema.org/Person" data-js-item="js-person-overview-element">
			<figure class="c-figure--default person-overview__figure" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
											 person-overview__picture" data-css="c-picture" data-js-item='js-person-overview-img'>
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
											 https://placehold.co/300x300  300w  , 
											 https://placehold.co/600x600  600w  , 
											 https://placehold.co/1200x1200  1200w  " sizes=" 
											   25vw 
											  ,  (min-width: 768px) 33.33333vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
											 picture__image" src="https://placehold.co/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
			<div class="person-overview__info">
				<div class="person-overview__personname" data-js-item="js-person-overview-name" itemprop="name">Prof. Irene Schmidt</div>
				<p class="person-overview__organization-unit" itemprop="affiliation">Einrichtung</p>
				<p class="person-overview__function" itemprop="jobTitle">Funktion</p>
				<p class="person-overview__job-description" itemprop="knowsAbout">Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig, da ich genauere Beschreibungen vorgesehen sind.)</p>
				<p class="person-overview__room" itemprop="knowsAbout">Erdgeschoss, Raum 404 B</p>
				<div class="person-overview__communication">
					<p class="person-overview__linkarea">
						<a href="mailto:info@lmu.de" class="person-overview__link is-mail">Email schreiben</a>
					</p>
					<p class="person-overview__phone" itemprop="telephone">
						+49(0)8933298657
					</p>
					<p class="person-overview__linkarea" itemprop="url">
						<a target="_blank" href="http://www.zuendfunk.de" class="person-overview__link is-external is-external" title="Link öffnet in neuem Fenster">Persönliche Website</a>
					</p>
				</div>
			</div>
			<div class="person-overview__more" data-js-module="overlay-handler">
				<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "person": { "personname": "Prof. Irene Schmidt", "organizationunit": "Einrichtung", "jobfunction": "Funktion", "jobdescription": "Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig, da ich genauere Beschreibungen vorgesehen sind.)", "personinfo": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", "office": "Dienststelle", "room": "Erdgeschoss, Raum 404 B", "street": "Martiusstr.2", "city":"80333 München", "addressitems": [{"content": {"linkText": "Wegbeschreibung","linkHref": "http://www.zuendfunk.de","linkTarget": "_blank" }}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de" }}],"phone":"+49(0)8933298657","img":{"imgSrc":"https://placehold.co/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://placehold.co/300x300","format_l":"600w","format_l_url":"https://placehold.co/600x600","format_xl":"1200w","format_xl_url":"https://placehold.co/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"} }}' class="person-overview__morebutton is-internal">Weitere Informationen</button>
			</div>
		</div>
		<div class="person-overview__element" data-id="4" itemscope itemtype="http://schema.org/Person" data-js-item="js-person-overview-element">
			<figure class="c-figure--default person-overview__figure" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
											 person-overview__picture" data-css="c-picture" data-js-item='js-person-overview-img'>
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
											 https://placehold.co/300x300  300w  , 
											 https://placehold.co/600x600  600w  , 
											 https://placehold.co/1200x1200  1200w  " sizes=" 
											   25vw 
											  ,  (min-width: 768px) 33.33333vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
											 picture__image" src="https://placehold.co/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
			<div class="person-overview__info">
				<div class="person-overview__personname" data-js-item="js-person-overview-name" itemprop="name">Prof. Dr. Helga Dornbirn</div>
				<p class="person-overview__organization-unit" itemprop="affiliation">Einrichtung</p>
				<p class="person-overview__function" itemprop="jobTitle">Funktion</p>
				<p class="person-overview__job-description" itemprop="knowsAbout">Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig, da ich genauere Beschreibungen vorgesehen sind.)</p>
				<p class="person-overview__room" itemprop="knowsAbout">Erdgeschoss, Raum 404 B</p>
				<div class="person-overview__communication">
					<p class="person-overview__linkarea">
						<a href="mailto:info@lmu.de" class="person-overview__link is-mail">Email schreiben</a>
					</p>
					<p class="person-overview__phone" itemprop="telephone">
						+49(0)8933298657
					</p>
					<p class="person-overview__linkarea" itemprop="url">
						<a target="_blank" href="http://www.zuendfunk.de" class="person-overview__link is-external is-external" title="Link öffnet in neuem Fenster">Persönliche Website</a>
					</p>
				</div>
			</div>
			<div class="person-overview__more" data-js-module="overlay-handler">
				<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "person": { "personname": "Prof. Dr. Helga Dornbirn", "organizationunit": "Einrichtung", "jobfunction": "Funktion", "jobdescription": "Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig, da ich genauere Beschreibungen vorgesehen sind.)", "personinfo": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", "office": "Dienststelle", "room": "Erdgeschoss, Raum 404 B", "street": "Martiusstr.2", "city":"80333 München", "addressitems": [{"content": {"linkText": "Wegbeschreibung","linkHref": "http://www.zuendfunk.de","linkTarget": "_blank" }}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de" }}],"phone":"+49(0)8933298657","img":{"imgSrc":"https://placehold.co/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://placehold.co/300x300","format_l":"600w","format_l_url":"https://placehold.co/600x600","format_xl":"1200w","format_xl_url":"https://placehold.co/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"} }}' class="person-overview__morebutton is-internal">Weitere Informationen</button>
			</div>
		</div>
	</div>
</div>

RTE

<div class="c-person-overview--rte" data-css="c-person-overview" data-js-module="person-overview" data-js-options='{}'>
	<h2 class="person-overview__headline">
		Übersicht der Personen in Rasterdarstellung (RTE-Modus)
	</h2>
	<div class="person-overview__teasertext">
		<p>Große Ansichts-Variante: mit Foto, Name(n)+Titel , Einrichtung, Funktion, Aufgabengebiet, Mail, Telefon, persönliche Website, Link auf Overlay</p>
	</div>
	<h3 class="person-overview__subheadline">
		Darstellung ein einzelner Kontakt
	</h3>
	<div class="person-overview__subteasertext">
		<p>Bei einzelnen Kontakten wird die Darstellung über die gesamte Breite des Textflusses genutzt.</p>
	</div>
	<div class="person-overview__area-one">
		<div class="person-overview__element" data-id="0" itemscope itemtype="http://schema.org/Person" data-js-item="js-person-overview-element">
			<figure class="c-figure--default person-overview__figure" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
											 person-overview__picture" data-css="c-picture" data-js-item='js-person-overview-img'>
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
											 https://placehold.co/300x300  300w  , 
											 https://placehold.co/600x600  600w  , 
											 https://placehold.co/1200x1200  1200w  " sizes=" 
											   25vw 
											  ,  (min-width: 768px) 33.33333vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
											 picture__image" src="https://placehold.co/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
			<div class="person-overview__info">
				<div class="person-overview__personname" data-js-item="js-person-overview-name" itemprop="name">Prof. Dr. Elisabeth Haimeranhausen-Vollindertat</div>
				<p class="person-overview__organization-unit" itemprop="affiliation">Einrichtung</p>
				<p class="person-overview__function" itemprop="jobTitle">Funktion</p>
				<p class="person-overview__job-description" itemprop="knowsAbout">Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig.)</p>
				<p class="person-overview__room" itemprop="knowsAbout">Erdgeschoss, Raum 404 B</p>
				<div class="person-overview__communication">
					<p class="person-overview__linkarea">
						<a href="mailto:info@lmu.de" class="person-overview__link is-mail">Email schreiben</a>
					</p>
					<p class="person-overview__phone" itemprop="telephone">
						+49(0)8933298657
					</p>
					<p class="person-overview__linkarea" itemprop="url">
						<a target="_blank" href="http://www.zuendfunk.de" class="person-overview__link is-external is-external" title="Link öffnet in neuem Fenster">Persönliche Website</a>
					</p>
				</div>
			</div>
			<div class="person-overview__more" data-js-module="overlay-handler">
				<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "person": { "personname": "Prof. Dr. Elisabeth Haimeranhausen-Vollindertat", "organizationunit": "Einrichtung", "jobfunction": "Funktion", "jobdescription": "Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig.)", "personinfo": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", "office": "Dienststelle", "room": "Erdgeschoss, Raum 404 B", "street": "Martiusstr.2", "city":"80333 München", "addressitems": [{"content": {"linkText": "Wegbeschreibung","linkHref": "http://www.zuendfunk.de","linkTarget": "_blank" }}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de" }}],"phone":"+49(0)8933298657","img":{"imgSrc":"https://placehold.co/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://placehold.co/300x300","format_l":"600w","format_l_url":"https://placehold.co/600x600","format_xl":"1200w","format_xl_url":"https://placehold.co/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"} }}' class="person-overview__morebutton is-internal">Weitere Informationen</button>
			</div>
		</div>
	</div>
</div>

RTE2

<div class="c-person-overview--rte is-large" data-css="c-person-overview" data-js-module="person-overview" data-js-options='{}'>
	<h2 class="person-overview__headline">
		Übersicht der Personen in Rasterdarstellung (RTE-Modus)
	</h2>
	<div class="person-overview__teasertext">
		<p>Große Ansichts-Variante: mit Foto, Name(n)+Titel , Einrichtung, Funktion, Aufgabengebiet, Mail, Telefon, persönliche Website, Link auf Overlay</p>
	</div>
	<h3 class="person-overview__subheadline">
		2-spaltige Darstellung
	</h3>
	<div class="person-overview__subteasertext">
		<p>Aufgrund dessen, dass hier mehr Informationen im rechten Bereich erscheinen, wird die 2-spaltige Darstellung bei einem Viewport von &lt; 1280px zu einer einspaltigen Darstellung</p>
	</div>
	<div class="person-overview__area">
		<div class="person-overview__element" data-id="0" itemscope itemtype="http://schema.org/Person" data-js-item="js-person-overview-element">
			<figure class="c-figure--default person-overview__figure" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
											 person-overview__picture" data-css="c-picture" data-js-item='js-person-overview-img'>
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
											 https://placehold.co/300x300  300w  , 
											 https://placehold.co/600x600  600w  , 
											 https://placehold.co/1200x1200  1200w  " sizes=" 
											   25vw 
											  ,  (min-width: 768px) 33.33333vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
											 picture__image" src="https://placehold.co/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
			<div class="person-overview__info">
				<div class="person-overview__personname" data-js-item="js-person-overview-name" itemprop="name">Prof. Dr. Elisabeth Heimeranhausenindertat</div>
				<p class="person-overview__organization-unit" itemprop="affiliation">Einrichtung</p>
				<p class="person-overview__function" itemprop="jobTitle">Applikationsentwicklerin Internet</p>
				<p class="person-overview__job-description" itemprop="knowsAbout">Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig.)</p>
				<p class="person-overview__room" itemprop="knowsAbout">Erdgeschoss, Raum 404 B</p>
				<div class="person-overview__communication">
					<p class="person-overview__linkarea">
						<a href="mailto:info@lmu.de" class="person-overview__link is-mail">Email schreiben</a>
					</p>
					<p class="person-overview__phone" itemprop="telephone">
						+49(0)8933298657
					</p>
					<p class="person-overview__linkarea" itemprop="url">
						<a target="_blank" href="http://www.zuendfunk.de" class="person-overview__link is-external is-external" title="Link öffnet in neuem Fenster">Persönliche Website</a>
					</p>
				</div>
			</div>
			<div class="person-overview__more" data-js-module="overlay-handler">
				<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "person": { "personname": "Prof. Dr. Elisabeth Heimeranhausenindertat", "organizationunit": "Einrichtung", "jobfunction": "Applikationsentwicklerin Internet", "jobdescription": "Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig.)", "personinfo": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", "office": "Dienststelle", "room": "Erdgeschoss, Raum 404 B", "street": "Martiusstr.2", "city":"80333 München", "addressitems": [{"content": {"linkText": "Wegbeschreibung","linkHref": "http://www.zuendfunk.de","linkTarget": "_blank" }}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de" }}],"phone":"+49(0)8933298657","img":{"imgSrc":"https://placehold.co/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://placehold.co/300x300","format_l":"600w","format_l_url":"https://placehold.co/600x600","format_xl":"1200w","format_xl_url":"https://placehold.co/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"} }}' class="person-overview__morebutton is-internal">Weitere Informationen</button>
			</div>
		</div>
		<div class="person-overview__element" data-id="1" itemscope itemtype="http://schema.org/Person" data-js-item="js-person-overview-element">
			<figure class="c-figure--default person-overview__figure" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
											 person-overview__picture" data-css="c-picture" data-js-item='js-person-overview-img'>
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
											 https://placehold.co/300x300  300w  , 
											 https://placehold.co/600x600  600w  , 
											 https://placehold.co/1200x1200  1200w  " sizes=" 
											   25vw 
											  ,  (min-width: 768px) 33.33333vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
											 picture__image" src="https://placehold.co/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
			<div class="person-overview__info">
				<div class="person-overview__personname" data-js-item="js-person-overview-name" itemprop="name">Prof. Dr. Elisabeth Haimeranhausen-Vollindertat</div>
				<p class="person-overview__organization-unit" itemprop="affiliation">Einrichtung</p>
				<p class="person-overview__function" itemprop="jobTitle">Funktion</p>
				<p class="person-overview__job-description" itemprop="knowsAbout">Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig.)</p>
				<p class="person-overview__room" itemprop="knowsAbout">Erdgeschoss, Raum 404 B</p>
				<div class="person-overview__communication">
					<p class="person-overview__linkarea">
						<a href="mailto:info@lmu.de" class="person-overview__link is-mail">Email schreiben</a>
					</p>
					<p class="person-overview__phone" itemprop="telephone">
						+49(0)8933298657
					</p>
					<p class="person-overview__linkarea" itemprop="url">
						<a target="_blank" href="http://www.zuendfunk.de" class="person-overview__link is-external is-external" title="Link öffnet in neuem Fenster">Persönliche Website</a>
					</p>
				</div>
			</div>
			<div class="person-overview__more" data-js-module="overlay-handler">
				<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "person": { "personname": "Prof. Dr. Elisabeth Haimeranhausen-Vollindertat", "organizationunit": "Einrichtung", "jobfunction": "Funktion", "jobdescription": "Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig.)", "personinfo": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", "office": "Dienststelle", "room": "Erdgeschoss, Raum 404 B", "street": "Martiusstr.2", "city":"80333 München", "addressitems": [{"content": {"linkText": "Wegbeschreibung","linkHref": "http://www.zuendfunk.de","linkTarget": "_blank" }}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de" }}],"phone":"+49(0)8933298657","img":{"imgSrc":"https://placehold.co/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://placehold.co/300x300","format_l":"600w","format_l_url":"https://placehold.co/600x600","format_xl":"1200w","format_xl_url":"https://placehold.co/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"} }}' class="person-overview__morebutton is-internal">Weitere Informationen</button>
			</div>
		</div>
		<div class="person-overview__element" data-id="2" itemscope itemtype="http://schema.org/Person" data-js-item="js-person-overview-element">
			<figure class="c-figure--default person-overview__figure" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
											 person-overview__picture" data-css="c-picture" data-js-item='js-person-overview-img'>
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
											 https://placehold.co/300x300  300w  , 
											 https://placehold.co/600x600  600w  , 
											 https://placehold.co/1200x1200  1200w  " sizes=" 
											   25vw 
											  ,  (min-width: 768px) 33.33333vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
											 picture__image" src="https://placehold.co/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
			<div class="person-overview__info">
				<div class="person-overview__personname" data-js-item="js-person-overview-name" itemprop="name">Prof. Dr. Elisabeth Haimeranhausen-Vollindertat</div>
				<p class="person-overview__organization-unit" itemprop="affiliation">Einrichtung</p>
				<p class="person-overview__function" itemprop="jobTitle">Funktion</p>
				<p class="person-overview__job-description" itemprop="knowsAbout">Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig.)</p>
				<p class="person-overview__room" itemprop="knowsAbout">Erdgeschoss, Raum 404 B</p>
				<div class="person-overview__communication">
					<p class="person-overview__linkarea">
						<a href="mailto:info@lmu.de" class="person-overview__link is-mail">Email schreiben</a>
					</p>
					<p class="person-overview__phone" itemprop="telephone">
						+49(0)8933298657
					</p>
					<p class="person-overview__linkarea" itemprop="url">
						<a target="_blank" href="http://www.zuendfunk.de" class="person-overview__link is-external is-external" title="Link öffnet in neuem Fenster">Persönliche Website</a>
					</p>
				</div>
			</div>
			<div class="person-overview__more" data-js-module="overlay-handler">
				<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "person": { "personname": "Prof. Dr. Elisabeth Haimeranhausen-Vollindertat", "organizationunit": "Einrichtung", "jobfunction": "Funktion", "jobdescription": "Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig.)", "personinfo": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", "office": "Dienststelle", "room": "Erdgeschoss, Raum 404 B", "street": "Martiusstr.2", "city":"80333 München", "addressitems": [{"content": {"linkText": "Wegbeschreibung","linkHref": "http://www.zuendfunk.de","linkTarget": "_blank" }}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de" }}],"phone":"+49(0)8933298657","img":{"imgSrc":"https://placehold.co/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://placehold.co/300x300","format_l":"600w","format_l_url":"https://placehold.co/600x600","format_xl":"1200w","format_xl_url":"https://placehold.co/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"} }}' class="person-overview__morebutton is-internal">Weitere Informationen</button>
			</div>
		</div>
		<div class="person-overview__element" data-id="3" itemscope itemtype="http://schema.org/Person" data-js-item="js-person-overview-element">
			<figure class="c-figure--default person-overview__figure" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
											 person-overview__picture" data-css="c-picture" data-js-item='js-person-overview-img'>
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
											 https://placehold.co/300x300  300w  , 
											 https://placehold.co/600x600  600w  , 
											 https://placehold.co/1200x1200  1200w  " sizes=" 
											   25vw 
											  ,  (min-width: 768px) 33.33333vw " />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
											 picture__image" src="https://placehold.co/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
				</div>
			</figure>
			<div class="person-overview__info">
				<div class="person-overview__personname" data-js-item="js-person-overview-name" itemprop="name">Prof. Dr. Elisabeth Götz-Schmidt</div>
				<p class="person-overview__organization-unit" itemprop="affiliation">Einrichtung</p>
				<p class="person-overview__function" itemprop="jobTitle">Funktion</p>
				<p class="person-overview__job-description" itemprop="knowsAbout">Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig.)</p>
				<p class="person-overview__room" itemprop="knowsAbout">Erdgeschoss, Raum 404 B</p>
				<div class="person-overview__communication">
					<p class="person-overview__linkarea">
						<a href="mailto:info@lmu.de" class="person-overview__link is-mail">Email schreiben</a>
					</p>
					<p class="person-overview__phone" itemprop="telephone">
						+49(0)8933298657
					</p>
				</div>
			</div>
			<div class="person-overview__more" data-js-module="overlay-handler">
				<button type="button" aria-haspopup="true" aria-controls="overlay" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "person": { "personname": "Prof. Dr. Elisabeth Götz-Schmidt", "organizationunit": "Einrichtung", "jobfunction": "Funktion", "jobdescription": "Aufgabengebiet (kann auch eine längere Beschreibung sein und deswegen mehrspaltig.)", "personinfo": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", "office": "Dienststelle", "room": "Erdgeschoss, Raum 404 B", "street": "Martiusstr.2", "city":"80333 München", "addressitems": [{"content": {"linkText": "Wegbeschreibung","linkHref": "http://www.zuendfunk.de","linkTarget": "_blank" }}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de" }}],"phone":"+49(0)8933298657","img":{"imgSrc":"https://placehold.co/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://placehold.co/300x300","format_l":"600w","format_l_url":"https://placehold.co/600x600","format_xl":"1200w","format_xl_url":"https://placehold.co/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"} }}' class="person-overview__morebutton is-internal">Weitere Informationen</button>
			</div>
		</div>
	</div>
</div>