<!-- Default -->
<div class="article-content">
<div class="article-content__inner">
<div class="article-content__block article-content__block--text article-content__block--initial" id="c1">
<div class="text text--initial">
<p>Dashboards are computer programmes that compile various data, information and statistics about a topic and graphically present them as concisely as possible. These can be simple figures, diagrams or enriched maps. During the corona pandemic, the
"COVID-19 Map", produced by Johns-Hopkins University in the U.S., has been held up as the standard. "A dashboard always suggests that you are getting a summary of all the important data," says Jonathan Everts. The data are updated in almost
real time and can be viewed by everyone. This is problematic, explains Everts, because these tools are no longer only being used by health authorities, but instead by many people around the world. p So sehen Links in einer Liste aus:</p>
<div class="link-list">
<ul class="link-list__list">
<li class="link-list__link">
<a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"><span class="link-block__info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"><span class="link-block__info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="http://theoldpurple.com/" rel="noopener noreferrer" target="_blank"><span class="link-block__icon"><svg class="icon icon--external link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-external"></use>
</svg></span><span class="link-block__text">Externer Link</span><span class="link-block__hint"><span class="link-block__info">Lorem ipsum dolor sit amet diam</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download</span><span class="link-block__hint"><span class="link-block__file">pdf</span><span class="link-block__size">12KB</span><span class="link-block__access">barrierefrei</span></span>
</a>
</li>
<li class="link-list__link">
<a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Dateiname</span><span class="link-block__hint"><span class="link-block__file">pdf</span><span class="link-block__size">12KB</span><span class="link-block__access">barrierefrei</span></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="article-content__block article-content__block--text" id="c2">
<div class="text">
<h2 class="headline headline--6">Dies ist eine Zwischenheadline</h2>
<p>Lorem ipsum dolor sit amet, Begriffserklärung consetetur sadipscing elitr, sed diam tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyamLorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="article-content__block article-content__block--text" id="c2a">
<div class="text">
<h2 class="headline headline--6">Bildslider</h2>
<p>Lorem ipsum dolor sit amet, Begriffserklärung consetetur sadipscing elitr, sed diam tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyamLorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="article-content__block article-content__block--slider" id="c2b">
<div class="slider">
<div class="slider__slides-frame">
<div class="slider__slides">
<div class="slider__slide">
<figure class="figure js-figure" aria-labelledby="figure-a739-label">
<div class="figure__media">
<div class="image image--not-responsive">
<img class="image__img" src="/images/slider-images/850x570@1x.jpg" data-srcset="../images/slider-images/850x570@2x.jpg 2x, ../images/slider-images/850x570@1x.jpg 1x" width="850" height="570" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt."
/>
</div>
</div>
<figcaption class="figure__caption" id="figure-a739-label">Slide 1: Eine Bildunterschrit die gleichzeitig der Alt-Text ist.<span class="copy">Foto: Bernd Bauer</span><span class="download__caption"><a class="link link--download" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf">Download (JPG, 12KB, barrierefrei)</a></span></figcaption>
</figure>
</div>
<div class="slider__slide">
<figure class="figure js-figure" aria-labelledby="figure-5323-label">
<div class="figure__media">
<div class="image image--not-responsive">
<img class="image__img" src="/images/slider-images/570x570@1x.jpg" data-srcset="../images/slider-images/570x570@2x.jpg 2x, ../images/slider-images/570x570@1x.jpg 1x" width="570" height="570" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt."
/><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0</span>
<a class="link link--external" href="https://creativecommons.org/licenses/by-nc/3.0/de/" title="Nutzungsrechte" rel="noopener noreferrer" target="_blank"></a>
</span>
</span>
</div>
</div>
<figcaption class="figure__caption" id="figure-5323-label">Slide 2: Hier steht eine optionale Bildunterzeile</figcaption>
</figure>
</div>
<div class="slider__slide">
<figure class="figure js-figure" aria-labelledby="figure-37bc-label">
<div class="figure__media">
<div class="image image--not-responsive">
<img class="image__img" src="/images/slider-images/428x570@1x.jpg" data-srcset="../images/slider-images/428x570@2x.jpg 2x, ../images/slider-images/428x570@1x.jpg 1x" width="428" height="570" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt."
/><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0</span>
<a class="link link--external" href="https://creativecommons.org/licenses/by-nc/3.0/de/" title="Nutzungsrechte" rel="noopener noreferrer" target="_blank"></a>
</span>
</span>
</div>
</div>
<figcaption class="figure__caption" id="figure-37bc-label">Slide 3: Hier steht eine optionale Bildunterzeile</figcaption>
</figure>
</div>
<div class="slider__slide">
<figure class="figure js-figure" aria-labelledby="figure-8392-label">
<div class="figure__media">
<div class="image image--not-responsive">
<img class="image__img" src="/images/slider-images/1200x570@1x.jpg" data-srcset="../images/slider-images/1200x570@2x.jpg 2x, ../images/slider-images/1200x570@1x.jpg 1x" width="1200" height="570" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt."
/><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0</span></span>
</span>
</div>
</div>
<figcaption class="figure__caption" id="figure-8392-label">Slide 4: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<aside class="article-content__block article-content__block--quote" id="c3">
<figure class="quote quote--center">
<blockquote class="quote__text">Dies ist ein Zitat. Lorem forem ipsum.</blockquote>
<figcaption class="quote__source">Name Zitatgeber</figcaption>
</figure>
</aside>
<aside class="article-content__block article-content__block--figure" id="c5">
<figure class="figure js-figure" aria-labelledby="figure-6584-label">
<div class="figure__media">
<div class="image loading" style="padding-top: 75.05882352941177%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
width="850" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0</span>
<a class="link link--external" href="https://creativecommons.org/licenses/by-nc/3.0/de/" title="Nutzungsrechte" rel="noopener noreferrer" target="_blank"></a>
</span>
</span>
</div>
</div>
<figcaption class="figure__caption" id="figure-6584-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</aside>
<div class="article-content__block article-content__block--text" id="c6">
<div class="text">
<h2 class="headline headline--6">Dies ist ein Youtube Video</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<aside class="article-content__block article-content__block--figure" id="c7">
<figure class="figure js-figure" aria-labelledby="figure-47b2-label">
<div class="figure__media">
<a class="figure__play" href="https://www.youtube.com/watch?v=dwyPdrTw9cE">
<div class="image" style="padding-top: 56.25%;">
<img class="image__img" src="/images/dummy-images/youtube_2.jpg" width="1920" height="1080" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Video beschreibt." />
</div>
<button class="icon-button icon-button--large figure__play-button" title="Video abspielen" type="button"><span class="icon-button__text u-hidden-visually">Video abspielen</span><span class="icon-button__circle"><svg class="icon icon--play icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-play"></use>
</svg></span></button>
</a>
</div>
<figcaption class="figure__caption" id="figure-47b2-label">Hier steht eine Unterzeile (02:30)</figcaption>
</figure>
</aside>
<div class="article-content__block article-content__block--text" id="c7a">
<div class="text">
<h2 class="headline headline--6">Dies ist ein Lokales Video</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<aside class="article-content__block article-content__block--figure" id="c7b">
<figure class="figure js-figure" aria-labelledby="figure-d36c-label">
<div class="figure__media">
<div class="figure__video-wrapper">
<div class="figure__video">
<video class="figure__video" poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" controls="controls" preload="metadata" crossorigin="crossorigin">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" />
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm" />
<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default="default" />
<track kind="descriptions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" />
</video>
</div>
</div>
</div>
<figcaption class="figure__caption" id="figure-d36c-label">Hier steht eine Unterzeile (02:30)</figcaption>
</figure>
</aside>
<div class="article-content__block article-content__block--text" id="c8">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<aside class="article-content__block article-content__block--highlight" id="c9">
<p class="headline headline--4 highlight">Ein wichtiger Wortgruppe oder Satz des links stehenden Textabsatzes.</p>
</aside>
<div class="article-content__block article-content__block--text" id="c10">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitrsadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore
</p>
</div>
</div>
<aside class="article-content__block article-content__block--figure article-content__block--float-left" id="c11">
<figure class="figure js-figure" aria-labelledby="figure-4806-label">
<div class="figure__media">
<div class="image" style="padding-top: 100%;">
<img class="image__img" src="/images/dummy-images/448x448.jpg" data-srcset="../images/dummy-images/448x448@2x.jpg 2x, ../images/dummy-images/448x448.jpg 1x" width="448" height="448" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt."
/><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0</span>
<a class="link link--external" href="https://creativecommons.org/licenses/by-nc/3.0/de/" title="Nutzungsrechte" rel="noopener noreferrer" target="_blank"></a>
</span>
</span>
</div>
</div>
<figcaption class="figure__caption" id="figure-4806-label">Hier steht eine optionale Bildunterzeile</figcaption>
</figure>
</aside>
<div class="article-content__block article-content__block--text" id="c12">
<div class="text">
<p>Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit ametsit amet, consetetur sadipscing elitr, sed , consetetur sadipscing elitrsadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat., sed diam nonumy eirmod tempor invidunt ut labore et dolore magnaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum
dolor sit amet, consetetur sadipscing elitrsadipscing elitr, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna Lorem ipsum dolor sit amet, consetetur sadipscing Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, Lorem ipsum
dolor sit amet, consetetur sadipscing elitrsadipscing elitr.</p>
</div>
</div>
<aside class="article-content__block article-content__block--figure article-content__block--float-right" id="c13">
<figure class="figure js-figure" aria-labelledby="figure-7b5b-label">
<div class="figure__media">
<div class="image" style="padding-top: 100%;">
<img class="image__img" src="/images/dummy-images/448x448.jpg" data-srcset="../images/dummy-images/448x448@2x.jpg 2x, ../images/dummy-images/448x448.jpg 1x" width="448" height="448" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt."
/><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0</span>
<a class="link link--external" href="https://creativecommons.org/licenses/by-nc/3.0/de/" title="Nutzungsrechte" rel="noopener noreferrer" target="_blank"></a>
</span>
</span>
</div>
</div>
<figcaption class="figure__caption" id="figure-7b5b-label">Hier steht eine optionale Bildunterzeile</figcaption>
</figure>
</aside>
<div class="article-content__block article-content__block--text" id="c77">
<div class="text">
<p>Labore et dolore magna aliquyam erat.Lorem ipsum dolor sit ametsit amet, consetetur.invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, Lorem
ipsum dolor sit amforem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing et, consetetur sadipscing eliconseteturtrsadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitrsadipscing elitr.</p>
</div>
</div>
<div class="article-content__block article-content__block--text" id="c33">
<div class="text">
<h2 class="headline headline--6">Text-Störer</h2>
<p>Labore et dolore magna aliquyam erat.Lorem ipsum dolor sit ametsit amet, consetetur.invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy rem ipsum dolor sit ametsit amet, consetetur.invidunt ut labore et dolore magna aliquyam erat.
sed diam
</p>
</div>
</div>
<aside class="article-content__block article-content__block--teaser article-content__block--float-left" id="c15">
<article class="teaser">
<div class="teaser__content">
<div class="teaser__headline">
<h4 class="headline headline--7">Überschrift eines Text-Störers über zwei Zeilen</h4>
</div>
<div class="teaser__description">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
</div>
<div class="teaser__link">
<a class="cta-link" href="#"><span class="cta-link__text"><span class="u-hidden-visually">Lorem ipsum dolor sit amet</span> weiterlesen</span>
</a>
</div>
</div>
<a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
</article>
</aside>
<div class="article-content__block article-content__block--text" id="c16">
<div class="text">
<p>Lorem ipsum dolor sit amets eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amforem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing et, consetetur sadipscing
eliconseteturtrsadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitrsadipscing elitr.</p>
</div>
</div>
<div class="article-content__block article-content__block--text" id="c88">
<div class="text">
<p>Labore et dolore magna aliquyam erat.Lorem ipsum dolor sit ametsit amet, consetetur.invidrem ipsum dolor sit amforem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing et, consetetur sadipscing eliconseteturtrsadipscing elitr.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consetetur sadipscing elitrsadipscing elitr.</p>
<article class="teaser">
<div class="teaser__content">
<div class="teaser__headline">
<h3 class="headline headline--7">Lorem ipsum dolor sit amet</h3>
</div>
<div class="teaser__description">
<p>Lorem ipsum dolor sit amet, conseteturiquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
</div>
</article>
</div>
</div>
<div class="article-content__block article-content__block--text" id="c17">
<div class="text">
<h2 class="headline headline--6">Nummerierte und Bulletpoint Liste</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<ol>
<li><strong>Themenpunkt:</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</li>
<li><strong>Themenpunkt:</strong> Ipsum dolor sit amet, consetetur, sed diam eirmod</li>
<li>Ium dolor sit amet, consetetur sadip, nonumy eirmod</li>
</ol>
<ul>
<li>Ebene 1 amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</li>
<li>labore et dolore magna aliquyam erat
<ul>
<li>Ebene 2 invidunt ut labore et dolore magna aliquyam erat
<ul>
<li>Ebene 3 invidunt ut labore et dolore magna aliquyam erat</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="article-content__block article-content__block--text" id="c18">
<div class="text">
<h2 class="headline headline--6">Bildergalerie</h2>
<div class="image-gallery js-image-gallery">
<div class="image-gallery__images">
<div class="image-gallery__image">
<figure class="figure js-figure" aria-labelledby="figure-db4b-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/1200x800/e6e6e6/000&text=Gallery+Image+1" data-gallery="gallery-e9c3" data-type="image" data-width="1200" data-height="800">
<div class="image loading" style="padding-top: 75.05882352941177%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
width="850" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-db4b-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="image-gallery__image">
<figure class="figure js-figure" aria-labelledby="figure-d88d-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/800x1200/e6e6e6/000&text=Gallery+Image+2" data-gallery="gallery-e9c3" data-type="image" data-width="1200" data-height="800">
<div class="image loading" style="padding-top: 75.05882352941177%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
width="850" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-d88d-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="image-gallery__image">
<figure class="figure js-figure" aria-labelledby="figure-68d5-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/640x480/e6e6e6/000&text=Gallery+Image+3" data-gallery="gallery-e9c3" data-type="image" data-width="1200" data-height="800">
<div class="image loading" style="padding-top: 75.05882352941177%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
width="850" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-68d5-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="image-gallery__image">
<figure class="figure js-figure" aria-labelledby="figure-156f-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/1200x2400/e6e6e6/000&text=Gallery+Image+4" data-gallery="gallery-e9c3" data-type="image" data-width="1200" data-height="800">
<div class="image loading" style="padding-top: 75.05882352941177%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
width="850" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-156f-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="image-gallery__image">
<figure class="figure js-figure" aria-labelledby="figure-0b23-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/850x638/e6e6e6/000&text=Gallery+Image+5" data-gallery="gallery-e9c3" data-type="image" data-width="1200" data-height="800">
<div class="image loading" style="padding-top: 75.05882352941177%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
width="850" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-0b23-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="image-gallery__image">
<figure class="figure js-figure" aria-labelledby="figure-20fe-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/1200x800/e6e6e6/000&text=Gallery+Image+6" data-gallery="gallery-e9c3" data-type="image" data-width="1200" data-height="800">
<div class="image loading" style="padding-top: 75.05882352941177%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
width="850" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-20fe-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="image-gallery__image image-gallery__image--hidden">
<figure class="figure js-figure" aria-labelledby="figure-39b2-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/1200x800/e6e6e6/000&text=Gallery+Image+7" data-gallery="gallery-e9c3" data-type="image" data-width="1200" data-height="800">
<div class="image loading" style="padding-top: 75.05882352941177%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
width="850" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-39b2-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="image-gallery__image image-gallery__image--hidden">
<figure class="figure js-figure" aria-labelledby="figure-7d31-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/1200x800/e6e6e6/000&text=Gallery+Image+8" data-gallery="gallery-e9c3" data-type="image" data-width="1200" data-height="800">
<div class="image loading" style="padding-top: 75.05882352941177%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
width="850" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-7d31-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="image-gallery__image image-gallery__image--hidden">
<figure class="figure js-figure" aria-labelledby="figure-bee5-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/800x1200/e6e6e6/000&text=Gallery+Image+9" data-gallery="gallery-e9c3" data-type="image" data-width="1200" data-height="800">
<div class="image loading" style="padding-top: 75.05882352941177%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
width="850" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-bee5-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="image-gallery__image image-gallery__image--hidden">
<figure class="figure js-figure" aria-labelledby="figure-24cf-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/1200x800/e6e6e6/000&text=Gallery+Image+10" data-gallery="gallery-e9c3" data-type="image" data-width="1200" data-height="800">
<div class="image loading" style="padding-top: 75.05882352941177%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
width="850" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-24cf-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="image-gallery__image image-gallery__image--hidden">
<figure class="figure js-figure" aria-labelledby="figure-612a-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/1200x800/e6e6e6/000&text=Gallery+Image+11" data-gallery="gallery-e9c3" data-type="image" data-width="1200" data-height="800">
<div class="image loading" style="padding-top: 75.05882352941177%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="638" src="/images/dummy-images/850x638.jpg"
width="850" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/850x638.jpg" data-srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x" srcset="../images/dummy-images/850x638@2x.jpg 2x, ../images/dummy-images/850x638.jpg 1x"
width="850" height="638" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-612a-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="article-content__block article-content__block--text" id="c20">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
</div>
<div class="article-content__block article-content__block--text" id="c21">
<div class="text">
<h2 class="headline headline--6">Akkordeon</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
</div>
<div class="article-content__block article-content__block--accordion" id="c22">
<section class="accordion">
<div class="accordion__items" role="presentation">
<article class="accordion__item">
<h3 class="accordion__header">
<button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-2dd3-content" id="accordion-item-2dd3-headline">
<svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg>
<svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-down"></use>
</svg><span class="headline headline--5 accordion__toggle-label">Text und Listen</span></button>
</h3>
<div class="accordion__content" id="accordion-item-2dd3-content" aria-labelledby="accordion-item-2dd3-headline">
<div class="accordion__list">
<div class="accordion__list-item"><span class="text text--small"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 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.</p><ul><li>2016 Vorsitzender der consetetur sadipscing elit</li><li>2015 Geschäftsführender Direktor des consetetur sadipscing elit</li><li>2015 Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing</li><li>2009 Dozententätigkeit für consetetur sadipscing elit</li><li>2007 Forschungsaufenthalt an der consetetur sadipscing elit</li></ul><ol><li>Vorsitzender der consetetur sadipscing elit</li><li>Geschäftsführender Direktor des consetetur sadipscing elit</li><li>Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing</li><li>Dozententätigkeit für consetetur sadipscing elit</li><li>Forschungsaufenthalt an der consetetur sadipscing elit</li></ol></span></div>
</div>
</div>
</article>
<article class="accordion__item">
<h3 class="accordion__header">
<button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-fb65-content" id="accordion-item-fb65-headline">
<svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg>
<svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-down"></use>
</svg><span class="headline headline--5 accordion__toggle-label">Downloads</span></button>
</h3>
<div class="accordion__content" id="accordion-item-fb65-content" aria-labelledby="accordion-item-fb65-headline">
<div class="accordion__list">
<div class="accordion__list-item">
<article class="material">
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Flyers</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
</div>
</article>
</div>
<div class="accordion__list-item">
<article class="material">
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Flyers</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="/images/dummy-downloads/dummy.pdf" target="_blank" download="download.pdf"><span class="link-block__icon"><svg class="icon icon--download link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-download"></use>
</svg></span><span class="link-block__text">Download-Link (PDF, 12KB, barrierefrei)</span><span class="link-block__hint"></span></a>
</div>
</article>
</div>
<div class="accordion__list-item">
<article class="material">
<div class="material__thumbnail">
<figure class="figure js-figure" aria-labelledby="figure-9922-label">
<a class="figure__media js-lightbox figure__media--lightbox" href="https://dummyimage.com/900x1300/e6e6e6/000&text=lightbox+image+magnification" data-type="image" data-width="90" data-height="130">
<div class="image loading" style="padding-top: 144.44444444444443%;">
<noscript>
<img class="image__fallback" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." height="130" src="/images/dummy-images/90x130.jpg"
width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/dummy-images/90x130.jpg" data-srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x" srcset="../images/dummy-images/90x130.jpg 2x, ../images/dummy-images/90x130.jpg 1x"
width="90" height="130" alt="Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt." /><span class="image__copyright image__copyright--right"><span class="copyright"><span class="copyright__text">Foto: Romy Berger © MLU Halle-Wittenberg</span></span>
</span>
</div><span class="icon-button icon-button--large figure__lightbox-icon" title="Großer Icon-Button" aria-hidden="true"><span class="icon-button__text u-hidden-visually">Großer Icon-Button</span><span class="icon-button__circle"><svg class="icon icon--plus icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-plus"></use>
</svg></span></span>
</a>
<figcaption class="figure__caption" id="figure-9922-label">Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</figcaption>
</figure>
</div>
<div class="material__content">
<div class="material__headline">
<h3 class="headline headline--7">Name des Flyers</h3>
</div>
<div class="material__description">
<p>Kurzerklärung lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<a class="link-block" href="http://interner-link.com/"><span class="link-block__icon"><svg class="icon icon--angle-right link-block__icon-svg" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg></span><span class="link-block__text">Interner Link</span><span class="link-block__hint"></span></a>
</div>
</article>
</div>
</div>
</div>
</article>
<article class="accordion__item">
<h3 class="accordion__header">
<button class="js-toggle-accordion accordion__toggle" type="button" aria-expanded="false" aria-controls="accordion-item-5351-content" id="accordion-item-5351-headline">
<svg class="icon icon--angle-right accordion__toggle-icon accordion__toggle-icon--plus" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg>
<svg class="icon icon--angle-down accordion__toggle-icon accordion__toggle-icon--minus" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-down"></use>
</svg><span class="headline headline--5 accordion__toggle-label">Ansprechpartner</span></button>
</h3>
<div class="accordion__content" id="accordion-item-5351-content" aria-labelledby="accordion-item-5351-headline">
<div class="accordion__list">
<div class="accordion__list-item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="accordion__list-item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
</div>
</div>
</article>
</div>
</section>
</div>
<div class="article-content__block article-content__block--text" id="c99">
<div class="text">
<h2 class="headline headline--6">Ansprechpartner</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<div class="list-content">
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
<div class="list-content__item">
<article class="list-item list-item--person">
<div class="list-item__info">
<div class="avatar">
<div class="avatar__image">
<div class="image loading" style="padding-top: 100%;">
<noscript>
<img class="image__fallback" alt="Männliche Person" height="90" src="/images/avatars/man.svg" width="90" />
</noscript>
<img class="image__img js-lazyload" data-src="../images/avatars/man.svg" width="90" height="90" alt="Männliche Person" />
</div>
</div>
</div>
</div>
<div class="list-item__content">
<div class="list-item__headline">
<h3 class="headline headline--7">Franz Schünzel | anfvy</h3>
</div>
<ul class="list-item__list">
<li class="list-item__list-item"><span class="list-item__text">Frontend-Entwickler, UX-Designer, Ö-Team</span><span class="list-item__description">(ITZ)</span></li>
<li class="list-item__list-item"><span class="list-item__text">14.04.1988</span><span class="list-item__description">(33)</span></li>
<li class="list-item__list-item"><span class="list-item__text">Account und Kostenstelle:</span><span class="list-item__description">a+, Q82000</span></li>
<li class="list-item__list-item"><span class="list-item__text">GID und UID:</span><span class="list-item__description">2663, 7270</span></li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="mailto:franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--mail list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-mail"></use>
</svg>franz.schuenzel@itz.uni-halle.de</a>
</li>
<li class="list-item__list-item">
<a class="list-item__text list-item__link link" href="https://www.itz.uni-halle.de/otrs/index.pl?Action=AgentCustomerInformationCenter;CustomerID=franz.schuenzel@itz.uni-halle.de" target="_blank" rel="noopener noreferrer">
<svg class="icon icon--archive list-item__list-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-archive"></use>
</svg>OTRS-Tickets</a>
</li>
</ul>
</div>
<a class="list-item__overlay-link" href="#">
<svg class="icon icon--angle-right" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-right"></use>
</svg><span class="u-hidden-visually">Zur Person</span></a>
</article>
</div>
</div>
</div>
</div>
<div class="article-content__block article-content__block--text" id="c23">
<div class="text">
<h2 class="headline headline--6">Tabelle</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
</div>
<div class="article-content__block article-content__block--table" id="c24">
<div class="table">
<div class="table__headline">
<h4 class="headline headline--7" id="tableHeadline">Tabelle Column mit Fixed Table-Header</h4>
</div>
<div class="table__wrapper">
<table aria-labelledby="tableHeadline">
<tbody>
<tr>
<th scope="row">Row 1</th>
<td>Lorem ipsum dolor sit amet, consetetur sadipscing elit</td>
</tr>
<tr>
<th scope="row">Row 2</th>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<th scope="row">Rowowowow 3</th>
<td>Lorem ipsum dolor sit amet, consetetursadipscingelitr, sed diam nonumy eirmodtemporinviduntutlabore et dolore magna aliquyam erat.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="article-content__block article-content__block--table" id="c25">
<div class="table table--fixed">
<div class="table__headline">
<h4 class="headline headline--7" id="tableHeadline">Tabelle Column mit Fixed Table-Header</h4>
</div>
<div class="table__wrapper">
<table aria-labelledby="tableHeadline">
<thead>
<tr>
<th scope="col">Colololumn 1</th>
<th scope="col">ColumnColumn 2</th>
<th scope="col">Columnname 3</th>
<th scope="col">Column 4</th>
<th scope="col">Column 5</th>
<th scope="col">Column 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsumdolorsit amet</td>
<td>+49 234 123 724</td>
<td>1234 4321</td>
<td>1234</td>
<td>12 4321</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>+49 234 123 724</td>
<td>1234 4321</td>
<td>1234</td>
<td>12 4321</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum dolorsitametamettet</td>
<td>+49 234 123 724</td>
<td>1234 4321</td>
<td>1234</td>
<td>12 4321</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>+49 234 123 724</td>
<td>1234 4321</td>
<td>1234</td>
<td>12 4321</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>+49 234 123 724</td>
<td>1234 4321</td>
<td>1234</td>
<td>12 4321</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>+49 234 123 724</td>
<td>1234 4321</td>
<td>1234</td>
<td>12 4321</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>+49 234 123 724</td>
<td>1234 4321</td>
<td>1234</td>
<td>12 4321</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>+49 234 123 724</td>
<td>1234 4321</td>
<td>1234</td>
<td>12 4321</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>+49 234 123 724</td>
<td>1234 4321</td>
<td>1234</td>
<td>12 4321</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>+49 234 123 724</td>
<td>1234 4321</td>
<td>1234</td>
<td>12 4321</td>
<td>Lorem ipsum</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="article-content__block article-content__block--table article-content__block--full" id="c26">
<div class="table table--full">
<div class="table__headline">
<h4 class="headline headline--6" id="tableHeadline">Tabelle Column Fullwide</h4>
</div>
<div class="table__wrapper">
<table aria-labelledby="tableHeadline" aria-describedby="tableDescription">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
<th scope="col">Column 4</th>
<th scope="col">Column 5</th>
<th scope="col">Column 6</th>
<th scope="col">Column 7</th>
<th scope="col">Column 8</th>
<th scope="col">Column 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>1234</td>
</tr>
</tbody>
</table>
<div class="table__description" id="tableDescription">*This is the description</div>
</div>
</div>
</div>
<div class="article-content__block article-content__block--text" id="c27">
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
</div>
</div>
</div>
</div>
{
"blocks": [
{
"use": "text",
"id": "c1",
"initial": true,
"settings": {
"initial": true,
"content": "p Dashboards are computer programmes that compile various data, information and statistics about a topic and graphically present them as concisely as possible. These can be simple figures, diagrams or enriched maps. During the corona pandemic, the \"COVID-19 Map\", produced by Johns-Hopkins University in the U.S., has been held up as the standard. \"A dashboard always suggests that you are getting a summary of all the important data,\" says Jonathan Everts. The data are updated in almost real time and can be viewed by everyone. This is problematic, explains Everts, because these tools are no longer only being used by health authorities, but instead by many people around the world. p So sehen Links in einer Liste aus:\n+include('@link-list')\n"
}
},
{
"use": "text",
"id": "c2",
"settings": {
"content": "+include('@headline--headline-6', {\n level: 2,\n text: 'Dies ist eine Zwischenheadline',\n})\np Lorem ipsum dolor sit amet, Begriffserklärung consetetur sadipscing elitr, sed diam tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyamLorem ipsum dolor sit amet.\n"
}
},
{
"use": "text",
"id": "c2a",
"settings": {
"content": "+include('@headline--headline-6', {\n level: 2,\n text: 'Bildslider',\n})\np Lorem ipsum dolor sit amet, Begriffserklärung consetetur sadipscing elitr, sed diam tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyamLorem ipsum dolor sit amet.\n"
}
},
{
"use": "slider",
"id": "c2b",
"settings": {
"items": [
{
"figure": {
"image": {
"src": "/images/slider-images/850x570@1x.jpg",
"src2x": "/images/slider-images/850x570@2x.jpg",
"alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
"width": 850,
"height": 570,
"notresponsive": true
},
"caption": "Slide 1: Eine Bildunterschrit die gleichzeitig der Alt-Text ist.",
"copy": "Foto: Bernd Bauer",
"download": true
}
},
{
"figure": {
"image": {
"src": "/images/slider-images/570x570@1x.jpg",
"src2x": "/images/slider-images/570x570@2x.jpg",
"alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
"copyright": {
"cc_link": true,
"title": "Nutzungsrechte",
"external": "external",
"link": "https://creativecommons.org/licenses/by-nc/3.0/de/",
"text": "Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0"
},
"width": 570,
"height": 570,
"notresponsive": true
},
"caption": "Slide 2: Hier steht eine optionale Bildunterzeile"
}
},
{
"figure": {
"image": {
"src": "/images/slider-images/428x570@1x.jpg",
"src2x": "/images/slider-images/428x570@2x.jpg",
"alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
"copyright": {
"cc_link": true,
"title": "Nutzungsrechte",
"external": "external",
"link": "https://creativecommons.org/licenses/by-nc/3.0/de/",
"text": "Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0"
},
"width": 428,
"height": 570,
"notresponsive": true
},
"caption": "Slide 3: Hier steht eine optionale Bildunterzeile"
}
},
{
"figure": {
"image": {
"src": "/images/slider-images/1200x570@1x.jpg",
"src2x": "/images/slider-images/1200x570@2x.jpg",
"alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
"copyright": {
"text": "Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0"
},
"width": 1200,
"height": 570,
"notresponsive": true
},
"caption": "Slide 4: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
}
}
]
}
},
{
"use": "quote",
"id": "c3",
"tag": "aside",
"settings": {
"quote": "Dies ist ein Zitat. Lorem forem ipsum.",
"source": "Name Zitatgeber",
"center": true
}
},
{
"use": "figure",
"id": "c5",
"tag": "aside",
"settings": {
"caption": "Hier steht die Bildunterschrift lorem sed diam nonumy ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor",
"image": {
"alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
"lazyload": true,
"copyright": {
"cc_link": true,
"title": "Nutzungsrechte",
"external": "external",
"link": "https://creativecommons.org/licenses/by-nc/3.0/de/",
"text": "Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0"
},
"src": "/images/dummy-images/850x638.jpg",
"src2x": "/images/dummy-images/850x638@2x.jpg",
"width": 850,
"height": 638
}
}
},
{
"use": "text",
"id": "c6",
"settings": {
"content": "+include('@headline--headline-6', {\n level: 2,\n text: 'Dies ist ein Youtube Video',\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n"
}
},
{
"use": "figure",
"id": "c7",
"tag": "aside",
"settings": {
"caption": "Hier steht eine Unterzeile (02:30)",
"video": {
"type": "external",
"link": "https://www.youtube.com/watch?v=dwyPdrTw9cE"
},
"image": {
"src": "/images/dummy-images/youtube_2.jpg",
"alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Video beschreibt.",
"width": 1920,
"height": 1080
}
}
},
{
"use": "text",
"id": "c7a",
"settings": {
"content": "+include('@headline--headline-6', {\n level: 2,\n text: 'Dies ist ein Lokales Video',\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n"
}
},
{
"use": "figure",
"id": "c7b",
"tag": "aside",
"settings": {
"caption": "Hier steht eine Unterzeile (02:30)",
"video": {
"alt": "Das Video-Element soll einen alternativen Text enthalten, der den Inhalt der Datei beschreibt.",
"type": "internal",
"poster": "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",
"sources": [
{
"src": "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4",
"type": "video/mp4"
},
{
"src": "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",
"type": "video/webm"
}
],
"tracks": [
{
"kind": "captions",
"label": "English",
"srclang": "en",
"src": "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",
"default": true
},
{
"kind": "descriptions",
"label": "English",
"srclang": "en",
"src": "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
}
]
}
}
},
{
"use": "text",
"id": "c8",
"settings": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\n"
}
},
{
"use": "highlight",
"id": "c9",
"tag": "aside",
"settings": {
"text": "Ein wichtiger Wortgruppe oder Satz des links stehenden Textabsatzes."
}
},
{
"use": "text",
"id": "c10",
"settings": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitrsadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore\n"
}
},
{
"use": "figure",
"id": "c11",
"tag": "aside",
"float": "left",
"settings": {
"caption": "Hier steht eine optionale Bildunterzeile",
"image": {
"src": "/images/dummy-images/448x448.jpg",
"src2x": "/images/dummy-images/448x448@2x.jpg",
"alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
"copyright": {
"cc_link": true,
"title": "Nutzungsrechte",
"external": "external",
"link": "https://creativecommons.org/licenses/by-nc/3.0/de/",
"text": "Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0"
},
"width": 448,
"height": 448
}
}
},
{
"use": "text",
"id": "c12",
"settings": {
"content": "p Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit ametsit amet, consetetur sadipscing elitr, sed , consetetur sadipscing elitrsadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat., sed diam nonumy eirmod tempor invidunt ut labore et dolore magnaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, consetetur sadipscing elitrsadipscing elitr, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna Lorem ipsum dolor sit amet, consetetur sadipscing Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitrsadipscing elitr.\n"
}
},
{
"use": "figure",
"id": "c13",
"tag": "aside",
"float": "right",
"settings": {
"caption": "Hier steht eine optionale Bildunterzeile",
"image": {
"src": "/images/dummy-images/448x448.jpg",
"src2x": "/images/dummy-images/448x448@2x.jpg",
"alt": "Das alt-Attribut soll einen alternativen Text enthalten, der das Bild beschreibt.",
"copyright": {
"cc_link": true,
"title": "Nutzungsrechte",
"external": "external",
"link": "https://creativecommons.org/licenses/by-nc/3.0/de/",
"text": "Foto: Romy Berger © MLU Halle-Wittenberg, CC BY-NC-ND 3.0"
},
"width": 448,
"height": 448
}
}
},
{
"use": "text",
"id": "c77",
"settings": {
"content": "p Labore et dolore magna aliquyam erat.Lorem ipsum dolor sit ametsit amet, consetetur.invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amforem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing et, consetetur sadipscing eliconseteturtrsadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitrsadipscing elitr.\n"
}
},
{
"use": "text",
"id": "c33",
"settings": {
"content": "+include('@headline--headline-6', {\n level: 2,\n text: 'Text-Störer',\n})\np Labore et dolore magna aliquyam erat.Lorem ipsum dolor sit ametsit amet, consetetur.invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy rem ipsum dolor sit ametsit amet, consetetur.invidunt ut labore et dolore magna aliquyam erat. sed diam\n"
}
},
{
"use": "teaser",
"id": "c15",
"tag": "aside",
"float": "left",
"settings": {
"headline": {
"text": "Überschrift eines Text-Störers über zwei Zeilen",
"level": 4,
"size": 7
},
"linkType": "cta-link",
"link": {
"link": "#",
"text": "#[span.u-hidden-visually Lorem ipsum dolor sit amet] weiterlesen"
},
"description": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.\n"
}
},
{
"use": "text",
"id": "c16",
"settings": {
"content": "p Lorem ipsum dolor sit amets eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amforem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing et, consetetur sadipscing eliconseteturtrsadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitrsadipscing elitr.\n"
}
},
{
"use": "text",
"id": "c88",
"settings": {
"content": "p Labore et dolore magna aliquyam erat.Lorem ipsum dolor sit ametsit amet, consetetur.invidrem ipsum dolor sit amforem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing et, consetetur sadipscing eliconseteturtrsadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consetetur sadipscing elitrsadipscing elitr.\n+include('@teaser')\n"
}
},
{
"use": "text",
"id": "c17",
"settings": {
"content": "+include('@headline--headline-6', {\n level: 2,\n text: 'Nummerierte und Bulletpoint Liste',\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.\nol\n li #[strong Themenpunkt:] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam eirmod tempor invidunt ut labore et dolore magna aliquyam erat.\n li #[strong Themenpunkt:] Ipsum dolor sit amet, consetetur, sed diam eirmod\n li Ium dolor sit amet, consetetur sadip, nonumy eirmod\n\nul\n li Ebene 1 amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut\n li\n | labore et dolore magna aliquyam erat\n ul\n li\n | Ebene 2 invidunt ut labore et dolore magna aliquyam erat\n ul\n li Ebene 3 invidunt ut labore et dolore magna aliquyam erat\n"
}
},
{
"use": "text",
"id": "c18",
"settings": {
"content": "+include('@headline--headline-6', {\n level: 2,\n text: 'Bildergalerie',\n})\n+include('@image-gallery')\n"
}
},
{
"use": "text",
"id": "c20",
"settings": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.\n"
}
},
{
"use": "text",
"id": "c21",
"settings": {
"content": "+include('@headline--headline-6', {\n level: 2,\n text: 'Akkordeon',\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.\n"
}
},
{
"use": "accordion",
"id": "c22",
"settings": {
"items": [
{
"title": "Text und Listen",
"sections": [
{
"content": "span.text.text--small\n p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 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.\n\n ul\n li 2016 Vorsitzender der consetetur sadipscing elit\n li 2015 Geschäftsführender Direktor des consetetur sadipscing elit\n li 2015 Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing\n li 2009 Dozententätigkeit für consetetur sadipscing elit\n li 2007 Forschungsaufenthalt an der consetetur sadipscing elit\n\n ol\n li Vorsitzender der consetetur sadipscing elit\n li Geschäftsführender Direktor des consetetur sadipscing elit\n li Lehrstuhl für ipsum dolor sit amet, consetetur sadipscing\n li Dozententätigkeit für consetetur sadipscing elit\n li Forschungsaufenthalt an der consetetur sadipscing elit\n"
}
]
},
{
"title": "Downloads",
"sections": [
{
"content": "+include('@material')\n"
},
{
"content": "+include('@material')\n"
},
{
"content": "+include('@material--intern')\n"
}
]
},
{
"title": "Ansprechpartner",
"sections": [
{
"content": "+include('@list-item-person')\n"
},
{
"content": "+include('@list-item-person')\n"
}
]
}
]
}
},
{
"use": "text",
"id": "c99",
"settings": {
"content": "+include('@headline--headline-6', {\n level: 2,\n text: 'Ansprechpartner',\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.\n+include('@list-content--persons')\n"
}
},
{
"use": "text",
"id": "c23",
"settings": {
"content": "+include('@headline--headline-6', {\n level: 2,\n text: 'Tabelle',\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.\n"
}
},
{
"use": "table",
"id": "c24",
"settings": {
"headline": {
"text": "Tabelle Column mit Fixed Table-Header",
"level": 4,
"size": 7,
"attr": {
"id": "tableHeadline"
}
},
"description": null,
"fixed": null,
"full": null,
"table": {
"body": [
[
{
"tag": "th",
"scope": "row",
"value": "Row 1"
},
{
"value": "Lorem ipsum dolor sit amet, consetetur sadipscing elit"
}
],
[
{
"tag": "th",
"scope": "row",
"value": "Row 2"
},
{
"value": "Lorem ipsum dolor"
}
],
[
{
"tag": "th",
"scope": "row",
"value": "Rowowowow 3"
},
{
"value": "Lorem ipsum dolor sit amet, consetetursadipscingelitr, sed diam nonumy eirmodtemporinviduntutlabore et dolore magna aliquyam erat."
}
]
]
}
}
},
{
"use": "table",
"id": "c25",
"settings": {
"headline": {
"text": "Tabelle Column mit Fixed Table-Header",
"level": 4,
"size": 7,
"attr": {
"id": "tableHeadline"
}
},
"description": null,
"fixed": true,
"full": null,
"table": {
"head": [
[
{
"scope": "col",
"value": "Colololumn 1"
},
{
"scope": "col",
"value": "ColumnColumn 2"
},
{
"scope": "col",
"value": "Columnname 3"
},
{
"scope": "col",
"value": "Column 4"
},
{
"scope": "col",
"value": "Column 5"
},
{
"scope": "col",
"value": "Column 6"
}
]
],
"body": [
[
{
"value": "Lorem ipsumdolorsit amet"
},
{
"value": "+49 234 123 724"
},
{
"value": "1234 4321"
},
{
"value": 1234
},
{
"value": "12 4321"
},
{
"value": "Lorem ipsum"
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": "+49 234 123 724"
},
{
"value": "1234 4321"
},
{
"value": 1234
},
{
"value": "12 4321"
},
{
"value": "Lorem ipsum"
}
],
[
{
"value": "Lorem ipsum dolorsitametamettet"
},
{
"value": "+49 234 123 724"
},
{
"value": "1234 4321"
},
{
"value": 1234
},
{
"value": "12 4321"
},
{
"value": "Lorem ipsum"
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": "+49 234 123 724"
},
{
"value": "1234 4321"
},
{
"value": 1234
},
{
"value": "12 4321"
},
{
"value": "Lorem ipsum"
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": "+49 234 123 724"
},
{
"value": "1234 4321"
},
{
"value": 1234
},
{
"value": "12 4321"
},
{
"value": "Lorem ipsum"
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": "+49 234 123 724"
},
{
"value": "1234 4321"
},
{
"value": 1234
},
{
"value": "12 4321"
},
{
"value": "Lorem ipsum"
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": "+49 234 123 724"
},
{
"value": "1234 4321"
},
{
"value": 1234
},
{
"value": "12 4321"
},
{
"value": "Lorem ipsum"
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": "+49 234 123 724"
},
{
"value": "1234 4321"
},
{
"value": 1234
},
{
"value": "12 4321"
},
{
"value": "Lorem ipsum"
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": "+49 234 123 724"
},
{
"value": "1234 4321"
},
{
"value": 1234
},
{
"value": "12 4321"
},
{
"value": "Lorem ipsum"
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": "+49 234 123 724"
},
{
"value": "1234 4321"
},
{
"value": 1234
},
{
"value": "12 4321"
},
{
"value": "Lorem ipsum"
}
]
]
}
}
},
{
"use": "table",
"id": "c26",
"settings": {
"headline": {
"text": "Tabelle Column Fullwide",
"level": 4,
"size": 6,
"attr": {
"id": "tableHeadline"
}
},
"description": "*This is the description",
"fixed": null,
"full": true,
"table": {
"head": [
[
{
"scope": "col",
"value": "Column 1"
},
{
"scope": "col",
"value": "Column 2"
},
{
"scope": "col",
"value": "Column 3"
},
{
"scope": "col",
"value": "Column 4"
},
{
"scope": "col",
"value": "Column 5"
},
{
"scope": "col",
"value": "Column 6"
},
{
"scope": "col",
"value": "Column 7"
},
{
"scope": "col",
"value": "Column 8"
},
{
"scope": "col",
"value": "Column 9"
}
]
],
"body": [
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
}
],
[
{
"value": "Lorem ipsum dolor sit amet"
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
},
{
"value": 1234
}
]
]
}
},
"full": true
},
{
"use": "text",
"id": "c27",
"settings": {
"content": "p Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.\n"
}
}
]
}