Premium Article (Payment Required)

100%
<section class="grid-container o-section">
    <article role="article" class="t-article">
        <div class="grid-container">
            <div class="grid-x grid-margin-x">
                <div class="cell large-10 large-offset-2">
                    <header class="c-headline">
                        <div class="c-headline__kicker">
                            <span class="c-headline__kicker-item">
            Veröffentlicht in : Hildesheim Aufmacher
            </span>
                        </div>
                        <div class="c-headline__title">
                            <h1 itemprop="headline">Verrückt: die knallbunte Gothic-Szene</h1>
                        </div>
                    </header>
                    <p>
                        <strong>Hildesheim</strong> - Bunte Bandshirts, Häkeltops und Boho-Kleidchen: Wer die übliche Festival-Kleidung beim M’era Luna sucht, wird nicht fündig. Hildesheim ist erneut zu einem Mekka morbider Mode geworden. Der teuflisch
                        strenge Dresscode in Bildern.
                    </p>
                </div>
            </div>
            <div class="grid-x grid-margin-x">
                <div class="cell large-2 small-order-2 large-order-1">
                    <aside class="grid-x grid-margin-x">
                        <div class="cell small-12 medium-6 large-12">
                            <div class="c-meta">
                                <ul cLass="c-meta__list">
                                    <li class="c-meta__item"><strong>Hildesheim</strong></li>
                                    <li class="c-meta__item"><strong>von Johanna Elster</strong></li>
                                    <li class="c-meta__item"><time title="Veröffentlicht am" itemprop="datePublished" datetime="28.04.2019">28.04.2019</time></li>
                                    <li class="c-meta__item">Aktualisiert <span class="js-last-updated" data-tstamp="1566213446">
    19.08.2019 - 13:17 Uhr
</span>
                                    </li>
                                    <li class="c-meta__item"><span title="Lesezeit"><i class="fa fa-book-open"></i> 10 Min.</span></li>
                                    <li class="c-meta__item"> 9.523 Aufrufe</li>
                                </ul>
                            </div>
                        </div>
                        <div class="cell small-9 medium-3 large-12">
                            <div class="c-social-menu c-social-menu">
                                <ul class="c-social-menu__list">
                                    <li class="c-social-menu__item">
                                        <a class="c-social-menu__link c-social-menu__link--facebook" href="#"></a>
                                    </li>
                                    <li class="c-social-menu__item">
                                        <a class="c-social-menu__link c-social-menu__link--whatsapp" href="#"></a>
                                    </li>
                                    <li class="c-social-menu__item">
                                        <a class="c-social-menu__link c-social-menu__link--mail" href="#"></a>
                                    </li>
                                    <li class="c-social-menu__item">
                                        <a class="c-social-menu__link c-social-menu__link--twitter" href="#"></a>
                                    </li>
                                    <li class="c-social-menu__item">
                                        <a class="c-social-menu__link c-social-menu__link--instagram" href="#"></a>
                                    </li>
                                    <li class="c-social-menu__item">
                                        <a class="c-social-menu__link c-social-menu__link--youtube" href="#"></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="cell small-3 medium-3 large-12">
                            <button class="c-bookmark" title="Artikel merken">
    <i class="far fa-bookmark c-bookmark__icon"></i>
    <span class="c-bookmark__label">Artikel merken</span></button>
                        </div>
                    </aside>
                </div>
                <div class="cell large-10 small-order-1 large-order-2">
                    <figure class="c-media has-caption">
                        <div class="c-media__content">
                            <picture class="c-media__picture">
                                <img class="c-media__image" src="../../../assets/img/landscape.jpg" alt="altText" title="Nulla vitae elit libero, a pharetra augue. Cras Etiam Commodo Lorem Ridiculus">
                            </picture>
                        </div>
                        <figcaption class="c-media__caption">
                            <span class="c-media__title">Nulla vitae elit libero, a pharetra augue. Cras Etiam Commodo Lorem Ridiculus</span>
                            <span class="c-media__credit">Knochen und grüne Haare &ndash; auf dem M'era Luna stößt man damit auf Anerkennung. / Foto: Julia Moras</span>
                        </figcaption>
                    </figure>
                </div>
            </div>
            <div class="grid-x grid-margin-x">
                <div class="cell large-5 large-offset-2 small-order-2 large-order-1">
                    <section itemprop="articleBody" class="t-article-body">
                        <div class="u-blur-crop">
                            <h3>
                                "Endlich normale Leute"
                            </h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </p>
                        </div>
                        <div class="grid-x grid-margin-x">
                            <div class="cell medium-12 large-10 large-offset-0">
                                <div class="o-paywall">
                                    <div class="o-paywall__header">
                                        <span class="c-badge c-badge--user c-badge--large c-badge--outline">HAZ+</span>
                                    </div>
                                    <div class="o-paywall__body">
                                        <div class="grid-x grid-padding-y grid-padding-x">
                                            <div class="cell">
                                                <h3 class="u-inline-block">
                                                    Sofort weiterlesen
                                                </h3>
                                                <ul class="c-check-list">
                                                    <li class="c-check-list__item">Alle Nachrichten aus Hildesheim und der Region</li>
                                                    <li class="c-check-list__item">Monatlich mehr als 300 Artikel, Reportagen und exklusive Inhalte</li>
                                                    <li class="c-check-list__item">Keine Mindestvertragslaufzeit und einfach online kündbar</li>
                                                    <li class="c-check-list__item">Erster Monat kostenlos, danach monatlich nur 9,90 Euro</li>
                                                </ul>
                                                <a class="c-button c-button--ghost" href="#">
    JETZT GRATIS TESTEN
</a>
                                            </div>
                                        </div>
                                    </div>
                                    <hr class="o-paywall__divider">
                                    <div class="o-paywall__footer">
                                        <p>
                                            Sie haben bereits ein Abo? <a href="#">Hier einloggen</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="cell large-5 small-order-1 large-order-2">
                    <div id="oms_gpt_standard" class="c-ad js-ad-stroeer c-ad--rectangle"></div>

                </div>
            </div>
        </div>
    </article>
</section>
<section class="grid-container o-section">
    <article role="article" class="t-article">
        <div class="grid-container">
            <div class="grid-x grid-margin-x">
                <div class="cell large-10 large-offset-2">
                    {% render '@headline' with {
                        title: 'Verrückt: die knallbunte Gothic-Szene',
                        kickers: [
                            "Veröffentlicht in : Hildesheim Aufmacher"
                        ]
                    } %}
                    <p>
                        <strong>Hildesheim</strong> - Bunte Bandshirts, Häkeltops und Boho-Kleidchen: Wer die
                        übliche Festival-Kleidung beim M’era Luna sucht, wird nicht fündig. Hildesheim ist
                        erneut zu einem Mekka morbider Mode geworden. Der teuflisch strenge Dresscode in
                        Bildern.
                    </p>
                </div>
            </div>
            <div class="grid-x grid-margin-x">
                <div class="cell large-2 small-order-2 large-order-1">
                    <aside class="grid-x grid-margin-x">
                        <div class="cell small-12 medium-6 large-12">
                            {% render '@meta' %}
                        </div>
                        <div class="cell small-9 medium-3 large-12">
                            {% render '@social-menu' with {skype: false, linkedin: false} %}
                        </div>
                        <div class="cell small-3 medium-3 large-12">
                            {% render '@bookmark' %}
                        </div>
                    </aside>
                </div>
                <div class="cell large-10 small-order-1 large-order-2">
                    {% render '@media' with {
                        credit: 'Knochen und grüne Haare &ndash; auf dem M\'era Luna stößt man damit auf Anerkennung. / Foto: Julia Moras'
                    } %}
                </div>
            </div>
            <div class="grid-x grid-margin-x">
                <div class="cell large-5 large-offset-2 small-order-2 large-order-1">
                    <section itemprop="articleBody" class="t-article-body">
                        <div class="u-blur-crop">
                            {% render '@heading--h3' with { text: '"Endlich normale Leute"' } %}
                            {% render '@paragraph'|truncate(50) %}
                          </div>
                        <div class="grid-x grid-margin-x">
                            <div class="cell medium-12 large-10 large-offset-0">
                                {% render '@paywall' %}
                            </div>
                        </div>
                    </section>
                </div>
                <div class="cell large-5 small-order-1 large-order-2">
                {% render '@ad--rectangle' %}
                </div>
            </div>
        </div>
    </article>
</section>
/* No context defined for this component. */

There are no notes for this item.