<div class="c-organigram{{#if settings.organigramContextClass}}--{{settings.organigramContextClass}}{{else}}--default{{/if}}{{#if settings.organigramClasses}} {{settings.organigramClasses}}{{/if}}"
     data-css="c-organigram"
     data-js-module="organigram"{{#if settings.organigramJsOptions}}
     data-js-options='{{stringify settings.organigramJsOptions}}'{{/if}}>
     {{#wrapWith "grid__container"}}
		{{#wrapWith "grid__row"}}
                {{#each content.chart}}
                    {{#if content.headline}}<h2 class="organigram__headline">{{content.headline}}</h2>{{/if}}
                    {{#if content.description}}<p class="organigram__description">{{content.description}}</p>{{/if}}
                    {{#if content.chartCols}}
                        <ul class="organigram__zones-{{#if content.chartCols.length}}{{content.chartCols.length}}{{/if}}{{#if content.chartSpecialCss}} {{content.chartSpecialCss}}{{/if}}">
                            {{#each content.chartCols}}
                                <li class="organigram__zone {{#if content.zoneLink}}is-zone-link{{else}}is-zone-content{{/if}}{{#if content.zoneSpecialCss}} {{content.zoneSpecialCss}}{{/if}}">
                                    {{#if content.zoneHeadline}}
										<h2 class="organigram__content"><span>{{{content.zoneHeadline}}}</span></h2>
									{{else}}
										{{#if content.zoneLink}}
											<a href="{{content.zoneLink}}" {{#if content.zoneLinkTarget}}target="{{content.zoneLinkTarget}}"{{/if}} class="organigram__link">{{content.zoneContent}}</a>
										{{else}}
											{{#if content.zoneContent}}<p class="organigram__content"><span>{{{this.content.zoneContent}}}</span></p>{{/if}}
										{{/if}}
									 {{/if}}
                                    {{#if content.zoneCols}}
                                        <ul class="organigram__subzones">
                                            {{#each content.zoneCols}}
                                                {{> organigram__zone}}
                                            {{/each}}
                                        </ul>
                                    {{/if}}
                                </li>
                             {{/each}}
                        </ul>
                    {{/if}}
                {{/each}}
        {{/wrapWith}}
	{{/wrapWith}}
</div>

organigram__zone.hbs

<li class="organigram__subzone {{#if content.zoneLink}}is-zone-link{{else}}is-zone-content{{/if}}{{#if content.zoneSpecialCss}} {{content.zoneSpecialCss}}{{/if}}">
    {{#if content.zoneLink}}
        <a href="{{content.zoneLink}}" {{#if content.zoneLinkTarget}}target="{{content.zoneLinkTarget}}"{{/if}} class="organigram__link">{{{content.zoneContent}}}</a>
    {{else}}
        {{#if content.zoneContent}}<p class="organigram__content"><span>{{{content.zoneContent}}}</span></p>{{/if}}
    {{/if}}
    {{#if content.zoneCols}}
        <ul class="organigram__subzones">
            {{#each content.zoneCols}}
                {{> organigram__zone}}
            {{/each}}
        </ul>
    {{/if}}
</li>

organigram.scss

/* ===================================================
component: organigram
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-organigram"] {
	width: 100%;

	@include print() {
		page-break-inside: avoid;
	}

	.organigram__headline {
		@include headline-h3-styles();
		padding: 12% 0 0;
		text-align: center;

		@include bp($bp-tablet-p) {
			padding: 5% 0 1.2%;
		}

		@include print() {
			padding: 5% 0 1.2%;
			font-family: $font-bold;
			font-weight: 700;
			font-size: 1.3rem;
			line-height: (16/13);
			letter-spacing: .022rem;
		}
	}

	.organigram__content {
		display: flex;
		align-content: center;
		align-items: center;

		@include print() {
			font-family: $font-bold;
			font-weight: 700;
		}
	}

	.organigram__nolink {
		display: flex;
		align-items: center;
		position: relative;
		color: $color-green;
		padding: 2rem .6rem 2rem 34px;
		width: 100%;

		@include bp($bp-tablet-p) {
			padding: 2rem .5rem 2rem 26px;
		}

		@include bp($bp-desktop-m) {
			padding: 2rem .6rem 2rem 34px;
		}

		@include print() {
			font-family: $font-regular;
			font-weight: 400;
			padding: .3rem .5rem;
			font-weight: 300;
			font-size: 1.2rem;
			line-height: (14/12);
			letter-spacing: 0;
			color: $color-black;
		}

		@include hcm() {
			padding: 2rem .6rem 2rem 15px;
		}
	}

	.organigram__link {
		text-decoration: none;
		display: flex;
		align-items: center;
		position: relative;
		color: $color-green-hc-dark;
		transition: color $animation-duration-std $animation-easing-std;
		padding: 2rem .6rem 2rem 34px;
		width: 100%;

		@include bp($bp-tablet-p) {
			padding: 2rem .5rem 2rem 26px;
		}

		@include bp($bp-desktop-m) {
			padding: 2rem .6rem 2rem 34px;
		}

		@include print() {
			font-family: $font-regular;
			font-weight: 400;
			padding: .3rem .5rem;
			font-weight: 300;
			font-size: 1.2rem;
			line-height: (14/12);
			letter-spacing: 0;
			color: $color-black;
		}

		@include hcm() {
			padding: 2rem .6rem 2rem 15px;
		}

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

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

				transform: perspective(1px) translateX(4px);

				@include print() {
					background-image: none;
				}
			}
		}

		&.a11y-focus-key {
			// NORMAL A11Y-STYLES NOT WORKING PROPERLY
			outline-offset: -2px;
		}

		&::before {
			@include pseudo();
			@include sprites-icon-arrow-green100();
			left: 10px;
			top: 50%;
			margin-top: -7px;

			transition: transform $animation-duration-std $animation-easing-std;

			@include bp($bp-tablet-p) {
				left: 4px;
			}

			@include bp($bp-desktop-m) {
				left: 10px;
			}

			@include print() {
				left: 0;
				top: 0;
				background-image: none;
			}

			@include hcm() {
				top: 0;
				left: 0;
				background-image: none;
			}
		}
	}

	.organigram__zone,
	.organigram__subzone {
		font-family: $font-bold;
		font-size: 1.2rem;
		line-height: (15/12);
		letter-spacing: .022rem;
		font-weight: bold;
		list-style: none;
		width: 100%;

		@include bp($bp-tablet-p) {
			letter-spacing: 0;
		}

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

		@include print() {
			font-size: 1.1rem;
			line-height: (13/11);
			letter-spacing: 0;
		}

		&.is-zone-link {
			background-color: $color-light;
			display: flex;

			@include print() {
				border: 1px solid $color-black;
			}
		}
	}

	.organigram__subzone {
		margin: 10px 0 0;

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

		@include print() {
			margin: 5px 0 0;
		}
	}

	.organigram__zones-1,
	.organigram__zones-2,
	.organigram__zones-3,
	.organigram__zones-4,
	.organigram__zones-5 {
		align-items: stretch;
		display: flex;
		align-content: center;
		list-style: none;
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;
		flex-flow: row wrap;
		justify-content: flex-start;

		@include bp($bp-tablet-p) {
			flex-flow: row nowrap;
			margin: 0 0 1.5%;
		}

		@include print() {
			flex-flow: row nowrap;
			margin: 0 0 1.5%;
		}

		.organigram__zone {
			margin: 2.5% 0 0;
			flex: 0 0 100%;
			width: 100%;
			max-width: 100%;

			@include bp($bp-tablet-p) {
				margin: 0 1% 0 0;
			}

			@include bp($bp-desktop-m) {
				margin: 0 2.5% 0 0;
			}

			@include print() {
				margin: 0 1% 0 0;
			}
		}

		.organigram__zone:last-child {
			@include bp($bp-tablet-p) {
				margin: 0;
			}

			@include print() {
				margin: 0;
			}
		}
	}

	.organigram__zones-1 {

		.organigram__zone {
			@include bp($bp-tablet-p) {
				margin: 0;
			}

			@include print() {
				margin: 0;
			}
		}
	}

	.organigram__zones-2 {

		.organigram__zone {
			@include bp($bp-tablet-p) {
				flex: 0 0 49.5%;
				width: 49.5%;
				max-width: 49.5%;
			}

			@include bp($bp-tablet-p) {
				flex: 0 0 48.75%;
				width: 48.75%;
				max-width: 48.75%;
			}

			@include print() {
				flex: 0 0 49.5%;
				width: 49.5%;
				max-width: 49.5%;
			}
		}
	}

	.organigram__zones-3 {

		.organigram__zone {
			@include bp($bp-tablet-p) {
				flex: 0 0 31.66666666666667%;
				width: 31.66666666666667%;
				max-width: 31.66666666666667%;
			}

			@include print() {
				flex: 0 0 31.66666666666667%;
				width: 31.66666666666667%;
				max-width: 31.66666666666667%;
			}
		}
	}

	.organigram__zones-4 {

		.organigram__zone {
			@include bp($bp-tablet-p) {
				flex: 0 0 24.25%;
				width: 24.25%;
				max-width: 24.25%;
			}

			@include bp($bp-desktop-m) {
				flex: 0 0 23.125%;
				width: 23.125%;
				max-width: 23.125%;
			}

			@include print() {
				flex: 0 0 24.25%;
				width: 24.25%;
				max-width: 24.25%;
			}
		}
	}

	.organigram__zones-5 {

		.organigram__zone {
			@include bp($bp-tablet-p) {
				flex: 0 0 19.2%;
				width: 19.2%;
				max-width: 19.2%;
			}

			@include bp($bp-desktop-m) {
				flex: 0 0 18%;
				width: 18%;
				max-width: 18%;
			}

			@include print() {
				flex: 0 0 19.2%;
				width: 19.2%;
				max-width: 19.2%;
			}
		}
	}

	.is-no-content-zone {
		display: none;

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

		@include print() {
			display: flex;
			border: 1px solid #fff;
		}
	}

	.is-head-zone {
		align-items: flex-end;
		align-content: stretch;

		.organigram__link {
			@include bp($bp-tablet-p) {
				padding-top: 1rem;
				padding-bottom: 1rem;
			}

			@include print() {
				padding-top: .3rem;
				padding-bottom: .3rem;
			}
		}

		.organigram__zone {

			&:nth-of-type(2),
			&:last-child {
				@include bp($bp-tablet-p) {
					margin-bottom: 10px;
					flex: 0 0 24.25%;
					width: 24.25%;
					max-width: 24.25%;
					min-height: 65px;
				}

				@include bp($bp-desktop-m) {
					margin-bottom: 20px;
					flex: 0 0 23.125%;
					width: 23.125%;
					max-width: 23.125%;
				}

				@include print() {
					margin-bottom: 10px;
					flex: 0 0 24.25%;
					width: 24.25%;
					max-width: 24.25%;
				}

				&::after {
					content: "";
					min-height: inherit;
					font-size: 0;
				}
			}

			&:nth-of-type(2) {
				order: 2;

				@include bp($bp-tablet-p) {
					order: 1;
				}

				@include print() {
					order: 1;
				}
			}

			&:last-child {
				order: 3;
			}

			&:first-child {
				order: 1;
				flex: 0 0 100%;
				width: 100%;
				max-width: 100%;
				padding: 5% 2.5%;
				border: 1px solid $color-green;

				@include bp($bp-tablet-p) {
					order: 2;
					flex: 0 0 49.5%;
					padding: 10px 1%;
					width: 49.5%;
					max-width: 49.5%;
				}

				@include bp($bp-desktop-m) {
					flex: 0 0 48.75%;
					padding: 20px 2.5%;
					width: 48.75%;
					max-width: 48.75%;
				}

				@include print() {
					order: 2;
					flex: 0 0 49.5%;
					padding: 10px 1%;
					width: 49.5%;
					max-width: 49.5%;
					border: 1px solid $color-black;
				}

				.organigram__content {
					width: 100%;
					margin: 0;
					text-align: center;
				}
			}
		}

		.organigram__subzone {
			margin: 10px 0 0;
		}
	}

	.is-min-height-zone {

		.organigram__zone,
		.organigram__subzone {
			@include bp($bp-tablet-p) {
				min-height: 95px;
			}

			@include bp($bp-desktop-m) {
				min-height: 90px;
			}

			@include print() {
				min-height: 45px;
			}

			&::after {
				content: "";
				min-height: inherit;
				font-size: 0;
			}
		}

		.organigram__link {
			@include bp($bp-tablet-p) {
				padding-top: 1rem;
				padding-bottom: 1rem;
			}
		}

		.organigram__content {
			min-height: 45px;

			@include bp($bp-tablet-p) {
				align-items: flex-end;
			}

			@include print() {
				align-items: flex-end;
			}

			&::after {
				content: "";
				min-height: inherit;
				font-size: 0;
			}
		}
	}
}

Default

<div class="c-organigram--default" data-css="c-organigram" data-js-module="organigram">
	<div class="grid__container">
		<div class="grid__row">
			<ul class="organigram__zones-3 is-head-zone">
				<li class="organigram__zone is-zone-content">
					<h2 class="organigram__content"><span>Hochschulleitung / Präsidium</span></h2>
					<ul class="organigram__subzones">
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Präsident</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Vizepräsidenten</a>
						</li>
					</ul>
				</li>
				<li class="organigram__zone is-zone-link">
					<a href="#" class="organigram__link">Hochschulrat</a>
				</li>
				<li class="organigram__zone is-zone-link">
					<a href="#" class="organigram__link">Erweiterte Hochschulleitung</a>
				</li>
			</ul>
			<ul class="organigram__zones-5">
				<li class="organigram__zone is-zone-link">
					<a href="#" class="organigram__link">Zentrale Einrichtungen</a>
				</li>
				<li class="organigram__zone is-zone-link">
					<a href="#" class="organigram__link">Zentrale Wiss. Einrichtungen</a>
				</li>
				<li class="organigram__zone is-zone-link">
					<a href="#" class="organigram__link">Zentrale Ausschüsse</a>
				</li>
				<li class="organigram__zone is-zone-link">
					<a href="#" class="organigram__link">Senat</a>
				</li>
				<li class="organigram__zone is-zone-link">
					<a href="#" class="organigram__link">Zentrale Verwaltung</a>
				</li>
			</ul>
			<h2 class="organigram__headline">Fakultäten nach Fächergruppen</h2>
			<ul class="organigram__zones-4 is-min-height-zone">
				<li class="organigram__zone is-zone-content">
					<p class="organigram__content"><span>Geistes- und Kulturwissenschaften</span></p>
					<ul class="organigram__subzones">
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Katholisch - Theologische Fakultät</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Evangelisch - Theologische Fakultät</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Fakultät für Geschichts- u. Kunstwissenschaften</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Fakultät für Philosophie, Wissenschaftstheorie und Religionswissenschaft</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Fakultät für Kulturwissenschaften</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Fakultät für Sprach- und Literaturwissenschaften</a>
						</li>
					</ul>
				</li>
				<li class="organigram__zone is-zone-content">
					<p class="organigram__content"><span>Rechts-, Wirtschafts-, Sozialwissenschaften</span></p>
					<ul class="organigram__subzones">
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Juristische Fakultät</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Fakultät für Betriebswirtschaft</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Volkswirtschaftliche Fakultät</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Fakultät für Psychologie und Pädagogik</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Sozial-wissenschaftliche Fakultät</a>
						</li>
					</ul>
				</li>
				<li class="organigram__zone is-zone-content">
					<p class="organigram__content"><span>Medizin</span></p>
					<ul class="organigram__subzones">
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Medizinische Fakultät (Human- und Zahnmedizin)</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Tierärztliche Fakultät</a>
						</li>
						<li class="organigram__subzone is-zone-content is-no-content-zone">
							<p class="organigram__content"><span>&nbsp;</span></p>
						</li>
						<li class="organigram__subzone is-zone-content is-no-content-zone">
							<p class="organigram__content"><span>&nbsp;</span></p>
						</li>
						<li class="organigram__subzone is-zone-content is-no-content-zone">
							<p class="organigram__content"><span>&nbsp;</span></p>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Klinikum der Universität München</a>
						</li>
					</ul>
				</li>
				<li class="organigram__zone is-zone-content">
					<p class="organigram__content"><span>Naturwissenschaften</span></p>
					<ul class="organigram__subzones">
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Fakultät für Mathematik, Informatik und Statistik</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Fakultät für Physik</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Fakultät für Chemie und Pharmazie</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Fakultät für Biologie</a>
						</li>
						<li class="organigram__subzone is-zone-link">
							<a href="#" class="organigram__link">Fakultät für Geowissenschaften</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>