<main role="main">
    <div class="page-layout-xl--default">
        <h2 class="teaser-section-heading">Magazin</h2>
        <div class="blocks">
            <a href="#" class="topic-teaser bg-image-edition-02">
                <div class="topic-teaser__body">
                    <div class="topic-teaser__caption">Schwerpunktthema</div>
                    <h1 class="topic-teaser__header">Microservices – der aktuelle Stand</h1>
                    <div class="topic-teaser__text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="topic-teaser__cta">Zum Schwerpunktthema
                        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <section class="stripe stripe--gray">
        <div class="page-layout-xl--default">
            <h2 class="teaser-section-heading">Artikel</h2>
            <div class="blocks">
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Artikel Headline</h2>
                        <p class="content-teaser__text">
                            Artikel Intro Text
                        </p>
                    </div>
                    <div class="content-teaser__footer">
                        <div class="author-bio author-bio--condensed" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Heribert Innoq" />
                            </div>
                            <address class="author-bio__text">
                                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                            </address>
                        </div>
                    </div>
                </a>

                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Artikel Headline</h2>
                        <p class="content-teaser__text">
                            Artikel Intro Text
                        </p>
                    </div>
                    <div class="content-teaser__footer">
                        <div class="author-bio author-bio--condensed" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                            </div>
                            <address class="author-bio__text">
                                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                            </address>
                        </div>
                    </div>
                </a>

                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Artikel Headline</h2>
                        <p class="content-teaser__text">
                            Artikel Intro Text
                        </p>
                    </div>
                    <div class="content-teaser__footer">
                        <div class="author-bio author-bio--condensed" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                            </div>
                            <address class="author-bio__text">
                                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                            </address>
                        </div>
                    </div>
                </a>
            </div>
            <div class="magazine-page--link">
                <a class="link-teaser" href="#">Alle Artikel ansehen</a>
            </div>
            <h2 class="teaser-section-heading">Podcast</h2>
            <div class="blocks">
                <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url(../../assets/example-content/heribert-rechts.png)">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                    </div>
                </a>
                <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url(../../assets/example-content/heribert-rechts.png)">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                    </div>
                </a>
                <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url(../../assets/example-content/heribert-rechts.png)">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                    </div>
                </a>
            </div>
            <div class="magazine-page--link">
                <a class="link-teaser" href="#">Alle Podcasts ansehen</a>
            </div>
            <h2 class="teaser-section-heading">News</h2>
            <div class="blocks">
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">News</div>
                        <h2 class="content-teaser__header">News Headline</h2>
                        <p class="content-teaser__text">
                            News Intro Text
                        </p>
                    </div>
                </a>
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">News</div>
                        <h2 class="content-teaser__header">News Headline</h2>
                        <p class="content-teaser__text">
                            News Intro Text
                        </p>
                    </div>
                </a>
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">News</div>
                        <h2 class="content-teaser__header">News Headline</h2>
                        <p class="content-teaser__text">
                            News Intro Text
                        </p>
                    </div>
                </a>
            </div>
            <div class="magazine-page--link">
                <a class="link-teaser" href="#">Alle News ansehen</a>
            </div>
        </div>
    </section>
    <div class="blocks">
        <div class="case-teaser bg-image-edition-06">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div class="case-teaser__caption">ARTIST COLLABORATION</div>
                    <div>
                        <div class="case-teaser__header">
                            <h1 class="punch-in bg-image-edition-06">INNOQ Digital Art</h1>
                        </div>
                    </div>
                    <div class="case-teaser__text">
                        Die Kollaborationsreihe „INNOQ Digital Art“ hat zum Ziel, die Zusammenarbeit mit ausgewählten
                        Medienkünstlern zu fördern. Gemeinsam werden Fragen zu technologischem Fortschritt und dessen
                        gesellschaftlichen Auswirkungen aus verschiedenen Perspektiven betrachtet. Dabei steht die
                        gemeinsame Entwicklung von Kunstwerken und der intensive Austausch zwischen INNOQ-Mitarbeitern
                        und den Künstlern im Fokus.
                    </div>
                    <div class="case-teaser__footer">
                        <a class="link-teaser" href="#">Mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<main role="main">
    <div class="page-layout-xl--default">
        <h2 class="teaser-section-heading">Magazin</h2>
        <div class="blocks">
            <a href="#" class="topic-teaser bg-image-edition-02">
                <div class="topic-teaser__body">
                    <div class="topic-teaser__caption">Schwerpunktthema</div>
                    <h1 class="topic-teaser__header">Microservices – der aktuelle Stand</h1>
                    <div class="topic-teaser__text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="topic-teaser__cta">Zum Schwerpunktthema
                        <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <section class="stripe stripe--gray">
        <div class="page-layout-xl--default">
            <h2 class="teaser-section-heading">Artikel</h2>
            <div class="blocks">
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Artikel Headline</h2>
                        <p class="content-teaser__text">
                            Artikel Intro Text
                        </p>
                    </div>
                    <div class="content-teaser__footer">
                        <div class="author-bio author-bio--condensed" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Heribert Innoq" />
                            </div>
                            <address class="author-bio__text">
                                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                            </address>
                        </div>
                    </div>
                </a>

                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Artikel Headline</h2>
                        <p class="content-teaser__text">
                            Artikel Intro Text
                        </p>
                    </div>
                    <div class="content-teaser__footer">
                        <div class="author-bio author-bio--condensed" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
                            </div>
                            <address class="author-bio__text">
                                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                            </address>
                        </div>
                    </div>
                </a>

                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Artikel Headline</h2>
                        <p class="content-teaser__text">
                            Artikel Intro Text
                        </p>
                    </div>
                    <div class="content-teaser__footer">
                        <div class="author-bio author-bio--condensed" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
                            </div>
                            <address class="author-bio__text">
                                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                            </address>
                        </div>
                    </div>
                </a>
            </div>
            <div class="magazine-page--link">
                <a class="link-teaser" href="#">Alle Artikel ansehen</a>
            </div>
            <h2 class="teaser-section-heading">Podcast</h2>
            <div class="blocks">
                <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                            Heribert Innoq
                        </div>
                    </div>
                </a>
                <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                            Heribert Innoq
                        </div>
                    </div>
                </a>
                <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person" >
                            Heribert Innoq
                        </div>
                    </div>
                </a>
            </div>
            <div class="magazine-page--link">
                <a class="link-teaser" href="#">Alle Podcasts ansehen</a>
            </div>
            <h2 class="teaser-section-heading">News</h2>
            <div class="blocks">
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">News</div>
                        <h2 class="content-teaser__header">News Headline</h2>
                        <p class="content-teaser__text">
                            News Intro Text
                        </p>
                    </div>
                </a>
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">News</div>
                        <h2 class="content-teaser__header">News Headline</h2>
                        <p class="content-teaser__text">
                            News Intro Text
                        </p>
                    </div>
                </a>
                <a href="#" class="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">News</div>
                        <h2 class="content-teaser__header">News Headline</h2>
                        <p class="content-teaser__text">
                            News Intro Text
                        </p>
                    </div>
                </a>
            </div>
            <div class="magazine-page--link">
                <a class="link-teaser" href="#">Alle News ansehen</a>
            </div>
        </div>
    </section>
    <div class="blocks">
        <div class="case-teaser bg-image-edition-06">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div class="case-teaser__caption">ARTIST COLLABORATION</div>
                    <div>
                        <div class="case-teaser__header">
                            <h1 class="punch-in bg-image-edition-06">INNOQ Digital Art</h1>
                        </div>
                    </div>
                    <div class="case-teaser__text">
                        Die Kollaborationsreihe „INNOQ Digital Art“ hat zum Ziel, die Zusammenarbeit mit ausgewählten
                        Medienkünstlern zu fördern. Gemeinsam werden Fragen zu technologischem Fortschritt und dessen
                        gesellschaftlichen Auswirkungen aus verschiedenen Perspektiven betrachtet. Dabei steht die
                        gemeinsame Entwicklung von Kunstwerken und der intensive Austausch zwischen INNOQ-Mitarbeitern
                        und den Künstlern im Fokus.
                    </div>
                    <div class="case-teaser__footer">
                        <a class="link-teaser" href="#">Mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
/* No context defined. */

No notes defined.