Landing Page

<h-include>
    <div class="eyecatcher eyecatcher--event">
        <p class="eyecatcher--event__text">
            INNOQ Technology Lunch: Software Architecture for Agile Enterprises 👉
            <a href="#" class="eyecatcher--event__link">20. Mai, 12:15 Uhr</a>
        </p>
    </div>
</h-include>
<a href="#main" class="skip-link">Zum Inhalt springen</a>
<nav class="main-navigation" aria-label="Webseite Navigation">
    <a href="#" class="brand-link">
        <img alt="" class="brand-logo" src="{{ path '/assets/logos/edition-02/svg/innoq-logo--whiteapricot.svg' }}" />
        <span class="link-alt">INNOQ Homepage</span>
    </a>
    <a href="#" class="search-link">
        <span class="icon icon-search icon--brand-white"></span>
        <span class="link-alt">Suche</span>
    </a>
    <menu-toggle hidden>
        <button>Menü</button>
    </menu-toggle>
    <ul class="navigation-links" role="list" aria-label="Seitennavigation">
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Leistungen
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Leistungen Untermenü">
                        <li>
                            <a href="#">Strategie- und Technologieberatung</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <a href="#">Success Stories</a>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Kultur
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Kultur Untermenü">
                        <li>
                            <a href="#" aria-current="page">Wie wir zusammenarbeiten</a>
                        </li>
                        <li>
                            <a href="#">Was uns wichtig ist</a>
                        </li>
                        <li>
                            <a href="#">Arbeiten bei INNOQ</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Magazin
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Magazin Untermenü">
                        <li>
                            <a href="#">Blog & Artikel</a>
                        </li>
                        <li>
                            <a href="#">Podcasts</a>
                        </li>
                        <li>
                            <a href="#">Vorträge</a>
                        </li>
                        <li>
                            <a href="#">Primer</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Trends
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Trends Untermenü">
                        <li>
                            <a href="#">Accessibility</a>
                        </li>
                        <li>
                            <a href="#">Cloud Migration</a>
                        </li>
                        <li>
                            <a href="#">Data Mesh</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
        <li>
            <sub-menu>
                <details>
                    <summary>
                        Schulungen
                        <span class="icon icon-chevron-down-filled icon--brand-white"></span>
                    </summary>
                    <ul role="list" aria-label="Schulungen Untermenü">
                        <li>
                            <a href="#">Warum Online-Schulungen?</a>
                        </li>
                        <li>
                            <a href="#">Softwarearchitektur Kickstart</a>
                        </li>
                        <li>
                            <a href="#">Data Mesh</a>
                        </li>
                        <li>
                            <a href="#">iSAQB CPSA-F Foundation Level</a>
                        </li>
                        <li>
                            <a href="#">Accessibility</a>
                        </li>
                        <li>
                            <a href="#">Blockchain</a>
                        </li>
                        <li>
                            <a href="#">Cloud Native Infrastruktur</a>
                        </li>
                        <li>
                            <a href="#">Cloud Migration</a>
                        </li>
                        <li>
                            <a href="#">Domain-driven Design</a>
                        </li>
                        <li>
                            <a href="#">DDD für Machine Learning</a>
                        </li>
                        <li>
                            <a href="#">Flexible Architekturen</a>
                        </li>
                        <li>
                            <a href="#">JavaScript</a>
                        </li>
                        <li>
                            <a href="#">Modernisierung</a>
                        </li>
                        <li>
                            <a href="#">Product Ownership</a>
                        </li>
                        <li>
                            <a href="#">Remote Mob Programming</a>
                        </li>
                        <li>
                            <a href="#">Software Analytics</a>
                        </li>
                        <li>
                            <a href="#">Web-Architekturen</a>
                        </li>
                        <li>
                            <a href="#">Web-Security</a>
                        </li>
                    </ul>
                </details>
            </sub-menu>
        </li>
    </ul>
    <div class="navigation-meta">
        <a href="#">
            <span lang="ru"
                aria-label="Ви з України та розробляєте програмнi (software) продукти? Зв’язатися з нами.">💙💛</span>
        </a>
        <a href="#">Kontakt</a>
        <ul role="list" aria-label="Verfügbare Sprachen">
            <li>
                <a lang="de" href="#" title="Zu Deutsch wechseln" aria-label="Zu Deutsch wechseln"
                    aria-current="true">de</a>
            </li>
            <li>
                <a lang="de_CH" href="#" title="Zu Schweizerdeutsch wechseln"
                    aria-label="Zu Schweizerdeutsch wechseln">ch</a>
            </li>
            <li>
                <a lang="en" href="#" title="Switch to English" aria-label="Switch to English">en</a>
            </li>
        </ul>
    </div>
</nav>


<header class="landing-page-header">
    <video class="bg-video" playsinline autoplay muted loop wf-ignore
        poster="{{ path '/assets/bg-images/edition-02/edition02-human-02.webp'}}">
        <source src=" {{ path '/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 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 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 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 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 icon-arrow-long-right icon--brand-primary"></span>
            </clickable-area>
        </div>
    </section>

    <section class="stripe stripe--gray">
        <div class="container-xl container-vertical-spacing-xl">
            <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 icon-arrow-long-right icon--brand-primary"></span>
                    </div>
                </div>
            </clickable-area>

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

            <a href="#" class="case-list-teaser bg-image-edition-12">
                <div class="case-list-teaser__wrapper">
                    <div class="case-list-teaser__body">
                        <div class="case-list-teaser__caption">case study</div>
                        <h2 class="case-list-teaser__title punch-in bg-image-edition-12">
                            case study headline eggs
                        </h2>
                        <div class="case-list-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>
                    <div class="case-list-teaser__footer">
                        <span class="link-teaser">mehr erfahren</span>
                    </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--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo"
                                    src="{{ path '/assets/example-content/heribert.jpg' }}"
                                    alt="Portrait von Alexander Hesingfeld" />
                            </div>
                            <address>
                                <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({{ path '/assets/example-content/heribert-rechts.png' }})">
                    <div class="podcast-teaser__body">
                        <div class="podcast-teaser__caption">Podcast</div>
                        <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                        <h3 class="podcast-teaser__subheadline">
                            Podcast Subheadline
                        </h3>
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </div>
                    <div class="podcast-teaser__footer">
                        <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                            Heribert Innoq
                        </div>
                    </div>
                </a>

                <a href="#" class="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--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--xs">
                                <img class="avatar__image" itemprop="photo"
                                    src="{{ path '/assets/example-content/heribert.jpg' }}"
                                    alt="Portrait von Alexander Hesingfeld" />
                            </div>
                            <address>
                                <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 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--sm">
                                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
                                </div>
                                <address>
                                    <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--sm">
                                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
                                </div>
                                <address>
                                    <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 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--sm">
                                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
                                </div>
                                <address>
                                    <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--sm">
                                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
                                </div>
                                <address>
                                    <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 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--sm">
                                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
                                </div>
                                <address>
                                    <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--sm">
                                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
                                </div>
                                <address>
                                    <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 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--sm">
                                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
                                </div>
                                <address>
                                    <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--sm">
                                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq"/>
                                </div>
                                <address>
                                    <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="default-full-width-teaser bg-image-edition-19">
            <div class="default-full-width-teaser__wrapper">
                <div class="default-full-width-teaser__body">
                    <div class="default-full-width-teaser__caption">case study</div>
                    <div class="default-full-width-teaser__header">
                        <h2 class="punch-in bg-image-edition-19">
                            case study headline eggs
                        </h2>
                    </div>
                    <div class="default-full-width-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="default-full-width-teaser__footer">
                        <a href="#" class="link-teaser">mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>