No notes defined.
<!-- Default -->
<div class="pageSection">
<h2 class="pageSection-title">Ich bin der Titel des Abschnitts</h2>
<p class="copy ">
Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</p>
</div>
<!-- With Backdrop -->
<div class="pageSection has-backdrop">
<h2 class="pageSection-title">Ich bin der Titel des Abschnitts</h2>
<p class="copy ">
Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</p>
</div>
<!-- With Description -->
<div class="pageSection">
<h2 class="pageSection-title">Ich bin der Titel des Abschnitts</h2>
<div class="pageSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<p class="copy ">
Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</p>
</div>
<!-- With Blocks -->
<div class="pageSection">
<h2 class="pageSection-title">Ich bin der Titel des Abschnitts</h2>
<div class="pageSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="accordionInset">
<div class="accordionInset-items">
<div class="accordionInset-item">
<details class="revealableContent">
<summary class="revealableContent-summary">
I’m the summary
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
<div class="accordionInset-item">
<details class="revealableContent">
<summary class="revealableContent-summary">
I’m the summary
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
<div class="accordionInset-item">
<details class="revealableContent">
<summary class="revealableContent-summary">
I’m the summary
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
<div class="accordionInset-item">
<details class="revealableContent">
<summary class="revealableContent-summary">
I’m the summary
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
</div>
</div>
<div class="accordionInset has-figures">
<div class="accordionInset-items">
<div class="accordionInset-item">
<details class="revealableContent has-figure" data-type="logo">
<summary class="revealableContent-summary">
<div class="revealableContent-figure">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001-landscape.svg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<strong class="revealableContent-summary-title">I’m the summary</strong>
<span class="revealableContent-summary-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</span>
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
<div class="accordionInset-item">
<details class="revealableContent has-figure" data-type="logo">
<summary class="revealableContent-summary">
<div class="revealableContent-figure">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001-landscape.svg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<strong class="revealableContent-summary-title">I’m the summary</strong>
<span class="revealableContent-summary-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</span>
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
<div class="accordionInset-item">
<details class="revealableContent has-figure" data-type="logo">
<summary class="revealableContent-summary">
<div class="revealableContent-figure">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001-landscape.svg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<strong class="revealableContent-summary-title">I’m the summary</strong>
<span class="revealableContent-summary-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</span>
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
<div class="accordionInset-item">
<details class="revealableContent has-figure" data-type="logo">
<summary class="revealableContent-summary">
<div class="revealableContent-figure">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001-landscape.svg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<strong class="revealableContent-summary-title">I’m the summary</strong>
<span class="revealableContent-summary-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</span>
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
</div>
</div>
<div class="contactInset">
<div class="contactInset-author">
<div class="personData">
<div class="avatar">
<span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
</div>
<div class="personData-text">
<strong class="personData-name">Leora Gulgowski</strong>
<span class="personData-jobtitle">Direct Tactics Specialist</span>
<a class="personData-link" href="#"><span>Zum Portrait</span><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
<div class="contactInset-contact">
<address class="addressBlock">
<div class="addressBlock-title">
<strong>Ich bin der Titel</strong>
</div>
<div class="addressBlock-links">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
</div>
<div class="contactLink" data-type="phone">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="mobile">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
</div>
</address>
<address class="addressBlock">
<div class="addressBlock-title">
<strong>Ich bin der Titel</strong>
</div>
<div class="addressBlock-links">
<div class="contactLink" data-type="linkedin">
<span class="contactLink-title">LinkedIn</span> <a class="contactLink-link" href="https://de.linkedin.com/company/psi-se"><span class="contactLink-label">@psi-se</span></a>
</div>
</div>
</address>
</div>
</div>
<div class="contactList">
<h2 class="contactList-title">Ich bin der Titel</h2>
<ul class="contactList-list">
<li class="contactList-item">
<div class="contactList-image">
<div class="avatar">
<span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
</div>
</div>
<div class="contactList-column">
<span class="kicker">
Thema
</span>
<strong class="contactList-name">Leora Gulgowski</strong> <span class="contactList-jobtitle">Direct Tactics Specialist</span>
<div class="contactList-address">
PSI Software SG<br />Dircksenstraße 42-44<br />10178 Berlin
</div>
</div>
<div class="contactList-column">
<div class="contactList-contactlinks">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
</div>
<div class="contactLink" data-type="phone">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="mobile">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="linkedin">
<span class="contactLink-title">LinkedIn</span> <a class="contactLink-link" href="https://de.linkedin.com/company/psi-se"><span class="contactLink-label">@psi-se</span></a>
</div>
</div>
<div class="contactList-links">
<a href="#" class="link"><span class="link-label">Zum Portrait</span><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="contactList-item">
<div class="contactList-image">
<div class="avatar" data-type="person">
<span class="avatar-initials">BM</span>
</div>
</div>
<div class="contactList-column">
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<strong class="contactList-name">Leora Gulgowski</strong> <span class="contactList-jobtitle">Direct Tactics Specialist</span>
<div class="contactList-address">
PSI Information Technology (Shanghai) Co., Ltd.<br />1212 South Building, Raycom InfoTech Park Tower C<br />KeXueYuanNanLu No. 2, Haidian District<br />Peking, 100190<br />V.R. China
</div>
</div>
<div class="contactList-column">
<div class="contactList-contactlinks">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">verylong.mailaddress@domain.com</span></a>
</div>
<div class="contactLink" data-type="phone">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="mobile">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="linkedin">
<span class="contactLink-title">LinkedIn</span> <a class="contactLink-link" href="https://de.linkedin.com/company/psi-se"><span class="contactLink-label">@psi-se</span></a>
</div>
</div>
<div class="contactList-links">
<a href="#" class="link"><span class="link-label">Zum Portrait</span><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
</a>
<a href="#" class="link"><span class="link-label">Anfahrt planen</span><svg class="icon is-arrow-square-out">
<use href="../../icons/icons-bold.svg#icon--arrow-square-out" xlink:href="../../icons/icons-bold.svg#icon--arrow-square-out"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="contactList-item">
<div class="contactList-image">
<div class="avatar" data-type="location">
<span class="avatar-initials">BM</span>
</div>
</div>
<div class="contactList-column">
<strong class="contactList-name">ACME Inc.</strong> <span class="contactList-jobtitle">Headquater</span>
</div>
<div class="contactList-column">
<div class="contactList-contactlinks">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
</div>
</div>
</div>
</li>
</ul>
</div>
<p class="copy is-standfirst">
Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</p>
<div class="ctaInset">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Klick mich!</span></a>
<a href="#" class="button is-secondary" data-icon-position="right"><svg class="icon is-arrow-square-out">
<use href="../../icons/icons.svg#icon--arrow-square-out" xlink:href="../../icons/icons.svg#icon--arrow-square-out"></use>
</svg>
<span class="button-label">Öffne mich!</span></a>
</div>
<div class="dataInset">
<h2 class="dataInset-title">Ich bin der Titel</h2>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<div class="dataInset">
<h2 class="dataInset-title">Ich bin der Titel</h2>
<div class="dataInset-intro">
<!-- Achtung: Doppelte Description -->
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<div class="eventSummary">
<h3 class="eventSummary-title">Ich bin der Titel</h3>
<div class="metadataList">
<dl class="metadataList-list">
<div class="metadataList-item">
<dt class="metadataList-label">Hashtag</dt>
<dd class="metadataList-value">Echo</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Park</dt>
<dd class="metadataList-value">Biodiesel</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Plaid</dt>
<dd class="metadataList-value">Skateboard</dd>
</div>
</dl>
</div>
</div>
<div class="featureList">
<ul class="featureList-list">
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Four loko disrupt jean shorts</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M0.979156 7.21216H23.0208" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675" stroke="black" />
<path d="M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675" stroke="black" />
<path d="M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675" stroke="black" />
<path d="M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675" stroke="black" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Hashtag four loko skateboard chillwave deep</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
</span>
<div class="featureList-text">
<strong class=featureList-label>Mit nicht definiertem Piktogramm</strong>
<span class="featureList-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</span>
</div>
</li>
</ul>
</div>
<div class="formInset">
<h2 class="formInset-title">Form title</h2>
<div class="formInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<form class="formInset-form" method="POST" action="./" accept-charset="UTF-8">
<fieldset class="formFieldset">
<legend class="formFieldset-legend">Ich bin ein Abschnitt</legend>
<div class="formFieldset-fields">
<div class="formFieldset-field">
<div class="formField">
<label class="label is-optional" for="field-id">Bezeichnung</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formTextarea is-optional">
<label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>
<textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Cardigan</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Raw Denim</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Flexitarian</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Letterpress & Mustache</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Gatekeep</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
</div>
<div class="formFieldset-field">
<div class="formToggle is-checkbox is-required is-small">
<label class="formToggle-label is-required is-small"><span class="toggle is-checkbox is-small">
<input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" /><span class="toggle-marker"></span>
</span>
<span>Ich habe die <a href="#">Datenschutzhinweise</a>, die <a href="#">Teilnahmebedingungen</a> und die <a href="#">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.</span></label>
</div>
</div>
<div class="formFieldset-field">
<div class="formFieldset-note">
<strong class="label">Datenschutz</strong>
<small>Die Datenverarbeitung erfolgt wie in der <a href="#" target="_blank">Datenschutzerklärung für die Website</a> beschrieben.</small>
</div>
</div>
</div>
</fieldset>
<fieldset class="formFieldset">
<legend class="formFieldset-legend">Ich bin ein Abschnitt</legend>
<div class="formFieldset-fields">
<div class="formFieldset-field">
<div class="formField">
<label class="label is-optional" for="field-id">Bezeichnung</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formTextarea is-optional">
<label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>
<textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Cardigan</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Raw Denim</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Flexitarian</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Letterpress & Mustache</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Gatekeep</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
</div>
<div class="formFieldset-field">
<div class="formToggle is-checkbox is-required is-small">
<label class="formToggle-label is-required is-small"><span class="toggle is-checkbox is-small">
<input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" /><span class="toggle-marker"></span>
</span>
<span>Ich habe die <a href="#">Datenschutzhinweise</a>, die <a href="#">Teilnahmebedingungen</a> und die <a href="#">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.</span></label>
</div>
</div>
<div class="formFieldset-field">
<div class="formFieldset-note">
<strong class="label">Datenschutz</strong>
<small>Die Datenverarbeitung erfolgt wie in der <a href="#" target="_blank">Datenschutzerklärung für die Website</a> beschrieben.</small>
</div>
</div>
</div>
</fieldset>
<div class="buttonGroup">
<button class="button is-secondary"><span class="button-label">Back</span></button>
<button class="button" type="submit"><span class="button-label">Send</span></button>
</div>
</form>
</div>
<div class="infoBox">
<header class="infoBox-header">
<span class="infoBox-icon">
</span>
<h2 class="infoBox-title">Ich bin der Titel der Info-Box</h2>
</header>
<div class="infoBox-content">
Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href="#">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</div>
</div>
<div class="interactionBar">
<ul class="interactionBar-items">
<li class="interactionBar-item">
<button class="button is-small is-tertiary"><svg class="icon is-share-fat">
<use href="../../icons/icons.svg#icon--share-fat" xlink:href="../../icons/icons.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Teilen</span></button>
</li>
<li class="interactionBar-item">
<button class="button is-small is-tertiary" onclick="const el = this.querySelector(".button-label"); el.innerText = parseInt(el.innerText) + 1; this.disabled = true; this.onclick = false;"><svg class="icon is-hands-clapping">
<use href="../../icons/icons.svg#icon--hands-clapping" xlink:href="../../icons/icons.svg#icon--hands-clapping"></use>
</svg>
<span class="button-label">482</span></button>
</li>
</ul>
</div>
<div class="mediaHighlightInset has-backdrop">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</div>
<div class="mediaInset is-fullwidth">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset">
<h2 class="photowallInset-title">Ich bin der Titel des Abschnitts</h2>
<div class="photowallInset-items">
<div class="photowallInset-item" data-orientation="landscape">
<figure class="figure" data-orientation="landscape" style="">
<img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="landscape">
<figure class="figure" data-orientation="landscape" style="">
<img class="figure-image" src="https://picsum.photos/id/65/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="upright">
<figure class="figure" data-orientation="upright" style="">
<img class="figure-image" src="https://picsum.photos/id/1062/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="upright">
<figure class="figure" data-orientation="upright" style="">
<img class="figure-image" src="https://picsum.photos/id/6/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="landscape">
<figure class="figure" data-orientation="landscape" style="">
<img class="figure-image" src="https://picsum.photos/id/18/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="upright">
<figure class="figure" data-orientation="upright" style="">
<img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="upright">
<figure class="figure" data-orientation="upright" style="">
<img class="figure-image" src="https://picsum.photos/id/65/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="landscape">
<figure class="figure" data-orientation="landscape" style="">
<img class="figure-image" src="https://picsum.photos/id/1062/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
</div>
</div>
<aside class="textHighlightInset" aria-hidden="true">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</aside>
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="tagGroup">
<div class="tagGroup-item">
<a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Church-key Viny</span></a>
</div>
<div class="tagGroup-item">
<a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Flexitarian Retro</span></a>
</div>
<div class="tagGroup-item">
<a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Hashtag Echo Park</span></a>
</div>
<div class="tagGroup-item">
<a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Polaroid Vice</span></a>
</div>
<div class="tagGroup-item">
<a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Bitters Sartorial</span></a>
</div>
</div>
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
<div class="teaserInset is-clickable" data-type="document">
<div class="teaserInset-image">
<a href="#" title="Download Datei (PDF)">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Download Datei (PDF)">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei (PDF)</span></a>
</div>
</div>
</div>
<p class="copy ">
Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</p>
<div class="teaserInset is-clickable has-linklist">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
<div class="teaserInset-linklist">
<div class="linkList">
<div class="linkList-title"><strong>Ich bin der Titel</strong></div>
<ul class="linkList-list">
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ich bin ein Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Noch ein zweiter Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ein Weiterer</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="teaserList">
<h3 class="teaserList-title">Ich bin der Titel</h3>
<div class="teaserList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserList-list">
<div class="teaserList-item">
<div class="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="teaserList">
<h3 class="teaserList-title">Ich bin der Titel</h3>
<div class="teaserList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserList-list">
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tabbedContent">
<nav class="tabbedContent-nav">
<div class="tabBar" role="tablist">
<div class="tabBar-items">
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-1" id="tabBar-sample-option-id-1-contoller" aria-controls="tabBar-sample-option-id-1" role="tab" aria-selected="true" tabindex="-1">
<span class="tab-label">Erste Option</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-2" id="tabBar-sample-option-id-2-contoller" aria-controls="tabBar-sample-option-id-2" role="tab" aria-selected="false">
<span class="tab-label">Mit Richtext</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-3" id="tabBar-sample-option-id-3-contoller" aria-controls="tabBar-sample-option-id-3" role="tab" aria-selected="false">
<span class="tab-label">Mit Tabelle</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-4" id="tabBar-sample-option-id-4-contoller" aria-controls="tabBar-sample-option-id-4" role="tab" aria-selected="false">
<span class="tab-label">Mit Bild</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-5" id="tabBar-sample-option-id-5-contoller" aria-controls="tabBar-sample-option-id-5" role="tab" aria-selected="false">
<span class="tab-label">Mehrere Textblöcke</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false" aria-disabled="true">
<span class="tab-label">Nicht verfügbar</span>
</a>
</div>
</div>
</div>
</nav>
<div class="tabbedContent-items">
<div class="tabbedContent-item" data-selected="true" id="tabBar-sample-option-id-1" role="tabpanel" aria-labelledby="tabBar-sample-option-id-1-contoller">
<div class="tabbedContent-content">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="tabbedContent-item" id="tabBar-sample-option-id-2" role="tabpanel" aria-labelledby="tabBar-sample-option-id-2-contoller">
<div class="tabbedContent-content">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="tabbedContent-item" id="tabBar-sample-option-id-3" role="tabpanel" aria-labelledby="tabBar-sample-option-id-3-contoller">
<table class="table" data-highlight=" ">
<caption class="table-caption">Table Caption</caption>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
</table>
<div class="tabbedContent-content">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="tabbedContent-item" id="tabBar-sample-option-id-4" role="tabpanel" aria-labelledby="tabBar-sample-option-id-4-contoller">
<div class="tabbedContent-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="tabbedContent-content">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="tabbedContent-content">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="tabbedContent-item" id="tabBar-sample-option-id-5" role="tabpanel" aria-labelledby="tabBar-sample-option-id-5-contoller">
<div class="tabbedContent-content">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="tabbedContent-content">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</div>
</div>
<div class="textInset has-backdrop">
<h2 class="textInset-title">Ich bin der Titel</h2>
<div class="textInset-content">
<div class="richtextBlock">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</div>
</div>
<!-- With Blocks On Backdrop -->
<div class="pageSection has-backdrop">
<h2 class="pageSection-title">Ich bin der Titel des Abschnitts</h2>
<div class="pageSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="infoBox">
<header class="infoBox-header">
<span class="infoBox-icon">
</span>
<h2 class="infoBox-title">Ich bin der Titel der Info-Box</h2>
</header>
<div class="infoBox-content">
Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href="#">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</div>
</div>
</div>
<!-- Doc Only -->
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Sektion mit allen verfügbaren Blöcken</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="pageSection">
<h2 class="pageSection-title">Ich bin der Titel des Abschnitts</h2>
<div class="pageSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="accordionInset">
<div class="accordionInset-items">
<div class="accordionInset-item">
<details class="revealableContent">
<summary class="revealableContent-summary">
I’m the summary
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
<div class="accordionInset-item">
<details class="revealableContent">
<summary class="revealableContent-summary">
I’m the summary
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
<div class="accordionInset-item">
<details class="revealableContent">
<summary class="revealableContent-summary">
I’m the summary
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
<div class="accordionInset-item">
<details class="revealableContent">
<summary class="revealableContent-summary">
I’m the summary
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
</div>
</div>
<div class="accordionInset has-figures">
<div class="accordionInset-items">
<div class="accordionInset-item">
<details class="revealableContent has-figure" data-type="logo">
<summary class="revealableContent-summary">
<div class="revealableContent-figure">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001-landscape.svg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<strong class="revealableContent-summary-title">I’m the summary</strong>
<span class="revealableContent-summary-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</span>
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
<div class="accordionInset-item">
<details class="revealableContent has-figure" data-type="logo">
<summary class="revealableContent-summary">
<div class="revealableContent-figure">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001-landscape.svg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<strong class="revealableContent-summary-title">I’m the summary</strong>
<span class="revealableContent-summary-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</span>
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
<div class="accordionInset-item">
<details class="revealableContent has-figure" data-type="logo">
<summary class="revealableContent-summary">
<div class="revealableContent-figure">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001-landscape.svg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<strong class="revealableContent-summary-title">I’m the summary</strong>
<span class="revealableContent-summary-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</span>
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
<div class="accordionInset-item">
<details class="revealableContent has-figure" data-type="logo">
<summary class="revealableContent-summary">
<div class="revealableContent-figure">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/logo-001-landscape.svg" alt="Alternative Bildbeschreibung" />
</figure>
</div>
<strong class="revealableContent-summary-title">I’m the summary</strong>
<span class="revealableContent-summary-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</span>
<span class="revealableContent-marker"></span>
</summary>
<div class="revealableContent-content">
<div class="wrapper">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</details>
</div>
</div>
</div>
<div class="contactInset">
<div class="contactInset-author">
<div class="personData">
<div class="avatar">
<span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
</div>
<div class="personData-text">
<strong class="personData-name">Leora Gulgowski</strong>
<span class="personData-jobtitle">Direct Tactics Specialist</span>
<a class="personData-link" href="#"><span>Zum Portrait</span><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
</a>
</div>
</div>
</div>
<div class="contactInset-contact">
<address class="addressBlock">
<div class="addressBlock-title">
<strong>Ich bin der Titel</strong>
</div>
<div class="addressBlock-links">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
</div>
<div class="contactLink" data-type="phone">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="mobile">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
</div>
</address>
<address class="addressBlock">
<div class="addressBlock-title">
<strong>Ich bin der Titel</strong>
</div>
<div class="addressBlock-links">
<div class="contactLink" data-type="linkedin">
<span class="contactLink-title">LinkedIn</span> <a class="contactLink-link" href="https://de.linkedin.com/company/psi-se"><span class="contactLink-label">@psi-se</span></a>
</div>
</div>
</address>
</div>
</div>
<div class="contactList">
<h2 class="contactList-title">Ich bin der Titel</h2>
<ul class="contactList-list">
<li class="contactList-item">
<div class="contactList-image">
<div class="avatar">
<span class="avatar-image" style="background-image: url(https://i.pravatar.cc/640)"></span><span class="avatar-initials">BM</span>
</div>
</div>
<div class="contactList-column">
<span class="kicker">
Thema
</span>
<strong class="contactList-name">Leora Gulgowski</strong> <span class="contactList-jobtitle">Direct Tactics Specialist</span>
<div class="contactList-address">
PSI Software SG<br />Dircksenstraße 42-44<br />10178 Berlin
</div>
</div>
<div class="contactList-column">
<div class="contactList-contactlinks">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
</div>
<div class="contactLink" data-type="phone">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="mobile">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="linkedin">
<span class="contactLink-title">LinkedIn</span> <a class="contactLink-link" href="https://de.linkedin.com/company/psi-se"><span class="contactLink-label">@psi-se</span></a>
</div>
</div>
<div class="contactList-links">
<a href="#" class="link"><span class="link-label">Zum Portrait</span><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="contactList-item">
<div class="contactList-image">
<div class="avatar" data-type="person">
<span class="avatar-initials">BM</span>
</div>
</div>
<div class="contactList-column">
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<strong class="contactList-name">Leora Gulgowski</strong> <span class="contactList-jobtitle">Direct Tactics Specialist</span>
<div class="contactList-address">
PSI Information Technology (Shanghai) Co., Ltd.<br />1212 South Building, Raycom InfoTech Park Tower C<br />KeXueYuanNanLu No. 2, Haidian District<br />Peking, 100190<br />V.R. China
</div>
</div>
<div class="contactList-column">
<div class="contactList-contactlinks">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">verylong.mailaddress@domain.com</span></a>
</div>
<div class="contactLink" data-type="phone">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="mobile">
<span class="contactLink-title">Telefon</span> <a class="contactLink-link" href="tel:+49123456789"><span class="contactLink-label">+49 123 456789</span></a>
</div>
<div class="contactLink" data-type="linkedin">
<span class="contactLink-title">LinkedIn</span> <a class="contactLink-link" href="https://de.linkedin.com/company/psi-se"><span class="contactLink-label">@psi-se</span></a>
</div>
</div>
<div class="contactList-links">
<a href="#" class="link"><span class="link-label">Zum Portrait</span><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
</a>
<a href="#" class="link"><span class="link-label">Anfahrt planen</span><svg class="icon is-arrow-square-out">
<use href="../../icons/icons-bold.svg#icon--arrow-square-out" xlink:href="../../icons/icons-bold.svg#icon--arrow-square-out"></use>
</svg>
</a>
</div>
</div>
</li>
<li class="contactList-item">
<div class="contactList-image">
<div class="avatar" data-type="location">
<span class="avatar-initials">BM</span>
</div>
</div>
<div class="contactList-column">
<strong class="contactList-name">ACME Inc.</strong> <span class="contactList-jobtitle">Headquater</span>
</div>
<div class="contactList-column">
<div class="contactList-contactlinks">
<div class="contactLink" data-type="mail">
<span class="contactLink-title">E-Mail</span> <a class="contactLink-link" href="mailto:mail@domain.com"><span class="contactLink-label">mail@domain.com</span></a>
</div>
</div>
</div>
</li>
</ul>
</div>
<p class="copy is-standfirst">
Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</p>
<div class="ctaInset">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Klick mich!</span></a>
<a href="#" class="button is-secondary" data-icon-position="right"><svg class="icon is-arrow-square-out">
<use href="../../icons/icons.svg#icon--arrow-square-out" xlink:href="../../icons/icons.svg#icon--arrow-square-out"></use>
</svg>
<span class="button-label">Öffne mich!</span></a>
</div>
<div class="dataInset">
<h2 class="dataInset-title">Ich bin der Titel</h2>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<div class="dataInset">
<h2 class="dataInset-title">Ich bin der Titel</h2>
<div class="dataInset-intro">
<!-- Achtung: Doppelte Description -->
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-items">
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>1</span></span> <span class="dataInset-label"><span>Prozent</span></span>
</div>
<div class="dataInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>0,003</span></span> <span class="dataInset-label"><span>Nanometer pro Zoll</span></span>
</div>
<div class="dataInset-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="dataInset-item">
<div class="dataInset-data">
<span class="dataInset-value"><span>999.999</span></span> <span class="dataInset-label"><span>Dinge aus einer Gesamtmenge</span></span>
</div>
<div class="dataInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<div class="eventSummary">
<h3 class="eventSummary-title">Ich bin der Titel</h3>
<div class="metadataList">
<dl class="metadataList-list">
<div class="metadataList-item">
<dt class="metadataList-label">Hashtag</dt>
<dd class="metadataList-value">Echo</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Park</dt>
<dd class="metadataList-value">Biodiesel</dd>
</div>
<div class="metadataList-item">
<dt class="metadataList-label">Plaid</dt>
<dd class="metadataList-value">Skateboard</dd>
</div>
</dl>
</div>
</div>
<div class="featureList">
<ul class="featureList-list">
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Four loko disrupt jean shorts</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M0.979156 7.21216H23.0208" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675" stroke="black" />
<path d="M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675" stroke="black" />
<path d="M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675" stroke="black" />
<path d="M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675" stroke="black" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Hashtag four loko skateboard chillwave deep</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
</span>
<div class="featureList-text">
<strong class=featureList-label>Mit nicht definiertem Piktogramm</strong>
<span class="featureList-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</span>
</div>
</li>
</ul>
</div>
<div class="formInset">
<h2 class="formInset-title">Form title</h2>
<div class="formInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<form class="formInset-form" method="POST" action="./" accept-charset="UTF-8">
<fieldset class="formFieldset">
<legend class="formFieldset-legend">Ich bin ein Abschnitt</legend>
<div class="formFieldset-fields">
<div class="formFieldset-field">
<div class="formField">
<label class="label is-optional" for="field-id">Bezeichnung</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formTextarea is-optional">
<label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>
<textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Cardigan</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Raw Denim</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Flexitarian</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Letterpress & Mustache</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Gatekeep</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
</div>
<div class="formFieldset-field">
<div class="formToggle is-checkbox is-required is-small">
<label class="formToggle-label is-required is-small"><span class="toggle is-checkbox is-small">
<input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" /><span class="toggle-marker"></span>
</span>
<span>Ich habe die <a href="#">Datenschutzhinweise</a>, die <a href="#">Teilnahmebedingungen</a> und die <a href="#">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.</span></label>
</div>
</div>
<div class="formFieldset-field">
<div class="formFieldset-note">
<strong class="label">Datenschutz</strong>
<small>Die Datenverarbeitung erfolgt wie in der <a href="#" target="_blank">Datenschutzerklärung für die Website</a> beschrieben.</small>
</div>
</div>
</div>
</fieldset>
<fieldset class="formFieldset">
<legend class="formFieldset-legend">Ich bin ein Abschnitt</legend>
<div class="formFieldset-fields">
<div class="formFieldset-field">
<div class="formField">
<label class="label is-optional" for="field-id">Bezeichnung</label>
<span class="formField-field">
<input class="field" type="text" id="field-id" name="fieldname" placeholder="" spellcheck="false" />
</span>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<div class="formSelect">
<label class="label is-optional" for="field-select">Auswahlliste</label>
<span class="formSelect-input">
<span class="select">
<select id="field-select">
<option value="" disabled="disabled" selected="selected">Please select</option>
<hr />
<option value="-1">
Show all
</option>
<hr />
<option value="1">
Option 1
</option>
<option value="2">
Option 2
</option>
<option value="3">
Option 3
</option>
<option value="4" disabled="disabled">
Unavailable option
</option>
</select>
</span>
</span>
</div>
</div>
<div class="formFieldset-field">
<div class="formTextarea is-optional">
<label class="label is-optional" for="field-uniqueID-textarea">Textfeld</label>
<textarea class="formTextarea-field" id="field-uniqueID-textarea" name="textarea" placeholder="Aufforderung Nachricht zu schreiben"></textarea>
<div class="formMessage js-formValidator-message">
Ich bin ein Hinweis.
</div>
</div>
</div>
<div class="formFieldset-field">
<fieldset class="formToggleSet is-optional">
<legend class="formToggleSet-label">Gruppe mit Optionen</legend>
<div class="formToggleSet-options">
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Cardigan</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Raw Denim</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Flexitarian</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Letterpress & Mustache</span></label>
</div>
</div>
<div class="formToggleSet-option">
<div class="formToggle is-checkbox is-optional">
<label class="formToggle-label is-optional"><span class="toggle is-checkbox">
<input class="toggle-input" role="switch" type="checkbox" name="checkbox-group[]" value="" /><span class="toggle-marker"></span>
</span>
<span>Gatekeep</span></label>
</div>
</div>
</div>
<div class="formMessage js-formValidator-message">
Wählen Sie mindestens eine Option aus.
</div>
</fieldset>
</div>
<div class="formFieldset-field">
<div class="formToggle is-checkbox is-required is-small">
<label class="formToggle-label is-required is-small"><span class="toggle is-checkbox is-small">
<input class="toggle-input" role="switch" type="checkbox" name="toggle" value="" required="" data-parsley-trigger="change" /><span class="toggle-marker"></span>
</span>
<span>Ich habe die <a href="#">Datenschutzhinweise</a>, die <a href="#">Teilnahmebedingungen</a> und die <a href="#">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.</span></label>
</div>
</div>
<div class="formFieldset-field">
<div class="formFieldset-note">
<strong class="label">Datenschutz</strong>
<small>Die Datenverarbeitung erfolgt wie in der <a href="#" target="_blank">Datenschutzerklärung für die Website</a> beschrieben.</small>
</div>
</div>
</div>
</fieldset>
<div class="buttonGroup">
<button class="button is-secondary"><span class="button-label">Back</span></button>
<button class="button" type="submit"><span class="button-label">Send</span></button>
</div>
</form>
</div>
<div class="infoBox">
<header class="infoBox-header">
<span class="infoBox-icon">
</span>
<h2 class="infoBox-title">Ich bin der Titel der Info-Box</h2>
</header>
<div class="infoBox-content">
Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href="#">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</div>
</div>
<div class="interactionBar">
<ul class="interactionBar-items">
<li class="interactionBar-item">
<button class="button is-small is-tertiary"><svg class="icon is-share-fat">
<use href="../../icons/icons.svg#icon--share-fat" xlink:href="../../icons/icons.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Teilen</span></button>
</li>
<li class="interactionBar-item">
<button class="button is-small is-tertiary" onclick="const el = this.querySelector(".button-label"); el.innerText = parseInt(el.innerText) + 1; this.disabled = true; this.onclick = false;"><svg class="icon is-hands-clapping">
<use href="../../icons/icons.svg#icon--hands-clapping" xlink:href="../../icons/icons.svg#icon--hands-clapping"></use>
</svg>
<span class="button-label">482</span></button>
</li>
</ul>
</div>
<div class="mediaHighlightInset has-backdrop">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
<div class="mediaHighlightInset-text">
<h2 class="mediaHighlightInset-title">
Ich bin der Titel
</h2>
<div class="mediaHighlightInset-description">
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</div>
<div class="mediaInset is-fullwidth">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset">
<h2 class="photowallInset-title">Ich bin der Titel des Abschnitts</h2>
<div class="photowallInset-items">
<div class="photowallInset-item" data-orientation="landscape">
<figure class="figure" data-orientation="landscape" style="">
<img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="landscape">
<figure class="figure" data-orientation="landscape" style="">
<img class="figure-image" src="https://picsum.photos/id/65/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="upright">
<figure class="figure" data-orientation="upright" style="">
<img class="figure-image" src="https://picsum.photos/id/1062/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="upright">
<figure class="figure" data-orientation="upright" style="">
<img class="figure-image" src="https://picsum.photos/id/6/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="landscape">
<figure class="figure" data-orientation="landscape" style="">
<img class="figure-image" src="https://picsum.photos/id/18/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="upright">
<figure class="figure" data-orientation="upright" style="">
<img class="figure-image" src="https://picsum.photos/id/193/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="upright">
<figure class="figure" data-orientation="upright" style="">
<img class="figure-image" src="https://picsum.photos/id/65/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="photowallInset-item" data-orientation="landscape">
<figure class="figure" data-orientation="landscape" style="">
<img class="figure-image" src="https://picsum.photos/id/1062/1200/1200" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
</div>
</div>
<aside class="textHighlightInset" aria-hidden="true">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</aside>
<div class="richtextBlock">
<h3>I am a heading</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
<ul>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ul>
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href="#">skateboard chillwave deep</a>.
<p>
<ol>
<li>Hashtag Echo Park selfies</li>
<li>PBR try-hard skateboard, plaid 8-bit</li>
<li>Flexitarian retro single-origin coffee</li>
</ol>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="tagGroup">
<div class="tagGroup-item">
<a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Church-key Viny</span></a>
</div>
<div class="tagGroup-item">
<a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Flexitarian Retro</span></a>
</div>
<div class="tagGroup-item">
<a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Hashtag Echo Park</span></a>
</div>
<div class="tagGroup-item">
<a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Polaroid Vice</span></a>
</div>
<div class="tagGroup-item">
<a class="tag" href="#" title="Weitere Elemente mit diesem Schlagwort anzeigen …"><span class="tag-label">Bitters Sartorial</span></a>
</div>
</div>
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
<div class="teaserInset is-clickable" data-type="document">
<div class="teaserInset-image">
<a href="#" title="Download Datei (PDF)">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Download Datei (PDF)">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei (PDF)</span></a>
</div>
</div>
</div>
<p class="copy ">
Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</p>
<div class="teaserInset is-clickable has-linklist">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
<div class="teaserInset-linklist">
<div class="linkList">
<div class="linkList-title"><strong>Ich bin der Titel</strong></div>
<ul class="linkList-list">
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ich bin ein Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Noch ein zweiter Link</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
<li class="linkList-item">
<a href="#" class="link"><span class="link-label">Ein Weiterer</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="teaserList">
<h3 class="teaserList-title">Ich bin der Titel</h3>
<div class="teaserList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserList-list">
<div class="teaserList-item">
<div class="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="downloadItem">
<div class="downloadItem-image">
<a href="#" title="Download Datei">
</a>
</div>
<div class="downloadItem-content">
<div class="downloadItem-metadata">
<span class="downloadItem-metadata-item is-topic">Topic</span>
<span class="downloadItem-metadata-item is-type">Download</span>
<span class="downloadItem-metadata-item is-filetype">Unknown</span>
<span class="downloadItem-metadata-item is-filesize">1.024 KB</span>
</div>
<div class="downloadItem-title">
<a href="#" title="Download Datei"><strong>Ich bin der Titel</strong></a>
</div>
<div class="downloadItem-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="downloadItem-interactions">
<a href="#" class="button is-icon-only"><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
<span class="button-label">Download Datei</span></a>
<a href="#" class="button is-secondary is-icon-only"><svg class="icon is-share-fat">
<use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
</svg>
<span class="button-label">Versenden</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="teaserList">
<h3 class="teaserList-title">Ich bin der Titel</h3>
<div class="teaserList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserList-list">
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
<div class="teaserList-item">
<div class="teaserInset is-clickable">
<div class="teaserInset-image">
<a href="#" title="Weiter zum Artikel">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Beschreibung des Teaser Images" />
</figure>
</a>
</div>
<div class="teaserInset-content">
<h3 class="teaserInset-heading">
<span class="kicker">
Thema
</span>
<span class="teaserInset-title">
<a href="#" title="Weiter zum Artikel">Ich bin der Titel</a>
</span>
</h3>
<div class="teaserInset-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="teaserInset-cta">
<a href="#" class="button"><span class="button-label">Weiter zum Artikel</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tabbedContent">
<nav class="tabbedContent-nav">
<div class="tabBar" role="tablist">
<div class="tabBar-items">
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-1" id="tabBar-sample-option-id-1-contoller" aria-controls="tabBar-sample-option-id-1" role="tab" aria-selected="true" tabindex="-1">
<span class="tab-label">Erste Option</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-2" id="tabBar-sample-option-id-2-contoller" aria-controls="tabBar-sample-option-id-2" role="tab" aria-selected="false">
<span class="tab-label">Mit Richtext</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-3" id="tabBar-sample-option-id-3-contoller" aria-controls="tabBar-sample-option-id-3" role="tab" aria-selected="false">
<span class="tab-label">Mit Tabelle</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-4" id="tabBar-sample-option-id-4-contoller" aria-controls="tabBar-sample-option-id-4" role="tab" aria-selected="false">
<span class="tab-label">Mit Bild</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" href="#tabBar-sample-option-id-5" id="tabBar-sample-option-id-5-contoller" aria-controls="tabBar-sample-option-id-5" role="tab" aria-selected="false">
<span class="tab-label">Mehrere Textblöcke</span>
</a>
</div>
<div class="tabBar-item">
<a class="tab" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false" aria-disabled="true">
<span class="tab-label">Nicht verfügbar</span>
</a>
</div>
</div>
</div>
</nav>
<div class="tabbedContent-items">
<div class="tabbedContent-item" data-selected="true" id="tabBar-sample-option-id-1" role="tabpanel" aria-labelledby="tabBar-sample-option-id-1-contoller">
<div class="tabbedContent-content">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="tabbedContent-item" id="tabBar-sample-option-id-2" role="tabpanel" aria-labelledby="tabBar-sample-option-id-2-contoller">
<div class="tabbedContent-content">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
<div class="tabbedContent-item" id="tabBar-sample-option-id-3" role="tabpanel" aria-labelledby="tabBar-sample-option-id-3-contoller">
<table class="table" data-highlight=" ">
<caption class="table-caption">Table Caption</caption>
<tbody class="table-tbody">
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
Germany
</th>
<td class="table-td" data-column="Capital">
Berlin
</td>
<td class="table-td" data-column="Languages">
German
</td>
<td class="table-td" data-column="Population">
83 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
USA
</th>
<td class="table-td" data-column="Capital">
Washington, D.C.
</td>
<td class="table-td" data-column="Languages">
English<br />Spanish
</td>
<td class="table-td" data-column="Population">
309 million
</td>
</tr>
<tr class="table-tr">
<th class="table-th" scope="row" data-column="Country">
People’s Republic of China
</th>
<td class="table-td" data-column="Capital">
Beijing
</td>
<td class="table-td" data-column="Languages">
Chinese
</td>
<td class="table-td" data-column="Population">
1427 million
</td>
</tr>
</tbody>
</table>
<div class="tabbedContent-content">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="tabbedContent-item" id="tabBar-sample-option-id-4" role="tabpanel" aria-labelledby="tabBar-sample-option-id-4-contoller">
<div class="tabbedContent-image">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span><small class="figure-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</div>
<div class="tabbedContent-content">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="tabbedContent-content">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</div>
</div>
<div class="tabbedContent-item" id="tabBar-sample-option-id-5" role="tabpanel" aria-labelledby="tabBar-sample-option-id-5-contoller">
<div class="tabbedContent-content">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div class="tabbedContent-content">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</div>
</div>
<div class="textInset has-backdrop">
<h2 class="textInset-title">Ich bin der Titel</h2>
<div class="textInset-content">
<div class="richtextBlock">
<h3>Ich bin eine Headline</h3>
<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</div>
</div>
</section>
<section class="doc-variant" id="special-cases">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Spezialfälle auf grauem Hintergrund</h2>
<div class="doc-variant-configuration">
</div>
</header>
<div class="pageSection has-backdrop">
<h2 class="pageSection-title">Ich bin der Titel des Abschnitts</h2>
<div class="pageSection-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
<div class="infoBox">
<header class="infoBox-header">
<span class="infoBox-icon">
</span>
<h2 class="infoBox-title">Ich bin der Titel der Info-Box</h2>
</header>
<div class="infoBox-content">
Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href="#">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.
</div>
</div>
</div>
</section>
<!-- Default -->
<div class="pageSection{{#if has-backdrop}} has-backdrop{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#id}} id="{{.}}"{{/id}}>
{{#title}}
<h2 class="pageSection-title">{{{.}}}</h2>
{{/title}}
{{#description}}
<div class="pageSection-description">{{{.}}}</div>
{{/description}}
{{#blocks}}
{{#accordioninset}}
{{render '@accordioninset' (contextData '@pagesection' this) merge=true}}
{{/accordioninset}}
{{#contactinset}}
{{render '@contactinset' (contextData '@pagesection' this) merge=true}}
{{/contactinset}}
{{#contactlist}}
{{render '@contactlist' (contextData '@pagesection' this) merge=true}}
{{/contactlist}}
{{#copy}}
{{render '@copy' (contextData '@pagesection' this) merge=true}}
{{/copy}}
{{#ctainset}}
{{render '@ctainset' (contextData '@pagesection' this) merge=true}}
{{/ctainset}}
{{#datainset}}
{{render '@datainset' (contextData '@pagesection' this) merge=true}}
{{/datainset}}
{{#eventsummary}}
{{render '@eventsummary' (contextData '@pagesection' this) merge=true}}
{{/eventsummary}}
{{#featurelist}}
{{render '@featurelist' (contextData '@pagesection' this) merge=true}}
{{/featurelist}}
{{#forminset}}
{{render '@forminset' (contextData '@pagesection' this) merge=true}}
{{/forminset}}
{{#mediahighlightinset}}
{{render '@mediahighlightinset' (contextData '@pagesection' this) merge=true}}
{{/mediahighlightinset}}
{{#mediainset}}
{{render '@mediainset' (contextData '@pagesection' this) merge=true}}
{{/mediainset}}
{{#infobox}}
{{render '@infobox' (contextData '@pagesection' this) merge=true}}
{{/infobox}}
{{#interactionbar}}
{{render '@interactionbar' (contextData '@pagesection' this) merge=true}}
{{/interactionbar}}
{{#photowallinset}}
{{render '@photowallinset' (contextData '@pagesection' this) merge=true}}
{{/photowallinset}}
{{#texthighlightinset}}
{{render '@texthighlightinset' (contextData '@pagesection' this) merge=true}}
{{/texthighlightinset}}
{{#richtextblock}}
{{render '@richtextblock' (contextData '@pagesection' this) merge=true}}
{{/richtextblock}}
{{#taggroup}}
{{render '@taggroup' (contextData '@pagesection' this) merge=true}}
{{/taggroup}}
{{#textinset}}
{{render '@textinset' (contextData '@pagesection' this) merge=true}}
{{/textinset}}
{{#teaserinset}}
{{render '@teaserinset' (contextData '@pagesection' this) merge=true}}
{{/teaserinset}}
{{#teaserlist}}
{{render '@teaserlist' (contextData '@pagesection' this) merge=true}}
{{/teaserlist}}
{{#tabbedcontent}}
{{render '@tabbedcontent' (contextData '@pagesection' this) merge=true}}
{{/tabbedcontent}}
{{#textimageinset}}
{{render '@textimageinset' (contextData '@pagesection' this) merge=true}}
{{/textimageinset}}
{{/blocks}}
</div>
<!-- With Backdrop -->
<div class="pageSection{{#if has-backdrop}} has-backdrop{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#id}} id="{{.}}"{{/id}}>
{{#title}}
<h2 class="pageSection-title">{{{.}}}</h2>
{{/title}}
{{#description}}
<div class="pageSection-description">{{{.}}}</div>
{{/description}}
{{#blocks}}
{{#accordioninset}}
{{render '@accordioninset' (contextData '@pagesection' this) merge=true}}
{{/accordioninset}}
{{#contactinset}}
{{render '@contactinset' (contextData '@pagesection' this) merge=true}}
{{/contactinset}}
{{#contactlist}}
{{render '@contactlist' (contextData '@pagesection' this) merge=true}}
{{/contactlist}}
{{#copy}}
{{render '@copy' (contextData '@pagesection' this) merge=true}}
{{/copy}}
{{#ctainset}}
{{render '@ctainset' (contextData '@pagesection' this) merge=true}}
{{/ctainset}}
{{#datainset}}
{{render '@datainset' (contextData '@pagesection' this) merge=true}}
{{/datainset}}
{{#eventsummary}}
{{render '@eventsummary' (contextData '@pagesection' this) merge=true}}
{{/eventsummary}}
{{#featurelist}}
{{render '@featurelist' (contextData '@pagesection' this) merge=true}}
{{/featurelist}}
{{#forminset}}
{{render '@forminset' (contextData '@pagesection' this) merge=true}}
{{/forminset}}
{{#mediahighlightinset}}
{{render '@mediahighlightinset' (contextData '@pagesection' this) merge=true}}
{{/mediahighlightinset}}
{{#mediainset}}
{{render '@mediainset' (contextData '@pagesection' this) merge=true}}
{{/mediainset}}
{{#infobox}}
{{render '@infobox' (contextData '@pagesection' this) merge=true}}
{{/infobox}}
{{#interactionbar}}
{{render '@interactionbar' (contextData '@pagesection' this) merge=true}}
{{/interactionbar}}
{{#photowallinset}}
{{render '@photowallinset' (contextData '@pagesection' this) merge=true}}
{{/photowallinset}}
{{#texthighlightinset}}
{{render '@texthighlightinset' (contextData '@pagesection' this) merge=true}}
{{/texthighlightinset}}
{{#richtextblock}}
{{render '@richtextblock' (contextData '@pagesection' this) merge=true}}
{{/richtextblock}}
{{#taggroup}}
{{render '@taggroup' (contextData '@pagesection' this) merge=true}}
{{/taggroup}}
{{#textinset}}
{{render '@textinset' (contextData '@pagesection' this) merge=true}}
{{/textinset}}
{{#teaserinset}}
{{render '@teaserinset' (contextData '@pagesection' this) merge=true}}
{{/teaserinset}}
{{#teaserlist}}
{{render '@teaserlist' (contextData '@pagesection' this) merge=true}}
{{/teaserlist}}
{{#tabbedcontent}}
{{render '@tabbedcontent' (contextData '@pagesection' this) merge=true}}
{{/tabbedcontent}}
{{#textimageinset}}
{{render '@textimageinset' (contextData '@pagesection' this) merge=true}}
{{/textimageinset}}
{{/blocks}}
</div>
<!-- With Description -->
<div class="pageSection{{#if has-backdrop}} has-backdrop{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#id}} id="{{.}}"{{/id}}>
{{#title}}
<h2 class="pageSection-title">{{{.}}}</h2>
{{/title}}
{{#description}}
<div class="pageSection-description">{{{.}}}</div>
{{/description}}
{{#blocks}}
{{#accordioninset}}
{{render '@accordioninset' (contextData '@pagesection' this) merge=true}}
{{/accordioninset}}
{{#contactinset}}
{{render '@contactinset' (contextData '@pagesection' this) merge=true}}
{{/contactinset}}
{{#contactlist}}
{{render '@contactlist' (contextData '@pagesection' this) merge=true}}
{{/contactlist}}
{{#copy}}
{{render '@copy' (contextData '@pagesection' this) merge=true}}
{{/copy}}
{{#ctainset}}
{{render '@ctainset' (contextData '@pagesection' this) merge=true}}
{{/ctainset}}
{{#datainset}}
{{render '@datainset' (contextData '@pagesection' this) merge=true}}
{{/datainset}}
{{#eventsummary}}
{{render '@eventsummary' (contextData '@pagesection' this) merge=true}}
{{/eventsummary}}
{{#featurelist}}
{{render '@featurelist' (contextData '@pagesection' this) merge=true}}
{{/featurelist}}
{{#forminset}}
{{render '@forminset' (contextData '@pagesection' this) merge=true}}
{{/forminset}}
{{#mediahighlightinset}}
{{render '@mediahighlightinset' (contextData '@pagesection' this) merge=true}}
{{/mediahighlightinset}}
{{#mediainset}}
{{render '@mediainset' (contextData '@pagesection' this) merge=true}}
{{/mediainset}}
{{#infobox}}
{{render '@infobox' (contextData '@pagesection' this) merge=true}}
{{/infobox}}
{{#interactionbar}}
{{render '@interactionbar' (contextData '@pagesection' this) merge=true}}
{{/interactionbar}}
{{#photowallinset}}
{{render '@photowallinset' (contextData '@pagesection' this) merge=true}}
{{/photowallinset}}
{{#texthighlightinset}}
{{render '@texthighlightinset' (contextData '@pagesection' this) merge=true}}
{{/texthighlightinset}}
{{#richtextblock}}
{{render '@richtextblock' (contextData '@pagesection' this) merge=true}}
{{/richtextblock}}
{{#taggroup}}
{{render '@taggroup' (contextData '@pagesection' this) merge=true}}
{{/taggroup}}
{{#textinset}}
{{render '@textinset' (contextData '@pagesection' this) merge=true}}
{{/textinset}}
{{#teaserinset}}
{{render '@teaserinset' (contextData '@pagesection' this) merge=true}}
{{/teaserinset}}
{{#teaserlist}}
{{render '@teaserlist' (contextData '@pagesection' this) merge=true}}
{{/teaserlist}}
{{#tabbedcontent}}
{{render '@tabbedcontent' (contextData '@pagesection' this) merge=true}}
{{/tabbedcontent}}
{{#textimageinset}}
{{render '@textimageinset' (contextData '@pagesection' this) merge=true}}
{{/textimageinset}}
{{/blocks}}
</div>
<!-- With Blocks -->
<div class="pageSection{{#if has-backdrop}} has-backdrop{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#id}} id="{{.}}"{{/id}}>
{{#title}}
<h2 class="pageSection-title">{{{.}}}</h2>
{{/title}}
{{#description}}
<div class="pageSection-description">{{{.}}}</div>
{{/description}}
{{#blocks}}
{{#accordioninset}}
{{render '@accordioninset' (contextData '@pagesection' this) merge=true}}
{{/accordioninset}}
{{#contactinset}}
{{render '@contactinset' (contextData '@pagesection' this) merge=true}}
{{/contactinset}}
{{#contactlist}}
{{render '@contactlist' (contextData '@pagesection' this) merge=true}}
{{/contactlist}}
{{#copy}}
{{render '@copy' (contextData '@pagesection' this) merge=true}}
{{/copy}}
{{#ctainset}}
{{render '@ctainset' (contextData '@pagesection' this) merge=true}}
{{/ctainset}}
{{#datainset}}
{{render '@datainset' (contextData '@pagesection' this) merge=true}}
{{/datainset}}
{{#eventsummary}}
{{render '@eventsummary' (contextData '@pagesection' this) merge=true}}
{{/eventsummary}}
{{#featurelist}}
{{render '@featurelist' (contextData '@pagesection' this) merge=true}}
{{/featurelist}}
{{#forminset}}
{{render '@forminset' (contextData '@pagesection' this) merge=true}}
{{/forminset}}
{{#mediahighlightinset}}
{{render '@mediahighlightinset' (contextData '@pagesection' this) merge=true}}
{{/mediahighlightinset}}
{{#mediainset}}
{{render '@mediainset' (contextData '@pagesection' this) merge=true}}
{{/mediainset}}
{{#infobox}}
{{render '@infobox' (contextData '@pagesection' this) merge=true}}
{{/infobox}}
{{#interactionbar}}
{{render '@interactionbar' (contextData '@pagesection' this) merge=true}}
{{/interactionbar}}
{{#photowallinset}}
{{render '@photowallinset' (contextData '@pagesection' this) merge=true}}
{{/photowallinset}}
{{#texthighlightinset}}
{{render '@texthighlightinset' (contextData '@pagesection' this) merge=true}}
{{/texthighlightinset}}
{{#richtextblock}}
{{render '@richtextblock' (contextData '@pagesection' this) merge=true}}
{{/richtextblock}}
{{#taggroup}}
{{render '@taggroup' (contextData '@pagesection' this) merge=true}}
{{/taggroup}}
{{#textinset}}
{{render '@textinset' (contextData '@pagesection' this) merge=true}}
{{/textinset}}
{{#teaserinset}}
{{render '@teaserinset' (contextData '@pagesection' this) merge=true}}
{{/teaserinset}}
{{#teaserlist}}
{{render '@teaserlist' (contextData '@pagesection' this) merge=true}}
{{/teaserlist}}
{{#tabbedcontent}}
{{render '@tabbedcontent' (contextData '@pagesection' this) merge=true}}
{{/tabbedcontent}}
{{#textimageinset}}
{{render '@textimageinset' (contextData '@pagesection' this) merge=true}}
{{/textimageinset}}
{{/blocks}}
</div>
<!-- With Blocks On Backdrop -->
<div class="pageSection{{#if has-backdrop}} has-backdrop{{/if}}{{#modifier}} {{.}}{{/modifier}}"{{#id}} id="{{.}}"{{/id}}>
{{#title}}
<h2 class="pageSection-title">{{{.}}}</h2>
{{/title}}
{{#description}}
<div class="pageSection-description">{{{.}}}</div>
{{/description}}
{{#blocks}}
{{#accordioninset}}
{{render '@accordioninset' (contextData '@pagesection' this) merge=true}}
{{/accordioninset}}
{{#contactinset}}
{{render '@contactinset' (contextData '@pagesection' this) merge=true}}
{{/contactinset}}
{{#contactlist}}
{{render '@contactlist' (contextData '@pagesection' this) merge=true}}
{{/contactlist}}
{{#copy}}
{{render '@copy' (contextData '@pagesection' this) merge=true}}
{{/copy}}
{{#ctainset}}
{{render '@ctainset' (contextData '@pagesection' this) merge=true}}
{{/ctainset}}
{{#datainset}}
{{render '@datainset' (contextData '@pagesection' this) merge=true}}
{{/datainset}}
{{#eventsummary}}
{{render '@eventsummary' (contextData '@pagesection' this) merge=true}}
{{/eventsummary}}
{{#featurelist}}
{{render '@featurelist' (contextData '@pagesection' this) merge=true}}
{{/featurelist}}
{{#forminset}}
{{render '@forminset' (contextData '@pagesection' this) merge=true}}
{{/forminset}}
{{#mediahighlightinset}}
{{render '@mediahighlightinset' (contextData '@pagesection' this) merge=true}}
{{/mediahighlightinset}}
{{#mediainset}}
{{render '@mediainset' (contextData '@pagesection' this) merge=true}}
{{/mediainset}}
{{#infobox}}
{{render '@infobox' (contextData '@pagesection' this) merge=true}}
{{/infobox}}
{{#interactionbar}}
{{render '@interactionbar' (contextData '@pagesection' this) merge=true}}
{{/interactionbar}}
{{#photowallinset}}
{{render '@photowallinset' (contextData '@pagesection' this) merge=true}}
{{/photowallinset}}
{{#texthighlightinset}}
{{render '@texthighlightinset' (contextData '@pagesection' this) merge=true}}
{{/texthighlightinset}}
{{#richtextblock}}
{{render '@richtextblock' (contextData '@pagesection' this) merge=true}}
{{/richtextblock}}
{{#taggroup}}
{{render '@taggroup' (contextData '@pagesection' this) merge=true}}
{{/taggroup}}
{{#textinset}}
{{render '@textinset' (contextData '@pagesection' this) merge=true}}
{{/textinset}}
{{#teaserinset}}
{{render '@teaserinset' (contextData '@pagesection' this) merge=true}}
{{/teaserinset}}
{{#teaserlist}}
{{render '@teaserlist' (contextData '@pagesection' this) merge=true}}
{{/teaserlist}}
{{#tabbedcontent}}
{{render '@tabbedcontent' (contextData '@pagesection' this) merge=true}}
{{/tabbedcontent}}
{{#textimageinset}}
{{render '@textimageinset' (contextData '@pagesection' this) merge=true}}
{{/textimageinset}}
{{/blocks}}
</div>
<!-- Doc Only -->
{{#variants}}
<section class="doc-variant"{{#id}} id="{{.}}"{{/id}}>
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
</header>
{{#samples}}
{{render '@pagesection' (contextData '@pagesection' this) merge=true}}
{{/samples}}
</section>
{{/variants}}
/* Default */
{
"title": "Ich bin der Titel des Abschnitts",
"blocks": [
{
"copy": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
]
}
/* With Backdrop */
{
"title": "Ich bin der Titel des Abschnitts",
"blocks": [
{
"copy": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
],
"has-backdrop": true
}
/* With Description */
{
"title": "Ich bin der Titel des Abschnitts",
"blocks": [
{
"copy": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
],
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
/* With Blocks */
{
"title": "Ich bin der Titel des Abschnitts",
"blocks": [
{
"accordioninset": {
"items": [
{
"revealablecontent": {
"summary": "I’m the summary",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
},
{
"revealablecontent": {
"summary": "I’m the summary",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
},
{
"revealablecontent": {
"summary": "I’m the summary",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
},
{
"revealablecontent": {
"summary": "I’m the summary",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
}
]
}
},
{
"accordioninset": {
"items": [
{
"revealablecontent": {
"summary": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"type": "logo",
"title": "I’m the summary",
"figure": {
"src": "/images/placeholder/logo-001-landscape.svg",
"alt": "Alternative Bildbeschreibung"
}
}
},
{
"revealablecontent": {
"summary": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"type": "logo",
"title": "I’m the summary",
"figure": {
"src": "/images/placeholder/logo-001-landscape.svg",
"alt": "Alternative Bildbeschreibung"
}
}
},
{
"revealablecontent": {
"summary": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"type": "logo",
"title": "I’m the summary",
"figure": {
"src": "/images/placeholder/logo-001-landscape.svg",
"alt": "Alternative Bildbeschreibung"
}
}
},
{
"revealablecontent": {
"summary": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"type": "logo",
"title": "I’m the summary",
"figure": {
"src": "/images/placeholder/logo-001-landscape.svg",
"alt": "Alternative Bildbeschreibung"
}
}
}
],
"has-figures": true
}
},
{
"contactinset": {
"author": {
"persondata": {
"avatar": {
"initials": "BM",
"image": {
"src": "https://i.pravatar.cc/640"
}
},
"name": "Leora Gulgowski",
"jobtitle": "Direct Tactics Specialist",
"link": {
"label": "Zum Portrait",
"url": "#",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
}
},
"contact": {
"addressblock": [
{
"content": null
},
{
"content": null,
"contactlinks": [
{
"title": "LinkedIn",
"label": "@psi-se",
"url": "https://de.linkedin.com/company/psi-se",
"type": "linkedin"
}
]
}
]
}
}
},
{
"contactlist": {
"title": "Ich bin der Titel",
"items": [
{
"kicker": {
"items": null
},
"avatar": {
"initials": "BM",
"image": {
"src": "https://i.pravatar.cc/640"
}
},
"name": "Leora Gulgowski",
"jobtitle": "Direct Tactics Specialist",
"address": "PSI Software SG<br/>Dircksenstraße 42-44<br/>10178 Berlin",
"contactlinks": [
{
"title": "E-Mail",
"label": "mail@domain.com",
"url": "mailto:mail@domain.com",
"type": "mail"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "phone"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "mobile"
},
{
"title": "LinkedIn",
"label": "@psi-se",
"url": "https://de.linkedin.com/company/psi-se",
"type": "linkedin"
}
],
"links": [
{
"label": "Zum Portrait",
"url": "#",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
]
},
{
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"avatar": {
"initials": "BM",
"type": "person",
"image": null
},
"name": "Leora Gulgowski",
"jobtitle": "Direct Tactics Specialist",
"address": "PSI Information Technology (Shanghai) Co., Ltd.<br/>1212 South Building, Raycom InfoTech Park Tower C<br/>KeXueYuanNanLu No. 2, Haidian District<br/>Peking, 100190<br/>V.R. China",
"contactlinks": [
{
"type": "mail",
"title": "E-Mail",
"label": "verylong.mailaddress@domain.com",
"url": "mailto:mail@domain.com"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "phone"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "mobile"
},
{
"title": "LinkedIn",
"label": "@psi-se",
"url": "https://de.linkedin.com/company/psi-se",
"type": "linkedin"
}
],
"links": [
{
"label": "Zum Portrait",
"url": "#",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
},
{
"label": "Anfahrt planen",
"url": "#",
"icon": {
"id": "arrow-square-out",
"weight": "bold"
}
}
]
},
{
"kicker": null,
"avatar": {
"initials": "BM",
"type": "location",
"image": null
},
"name": "ACME Inc.",
"jobtitle": "Headquater",
"contactlinks": [
{
"title": "E-Mail",
"label": "mail@domain.com",
"url": "mailto:mail@domain.com",
"type": "mail"
}
]
}
]
}
},
{
"copy": {
"content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
"modifier": "is-standfirst"
}
},
{
"ctainset": {
"ctas": [
{
"label": "Klick mich!",
"icon": {
"position": "right",
"id": "arrow-right"
}
},
{
"modifier": "is-secondary",
"label": "Öffne mich!",
"icon": {
"position": "right",
"id": "arrow-square-out"
}
}
]
}
},
{
"datainset": [
{
"title": "Ich bin der Titel",
"items": [
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
]
},
{
"title": "Ich bin der Titel",
"items": [
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
],
"intro": {
"richtextblock": {
"content": "<h3>I am a heading</h3><p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ul><p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href=\"#\">skateboard chillwave deep</a>.<p><ol><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ol><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>"
}
}
}
]
},
{
"eventsummary": {
"title": "Ich bin der Titel",
"metadatalist": {
"items": [
{
"label": "Hashtag",
"value": "Echo"
},
{
"label": "Park",
"value": "Biodiesel"
},
{
"label": "Plaid",
"value": "Skateboard"
}
]
}
}
},
{
"featurelist": {
"items": [
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"id": "gaming-trophy-check"
},
"label": "Four loko disrupt jean shorts",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
},
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.979156 7.21216H23.0208\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675\" stroke=\"black\"/>\n<path d=\"M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n</svg>\n",
"id": "app-window"
},
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Mit nicht definiertem Piktogramm",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
}
]
}
},
{
"forminset": {
"title": "Form title",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"formfieldsets": [
{
"legend": "Ich bin ein Abschnitt",
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
],
"buttongroup": null
},
{
"legend": "Ich bin ein Abschnitt",
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
],
"notes": null,
"buttongroup": null
}
],
"buttongroup": {
"buttons": [
{
"label": "Back",
"modifier": "is-secondary"
},
{
"type": "submit",
"label": "Send"
}
]
}
}
},
{
"infobox": {
"title": "Ich bin der Titel der Info-Box",
"content": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href=\"#\">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep."
}
},
{
"interactionbar": {
"items": [
{
"button": {
"modifier": "is-small is-tertiary",
"label": "Teilen",
"icon": {
"id": "share-fat"
}
}
},
{
"button": {
"modifier": "is-small is-tertiary",
"label": 482,
"icon": {
"id": "hands-clapping"
},
"onclick": "const el = this.querySelector(\".button-label\"); el.innerText = parseInt(el.innerText) + 1; this.disabled = true; this.onclick = false;"
}
}
]
}
},
{
"mediahighlightinset": {
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>"
}
},
{
"mediainset": {
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"modifier": "is-fullwidth"
}
},
{
"photowallinset": {
"figures": [
{
"orientation": "landscape",
"src": "https://picsum.photos/id/193/1200/1200"
},
{
"orientation": "landscape",
"src": "https://picsum.photos/id/65/1200/1200"
},
{
"orientation": "upright",
"src": "https://picsum.photos/id/1062/1200/1200"
},
{
"orientation": "upright",
"src": "https://picsum.photos/id/6/1200/1200"
},
{
"orientation": "landscape",
"src": "https://picsum.photos/id/18/1200/1200"
},
{
"orientation": "upright",
"src": "https://picsum.photos/id/193/1200/1200"
},
{
"orientation": "upright",
"src": "https://picsum.photos/id/65/1200/1200"
},
{
"orientation": "landscape",
"src": "https://picsum.photos/id/1062/1200/1200"
}
]
}
},
{
"texthighlightinset": {
"content": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
}
},
{
"richtextblock": {
"content": "<h3>I am a heading</h3><p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ul><p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href=\"#\">skateboard chillwave deep</a>.<p><ol><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ol><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>"
}
},
{
"taggroup": {
"tags": [
{
"label": "Church-key Viny"
},
{
"label": "Flexitarian Retro"
},
{
"label": "Hashtag Echo Park"
},
{
"label": "Polaroid Vice"
},
{
"label": "Bitters Sartorial"
}
]
}
},
{
"teaserinset": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
},
{
"teaserinset": {
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
"cta": {
"url": "#",
"label": "Download Datei (PDF)",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
"type": "document"
}
},
{
"copy": {
"content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep."
}
},
{
"teaserinset": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
},
"linklist": {
"label": "Zugehörige Links",
"items": [
{
"link": {
"label": "Ich bin ein Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Noch ein zweiter Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Ein Weiterer",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
}
]
}
}
},
{
"teaserlist": {
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"downloaditems": [
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
}
]
}
},
{
"teaserlist": {
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"teaserinsets": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
]
}
},
{
"tabbedcontent": {
"tabbar": {
"items": [
{
"tab": {
"is-selected": true,
"controls-id": "tabBar-sample-option-id-1",
"label": "Erste Option"
}
},
{
"tab": {
"controls-id": "tabBar-sample-option-id-2",
"label": "Mit Richtext"
}
},
{
"tab": {
"controls-id": "tabBar-sample-option-id-3",
"label": "Mit Tabelle"
}
},
{
"tab": {
"controls-id": "tabBar-sample-option-id-4",
"label": "Mit Bild"
}
},
{
"tab": {
"controls-id": "tabBar-sample-option-id-5",
"label": "Mehrere Textblöcke"
}
},
{
"tab": {
"is-disabled": true,
"label": "Nicht verfügbar"
}
}
]
},
"items": [
{
"id": "tabBar-sample-option-id-1",
"is-selected": true,
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"id": "tabBar-sample-option-id-2",
"content": "<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"id": "tabBar-sample-option-id-3",
"table": {
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
]
},
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
},
{
"id": "tabBar-sample-option-id-4",
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"content": [
"<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
]
},
{
"id": "tabBar-sample-option-id-5",
"content": [
"<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
]
}
]
}
},
{
"textinset": {
"title": "Ich bin der Titel",
"content": "<div class=\"richtextBlock\">\n<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n</div>\n"
}
}
],
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
/* With Blocks On Backdrop */
{
"title": "Ich bin der Titel des Abschnitts",
"blocks": [
{
"infobox": {
"title": "Ich bin der Titel der Info-Box",
"content": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href=\"#\">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep."
}
}
],
"has-backdrop": true,
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
/* Doc Only */
{
"title": "Ich bin der Titel des Abschnitts",
"blocks": [
{
"copy": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
],
"variants": [
{
"title": "Sektion mit allen verfügbaren Blöcken",
"samples": {
"title": "Ich bin der Titel des Abschnitts",
"blocks": [
{
"accordioninset": {
"items": [
{
"revealablecontent": {
"summary": "I’m the summary",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
},
{
"revealablecontent": {
"summary": "I’m the summary",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
},
{
"revealablecontent": {
"summary": "I’m the summary",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
},
{
"revealablecontent": {
"summary": "I’m the summary",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
}
]
}
},
{
"accordioninset": {
"items": [
{
"revealablecontent": {
"summary": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"type": "logo",
"title": "I’m the summary",
"figure": {
"src": "/images/placeholder/logo-001-landscape.svg",
"alt": "Alternative Bildbeschreibung"
}
}
},
{
"revealablecontent": {
"summary": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"type": "logo",
"title": "I’m the summary",
"figure": {
"src": "/images/placeholder/logo-001-landscape.svg",
"alt": "Alternative Bildbeschreibung"
}
}
},
{
"revealablecontent": {
"summary": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"type": "logo",
"title": "I’m the summary",
"figure": {
"src": "/images/placeholder/logo-001-landscape.svg",
"alt": "Alternative Bildbeschreibung"
}
}
},
{
"revealablecontent": {
"summary": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"type": "logo",
"title": "I’m the summary",
"figure": {
"src": "/images/placeholder/logo-001-landscape.svg",
"alt": "Alternative Bildbeschreibung"
}
}
}
],
"has-figures": true
}
},
{
"contactinset": {
"author": {
"persondata": {
"avatar": {
"initials": "BM",
"image": {
"src": "https://i.pravatar.cc/640"
}
},
"name": "Leora Gulgowski",
"jobtitle": "Direct Tactics Specialist",
"link": {
"label": "Zum Portrait",
"url": "#",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
}
},
"contact": {
"addressblock": [
{
"content": null
},
{
"content": null,
"contactlinks": [
{
"title": "LinkedIn",
"label": "@psi-se",
"url": "https://de.linkedin.com/company/psi-se",
"type": "linkedin"
}
]
}
]
}
}
},
{
"contactlist": {
"title": "Ich bin der Titel",
"items": [
{
"kicker": {
"items": null
},
"avatar": {
"initials": "BM",
"image": {
"src": "https://i.pravatar.cc/640"
}
},
"name": "Leora Gulgowski",
"jobtitle": "Direct Tactics Specialist",
"address": "PSI Software SG<br/>Dircksenstraße 42-44<br/>10178 Berlin",
"contactlinks": [
{
"title": "E-Mail",
"label": "mail@domain.com",
"url": "mailto:mail@domain.com",
"type": "mail"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "phone"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "mobile"
},
{
"title": "LinkedIn",
"label": "@psi-se",
"url": "https://de.linkedin.com/company/psi-se",
"type": "linkedin"
}
],
"links": [
{
"label": "Zum Portrait",
"url": "#",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
}
]
},
{
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"avatar": {
"initials": "BM",
"type": "person",
"image": null
},
"name": "Leora Gulgowski",
"jobtitle": "Direct Tactics Specialist",
"address": "PSI Information Technology (Shanghai) Co., Ltd.<br/>1212 South Building, Raycom InfoTech Park Tower C<br/>KeXueYuanNanLu No. 2, Haidian District<br/>Peking, 100190<br/>V.R. China",
"contactlinks": [
{
"type": "mail",
"title": "E-Mail",
"label": "verylong.mailaddress@domain.com",
"url": "mailto:mail@domain.com"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "phone"
},
{
"title": "Telefon",
"label": "+49 123 456789",
"url": "tel:+49123456789",
"type": "mobile"
},
{
"title": "LinkedIn",
"label": "@psi-se",
"url": "https://de.linkedin.com/company/psi-se",
"type": "linkedin"
}
],
"links": [
{
"label": "Zum Portrait",
"url": "#",
"icon": {
"id": "arrow-right",
"weight": "bold"
}
},
{
"label": "Anfahrt planen",
"url": "#",
"icon": {
"id": "arrow-square-out",
"weight": "bold"
}
}
]
},
{
"kicker": null,
"avatar": {
"initials": "BM",
"type": "location",
"image": null
},
"name": "ACME Inc.",
"jobtitle": "Headquater",
"contactlinks": [
{
"title": "E-Mail",
"label": "mail@domain.com",
"url": "mailto:mail@domain.com",
"type": "mail"
}
]
}
]
}
},
{
"copy": {
"content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
"modifier": "is-standfirst"
}
},
{
"ctainset": {
"ctas": [
{
"label": "Klick mich!",
"icon": {
"position": "right",
"id": "arrow-right"
}
},
{
"modifier": "is-secondary",
"label": "Öffne mich!",
"icon": {
"position": "right",
"id": "arrow-square-out"
}
}
]
}
},
{
"datainset": [
{
"title": "Ich bin der Titel",
"items": [
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
]
},
{
"title": "Ich bin der Titel",
"items": [
{
"value": 1,
"label": "Prozent",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"value": "0,003",
"label": "Nanometer pro Zoll",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"value": 999.999,
"label": "Dinge aus einer Gesamtmenge",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
],
"intro": {
"richtextblock": {
"content": "<h3>I am a heading</h3><p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ul><p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href=\"#\">skateboard chillwave deep</a>.<p><ol><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ol><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>"
}
}
}
]
},
{
"eventsummary": {
"title": "Ich bin der Titel",
"metadatalist": {
"items": [
{
"label": "Hashtag",
"value": "Echo"
},
{
"label": "Park",
"value": "Biodiesel"
},
{
"label": "Plaid",
"value": "Skateboard"
}
]
}
}
},
{
"featurelist": {
"items": [
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"id": "gaming-trophy-check"
},
"label": "Four loko disrupt jean shorts",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
},
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.979156 7.21216H23.0208\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675\" stroke=\"black\"/>\n<path d=\"M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n</svg>\n",
"id": "app-window"
},
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"label": "Mit nicht definiertem Piktogramm",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
}
]
}
},
{
"forminset": {
"title": "Form title",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"formfieldsets": [
{
"legend": "Ich bin ein Abschnitt",
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
],
"buttongroup": null
},
{
"legend": "Ich bin ein Abschnitt",
"fields": [
{
"formfield": {
"id": "id",
"name": "fieldname",
"label": "Bezeichnung",
"placeholder": "Beispiel für Inhalt",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formselect": {
"id": "select",
"label": "Auswahlliste",
"placeholder": "Please select",
"options": [
{
"label": null
},
{
"label": "Show all",
"value": -1
},
{
"label": null
},
{
"label": "Option 1",
"value": 1
},
{
"label": "Option 2",
"value": 2
},
{
"label": "Option 3",
"value": 3
},
{
"label": "Unavailable option",
"value": 4,
"is-disabled": true
}
]
}
},
{
"formtextarea": {
"id": "uniqueID-textarea",
"name": "textarea",
"label": "Textfeld",
"placeholder": "Aufforderung Nachricht zu schreiben",
"message": {
"content": "Ich bin ein Hinweis."
}
}
},
{
"formtoggleset": {
"type": "checkbox-group",
"label": "Gruppe mit Optionen",
"message": {
"content": "Wählen Sie mindestens eine Option aus."
},
"options": [
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Cardigan"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Raw Denim"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Flexitarian"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Letterpress & Mustache"
},
{
"type": "checkbox",
"name": "checkbox-group[]",
"label": "Gatekeep"
}
]
}
},
{
"formtoggle": {
"type": "checkbox",
"id": "toggle",
"name": "toggle",
"label": "Ich habe die <a href=\"#\">Datenschutzhinweise</a>, die <a href=\"#\">Teilnahmebedingungen</a> und die <a href=\"#\">allgemeinen Geschäftsbedingungen</a> gelesen und akzeptiere sie.",
"is-required": true,
"modifier": "is-small"
}
},
{
"formnote": {
"label": "Datenschutz",
"content": "<small>Die Datenverarbeitung erfolgt wie in der <a href=\"#\" target=\"_blank\">Datenschutzerklärung für die Website</a> beschrieben.</small>"
}
}
],
"notes": null,
"buttongroup": null
}
],
"buttongroup": {
"buttons": [
{
"label": "Back",
"modifier": "is-secondary"
},
{
"type": "submit",
"label": "Send"
}
]
}
}
},
{
"infobox": {
"title": "Ich bin der Titel der Info-Box",
"content": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href=\"#\">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep."
}
},
{
"interactionbar": {
"items": [
{
"button": {
"modifier": "is-small is-tertiary",
"label": "Teilen",
"icon": {
"id": "share-fat"
}
}
},
{
"button": {
"modifier": "is-small is-tertiary",
"label": 482,
"icon": {
"id": "hands-clapping"
},
"onclick": "const el = this.querySelector(\".button-label\"); el.innerText = parseInt(el.innerText) + 1; this.disabled = true; this.onclick = false;"
}
}
]
}
},
{
"mediahighlightinset": {
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"title": "Ich bin der Titel",
"description": "<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>"
}
},
{
"mediainset": {
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"modifier": "is-fullwidth"
}
},
{
"photowallinset": {
"figures": [
{
"orientation": "landscape",
"src": "https://picsum.photos/id/193/1200/1200"
},
{
"orientation": "landscape",
"src": "https://picsum.photos/id/65/1200/1200"
},
{
"orientation": "upright",
"src": "https://picsum.photos/id/1062/1200/1200"
},
{
"orientation": "upright",
"src": "https://picsum.photos/id/6/1200/1200"
},
{
"orientation": "landscape",
"src": "https://picsum.photos/id/18/1200/1200"
},
{
"orientation": "upright",
"src": "https://picsum.photos/id/193/1200/1200"
},
{
"orientation": "upright",
"src": "https://picsum.photos/id/65/1200/1200"
},
{
"orientation": "landscape",
"src": "https://picsum.photos/id/1062/1200/1200"
}
]
}
},
{
"texthighlightinset": {
"content": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
}
},
{
"richtextblock": {
"content": "<h3>I am a heading</h3><p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p><ul><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ul><p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko <a href=\"#\">skateboard chillwave deep</a>.<p><ol><li>Hashtag Echo Park selfies</li><li>PBR try-hard skateboard, plaid 8-bit</li><li>Flexitarian retro single-origin coffee</li></ol><p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>"
}
},
{
"taggroup": {
"tags": [
{
"label": "Church-key Viny"
},
{
"label": "Flexitarian Retro"
},
{
"label": "Hashtag Echo Park"
},
{
"label": "Polaroid Vice"
},
{
"label": "Bitters Sartorial"
}
]
}
},
{
"teaserinset": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
},
{
"teaserinset": {
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.",
"cta": {
"url": "#",
"label": "Download Datei (PDF)",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
"type": "document"
}
},
{
"copy": {
"content": "Cardigan Pinterest gentrify, CO₂ biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep."
}
},
{
"teaserinset": {
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
},
"linklist": {
"label": "Zugehörige Links",
"items": [
{
"link": {
"label": "Ich bin ein Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Noch ein zweiter Link",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
},
{
"link": {
"label": "Ein Weiterer",
"modifier": null,
"icon": {
"id": "arrow-right"
}
}
}
]
}
}
},
{
"teaserlist": {
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"downloaditems": [
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
},
{
"metadata": {
"topics": [
"Topic"
],
"type": "Download",
"filetype": "Unknown",
"filesize": "1.024 KB"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"ctas": [
{
"is-icon-only": true,
"label": "Download Datei",
"url": "#",
"icon": {
"id": "download-simple",
"weight": "bold"
}
},
{
"is-icon-only": true,
"label": "Versenden",
"modifier": "is-secondary",
"url": "#",
"icon": {
"id": "share-fat",
"weight": "bold"
}
}
]
}
]
}
},
{
"teaserlist": {
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"teaserinsets": [
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
},
{
"image": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Beschreibung des Teaser Images"
},
"kicker": {
"content": "Thema"
},
"title": "Ich bin der Titel",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"cta": {
"url": "#",
"label": "Weiter zum Artikel"
}
}
]
}
},
{
"tabbedcontent": {
"tabbar": {
"items": [
{
"tab": {
"is-selected": true,
"controls-id": "tabBar-sample-option-id-1",
"label": "Erste Option"
}
},
{
"tab": {
"controls-id": "tabBar-sample-option-id-2",
"label": "Mit Richtext"
}
},
{
"tab": {
"controls-id": "tabBar-sample-option-id-3",
"label": "Mit Tabelle"
}
},
{
"tab": {
"controls-id": "tabBar-sample-option-id-4",
"label": "Mit Bild"
}
},
{
"tab": {
"controls-id": "tabBar-sample-option-id-5",
"label": "Mehrere Textblöcke"
}
},
{
"tab": {
"is-disabled": true,
"label": "Nicht verfügbar"
}
}
]
},
"items": [
{
"id": "tabBar-sample-option-id-1",
"is-selected": true,
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"id": "tabBar-sample-option-id-2",
"content": "<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"id": "tabBar-sample-option-id-3",
"table": {
"caption": "Table Caption",
"rows": [
{
"cells": [
{
"column": "Country",
"data": "Germany",
"is-head": true
},
{
"column": "Capital",
"data": "Berlin"
},
{
"column": "Languages",
"data": "German"
},
{
"column": "Population",
"data": "83 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "USA",
"is-head": true
},
{
"column": "Capital",
"data": "Washington, D.C."
},
{
"column": "Languages",
"data": "English<br/>Spanish"
},
{
"column": "Population",
"data": "309 million"
}
]
},
{
"cells": [
{
"column": "Country",
"data": "People’s Republic of China",
"is-head": true
},
{
"column": "Capital",
"data": "Beijing"
},
{
"column": "Languages",
"data": "Chinese"
},
{
"column": "Population",
"data": "1427 million"
}
]
}
]
},
"content": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
},
{
"id": "tabBar-sample-option-id-4",
"figure": {
"src": "/images/placeholder/dummy-image.jpg",
"alt": "Alternative Bildbeschreibung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>"
},
"content": [
"<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
]
},
{
"id": "tabBar-sample-option-id-5",
"content": [
"<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
]
}
]
}
},
{
"textinset": {
"title": "Ich bin der Titel",
"content": "<div class=\"richtextBlock\">\n<h3>Ich bin eine Headline</h3>\n<p><strong>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</strong></p>\n<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n</div>\n"
}
}
],
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
},
{
"id": "special-cases",
"title": "Spezialfälle auf grauem Hintergrund",
"samples": {
"title": "Ich bin der Titel des Abschnitts",
"blocks": [
{
"infobox": {
"title": "Ich bin der Titel der Info-Box",
"content": "Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. <a href=\"#\">Four loko disrupt</a> jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep."
}
}
],
"has-backdrop": true,
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
}
]
}
@import "_pageSection.settings";
@import "_pageSection.styles";
%pageSection {
&-block {
@include stack-spacing(section, margin-bottom);
}
&-title + * &-content,
&-description + * &-content {
.copy.is-standfirst {
@include stack-spacing(section);
}
}
&-title + &-block .tagGroup,
&-description + &-block .tagGroup {
justify-content: center;
}
.ctaInset,
.dataInset,
.featureList,
.teaserList,
.textInset {
@extend %pageSection-block;
}
.accordionInset:not(.has-backdrop),
.eventSummary,
.infoBox,
.interactionBar,
.teaserInset,
.tabbedContent {
@extend %pageSection-content;
}
.accordionInset.has-figures {
width: get-columns-width(10);
}
.teaserInset.has-linklist {
width: 100%;
}
.mediaInset:not(.is-fullwidth) {
@include stack-spacing(component);
&:not(:last-child) {
@include stack-spacing(component, margin-bottom);
}
}
@include only-on-desktop(){
.mediaInset.is-fullwidth .figure-caption {
width: get-columns-width($pageSection_content-columns-span);
max-width: none;
margin-left: auto;
margin-right: auto;
}
}
@include only-on-desktop(){
&-description {
width: get-columns-width(8);
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
&-title,
&-description {
& + .teaserList {
@include stack-spacing(component);
}
}
.teaserList:has(+ .ctaInset) {
margin-bottom: var(--sp-component) !important;
}
.teaserList + .ctaInset {
margin-top: var(--sp-component) !important;
}
}
.pageSection {
&-description {
@extend %pageSection-description;
}
}
%pageSection--with-backdrop {
.infoBox {
background-color: $_page-color;
}
}
.pageHeader + * ~ .pageSection .richtextBlock:first-child {
margin-top: calc(var(--sp-component) - var(--sp-section));
}
$pageSection_title-columns-span: 8 !default;
$pageSection_content-columns-span: $pageSection_title-columns-span !default;
$pageSection_alternating-style: false !default;
%pageSection {
@extend %section;
@if $pageSection_alternating-style {
& + &:nth-child(even) {
@extend %pageSection--with-backdrop;
}
}
&-title {
@extend %sectionTitle;
}
&-title + * {
margin-top: $_stack-spacing--component !important;
margin-top: var(--sp-component) !important;
}
&-block {
& + & {
@include stack-spacing(section);
}
&:not(:last-child) {
@include stack-spacing(section, margin-bottom);
}
&:not(:last-child):has( + .has-backdrop) {
margin-bottom: 0;
}
.richtextBlock {
width: 100%;
}
}
&-content {
& + & {
@include stack-spacing(component);
}
}
@include only-on-desktop(){
&-title {
width: get-columns-width($pageSection_title-columns-span);
margin-left: auto;
margin-right: auto;
}
&-content {
width: get-columns-width($pageSection_content-columns-span);
margin-left: auto;
margin-right: auto;
}
}
.mediaInset,
.photowallInset,
.textImageInset {
@extend %pageSection-block;
}
> .copy,
.textHighlightInset,
.richtextBlock,
.tagGroup {
@extend %pageSection-content;
}
.richtextBlock + .richtextBlock {
@include stack-spacing();
}
&-title + .tagGroup {
justify-content: center;
}
}
%pageSection--with-backdrop {
@include full-width-backdrop($set-padding: true);
& > *:first-child {
margin-top: 0;
}
}
.pageSection {
@extend %pageSection;
&-title {
@extend %pageSection-title;
}
&-content {
@extend %pageSection-content;
}
}
.pageSection.has-backdrop {
@extend %pageSection--with-backdrop;
}