<div>
    <nav-bar class="navbar">
        <div class="navbar__inner"><a href="#main" class="navbtn navbtn--skip">Zum Inhalt springen</a>
            <div class="navbar__brand"><a href="#" class="navbar__brand-link"><img alt="inno Q" class="logo navbar__logo" src="../../assets/innoq-logo--whitered.svg"></a>
            </div>
            <input tabindex="-1" type="checkbox" id="navbar-toggle--menu" class="sr-only navbar__toggle-state navbar__toggle-state--menu-toggler">
            <input tabindex="-1" type="checkbox" id="navbar-toggle--search" class="sr-only navbar__toggle-state navbar__toggle-state--search-toggler">
            <div class="navbar__meta"><a href="#" class="navbtn navbtn--meta">Kontakt</a><a href="#" class="navbtn navbtn--meta navbtn--locale navbtn--active" title="Deutsch">de</a> |<a href="#" class="navbtn navbtn--meta navbtn--locale" title="English">en</a>
            </div>
            <div class="navbar__togglers">
                <label for="navbar-toggle--menu" aria-label="Navigation ein- oder ausblenden"><span class="navbtn navbtn--menu">Menü</span>
                </label><a href="#" class="navbtn navbtn--search" aria-label="Suche ein- oder ausblenden"><i class="icon icon-search"></i></a>
            </div>
            <nav class="navbar__primary-nav primary-nav">
                <ul class="primary-nav__list">
                    <li class="primary-nav__item"><a href="#" class="navbtn navbtn--primary navbtn--active">Leistungen</a>
                    </li>
                    <li class="primary-nav__item">
                        <div class="dropdown"><a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--projekte">Projekte</a>
                            <input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--projekte" class="sr-only dropdown__checkbox">
                            <label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--projekte"><i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
                                <span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span><span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
                            </label>
                            <div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Projekte" data-origin="left">
                                <ul class="dropdown__list">
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="primary-nav__item">
                        <div class="dropdown"><a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--kultur">Kultur</a>
                            <input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--kultur" class="sr-only dropdown__checkbox">
                            <label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--kultur"><i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
                                <span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span><span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
                            </label>
                            <div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Kultur" data-origin="right">
                                <ul class="dropdown__list">
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Digitale Plattformen und Infrastrukturen</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar"><a href="#" class="dropdown__link dropdown__link--navbar navbtn">Wissenstransfer, Coaching und Trainings</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="primary-nav__item"><a href="#" class="navbtn navbtn--primary">Magazin</a>
                    </li>
                    <li class="primary-nav__item"><a href="#" class="navbtn navbtn--primary">Termine</a>
                    </li>
                </ul>
                <button class="navbtn navbtn--drill-up">
                    <img class="navbtn__left-icon" src="../../assets/arrow-medium-left-red.svg">Hauptmenü</button>
            </nav>
        </div>
    </nav-bar>
    <main role="main">
        <div class="page-layout-xl--default">
            <h2 class="teaser-section-heading">Magazin</h2>
            <div class="blocks"><a href="#" class="topic-teaser topic-list-teaser-bg-image-igel">
                    <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 <img src="../../assets/arrow-long-right-red.svg"></div>
                    </div>
                </a>
            </div>
        </div>
        <section class="stripe stripe--primary">
            <div class="page-layout-xl--default">
                <h2 class="teaser-section-heading">Artikel</h2>
                <div class="blocks"><a href="#" class="teaser 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/heribert.jpg" alt="Heribert Innoq"></div>
                                <div class="author-bio__text">
                                    <div class="author-bio__name" itemprop="name"><span class="author-bio__link">Heribert Innoq</span></div>
                                    <div class="author-bio__info" itemprop="jobTitle">Senior Consultant</div>
                                </div>
                            </div>
                        </div>
                    </a>
                    <a href="#" class="teaser 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/heribert.jpg" alt="Portrait von Heribert Innoq">
                                </div>
                                <div class="author-bio__text">
                                    <div class="author-bio__name" itemprop="name"><span class="author-bio__link">Heribert Innoq</span>
                                    </div>
                                    <div class="author-bio__info" itemprop="jobTitle">Senior Consultant</div>
                                </div>
                            </div>
                        </div>
                    </a><a href="#" class="teaser 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/heribert.jpg" alt="Portrait von Heribert Innoq"></div>
                                <div class="author-bio__text">
                                    <div class="author-bio__name" itemprop="name"><span class="author-bio__link">Heribert Innoq</span></div>
                                    <div class="author-bio__info" itemprop="jobTitle">Senior Consultant</div>
                                </div>
                            </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/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><img src="../../assets/arrow-long-right-white.svg">
                        </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/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>
                            <img src="../../assets/arrow-long-right-white.svg">
                        </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/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><img src="../../assets/arrow-long-right-white.svg">
                        </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="teaser 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="teaser 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="teaser 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 topic-header-bg-image-girl">
                <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 topic-header-bg-image-text-box-girl">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>
</div>
import { cssRight } from "./components/02-molecules/teaser/tile-teaser/podcast-tile-teaser/config";
<div>
    <nav-bar class="navbar">
        <div class="navbar__inner">
            <a href="#main" class="navbtn navbtn--skip">Zum Inhalt springen</a>

            <div class="navbar__brand">
                <a href="#" class="navbar__brand-link">
                    <img alt="inno Q" class="logo navbar__logo" src={context.app.uri('assets/innoq-logo--whitered.svg')} />
                </a>
            </div>

            <input tabindex="-1" type="checkbox" id="navbar-toggle--menu" class="sr-only navbar__toggle-state navbar__toggle-state--menu-toggler" />
            <input tabindex="-1" type="checkbox" id="navbar-toggle--search" class="sr-only navbar__toggle-state navbar__toggle-state--search-toggler" />

            <div class="navbar__meta">
                <a href="#" class="navbtn navbtn--meta">Kontakt</a>
                <a href="#" class="navbtn navbtn--meta navbtn--locale navbtn--active" title="Deutsch">de</a> |
                <a href="#" class="navbtn navbtn--meta navbtn--locale" title="English">en</a>
            </div>

            <div class="navbar__togglers">
                <label for="navbar-toggle--menu" aria-label="Navigation ein- oder ausblenden">
                    <span class="navbtn navbtn--menu">Menü</span>
                </label>
                <a href="#" class="navbtn navbtn--search" aria-label="Suche ein- oder ausblenden">
                    <i class="icon icon-search"></i>
                </a>
            </div>

            <nav class="navbar__primary-nav primary-nav">
                <ul class="primary-nav__list">
                    <li class="primary-nav__item">
                        <a href="#" class="navbtn navbtn--primary navbtn--active">Leistungen</a>
                    </li>
                    <li class="primary-nav__item">
                        <div class="dropdown">
                            <a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--projekte">Projekte</a>
                            <input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--projekte" class="sr-only dropdown__checkbox" />
                            <label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--projekte">
                                <i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
                                <span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span>
                                <span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
                            </label>
                            <div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Projekte" data-origin="left">
                                <ul class="dropdown__list">
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="primary-nav__item">
                        <div class="dropdown">
                            <a href="#" class="navbtn navbtn--primary" data-for="dropdown__toggle--kultur">Kultur</a>
                            <input type="checkbox" role="button" aria-haspopup="true" id="dropdown__toggle--kultur" class="sr-only dropdown__checkbox" />
                            <label class="dropdown__toggle dropdown__toggle--navbar" for="dropdown__toggle--kultur">
                                <i class="icon icon-chevron-2-down dropdown__icon dropdown__icon--navbar"></i>
                                <span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span>
                                <span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</span>
                            </label>
                            <div class="dropdown__list-wrapper dropdown__list-wrapper--navbar" role="menu" title="Kultur" data-origin="right">
                                <ul class="dropdown__list">
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Strategie- und Technologieberatung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Entwicklung digitaler Geschäftsmodelle</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Softwarearchitektur und -entwicklung</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Digitale Plattformen und Infrastrukturen</a>
                                    </li>
                                    <li class="dropdown__item dropdown__item--navbar">
                                        <a href="#" class="dropdown__link dropdown__link--navbar navbtn">Wissenstransfer, Coaching und Trainings</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="primary-nav__item">
                        <a href="#" class="navbtn navbtn--primary">Magazin</a>
                    </li>
                    <li class="primary-nav__item">
                        <a href="#" class="navbtn navbtn--primary">Termine</a>
                    </li>
                </ul>

                <button class="navbtn navbtn--drill-up">
                    <img class="navbtn__left-icon" src={context.app.uri('assets/arrow-medium-left-red.svg')} /> Hauptmenü
                </button>
            </nav>
        </div>
    </nav-bar>

    <main role="main">
        <div class="page-layout-xl--default">
            <h2 class="teaser-section-heading">Magazin</h2>
            <div class="blocks">
                <a href="#" class="topic-teaser topic-list-teaser-bg-image-igel">
                    <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 <img src={context.app.uri('assets/arrow-long-right-red.svg')} /></div>
                    </div>
                </a>
            </div>
        </div>
        <section class="stripe stripe--primary">
            <div class="page-layout-xl--default">
                <h2 class="teaser-section-heading">Artikel</h2>
                <div class="blocks">
                    <a href="#" class="teaser 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={context.app.uri("assets/heribert.jpg")} alt="Heribert Innoq" />
                                </div>
                                <div class="author-bio__text">
                                    <div class="author-bio__name" itemprop="name">
                                        <span class="author-bio__link">Heribert Innoq</span>
                                    </div>
                                    <div class="author-bio__info" itemprop="jobTitle">Senior Consultant</div>
                                </div>
                            </div>
                        </div>
                    </a>

                    <a href="#" class="teaser 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={context.app.uri("assets/heribert.jpg")} alt="Portrait von Heribert Innoq" />
                                </div>
                                <div class="author-bio__text">
                                    <div class="author-bio__name" itemprop="name">
                                        <span class="author-bio__link">Heribert Innoq</span>
                                    </div>
                                    <div class="author-bio__info" itemprop="jobTitle">Senior Consultant</div>
                                </div>
                            </div>
                        </div>
                    </a>

                    <a href="#" class="teaser 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={context.app.uri("assets/heribert.jpg")} alt="Portrait von Heribert Innoq" />
                                </div>
                                <div class="author-bio__text">
                                    <div class="author-bio__name" itemprop="name">
                                        <span class="author-bio__link">Heribert Innoq</span>
                                    </div>
                                    <div class="author-bio__info" itemprop="jobTitle" >Senior Consultant</div>
                                </div>
                            </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={cssRight}>
                        <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>
                            <img src={context.app.uri("assets/arrow-long-right-white.svg")} />
                        </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={cssRight}>
                        <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>
                            <img src={context.app.uri("assets/arrow-long-right-white.svg")} />
                        </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={cssRight}>
                        <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>
                            <img src={context.app.uri("assets/arrow-long-right-white.svg")} />
                        </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="teaser 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="teaser 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="teaser 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 topic-header-bg-image-girl">
                <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 topic-header-bg-image-text-box-girl">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>
</div>
/* No context defined for this component. */

There are no notes for this item.