# Landing Page

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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="../../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="../../assets/bg-images/edition-02/edition02-human-02.webp">
            <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 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="../../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(../../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="../../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="../../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="../../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="../../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="../../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="../../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="../../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="../../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="../../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>

`
`

    <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>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .landing-page {
        .service-intro-grid {
          margin-top: $spacer-xl;
        }
      }

  `
- URL: /components/raw/landing-page/_landing-page.scss
- Filesystem Path: components/01-pages/landing-page/_landing-page.scss
- Size: 74 Bytes

- Handle: @landing-page
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/01-pages/landing-page/landing-page.html

No notes defined.