<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="INNOQ" class="logo navbar__logo" src="../../assets/logos/edition-02/svg/innoq-logo--whiteapricot.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">Newsletter</a><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">
                <span class="icon-svg icon-arrow-medium-left icon--brand-primary"></span>
                Hauptmenü
            </button>
        </nav>
    </div>
</nav-bar>
<header class="landing-page-header">
    <video class="bg-video" playsinline autoplay muted loop wf-ignore poster="../../assets/bg-images/edition-02/edition02-human-02.jpg">
        <source src="../../assets/bg-videos/neuroevolutionary-trails.mp4" type="video/mp4" />
    </video>
    <div class="landing-page-header__body">
        <div>
            <h1 class="landing-page-header__title bg-image-edition-16">
                Wir geben Technologie einen Sinn. <br />Und ihren Ideen eine Zukunft.
            </h1>
        </div>
        <div class="landing-page-header__text">
            Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich
            gern. Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen und
            Geschäftsmodelle.
        </div>
    </div>
</header>
<main class="main-layout landing-page" role="main">
    <section class="container-xl">
        <h2 class="teaser-section-heading">Unser Fokus</h2>
        <div class="service-intro-grid">
            <clickable-area class="service-intro">
                <h2 class="service-intro__header">
                    <a href="#">Strategie- und Technologieberatung</a>
                </h2>
                <div class="service-intro__text">
                    Bevor wir Ratschläge geben, hören wir zu. Bevor wir Sie überzeugen,
                    überzeugen wir uns selbst. Das Ergebnis: Technologie, die alle
                    weiterbringt.
                </div>
                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
            </clickable-area>
            <clickable-area class="service-intro">
                <h2 class="service-intro__header">
                    <a href="#">Digitale Produktentwicklung</a>
                </h2>
                <div class="service-intro__text">
                    Digital weiterdenken. Wissen und Stärken zusammenführen. Aus Ihren
                    Ideen einzigartige Services entwickeln.
                </div>
                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
            </clickable-area>
            <clickable-area class="service-intro">
                <h2 class="service-intro__header">
                    <a href="#">Softwarearchitektur und -entwicklung</a>
                </h2>
                <div class="service-intro__text">
                    Keine Architektur ohne Plan. Keine Entwicklung ohne Wie und Warum.
                    Keine Entscheidung ohne guten Grund.
                </div>
                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
            </clickable-area>
            <clickable-area class="service-intro">
                <h2 class="service-intro__header">
                    <a href="#">Digitale Plattformen und Infrastrukturen</a>
                </h2>
                <div class="service-intro__text">
                    Entwicklung und Betrieb in Teamarbeit. Automatisierung in Perfektion.
                    Mit moderner Technologie in Bestform.
                </div>
                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
            </clickable-area>
            <clickable-area class="service-intro">
                <h2 class="service-intro__header">
                    <a href="#">Wissenstransfer, Coaching und Trainings</a>
                </h2>
                <div class="service-intro__text">
                    Wir kennen die Theorie vor allem aus der Praxis, machen Fortschritte,
                    weil wir sie gehen, und teilen unser Wissen, damit Ihr Vorsprung
                    wächst.
                </div>
                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
            </clickable-area>
        </div>
    </section>
    <section class="stripe stripe--gray">
        <div class="container-xl container-xl-vertical-whitespace">
            <clickable-area class="topic-teaser bg-image-edition-05">
                <div class="topic-teaser__body">
                    <div class="topic-teaser__caption">Schwerpunktthema</div>
                    <a href="#" class="topic-teaser__header">Microservices – der aktuelle Stand</a>
                    <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">
                        <span>Zum Schwerpunktthema</span><span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
                    </div>
                </div>
            </clickable-area><a href="#" class="case-teaser bg-image-edition-12">
                <div class="case-teaser__wrapper">
                    <div class="case-teaser__body">
                        <div class="case-teaser__caption">case study</div>
                        <div>
                            <div class="case-teaser__header">
                                <h2 class="punch-in bg-image-edition-12">
                                    case study headline eggs
                                </h2>
                            </div>
                            <div class="case-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="case-teaser__footer">
                                <span class="link-teaser">mehr erfahren</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a><a href="#" class="case-teaser bg-image-edition-12">
                <div class="case-teaser__wrapper">
                    <div class="case-teaser__body">
                        <div class="case-teaser__caption">case study</div>
                        <div>
                            <div class="case-teaser__header">
                                <h2 class="punch-in bg-image-edition-12">
                                    Eggs having success with a logo
                                </h2>
                            </div>
                            <img class="case-teaser__logo" src="../../assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg" />
                            <div class="case-teaser__footer">
                                <span class="link-teaser">mehr erfahren</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="tile-grid-sm">
                <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">
                            Command Line Interfaces in Java
                        </h2>
                        <p class="content-teaser__text">
                            Wie man auf Kommando die richtigen Dinge tut.
                        </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 Alexander Hesingfeld" />
                            </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="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-svg 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="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">
                            Command Line Interfaces in Java
                        </h2>
                        <p class="content-teaser__text">
                            Wie man auf Kommando die richtigen Dinge tut.
                        </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 Alexander Hesingfeld" />
                            </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="tile-grid-md">
                <a href="#" class="list-teaser-event tile">
                    <div class="event-date-section">
                        <div class="label talk">Vortrag</div>
                        <time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span><span class="event-year">2017</span></time>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label talk">Vortrag</div>
                            <div class="label slides">Folien verfügbar</div>
                            <h2 class="list-teaser-event__headline">Vortrag Titel</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Vortragsort / 10-12 Uhr<span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser__footer">
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" 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 rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" 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>
                    </div>
                </a><a href="#" class="list-teaser-event tile">
                    <div class="event-date-section">
                        <div class="label talk">Training</div>
                        <div class="event-date-wrapper">
                            <time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span></time>
                            <hr class="event-date-separator" />
                            <time class="event-date" datetime="2017-06-24"><span class="event-day-month"><span class="event-day">24</span><span class="event-month">Jun</span></span><span class="event-year">2017</span></time>
                        </div>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label training">Training</div>
                            <h2 class="list-teaser-event__headline">Training Titel</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Trainingsort<span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser__footer">
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" 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 rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" 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>
                    </div>
                </a><a href="#" class="list-teaser-event tile">
                    <div class="event-date-section">
                        <div class="label talk">Vortrag</div>
                        <time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span><span class="event-year">2017</span></time>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label talk">Vortrag</div>
                            <div class="label slides">Folien verfügbar</div>
                            <h2 class="list-teaser-event__headline">Vortrag Titel</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Vortragsort / 10-12 Uhr<span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser__footer">
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" 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 rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" 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>
                    </div>
                </a><a href="#" class="list-teaser-event tile">
                    <div class="event-date-section">
                        <div class="label talk">Training</div>
                        <div class="event-date-wrapper">
                            <time class="event-date" datetime="2017-06-23"><span class="event-day-month"><span class="event-day">23</span><span class="event-month">Jun</span></span></time>
                            <hr class="event-date-separator" />
                            <time class="event-date" datetime="2017-06-24"><span class="event-day-month"><span class="event-day">24</span><span class="event-month">Jun</span></span><span class="event-year">2017</span></time>
                        </div>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label training">Training</div>
                            <h2 class="list-teaser-event__headline">Training Titel</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Trainingsort<span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser__footer">
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" 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 rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" 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>
                    </div>
                </a>
            </div>
        </div>
        <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>
    </section>
</main>
import { cssRight } from "./components/04-molecules/visual-elements/teaser/tile-teaser/podcast-tile-teaser/config";

<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="INNOQ" class="logo navbar__logo"
                    src={context.app.uri('assets/logos/edition-02/svg/innoq-logo--whiteapricot.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">Newsletter</a>
            <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">
                <span class="icon-svg icon-arrow-medium-left icon--brand-primary"></span> Hauptmenü
            </button>
        </nav>
    </div>
</nav-bar>

<header class="landing-page-header">
    <video class="bg-video" playsinline autoplay muted loop wf-ignore
        poster={context.app.uri("assets/bg-images/edition-02/edition02-human-02.jpg")}>
        <source src={context.app.uri("assets/bg-videos/neuroevolutionary-trails.mp4")} type="video/mp4" />
    </video>
    <div class="landing-page-header__body">
        <div>
            <h1 class="landing-page-header__title bg-image-edition-16">Wir geben Technologie einen Sinn. <br />
                Und ihren Ideen eine Zukunft.</h1>
        </div>
        <div class="landing-page-header__text">
            Wir beraten ehrlich, denken innovativ und entwickeln leidenschaftlich gern.
            Das Ergebnis sind erfolgreiche Softwarelösungen, Infrastrukturen und Geschäftsmodelle.
        </div>
    </div>
</header>

<main class="main-layout landing-page" role="main">
    <section class="container-xl">
        <h2 class="teaser-section-heading">Unser Fokus</h2>
        <div class="service-intro-grid">
            <clickable-area class="service-intro">
                <h2 class="service-intro__header"><a href="#" >Strategie- und Technologieberatung</a></h2>
                <div class="service-intro__text">
                    Bevor wir Ratschläge geben, hören wir zu.
                    Bevor wir Sie überzeugen, überzeugen wir uns selbst.
                    Das Ergebnis: Technologie, die alle weiterbringt.
                </div>
                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
            </clickable-area>

            <clickable-area class="service-intro">
                <h2 class="service-intro__header"><a href="#" >Digitale Produktentwicklung</a></h2>
                <div class="service-intro__text">
                    Digital weiterdenken.
                    Wissen und Stärken zusammenführen.
                    Aus Ihren Ideen einzigartige Services entwickeln.
                </div>
                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
            </clickable-area>

            <clickable-area class="service-intro">
                <h2 class="service-intro__header"><a href="#" >Softwarearchitektur und -entwicklung</a></h2>
                <div class="service-intro__text">
                    Keine Architektur ohne Plan.
                    Keine Entwicklung ohne Wie und Warum.
                    Keine Entscheidung ohne guten Grund.
                </div>
                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
            </clickable-area>

            <clickable-area class="service-intro">
                <h2 class="service-intro__header"><a href="#" >Digitale Plattformen und Infrastrukturen</a></h2>
                <div class="service-intro__text">
                    Entwicklung und Betrieb in Teamarbeit.
                    Automatisierung in Perfektion.
                    Mit moderner Technologie in Bestform.
                </div>
                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
            </clickable-area>

            <clickable-area class="service-intro">
                <h2 class="service-intro__header"><a href="#" >Wissenstransfer, Coaching und Trainings</a></h2>
                <div class="service-intro__text">
                    Wir kennen die Theorie vor allem aus der Praxis,
                    machen Fortschritte, weil wir sie gehen,
                    und teilen unser Wissen, damit Ihr Vorsprung wächst.
                </div>
                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
            </clickable-area>
        </div>
    </section>

    <section class="stripe stripe--gray">
        <div class="container-xl container-xl-vertical-whitespace">
            <clickable-area class="topic-teaser bg-image-edition-05">
                <div class="topic-teaser__body">
                    <div class="topic-teaser__caption">Schwerpunktthema</div>
                    <a href="#" class="topic-teaser__header">Microservices – der aktuelle Stand</a>
                    <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">
                        <span>Zum Schwerpunktthema</span>
                        <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
                    </div>
                </div>
            </clickable-area>

            <a href="#" class="case-teaser bg-image-edition-12">
                <div class="case-teaser__wrapper">
                    <div class="case-teaser__body">
                        <div class="case-teaser__caption">case study</div>
                        <div>
                            <div class="case-teaser__header">
                                <h2 class="punch-in bg-image-edition-12">
                                    case study headline eggs
                                </h2>
                            </div>
                            <div class="case-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="case-teaser__footer">
                                <span class="link-teaser">mehr erfahren</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>

            <a href="#" class="case-teaser bg-image-edition-12">
                <div class="case-teaser__wrapper">
                    <div class="case-teaser__body">
                        <div class="case-teaser__caption">case study</div>
                        <div>
                            <div class="case-teaser__header">
                                <h2 class="punch-in bg-image-edition-12">
                                    Eggs having success with a logo
                                </h2>
                            </div>
                            <img class="case-teaser__logo"
                                src={context.app.uri('assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg')} />
                            <div class="case-teaser__footer">
                                <span class="link-teaser">mehr erfahren</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>

            <div class="tile-grid-sm">
                <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">Command Line Interfaces in Java</h2>
                        <p class="content-teaser__text">
                            Wie man auf Kommando die richtigen Dinge tut.
                        </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/example-content/heribert.jpg")}
                                    alt="Portrait von Alexander Hesingfeld" />
                            </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="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>
                        <span class="icon-svg 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="content-teaser content-teaser--inverted">
                    <div class="content-teaser__body">
                        <div class="content-teaser__caption">Artikel</div>
                        <h2 class="content-teaser__header">Command Line Interfaces in Java</h2>
                        <p class="content-teaser__text">
                            Wie man auf Kommando die richtigen Dinge tut.
                        </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/example-content/heribert.jpg")}
                                    alt="Portrait von Alexander Hesingfeld" />
                            </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="tile-grid-md">
                <a href="#" class="list-teaser-event tile">
                    <div class="event-date-section">
                        <div class="label talk">Vortrag</div>
                        <time class="event-date" datetime="2017-06-23">
                            <span class="event-day-month">
                                <span class='event-day'>23</span>
                                <span class='event-month'>Jun</span>
                            </span>
                            <span class='event-year'>2017</span>
                        </time>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label talk">Vortrag</div>
                            <div class="label slides">Folien verfügbar</div>
                            <h2 class="list-teaser-event__headline">Vortrag Titel</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Vortragsort / 10-12 Uhr
                                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser__footer">
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" src={context.app.uri("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 rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" src={context.app.uri("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>
                    </div>
                </a>

                <a href="#" class="list-teaser-event tile">
                    <div class="event-date-section">
                        <div class="label talk">Training</div>
                        <div class="event-date-wrapper">
                            <time class="event-date" datetime="2017-06-23">
                                <span class="event-day-month">
                                    <span class='event-day'>23</span>
                                    <span class='event-month'>Jun</span>
                                </span>
                            </time>
                            <hr class="event-date-separator" />
                            <time class="event-date" datetime="2017-06-24">
                                <span class="event-day-month">
                                    <span class='event-day'>24</span>
                                    <span class='event-month'>Jun</span>
                                </span>
                                <span class='event-year'>2017</span>
                            </time>
                        </div>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label training">Training</div>
                            <h2 class="list-teaser-event__headline">Training Titel</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Trainingsort
                                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser__footer">
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" src={context.app.uri("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 rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" src={context.app.uri("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>
                    </div>
                </a>
                <a href="#" class="list-teaser-event tile">
                    <div class="event-date-section">
                        <div class="label talk">Vortrag</div>
                        <time class="event-date" datetime="2017-06-23">
                            <span class="event-day-month">
                                <span class='event-day'>23</span>
                                <span class='event-month'>Jun</span>
                            </span>
                            <span class='event-year'>2017</span>
                        </time>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label talk">Vortrag</div>
                            <div class="label slides">Folien verfügbar</div>
                            <h2 class="list-teaser-event__headline">Vortrag Titel</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Vortragsort / 10-12 Uhr
                                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser__footer">
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" src={context.app.uri("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 rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" src={context.app.uri("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>
                    </div>
                </a>

                <a href="#" class="list-teaser-event tile">
                    <div class="event-date-section">
                        <div class="label talk">Training</div>
                        <div class="event-date-wrapper">
                            <time class="event-date" datetime="2017-06-23">
                                <span class="event-day-month">
                                    <span class='event-day'>23</span>
                                    <span class='event-month'>Jun</span>
                                </span>
                            </time>
                            <hr class="event-date-separator" />
                            <time class="event-date" datetime="2017-06-24">
                                <span class="event-day-month">
                                    <span class='event-day'>24</span>
                                    <span class='event-month'>Jun</span>
                                </span>
                                <span class='event-year'>2017</span>
                            </time>
                        </div>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label training">Training</div>
                            <h2 class="list-teaser-event__headline">Training Titel</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Trainingsort
                                <span class="icon-svg icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser__footer">
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" src={context.app.uri("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 rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--small">
                                    <img itemprop="photo" class="avatar__image" src={context.app.uri("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>
                    </div>
                </a>
            </div>
        </div>

        <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>
    </section>
</main>
/* No context defined. */

No notes defined.