<script type="text/javascript">
	$(function() {
		LmuPersonModule.init();
	});
</script>


<div class="c-header-person{{#if settings.headerPersonContextClass}}--{{settings.headerPersonContextClass}}{{else}}--default{{/if}}{{#if settings.headerPersonClasses}} {{settings.headerPersonClasses}}{{/if}}"
     data-css="c-header-person"
     data-js-module="header-person"{{#if settings.headerPersonJsOptions}}
     data-js-options='{{stringify settings.headerPersonJsOptions}}'{{/if}}>
    {{#wrapWith "grid__container"}}
		{{#wrapWith "grid__row"}}
			<div class="header-person__container {{#if content.linkbtn}}is-with-button{{/if}}">
				<article class="header-person__wrapper">
					<h1 class="header-person__name">{{content.personName}}</h1>
					<p class="header-person__job">{{content.personJob}}</p>
					<p class="header-person__department">{{content.personDepartment}}</p>
					{{#if content.personResponsibility}}<p class="header-person__responsibility">{{content.personResponsibility}}</p>{{/if}}
					<div class="header-person__detail {{#if content.personDetailarea.length}}is-areas-{{content.personDetailarea.length}}{{/if}}">
						{{#if content.personDetailarea}}
							{{#each content.personDetailarea}}
								<div class="header-person__detail_area">
               						  {{> header-person__contentitem}}
								</div>
              				{{/each}}
						{{/if}}
					</div>
					<div class="header-person__media-container">
						{{#if content.figure}}
							{{#with content.figure}}
								{{> figure }}
							{{/with}}
						{{/if}}
						{{#if content.linkbtn}}
							<nav class="header-person__btn-area">
								{{#each content.linkbtn}}
									{{> header-person__linkbtn}}
              					{{/each}}
							</nav>
						{{/if}}
					</div>
				</article>
			</div>
		{{/wrapWith}}
	{{/wrapWith}}

</div>

header-person__linkbtn.hbs

<ul class="header-person__btn-list">
	{{#each items}}
		{{#if linkText}}
			<li class="header-person__btn-item{{#if itemClasses}} {{itemClasses}}{{/if}}">
				<a class="header-person__btn-link" href="{{#if linkHref}}{{linkHref}}{{else}}#{{/if}}"{{#if linkTarget}} target="{{linkTarget}}" title="{{{linkText}}}" {{/if}}><span class="header-person__btn-link-text">{{{linkText}}}</span></a>
			</li>
		{{/if}}
	{{/each}}
</ul>

header-person__contentitem.hbs

{{#each items}}
	<p {{#if itemClass}}class="{{itemClass}}"{{/if}}>
		{{#if itemHead}}<b>{{itemHead}}</b>{{/if}}
		{{#if itemHref}}<a href="{{itemHref}}" rel="noopener" {{#if itemLinkClass}}class="{{itemLinkClass}}"{{/if}} {{#if itemTarget}}target="{{itemTarget}}"{{/if}}>{{/if}}
		{{#if itemText}}{{itemText}}{{/if}}
		{{#if itemHref}}</a>{{/if}}
	</p>
{{/each}}

header-person.scss

/* ===================================================
component: header-person
=================================================== */
$padding-top-mobile: 27px;
$padding-top-tablet-p: 54px;
$padding-top-desktop-l: 80px;

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-header-person"] {
	position: relative;
	padding-top: $padding-top-mobile;
	margin-bottom: 110px;

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

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

	@include print() {
		margin-bottom: 60px;
	}

	.header-person__container {
		position: relative;

		&::before,
		&::after {
			@include pseudo();

			background-color: $color-light;
			height: calc(100% + #{$padding-top-desktop-l});
			display: block;
			z-index: -1;
			top: -$padding-top-mobile;

			@include bp($bp-tablet-p) {
				top: -$padding-top-tablet-p;
				height: calc(100% + #{$padding-top-tablet-p * 2});
			}

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

		&::before {
			@include grid-column-width(12);

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

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

			@include bp($bp-desktop-l) {
				@include grid-column-width(10);
			}

		}

		&::after {
			left: -50vw;
			width: 100vw;
		}

		&.is-with-button {
			&::before,
			&::after {
				height: calc(100% + #{$padding-top-desktop-l - $padding-top-tablet-p});

				@include bp($bp-tablet-p) {
					height: calc(100% + #{$padding-top-tablet-p});
				}
			}

			.header-person__media-container {
				display: block;
			}

			.header-person__btn-area {
				display: flex;
				flex-flow: row wrap;
				justify-content: flex-end;
			}
		}
	}

	.header-person__wrapper {
		display: flex;
		flex-direction: column;

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

		@include print() {
			background-color: $color-white;
		}
	}

	.header-person__name {
		@include headline-h1-styles();

		color: $color-dark;

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

	.header-person__job {
		color: $color-dark;
		font-size: 2.2rem;
		line-height: (30/22);
		letter-spacing: 0;
		font-family: $font-bold;
		font-weight: 700;
		margin-bottom: 20px;

		@include bp($bp-tablet-p) {
			font-size: 2.8rem;
			line-height: (38/28);
			margin-bottom: 18px;
		}

		@include bp($bp-desktop-m) {
			font-size: 3.2rem;
			line-height: (42/32);
			margin-bottom: 22px;
		}

		@include bp($bp-desktop-l) {
			font-size: 3.4rem;
			line-height: (44/34);
		}
	}

	.header-person__department {
		font-size: 2rem;
		line-height: (28/20);
		letter-spacing: .3px;
		font-family: $font-regular;
		font-weight: 400;
		margin-bottom: 18px;
		color: $color-dark;

		@include bp($bp-tablet-p) {
			font-size: 2.2rem;
			line-height: (30/22);
			letter-spacing: 0;
		}

		@include bp($bp-desktop-m) {
			font-size: 2.6rem;
			line-height: (36/26);
			margin-bottom: 20px;
		}
	}

	.header-person__responsibility {
		font-family: $font-light;
		color: $color-dark;
		font-size: 1.9rem;
		line-height: (28/19);
		letter-spacing: .3px;
		margin-bottom: 18px;

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

	.header-person__detail {
		font-family: $font-light;
		color: $color-dark;
		font-size: 1.9rem;
		line-height: (28/19);
		letter-spacing: .3px;
		display: flex;
		flex-flow: column nowrap;
		width: 100%;


		@include bp($bp-tablet-p) {
			padding-right: 0;
		}

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

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

		.header-person__detail_area {
			width: 100%;
			flex: 0 1 auto;
			padding-top: 18px;

			&:first-child {
				padding-top: 0;
			}

			@include bp($bp-tablet-l) {
				float: left;
				padding-top: 0;
			}

			b {
				font-family: $font-bold;
				font-weight: 700;
			}

			p {
				@include bp($bp-tablet-l) {
					padding-right: 15px;
				}
			}

			.is-fax {
				font-family: $font-bold;
				font-weight: 700;
				color: $color-dark;

				position: relative;
				display: block;
				padding: 0 0 15px 25px;

				&::before {
					@include pseudo();
					@include sprites-icon-fax-grey();

					position: absolute;
					display: block;
					top: 5px;
					left: 0;
					vertical-align: unset;
					transition: transform $animation-duration-std $animation-easing-std;

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

			}

		}

		.header-person__contenthead {
			padding-top: 18px;
		}

		.header-person__contentlink {
			font-family: $font-bold;
			font-weight: 700;
			letter-spacing: .3px;

			font-size: 1.9rem;
			line-height: (28/19);

			position: relative;
			display: block;
			padding: 0 0 2px 25px;

			color: $color-green-hc-dark;
			text-decoration: none;
			transition: color $animation-duration-std/2 $animation-easing-std;

			@include print() {
				text-decoration: underline !important;
				padding: 0 0 2px 0;
			}

			&: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: absolute;
				display: block;
				left: 0;
				top: 7px;
				vertical-align: unset;
				transition: transform $animation-duration-std $animation-easing-std;

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

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

			&.is-external {

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

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

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

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

			&.is-internal {

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

			&.is-download {

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

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

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

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

			&.is-phone {

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

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

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

				&::before {
					@include pseudo();
					@include sprites-icon-phone-green();
					top: 5px;
				}
			}

			&.is-mail,
			&[href*="mailto:"] {

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

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

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

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

		&.is-areas-3 {

			@include bp($bp-tablet-l) {
				font-size: 1.5rem;
				line-height: (22/15);
				letter-spacing: .25px;
			}

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

			.header-person__detail_area {
				@include bp($bp-tablet-l) {
					width: 33.332%;
					flex: 0 1 33.332%;
				}

				.is-fax {
					&::before {
						@include bp($bp-tablet-l) {
							top: 2px;
						}

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

			.header-person__contentlink {

				@include bp($bp-tablet-l) {
					font-size: 1.5rem;
					line-height: (22/15);
					letter-spacing: .25px;
				}

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



				&::before {
					@include bp($bp-tablet-l) {
						top: 4px;
					}

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

				&.is-phone {
					&::before {
						@include bp($bp-tablet-l) {
							top: 2px;
						}

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

			}

			.header-person__contenthead {
				@include bp($bp-tablet-l) {
					padding-top: 6px;
				}
			}
		}
		&.is-areas-2 {
			.header-person__detail_area {
				@include bp($bp-tablet-l) {
					width: 50%;
					flex: 0 1 50%;
				}
			}
		}

	}

	.header-person__name,
	.header-person__job,
	.header-person__department,
	.header-person__detail,
	.header-person__responsibility {
		@include grid-column-width(11);

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

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

		@include bp($bp-desktop-m) {
			@include grid-column-width(10);
		}

		@include bp($bp-desktop-l) {
			@include grid-column-width(9);
		}
	}

	.header-person__media-container {
		position: relative;
		top: $padding-top-tablet-p;
		display: block;


		@include grid-column-width(12);

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

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

		@include bp($bp-desktop-m) {
			@include grid-column-width(11);
		}

		@include bp($bp-desktop-l) {
			@include grid-column-width(10);
		}

	}

	.header-person__btn-area {
		position: relative;
		right: 0px;
		bottom: 0px;
		display: none;
	}

	.header-person__btn-list {
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;

		@include bp($bp-tablet-l) {
			margin-right: 0;
		}

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

	.header-person__btn-item {
		width: $padding-top-tablet-p;
		padding-bottom: $padding-top-tablet-p;
		float: left;
		flex: 0 0 $padding-top-tablet-p;

		position: relative;
		border-right: 1px solid $color-white;

		&:last-child {
			border-right: none;
		}

		&.is-facebook,
		&.is-twitter,
		&.is-instagram,
		&.is-youtube,
		&.is-linkedin,
		&.is-researchgate,
		&.is-website,
		&.is-orcid,
		&.is-academia,
		&.is-bluesky,
		&.is-mastodon {
			border-top: 1px solid $color-white;

			.header-person__btn-link-text {
				@include hidden-text();
				transform: scale(.7);

				@include hcm() {
					color: $color-black;
					height: auto;
					width: auto;
					font-size: 1.6rem;
				}
			}

			.header-person__btn-link {
				border-color: $color-blue;
				background-color: $color-blue;
				transition: all $animation-duration-std $animation-easing-std;
				cursor: pointer;

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

					.header-person__btn-link-text {
						@include hcm() {
							color: $color-black;
							height: auto;
							width: auto;
							font-size: 16px;
						}
					}
				}

				&.a11y-focus-key {
					outline-offset: -2px;
				}
			}


		}

		&.is-mastodon {

			.header-person__btn-link-text {
				@include sprites-icon-mastodon-white();
			}

			.header-person__btn-link {

				&:hover,
				&.a11y-focus-key {
					.header-person__btn-link-text {
						@include sprites-icon-mastodon-blue();
					}
				}
			}
		}

		&.is-bluesky {

			.header-person__btn-link-text {
				@include sprites-icon-bluesky-white();
			}

			.header-person__btn-link {

				&:hover,
				&.a11y-focus-key {
					.header-person__btn-link-text {
						@include sprites-icon-bluesky-blue();
					}
				}
			}
		}

		&.is-facebook {

			.header-person__btn-link-text {
				@include sprites-icon-facebook-white();
			}

			.header-person__btn-link {

				&:hover,
				&.a11y-focus-key {
					.header-person__btn-link-text {
						@include sprites-icon-facebook-blue();
					}
				}
			}
		}

		&.is-twitter {

			.header-person__btn-link-text {
				@include sprites-icon-twitter-white();
			}

			.header-person__btn-link {

				&:hover,
				&.a11y-focus-key {
					.header-person__btn-link-text {
						@include sprites-icon-twitter-blue();
					}
				}
			}
		}

		&.is-instagram {

			.header-person__btn-link-text {
				@include sprites-icon-instagram-white();
			}

			.header-person__btn-link {

				&:hover,
				&.a11y-focus-key {
					.header-person__btn-link-text {
						@include sprites-icon-instagram-blue();
					}
				}
			}
		}

		&.is-youtube {

			.header-person__btn-link-text {
				@include sprites-icon-youtube-white();
			}

			.header-person__btn-link {

				&:hover,
				&.a11y-focus-key {
					.header-person__btn-link-text {
						@include sprites-icon-youtube-blue();
					}
				}
			}
		}

		&.is-linkedin {

			.header-person__btn-link-text {
				@include sprites-icon-linkedin-white();
			}

			.header-person__btn-link {

				&:hover,
				&.a11y-focus-key {
					.header-person__btn-link-text {
						@include sprites-icon-linkedin-blue();
					}
				}
			}
		}

		&.is-researchgate {

			.header-person__btn-link-text {
				@include sprites-icon-researchgate-white();
			}

			.header-person__btn-link {

				&:hover,
				&.a11y-focus-key {
					.header-person__btn-link-text {
						@include sprites-icon-researchgate-blue();
					}
				}
			}
		}

		&.is-website {

			.header-person__btn-link-text {
				@include sprites-icon-website-white();
			}

			.header-person__btn-link {

				&:hover,
				&.a11y-focus-key {
					.header-person__btn-link-text {
						@include sprites-icon-website-blue();
					}
				}
			}
		}

		&.is-academia {

			.header-person__btn-link-text {
				@include sprites-icon-academia-white();
			}

			.header-person__btn-link {

				&:hover,
				&.a11y-focus-key {
					.header-person__btn-link-text {
						@include sprites-icon-academia-blue();
					}
				}
			}
		}

		&.is-orcid {

			.header-person__btn-link-text {
				@include sprites-icon-orcid-white();
			}

			.header-person__btn-link {

				&:hover,
				&.a11y-focus-key {
					.header-person__btn-link-text {
						@include sprites-icon-orcid-blue();
					}
				}
			}
		}


	}

	.header-person__btn-link-text {
		@media screen and (-ms-high-contrast: active),
			(-ms-high-contrast: none) {
			display: block;
		}

		@include bp($bp-mobile-s) {
			transform: scale(.7);
		}
		@include bp($bp-mobile-p) {
			transform: scale(.7);
		}
		@include bp($bp-desktop-m) {
			transform: scale(1);
		}
	}

	.header-person__btn-link {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		width: 100%;
		height: 100%;
		text-decoration: none;
		border: 1px solid;
		color: $color-white;
		justify-content: center;
		align-items: center;
		cursor: pointer;

		@include print() {
			border: none;
		}

		&.a11y-focus-key {
			outline-offset: -2px;
		}
	}

	// modifier
	&.is-with-picture {
		padding-top: 0px;
		margin-bottom: calc(110px - #{$padding-top-mobile});

		@include bp($bp-tablet-p) {
			margin-bottom: $padding-top-tablet-p * 2;
			padding-top: $padding-top-mobile;
		}

		.header-person__container {

			&::before,
			&::after {

				height: calc(100% + #{$padding-top-tablet-p});

				@include bp($bp-tablet-l) {
					top: -$padding-top-tablet-p;
					height: 100%;
				}
			}

			&.is-with-button {
				&::before,
				&::after {

					height: calc(100%);

					@include bp($bp-tablet-p) {
						height: calc(100% + #{$padding-top-tablet-p * 2});
					}

					@include bp($bp-tablet-l) {
						height: 100%;
					}
				}
			}
		}

		.header-person__wrapper {
			margin-top: $padding-top-mobile;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.header-person__name,
		.header-person__job,
		.header-person__department,
		.header-person__responsibility {
			@include bp($bp-tablet-p) {
				@include grid-column-width(9);
			}

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

			@include bp($bp-desktop-m) {
				@include grid-column-width(10);
			}

			@include bp($bp-desktop-l) {
				@include grid-column-width(9);
			}
		}

		.header-person__name {
			@include bp($bp-tablet-p) {
				margin-bottom: 30px;
				margin-top: 0;
			}
		}

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

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

			@include bp($bp-desktop-m) {
				@include grid-column-width(8);
			}
		}

		.header-person__media-container {
			@include grid-column-width(12);
			right: 0;
			margin-left: 0;
			align-self: flex-end;
			display: block;
			top: $padding-top-mobile;

			@include bp($bp-tablet-p) {
				@include grid-column-width(4);
				align-self: flex-start;
				top: 0;
				display: block;
			}

			@include bp($bp-tablet-l) {
				align-self: flex-end;
			}

			@include print() {
				width: calc(25%);
			}

			.c-figure--default {

				display: flex;
				flex-flow: row wrap;
				justify-content: flex-end;

				.figure__wrapper {
					@include grid-column-width(5);

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

						@include grid-column-width(12);
					}
				}
			}
		}

		.header-person__btn-area {

			@include bp($bp-tablet-p) {
				left: 0px;
				right: auto;
				bottom: 0px;
			}

			@include bp($bp-tablet-l) {
				position: absolute;
				left: -400px;
				width: 400px;
			}
		}
	}















}

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


}

Bühne Personendetailseite mit Bild und Sprechstunde und ohne Buttons - Sobald Sprechstunde aktiv erscheint 3-Spalte und Postanschrift erscheint unter Sprechstunde

<script type="text/javascript">
	$(function() {
		LmuPersonModule.init();
	});
</script>
<div class="c-header-person--default is-with-picture" data-css="c-header-person" data-js-module="header-person" data-js-options='{}'>
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-person__container ">
				<article class="header-person__wrapper">
					<h1 class="header-person__name">Susanne Sekretariat-Assistenz</h1>
					<p class="header-person__job">Assistenz am Lehrstuhl für Marketing</p>
					<p class="header-person__department">Fakultät Betriebswirtschaftslehre mit sehr langen Titel für das Fach</p>
					<p class="header-person__responsibility">Hier dann verschiedene Aufgabengebite die dann erscheinen sollen. Der Text ist dann länger da es sich um ein Teytareafeld handelt.</p>
					<div class="header-person__detail is-areas-3">
						<div class="header-person__detail_area">
							<p>
								<b>Büroadresse:</b>
							</p>
							<p>
								Musterstrasse 123
							</p>
							<p>
								Zi. 123
							</p>
							<p>
								80802 München
							</p>
							<p>
								<a href="http://www.zuendfunk.de" rel="noopener" class="header-person__contentlink is-external" target="_blank">
									Wegbeschreibung
								</a>
							</p>
							<p>
								<a href="http://www.zuendfunk.de" rel="noopener" class="header-person__contentlink is-internal" target="_blank">
									Raumfinder
								</a>
							</p>
							<p>
								<a href="http://www.zuendfunk.de" rel="noopener" class="header-person__contentlink is-download" target="_blank">
									PDF-Link
								</a>
							</p>
						</div>
						<div class="header-person__detail_area">
							<p>
								<a href="mailto:info@lmu.de" rel="noopener" class="header-person__contentlink is-email" target="_self">
									E-mail schreiben
								</a>
							</p>
							<p>
								<a href="tel:498921809000" rel="noopener" class="header-person__contentlink is-phone" target="_self">
									+49 (0)89 2180 - 9000
								</a>
							</p>
							<p class="is-fax">
								+49 (0)89 2180 - 99 - 9000
							</p>
						</div>
						<div class="header-person__detail_area">
							<p>
								<b>Sprechstunde:</b>
							</p>
							<p>
								Mo - Do: 8.00 - 14.00 Uhr
							</p>
							<p>
								Fr: 10.00 - 12.00 Uhr
							</p>
							<p class="header-person__contenthead">
								<b>Postanschrift:</b>
							</p>
							<p>
								Geschwister-Scholl-Platz 1
							</p>
							<p>
								80802 München
							</p>
							<p>
								Germany
							</p>
						</div>
					</div>
					<div class="header-person__media-container">
						<figure class="c-figure--default is-no-margin" data-css="c-figure" data-js-module="overlay-handler">
							<div class="figure__wrapper">
								<picture class="c-picture--default
												 lazyload" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<source data-srcset="
												 https://placehold.co/800x800  800w  , 
												 https://placehold.co/1600x1600  1600w  , 
												 https://placehold.co/2400x2400  2400w  , 
												 https://placehold.co/3200x3200  3200w  " sizes=" 
												  (min-width: 1440px) 617px 
												  ,  (min-width: 768px) 41.66667vw 
												  ,  (max-width: 767px) 41.66667vw " />
									<!--[if IE 9]></audio><![endif]-->
									<img class="
												 picture__image lazyload" src="https://placehold.co/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
								</picture>
							</div>
						</figure>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

Bühne Personendetailseite ohne Bild und ohne Buttons, aber mit Sprechstunde - Sobald Sprechstunde aktiv erscheint 3-Spalte und Postanschrift erscheint unter Sprechstunde

<script type="text/javascript">
	$(function() {
		LmuPersonModule.init();
	});
</script>
<div class="c-header-person--default" data-css="c-header-person" data-js-module="header-person">
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-person__container ">
				<article class="header-person__wrapper">
					<h1 class="header-person__name">Susanne Sekretariat-Assistenz</h1>
					<p class="header-person__job">Assistenz am Lehrstuhl für Marketing</p>
					<p class="header-person__department">Fakultät Betriebswirtschaftslehre</p>
					<p class="header-person__responsibility">Hier dann verschiedene Aufgabengebite die dann erscheinen sollen. Der Text ist dann länger da es sich um ein Teytareafeld handelt.</p>
					<div class="header-person__detail is-areas-3">
						<div class="header-person__detail_area">
							<p>
								<b>Büroadresse:</b>
							</p>
							<p>
								Musterstrasse 123
							</p>
							<p>
								Zi. 123
							</p>
							<p>
								80802 München
							</p>
							<p>
								<a href="http://www.zuendfunk.de" rel="noopener" class="header-person__contentlink is-external" target="_blank">
									Wegbeschreibung
								</a>
							</p>
						</div>
						<div class="header-person__detail_area">
							<p>
								<a href="mailto:info@lmu.de" rel="noopener" class="header-person__contentlink is-email" target="_self">
									E-mail schreiben
								</a>
							</p>
							<p>
								<a href="tel:498921809000" rel="noopener" class="header-person__contentlink is-phone" target="_self">
									+49 (0)89 2180 - 9000
								</a>
							</p>
							<p class="is-fax">
								+49 (0)89 2180 - 99 - 9000
							</p>
						</div>
						<div class="header-person__detail_area">
							<p>
								<b>Sprechstunde:</b>
							</p>
							<p>
								Mo - Mi: 8.00 - 14.00 Uhr
							</p>
							<p>
								Do: 10.00 - 12.00 Uhr
							</p>
							<p class="header-person__contenthead">
								<b>Postanschrift:</b>
							</p>
							<p>
								Geschwister-Scholl-Platz 1
							</p>
							<p>
								80802 München
							</p>
						</div>
					</div>
					<div class="header-person__media-container">
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

Bühne Personendetailseite mit Bild und Buttons und Sprechstunde - Sobald Sprechstunde aktiv erscheint 3-Spalte und Postanschrift erscheint unter Sprechstunde

<script type="text/javascript">
	$(function() {
		LmuPersonModule.init();
	});
</script>
<div class="c-header-person--default is-with-picture" data-css="c-header-person" data-js-module="header-person" data-js-options='{}'>
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-person__container is-with-button">
				<article class="header-person__wrapper">
					<h1 class="header-person__name">Stefan Studienberatung</h1>
					<p class="header-person__job">Studienberatung am Lehrstuhl für Marketing</p>
					<p class="header-person__department">Fakultät Betriebswirtschaftslehre</p>
					<p class="header-person__responsibility">Hier dann verschiedene Aufgabengebite die dann erscheinen sollen.</p>
					<div class="header-person__detail is-areas-3">
						<div class="header-person__detail_area">
							<p>
								<b>Büroadresse:</b>
							</p>
							<p>
								Musterstrasse 123
							</p>
							<p>
								Zi. 123
							</p>
							<p>
								80802 München
							</p>
							<p>
								<a href="http://www.zuendfunk.de" rel="noopener" class="header-person__contentlink is-external" target="_blank">
									Wegbeschreibung
								</a>
							</p>
						</div>
						<div class="header-person__detail_area">
							<p>
								<a href="mailto:info@lmu.de" rel="noopener" class="header-person__contentlink is-email" target="_self">
									E-mail schreiben
								</a>
							</p>
							<p>
								<a href="tel:498921809000" rel="noopener" class="header-person__contentlink is-phone" target="_self">
									+49 (0)89 2180 - 9000
								</a>
							</p>
							<p class="is-fax">
								+49 (0)89 2180 - 99 - 9000
							</p>
						</div>
						<div class="header-person__detail_area">
							<p>
								<b>Sprechstunde:</b>
							</p>
							<p>
								Mo - Fr: 8.00 - 14.00 Uhr
							</p>
							<p class="header-person__contenthead">
								<b>Postanschrift:</b>
							</p>
							<p>
								Geschwister-Scholl-Platz 1
							</p>
							<p>
								80802 München
							</p>
						</div>
					</div>
					<div class="header-person__media-container">
						<figure class="c-figure--default is-no-margin" data-css="c-figure" data-js-module="overlay-handler">
							<div class="figure__wrapper">
								<picture class="c-picture--default
												 lazyload" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<source data-srcset="
												 https://placehold.co/800x800  800w  , 
												 https://placehold.co/1600x1600  1600w  , 
												 https://placehold.co/2400x2400  2400w  , 
												 https://placehold.co/3200x3200  3200w  " sizes=" 
												  (min-width: 1440px) 617px 
												  ,  (min-width: 768px) 41.66667vw 
												  ,  (max-width: 767px) calc(100vw - ((100vw / 14) * 2)) " />
									<!--[if IE 9]></audio><![endif]-->
									<img class="
												 picture__image lazyload" src="https://placehold.co/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
								</picture>
							</div>
						</figure>
						<nav class="header-person__btn-area">
							<ul class="header-person__btn-list">
								<li class="header-person__btn-item is-orcid">
									<a class="header-person__btn-link" href="#" target="_blank" title="Orcid"><span class="header-person__btn-link-text">Orcid</span></a>
								</li>
								<li class="header-person__btn-item is-researchgate">
									<a class="header-person__btn-link" href="#" target="_blank" title="Researchgate"><span class="header-person__btn-link-text">Researchgate</span></a>
								</li>
								<li class="header-person__btn-item is-academia">
									<a class="header-person__btn-link" href="#" target="_blank" title="Academia"><span class="header-person__btn-link-text">Academia</span></a>
								</li>
								<li class="header-person__btn-item is-linkedin">
									<a class="header-person__btn-link" href="#" target="_blank" title="LinkedIn"><span class="header-person__btn-link-text">LinkedIn</span></a>
								</li>
							</ul>
						</nav>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

Bühne Personendetailseite ohne Bild und mit Buttons und Sprechstunde - Sobald Sprechstunde aktiv erscheint 3-Spalte und Postanschrift erscheint unter Sprechstunde

<script type="text/javascript">
	$(function() {
		LmuPersonModule.init();
	});
</script>
<div class="c-header-person--default" data-css="c-header-person" data-js-module="header-person">
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-person__container is-with-button">
				<article class="header-person__wrapper">
					<h1 class="header-person__name">Susanne Sekretariat-Assistenz</h1>
					<p class="header-person__job">Assistenz am Lehrstuhl für Marketing</p>
					<p class="header-person__department">Fakultät Betriebswirtschaftslehre</p>
					<p class="header-person__responsibility">Hier dann verschiedene Aufgabengebite die dann erscheinen sollen.</p>
					<div class="header-person__detail is-areas-3">
						<div class="header-person__detail_area">
							<p>
								<b>Büroadresse:</b>
							</p>
							<p>
								Musterstrasse 123
							</p>
							<p>
								Zi. 123
							</p>
							<p>
								80802 München
							</p>
							<p>
								<a href="http://www.zuendfunk.de" rel="noopener" class="header-person__contentlink is-external" target="_blank">
									Wegbeschreibung
								</a>
							</p>
						</div>
						<div class="header-person__detail_area">
							<p>
								<a href="mailto:info@lmu.de" rel="noopener" class="header-person__contentlink is-email" target="_self">
									E-mail schreiben
								</a>
							</p>
							<p>
								<a href="tel:498921809000" rel="noopener" class="header-person__contentlink is-phone" target="_self">
									+49 (0)89 2180 - 9000
								</a>
							</p>
							<p class="is-fax">
								+49 (0)89 2180 - 99 - 9000
							</p>
						</div>
						<div class="header-person__detail_area">
							<p>
								<b>Sprechstunde:</b>
							</p>
							<p>
								Mo - Mi: 8.00 - 14.00 Uhr
							</p>
							<p>
								Do: 10.00 - 14.00 Uhr
							</p>
							<p>
								Fr: 8.00 - 12.00 Uhr
							</p>
							<p class="header-person__contenthead">
								<b>Postanschrift:</b>
							</p>
							<p>
								Geschwister-Scholl-Platz 1
							</p>
							<p>
								80802 München
							</p>
						</div>
					</div>
					<div class="header-person__media-container">
						<nav class="header-person__btn-area">
							<ul class="header-person__btn-list">
								<li class="header-person__btn-item is-bluesky">
									<a class="header-person__btn-link" href="#" target="_blank" title="Bluesky"><span class="header-person__btn-link-text">Bluesky</span></a>
								</li>
								<li class="header-person__btn-item is-mastodon">
									<a class="header-person__btn-link" href="#" target="_blank" title="Mastodon"><span class="header-person__btn-link-text">Mastodon</span></a>
								</li>
								<li class="header-person__btn-item is-instagram">
									<a class="header-person__btn-link" href="#" target="_blank" title="Instagram"><span class="header-person__btn-link-text">Instagram</span></a>
								</li>
								<li class="header-person__btn-item is-youtube">
									<a class="header-person__btn-link" href="#" target="_blank" title="YouTube"><span class="header-person__btn-link-text">YouTube</span></a>
								</li>
							</ul>
						</nav>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

Bühne Personendetailseite mit Bild und Buttons / 2 Spalten da ohne Sprechstunde - Postanschrift erscheint unterhalb der Tel.- und Fax-Nummer

<script type="text/javascript">
	$(function() {
		LmuPersonModule.init();
	});
</script>
<div class="c-header-person--default is-with-picture" data-css="c-header-person" data-js-module="header-person" data-js-options='{}'>
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-person__container is-with-button">
				<article class="header-person__wrapper">
					<h1 class="header-person__name">Susanne Sekretariat-Assistenz</h1>
					<p class="header-person__job">Assistenz am Lehrstuhl für Marketing</p>
					<p class="header-person__department">Fakultät Betriebswirtschaftslehre</p>
					<p class="header-person__responsibility">Hier dann verschiedene Aufgabengebite die dann erscheinen sollen.</p>
					<div class="header-person__detail is-areas-2">
						<div class="header-person__detail_area">
							<p>
								<b>Büroadresse:</b>
							</p>
							<p>
								Musterstrasse 123
							</p>
							<p>
								Zi. 123
							</p>
							<p>
								80802 München
							</p>
							<p>
								<a href="http://www.zuendfunk.de" rel="noopener" class="header-person__contentlink is-external" target="_blank">
									Wegbeschreibung
								</a>
							</p>
						</div>
						<div class="header-person__detail_area">
							<p>
								<a href="mailto:info@lmu.de" rel="noopener" class="header-person__contentlink is-email" target="_self">
									E-mail schreiben
								</a>
							</p>
							<p>
								<a href="tel:498921809000" rel="noopener" class="header-person__contentlink is-phone" target="_self">
									+49 (0)89 2180 - 9000
								</a>
							</p>
							<p class="is-fax">
								+49 (0)89 2180 - 99 - 9000
							</p>
							<p class="header-person__contenthead">
								<b>Postanschrift:</b>
							</p>
							<p>
								Geschwister-Scholl-Platz 1
							</p>
							<p>
								80802 München
							</p>
							<p>
								Germany
							</p>
						</div>
					</div>
					<div class="header-person__media-container">
						<figure class="c-figure--default is-no-margin" data-css="c-figure" data-js-module="overlay-handler">
							<div class="figure__wrapper">
								<picture class="c-picture--default
												 lazyload" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<source data-srcset="
												 https://placehold.co/800x800  800w  , 
												 https://placehold.co/1600x1600  1600w  , 
												 https://placehold.co/2400x2400  2400w  , 
												 https://placehold.co/3200x3200  3200w  " sizes=" 
												  (min-width: 1440px) 617px 
												  ,  (min-width: 768px) 41.66667vw 
												  ,  (max-width: 767px) calc(100vw - ((100vw / 14) * 2)) " />
									<!--[if IE 9]></audio><![endif]-->
									<img class="
												 picture__image lazyload" src="https://placehold.co/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
								</picture>
							</div>
						</figure>
						<nav class="header-person__btn-area">
							<ul class="header-person__btn-list">
								<li class="header-person__btn-item is-bluesky">
									<a class="header-person__btn-link" href="#" target="_blank" title="Bluesky"><span class="header-person__btn-link-text">Bluesky</span></a>
								</li>
								<li class="header-person__btn-item is-mastodon">
									<a class="header-person__btn-link" href="#" target="_blank" title="Mastodon"><span class="header-person__btn-link-text">Mastodon</span></a>
								</li>
								<li class="header-person__btn-item is-instagram">
									<a class="header-person__btn-link" href="#" target="_blank" title="Instagram"><span class="header-person__btn-link-text">Instagram</span></a>
								</li>
								<li class="header-person__btn-item is-linkedin">
									<a class="header-person__btn-link" href="#" target="_blank" title="LinkedIn"><span class="header-person__btn-link-text">LinkedIn</span></a>
								</li>
							</ul>
						</nav>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

Bühne Personendetailseite ohne Bild und mit Buttons / 2 Spalten da ohne Sprechstunde - Postanschrift erscheint unterhalb der Tel.- und Fax-Nummer

<script type="text/javascript">
	$(function() {
		LmuPersonModule.init();
	});
</script>
<div class="c-header-person--default" data-css="c-header-person" data-js-module="header-person">
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-person__container is-with-button">
				<article class="header-person__wrapper">
					<h1 class="header-person__name">Susanne Sekretariat-Assistenz</h1>
					<p class="header-person__job">Assistenz am Lehrstuhl für Marketing</p>
					<p class="header-person__department">Fakultät Betriebswirtschaftslehre</p>
					<p class="header-person__responsibility">Hier dann verschiedene Aufgabengebite die dann erscheinen sollen.</p>
					<div class="header-person__detail is-areas-2">
						<div class="header-person__detail_area">
							<p>
								<b>Büroadresse:</b>
							</p>
							<p>
								Musterstrasse 123
							</p>
							<p>
								Zi. 123
							</p>
							<p>
								80802 München
							</p>
							<p>
								<a href="http://www.zuendfunk.de" rel="noopener" class="header-person__contentlink is-external" target="_blank">
									Wegbeschreibung
								</a>
							</p>
						</div>
						<div class="header-person__detail_area">
							<p>
								<a href="mailto:info@lmu.de" rel="noopener" class="header-person__contentlink is-email" target="_self">
									E-mail schreiben
								</a>
							</p>
							<p>
								<a href="tel:498921809000" rel="noopener" class="header-person__contentlink is-phone" target="_self">
									+49 (0)89 2180 - 9000
								</a>
							</p>
							<p class="is-fax">
								+49 (0)89 2180 - 99 - 9000
							</p>
							<p class="header-person__contenthead">
								<b>Postanschrift:</b>
							</p>
							<p>
								Geschwister-Scholl-Platz 1
							</p>
							<p>
								80802 München
							</p>
						</div>
					</div>
					<div class="header-person__media-container">
						<nav class="header-person__btn-area">
							<ul class="header-person__btn-list">
								<li class="header-person__btn-item is-bluesky">
									<a class="header-person__btn-link" href="#" target="_blank" title="Bluesky"><span class="header-person__btn-link-text">Bluesky</span></a>
								</li>
								<li class="header-person__btn-item is-mastodon">
									<a class="header-person__btn-link" href="#" target="_blank" title="Mastodon"><span class="header-person__btn-link-text">Mastodon</span></a>
								</li>
								<li class="header-person__btn-item is-instagram">
									<a class="header-person__btn-link" href="#" target="_blank" title="Instagram"><span class="header-person__btn-link-text">Instagram</span></a>
								</li>
								<li class="header-person__btn-item is-youtube">
									<a class="header-person__btn-link" href="#" target="_blank" title="YouTube"><span class="header-person__btn-link-text">YouTube</span></a>
								</li>
							</ul>
						</nav>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

Bühne Personendetailseite mit Bild und Buttons / 2 Spalten / wenig Text - Postanschrift erscheint unterhalb der Tel.- und Fax-Nummer

<script type="text/javascript">
	$(function() {
		LmuPersonModule.init();
	});
</script>
<div class="c-header-person--default is-with-picture" data-css="c-header-person" data-js-module="header-person" data-js-options='{}'>
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-person__container is-with-button">
				<article class="header-person__wrapper">
					<h1 class="header-person__name">Susanne Sekretariat-Assistenz</h1>
					<p class="header-person__job">Assistenz am Lehrstuhl für Marketing</p>
					<p class="header-person__department">Fakultät Betriebswirtschaftslehre</p>
					<p class="header-person__responsibility">Hier dann verschiedene Aufgabengebite die dann erscheinen sollen.</p>
					<div class="header-person__detail is-areas-2">
						<div class="header-person__detail_area">
							<p>
								<b>Büroadresse:</b>
							</p>
							<p>
								Musterstrasse 123
							</p>
							<p>
								80802 München
							</p>
						</div>
						<div class="header-person__detail_area">
							<p>
								<a href="mailto:info@lmu.de" rel="noopener" class="header-person__contentlink is-email" target="_self">
									E-mail schreiben
								</a>
							</p>
							<p>
								<a href="tel:498921809000" rel="noopener" class="header-person__contentlink is-phone" target="_self">
									+49 (0)89 2180 - 9000
								</a>
							</p>
							<p class="header-person__contenthead">
								<b>Postanschrift:</b>
							</p>
							<p>
								Geschwister-Scholl-Platz 1
							</p>
							<p>
								80802 München
							</p>
						</div>
					</div>
					<div class="header-person__media-container">
						<figure class="c-figure--default is-no-margin" data-css="c-figure" data-js-module="overlay-handler">
							<div class="figure__wrapper">
								<picture class="c-picture--default
												 lazyload" data-css="c-picture">
									<!--[if IE 9]><audio><![endif]-->
									<source data-srcset="
												 https://placehold.co/800x800  800w  , 
												 https://placehold.co/1600x1600  1600w  , 
												 https://placehold.co/2400x2400  2400w  , 
												 https://placehold.co/3200x3200  3200w  " sizes=" 
												  (min-width: 1440px) 617px 
												  ,  (min-width: 768px) 41.66667vw 
												  ,  (max-width: 767px) calc(100vw - ((100vw / 14) * 2)) " />
									<!--[if IE 9]></audio><![endif]-->
									<img class="
												 picture__image lazyload" src="https://placehold.co/20x20" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
								</picture>
							</div>
						</figure>
						<nav class="header-person__btn-area">
							<ul class="header-person__btn-list">
								<li class="header-person__btn-item is-linkedin">
									<a class="header-person__btn-link" href="#" target="_blank" title="LinkedIn"><span class="header-person__btn-link-text">LinkedIn</span></a>
								</li>
							</ul>
						</nav>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>

Bühne Personendetailseite ohne Bild und mit Buttons / 2 Spalten / wenig Content - Postanschrift erscheint unterhalb der Tel.- und Fax-Nummer

<script type="text/javascript">
	$(function() {
		LmuPersonModule.init();
	});
</script>
<div class="c-header-person--default" data-css="c-header-person" data-js-module="header-person">
	<div class="grid__container">
		<div class="grid__row">
			<div class="header-person__container is-with-button">
				<article class="header-person__wrapper">
					<h1 class="header-person__name">Susanne Sekretariat-Assistenz</h1>
					<p class="header-person__job">Assistenz am Lehrstuhl für Marketing</p>
					<p class="header-person__department">Fakultät Betriebswirtschaftslehre</p>
					<div class="header-person__detail is-areas-2">
						<div class="header-person__detail_area">
							<p>
								<b>Büroadresse:</b>
							</p>
							<p>
								Musterstrasse 123
							</p>
							<p>
								80802 München
							</p>
						</div>
						<div class="header-person__detail_area">
							<p>
								<a href="mailto:info@lmu.de" rel="noopener" class="header-person__contentlink is-email" target="_self">
									E-mail schreiben
								</a>
							</p>
							<p>
								<a href="tel:498921809000" rel="noopener" class="header-person__contentlink is-phone" target="_self">
									+49 (0)89 2180 - 9000
								</a>
							</p>
							<p class="header-person__contenthead">
								<b>Postanschrift:</b>
							</p>
							<p>
								Geschwister-Scholl-Platz 1
							</p>
							<p>
								80802 München
							</p>
						</div>
					</div>
					<div class="header-person__media-container">
						<nav class="header-person__btn-area">
							<ul class="header-person__btn-list">
								<li class="header-person__btn-item is-facebook">
									<a class="header-person__btn-link" href="#" target="_blank" title="Facebook"><span class="header-person__btn-link-text">Facebook</span></a>
								</li>
							</ul>
						</nav>
					</div>
				</article>
			</div>
		</div>
	</div>
</div>