<div class="c-tab-area{{#if settings.tabAreaContextClass}}--{{settings.tabAreaContextClass}}{{else}}--default{{/if}}{{#if settings.tabAreaClasses}} {{settings.tabAreaClasses}}{{/if}}"
     data-css="c-tab-area"  data-js-module="tab-area" data-js-item="js-tab-area-all" >
	 {{#if content.headline}}<h2 class="tab-area__headline">{{content.headline}}</h2>{{/if}}
	{{#if content.description}}<div class="tab-area__desc">{{content.description}}</div>{{/if}}
	<div class="tab-area__nav" role="tablist" aria-label="Tab-Navigation" data-js-item="js-tab-area-nav">
		{{#each content.tabs}}
			{{> tab-area__nav}}
		{{/each}}
	</div>
	<div class="tab-area__contentwrapper" data-js-item="js-tab-area-contentwrapper">
		{{#each content.tabs}}
			{{> tab-area__content}}
		{{/each}}
	</div>
</div>

tab-area__nav.hbs

<button role="tab" {{#if settings.tabAriaSelected}}aria-selected="{{settings.tabAriaSelected}}"{{/if}} aria-controls="panel-{{settings.tabId}}" id="tab-{{settings.tabId}}" class="tab-area__tab{{#if settings.tabClasses}} {{settings.tabClasses}}{{/if}}" data-js-id="{{settings.tabId}}" data-js-item="js-tab-area-tab">{{title}}</button>

tab-area__content.hbs

<div class="tab-area__content{{#if settings.tabClasses}} {{settings.tabClasses}}{{/if}}" role="tabpanel" id="panel-{{settings.tabId}}" aria-labelledby="tab-{{settings.tabId}}" data-js-id="{{settings.tabId}}" data-js-item="js-tab-area-content" {{#if settings.tabAriaHidden}}aria-hidden="{{settings.tabAriaHidden}}"{{/if}}>
{{#if content.headline}}<h2 class="tab-area__headline">{{content.headline}}</h2>{{/if}}
{{#if content.figure}}
		{{#with content.figure}}
			{{> figure }}
		{{/with}}
{{/if}}
{{#if content.text}}
<div class="tab-area__contentblock">
	<p>{{content.text}}</p><p>Hier dann nochmal Text mit viel Inhalt der dann etwas macht. danach soll eine Überschrift kommen.</p><h3>test H3 mit kleinerer Darstellung</h3><p><a href="#" class="is-external">test</a><b>dick</b><i>kursiv</i></p>
</div>
{{/if}}
{{#if content.linkareahead}}
	<h3 class="tab-area__linkheadline">{{content.linkareahead}}</h3>
{{/if}}
{{#if content.items}}
	<ul class="tab-area__list">
		{{#each content.items}}
			{{> tab-area__item }}
		{{/each}}
	</ul>
{{/if}}
</div>

tab-area__item.hbs

<li class="tab-area__list-item">
	<a {{#if content.linkTarget}}target="{{content.linkTarget}}" {{/if}}href="{{content.linkHref}}"
			class="tab-area__list-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>
</li>

tab-area.scss

/* ===================================================
component: tab-area
=================================================== */

/* ---------------------------------------------------
Global Variables
--------------------------------------------------- */
// Animation Variables
$tab-area-duration: 800ms !default;
$tab-area-ease-method: ease !default;


/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-tab-area"] {

	position: relative;
	clear: both;
	overflow: hidden;
	font-family: $font-regular;
	font-size: 1.5rem;
	line-height: (22/15);
	letter-spacing: .25px;
	color: $color-dark;

	margin-bottom: 60px;



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

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

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

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

	@include print() {
		font-size: 1.6rem;
		line-height: (24/16);
		margin-bottom: 100px;
	}

	.tab-area__headline {

		@include headline-h2-styles();

	}

	.tab-area__desc {
		display: block;
		background-color: $color-white;
		font-size: 1.7rem;
		line-height: (24/17);
		letter-spacing: .3px;
		font-family: $font-regular;
		font-weight: 400;
		color: $color-gray;
		text-transform: uppercase;
		padding:15px 0px 5px 0px;

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

		@include print() {
			display: none;
		}

	}

	.tab-area__nav {

		display: flex;
		align-items: stretch;
		background-color: $color-white;
		flex-direction: column;

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

		@include print() {
			flex-direction: row;
		}

		.tab-area__tab {
			color: $color-green;
			background-color: $color-white;
			padding:15px 0px 5px 0px;
			text-align: left;
			border: none;
			outline: none;
			border-bottom:4px solid $color-white;
			overflow: hidden;
			flex-shrink: 1;
			font-family: $font-bold;
			font-weight: 700;
			font-size: 1.6rem;
			line-height: (24/16);
			letter-spacing: .3px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;

			@include bp($bp-tablet-p) {
				padding:20px 40px 10px 20px;
				margin-left: 1px;
			}

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

			@include print() {
				padding:20px 40px 10px 20px;
			}

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

			&:first-child {
				padding-left: 0px;
			}

			&:hover,
			&.is-active {

  				color: $color-dark;
				border-bottom:4px solid $color-green;

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

			}

			&:hover {
				cursor: pointer;
			}

			&.is-active {

				order: 1;
				cursor: default;

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

				@include print() {
					order: 0;
				}

			}
		}
	}

	.tab-area__contentwrapper {
		width: 100%;
		background-color: $color-light;
		position: relative;
		height: auto;
		overflow: hidden;
		transition: height $tab-area-duration $tab-area-ease-method;

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

	.tab-area__content {
		position: absolute;
		display: block;
		padding: 20px;
		width: 100%;
		opacity: 0;
		transition: opacity $tab-area-duration $tab-area-ease-method;
		color: transparent;

		@include print() {
			padding: 20px 0;
		}


		&.is-active {
			opacity: 1;
			color: $color-dark;
			z-index: 200;
		}

		.tab-area__headline {
			@include headline-h2-styles();

			margin-bottom: 30px;

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

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

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

	h3,
	.tab-area__linkheadline {
		@include headline-h4-styles();

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

	.tab-area__list {
		list-style: none;
		list-style-type: none;
	}

	.tab-area__list-item {
		margin-bottom: 14px;
		padding-left: 0px;

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

	.tab-area__list-link {
		font-family: $font-bold;
		font-weight: 700;
		font-size: 1.5rem;
		color: $color-green-hc-dark;
		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 !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;
			vertical-align: unset;
			transition: transform $animation-duration-std $animation-easing-std;

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

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

		/*
		&[href*="http://"],
		&[href*="https://"],
		&[target="_blank"],
		*/
		&.is-external {
			color: $color-green-hc-dark;
			transition: color $animation-duration-std/3 $animation-easing-std;

			&: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;
				vertical-align: unset;
			}
		}

		&.is-internal {

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

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

		&.is-download {
			color: $color-green-hc-dark;
			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-download-black();
				}
			}

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

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

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

		&.is-phone {
			color: $color-green-hc-dark;
			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-phone-grey();
				}
			}

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

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

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

		&.is-mail,
		&[href*="mailto:"] {
			color: $color-green-hc-dark;
			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;
				vertical-align: unset;
			}
		}
	}

}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-tab-area--default {

	.tab-area__contentblock {
		strong,
		b {
			@include content-b-styles();
		}

		i {
			@include content-i-styles();
		}

		p:last-child:empty {
			margin-bottom: 0;
		}

		/*
		Links
		----------------------------- */
		a {
			@include content-a-styles();

			color: $color-green-hc-dark;

			&.is-external, &.is-mail, &.is-internal, &.is-phone, &.is-download {
				color: $color-green-hc-dark;
			}
		}

		p {
			margin-bottom: 25px;

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

		/*
		Lists
		----------------------------- */
		ul {
			@include content-ul-styles();
		}

		ol {
			@include content-ol-styles();
		}

		sub {
			vertical-align: sub;
			font-size: smaller;
		}

		sup {
			vertical-align: super;
			font-size: smaller;
		}

	}

}

.c-tab-area--rte {
	@include rte-dimensions();
	margin-bottom: 60px;
	/*
	MODIFIERS
	----------------------- */
	.tab-area__headline {
		width: 100%;
		flex: 0 0 100%;
		margin-left: 0px;
	}

	.tab-area__content {

		.tab-area__contentblock {
			p {
				@include content-p-styles();
			}

			p:last-child:empty {
				margin-bottom: 0;
			}

			a {
				color: $color-green-hc-dark;

				&.is-external, &.is-mail, &.is-internal, &.is-phone, &.is-download {
					color: $color-green-hc-dark;
				}
			}

		}

		.tab-area__list,
		.tab-area__linkheadline
		{
			margin-left: 0px;
		}


		.tab-area__list {
			li {
				&::before {
					width: 0px;
					height: 0px;
					background-color: transparent;
				}
			}

			.tab-area__list-item {
				margin-bottom: 0;
			}

		}
	}
}

Default (Übersichtsseite)

<div class="c-tab-area--default" data-css="c-tab-area" data-js-module="tab-area" data-js-item="js-tab-area-all">
	<h2 class="tab-area__headline">Überschrift für Tabmodul</h2>
	<div class="tab-area__desc">Inhalt wechseln</div>
	<div class="tab-area__nav" role="tablist" aria-label="Tab-Navigation" data-js-item="js-tab-area-nav">
		<button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" class="tab-area__tab is-active" data-js-id="1" data-js-item="js-tab-area-tab">Tab 1 mit langem Titel und so</button>
		<button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" class="tab-area__tab" data-js-id="2" data-js-item="js-tab-area-tab">Tabulator 2 mit etwas mehr</button>
		<button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" class="tab-area__tab" data-js-id="3" data-js-item="js-tab-area-tab">Tabulator 3</button>
	</div>
	<div class="tab-area__contentwrapper" data-js-item="js-tab-area-contentwrapper">
		<div class="tab-area__content is-active" role="tabpanel" id="panel-1" aria-labelledby="tab-1" data-js-id="1" data-js-item="js-tab-area-content" aria-hidden="false">
			<h2 class="tab-area__headline">Headline 1 mit etwas mehr Text um dann das Umbrechen zu testen</h2>
			<figure class="c-figure--rte is-rte-embed is-right" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
										 tab-area__picture" data-css="c-picture">
						<!--[if IE 9]><audio><![endif]-->
						<source srcset="
										 https://via.placeholder.com/300x300  300w  , 
										 https://via.placeholder.com/600x600  600w  , 
										 https://via.placeholder.com/1200x1200  1200w  " sizes=" 
										   33.33333vw 
										  ,  (min-width: 1440px) 617px " media=" (min-width: 1024px)" />
						<source srcset="
										 https://via.placeholder.com/600x400  600w  , 
										 https://via.placeholder.com/1200x800  1200w  , 
										 https://via.placeholder.com/2400x1600  2400w  " sizes=" 
										  (min-width: 768px) 41.66667vw 
										  ,   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
										 picture__image" src="https://via.placeholder.com/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
					<button type="button" class="c-cta--image-zoom" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "image": { "src": "https://via.placeholder.com/2000x1000", "altText": "Some alt text"}, "caption": {"captionHeadline": "Caption Headline", "captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "© imageworks"}]} }'>
						Vergrößern
					</button>
				</div>
				<figcaption class="figure__caption">
					<div class="figure__caption-inner">
						<h3 class="figure__caption-headline">Caption Headline</h3>
						<p class="figure__caption-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
					</div>
				</figcaption>
			</figure>
			<div class="tab-area__contentblock">
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 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. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
				<p>Hier dann nochmal Text mit viel Inhalt der dann etwas macht. danach soll eine Überschrift kommen.</p>
				<h3>test H3 mit kleinerer Darstellung</h3>
				<p><a href="#" class="is-external">test</a><b>dick</b><i>kursiv</i></p>
			</div>
			<h3 class="tab-area__linkheadline">Weitere Informationen</h3>
			<ul class="tab-area__list">
				<li class="tab-area__list-item">
					<a href="#" class="tab-area__list-link">Unsere Studiengänge</a>
				</li>
				<li class="tab-area__list-item">
					<a href="#" class="tab-area__list-link is-external">Unsere Stellenangebote</a>
				</li>
				<li class="tab-area__list-item">
					<a href="mailto:test@test.de" class="tab-area__list-link is-mail">info@lmu.de</a>
				</li>
				<li class="tab-area__list-item">
					<a href="#" class="tab-area__list-link">Unsere Studiengänge</a>
				</li>
			</ul>
		</div>
		<div class="tab-area__content" role="tabpanel" id="panel-2" aria-labelledby="tab-2" data-js-id="2" data-js-item="js-tab-area-content" aria-hidden="true">
			<h2 class="tab-area__headline">Headline 2 mit etwas mehr Text</h2>
			<div class="tab-area__contentblock">
				<p>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. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
				<p>Hier dann nochmal Text mit viel Inhalt der dann etwas macht. danach soll eine Überschrift kommen.</p>
				<h3>test H3 mit kleinerer Darstellung</h3>
				<p><a href="#" class="is-external">test</a><b>dick</b><i>kursiv</i></p>
			</div>
			<h3 class="tab-area__linkheadline">Weitere Informationen</h3>
			<ul class="tab-area__list">
				<li class="tab-area__list-item">
					<a href="#" class="tab-area__list-link">Unsere Studiengänge</a>
				</li>
				<li class="tab-area__list-item">
					<a href="#" class="tab-area__list-link is-external">Unsere Stellenangebote</a>
				</li>
				<li class="tab-area__list-item">
					<a href="mailto:test@test.de" class="tab-area__list-link is-mail">info@lmu.de</a>
				</li>
				<li class="tab-area__list-item">
					<a href="#" class="tab-area__list-link">Unsere Studiengänge</a>
				</li>
			</ul>
		</div>
		<div class="tab-area__content" role="tabpanel" id="panel-3" aria-labelledby="tab-3" data-js-id="3" data-js-item="js-tab-area-content" aria-hidden="true">
			<h2 class="tab-area__headline">Headline 3</h2>
			<figure class="c-figure--rte is-rte-embed is-left" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
										 tab-area__picture lazyload" data-css="c-picture">
						<!--[if IE 9]><audio><![endif]-->
						<source data-srcset="
										 https://via.placeholder.com/300x300  300w  , 
										 https://via.placeholder.com/600x600  600w  , 
										 https://via.placeholder.com/1200x1200  1200w  " sizes=" 
										   33.33333vw 
										  ,  (min-width: 1440px) 617px " media=" (min-width: 1024px)" />
						<source data-srcset="
										 https://via.placeholder.com/600x400  600w  , 
										 https://via.placeholder.com/1200x800  1200w  , 
										 https://via.placeholder.com/2400x1600  2400w  " sizes=" 
										  (min-width: 768px) 41.66667vw 
										  ,   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
										 picture__image lazyload" src="https://via.placeholder.com/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
					<button type="button" class="c-cta--image-zoom" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "image": { "src": "https://via.placeholder.com/2000x1000", "altText": "Some alt text"}, "caption": {"captionHeadline": "Caption Headline", "captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "© imageworks"}]} }'>
						Vergrößern
					</button>
				</div>
				<figcaption class="figure__caption">
					<div class="figure__caption-inner">
						<h3 class="figure__caption-headline">Caption Headline</h3>
						<p class="figure__caption-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
					</div>
				</figcaption>
			</figure>
			<div class="tab-area__contentblock">
				<p>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. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
				<p>Hier dann nochmal Text mit viel Inhalt der dann etwas macht. danach soll eine Überschrift kommen.</p>
				<h3>test H3 mit kleinerer Darstellung</h3>
				<p><a href="#" class="is-external">test</a><b>dick</b><i>kursiv</i></p>
			</div>
		</div>
	</div>
</div>

RTE (Detailseite)

<div class="c-tab-area--rte" data-css="c-tab-area" data-js-module="tab-area" data-js-item="js-tab-area-all">
	<h2 class="tab-area__headline">Überschrift für Tabmodul</h2>
	<div class="tab-area__desc">Inhalt wechseln</div>
	<div class="tab-area__nav" role="tablist" aria-label="Tab-Navigation" data-js-item="js-tab-area-nav">
		<button role="tab" aria-selected="true" aria-controls="panel-4" id="tab-4" class="tab-area__tab is-active" data-js-id="4" data-js-item="js-tab-area-tab">Tab 1</button>
		<button role="tab" aria-selected="false" aria-controls="panel-5" id="tab-5" class="tab-area__tab" data-js-id="5" data-js-item="js-tab-area-tab">Tabulator 2</button>
		<button role="tab" aria-selected="false" aria-controls="panel-6" id="tab-6" class="tab-area__tab" data-js-id="6" data-js-item="js-tab-area-tab">Tabulator 3</button>
	</div>
	<div class="tab-area__contentwrapper" data-js-item="js-tab-area-contentwrapper">
		<div class="tab-area__content is-active" role="tabpanel" id="panel-4" aria-labelledby="tab-4" data-js-id="4" data-js-item="js-tab-area-content" aria-hidden="false">
			<h2 class="tab-area__headline">Headline 1 mit etwas mehr Text um dann das Umbrechen zu testen</h2>
			<figure class="c-figure--rte is-rte-embed is-right" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
										 tab-area__picture lazyload" data-css="c-picture">
						<!--[if IE 9]><audio><![endif]-->
						<source data-srcset="
										 https://via.placeholder.com/300x300  300w  , 
										 https://via.placeholder.com/600x600  600w  , 
										 https://via.placeholder.com/1200x1200  1200w  " sizes=" 
										   33.33333vw 
										  ,  (min-width: 1440px) 617px " media=" (min-width: 1024px)" />
						<source data-srcset="
										 https://via.placeholder.com/600x400  600w  , 
										 https://via.placeholder.com/1200x800  1200w  , 
										 https://via.placeholder.com/2400x1600  2400w  " sizes=" 
										  (min-width: 768px) 41.66667vw 
										  ,   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
										 picture__image lazyload" src="https://via.placeholder.com/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
					<button type="button" class="c-cta--image-zoom" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "image": { "src": "https://via.placeholder.com/2000x1000", "altText": "Some alt text"}, "caption": {"captionHeadline": "Caption Headline", "captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "© imageworks"}]} }'>
						Vergrößern
					</button>
				</div>
				<figcaption class="figure__caption">
					<div class="figure__caption-inner">
						<h3 class="figure__caption-headline">Caption Headline</h3>
						<p class="figure__caption-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
					</div>
				</figcaption>
			</figure>
			<div class="tab-area__contentblock">
				<p>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. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse. 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. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
				<p>Hier dann nochmal Text mit viel Inhalt der dann etwas macht. danach soll eine Überschrift kommen.</p>
				<h3>test H3 mit kleinerer Darstellung</h3>
				<p><a href="#" class="is-external">test</a><b>dick</b><i>kursiv</i></p>
			</div>
			<h3 class="tab-area__linkheadline">Weitere Informationen</h3>
			<ul class="tab-area__list">
				<li class="tab-area__list-item">
					<a href="#" class="tab-area__list-link">Unsere Studiengänge</a>
				</li>
				<li class="tab-area__list-item">
					<a href="#" class="tab-area__list-link is-external">Unsere Stellenangebote</a>
				</li>
				<li class="tab-area__list-item">
					<a href="mailto:test@test.de" class="tab-area__list-link is-mail">info@lmu.de</a>
				</li>
				<li class="tab-area__list-item">
					<a href="#" class="tab-area__list-link">Unsere Studiengänge</a>
				</li>
			</ul>
		</div>
		<div class="tab-area__content" role="tabpanel" id="panel-5" aria-labelledby="tab-5" data-js-id="5" data-js-item="js-tab-area-content" aria-hidden="true">
			<h2 class="tab-area__headline">Headline 2 mit etwas mehr Text</h2>
			<div class="tab-area__contentblock">
				<p>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. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
				<p>Hier dann nochmal Text mit viel Inhalt der dann etwas macht. danach soll eine Überschrift kommen.</p>
				<h3>test H3 mit kleinerer Darstellung</h3>
				<p><a href="#" class="is-external">test</a><b>dick</b><i>kursiv</i></p>
			</div>
			<h3 class="tab-area__linkheadline">Weitere Informationen</h3>
			<ul class="tab-area__list">
				<li class="tab-area__list-item">
					<a href="#" class="tab-area__list-link">Unsere Studiengänge</a>
				</li>
				<li class="tab-area__list-item">
					<a href="#" class="tab-area__list-link is-external">Unsere Stellenangebote</a>
				</li>
				<li class="tab-area__list-item">
					<a href="mailto:test@test.de" class="tab-area__list-link is-mail">info@lmu.de</a>
				</li>
				<li class="tab-area__list-item">
					<a href="#" class="tab-area__list-link">Unsere Studiengänge</a>
				</li>
			</ul>
		</div>
		<div class="tab-area__content" role="tabpanel" id="panel-6" aria-labelledby="tab-6" data-js-id="6" data-js-item="js-tab-area-content" aria-hidden="true">
			<h2 class="tab-area__headline">Headline 3</h2>
			<figure class="c-figure--rte is-rte-embed is-left" data-css="c-figure" data-js-module="overlay-handler">
				<div class="figure__wrapper">
					<picture class="c-picture--default
										 tab-area__picture lazyload" data-css="c-picture">
						<!--[if IE 9]><audio><![endif]-->
						<source data-srcset="
										 https://via.placeholder.com/300x300  300w  , 
										 https://via.placeholder.com/600x600  600w  , 
										 https://via.placeholder.com/1200x1200  1200w  " sizes=" 
										   33.33333vw 
										  ,  (min-width: 1440px) 617px " media=" (min-width: 1024px)" />
						<source data-srcset="
										 https://via.placeholder.com/600x400  600w  , 
										 https://via.placeholder.com/1200x800  1200w  , 
										 https://via.placeholder.com/2400x1600  2400w  " sizes=" 
										  (min-width: 768px) 41.66667vw 
										  ,   calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 1023px)" />
						<!--[if IE 9]></audio><![endif]-->
						<img class="
										 picture__image lazyload" src="https://via.placeholder.com/400x400" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
					</picture>
					<button type="button" class="c-cta--image-zoom" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "image": { "src": "https://via.placeholder.com/2000x1000", "altText": "Some alt text"}, "caption": {"captionHeadline": "Caption Headline", "captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "© imageworks"}]} }'>
						Vergrößern
					</button>
				</div>
				<figcaption class="figure__caption">
					<div class="figure__caption-inner">
						<h3 class="figure__caption-headline">Caption Headline</h3>
						<p class="figure__caption-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
					</div>
				</figcaption>
			</figure>
			<div class="tab-area__contentblock">
				<p>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. 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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
				<p>Hier dann nochmal Text mit viel Inhalt der dann etwas macht. danach soll eine Überschrift kommen.</p>
				<h3>test H3 mit kleinerer Darstellung</h3>
				<p><a href="#" class="is-external">test</a><b>dick</b><i>kursiv</i></p>
			</div>
		</div>
	</div>
</div>