Work Page

<div class="stripe stripe--primary">
    <header
        class="standard-header"
        style="background-image: url({{ path '/assets/bg-images/general/visual-culture-06.webp' }}); background-color: var(--overlay-standard-color);">
        <h1 class="standard-header__title">Arbeiten bei INNOQ</h1>
        <div class="standard-header__intro">
            <div class="standard-header__intro__text">
                Wir suchen immer wieder Menschen, die zu uns passen, unsere Werte und Ansprüche teilen. Erfahrene
                Fachleute ebenso wie Berufsanfänger*innen. Gerne auch Menschen mit ganz neuen Denkweisen oder
                ungewöhnlichen Lebensläufen, die unser Team menschlich wie fachlich bereichern. Wir stellen niemanden
                für ein konkretes Projekt ein, sondern streben immer eine lange Beziehung an, bei der wir voneinander
                lernen können.
            </div>
        </div>
    </header>
</div>

<main role="main" class="work-page">
    <div class="stripe stripe--primary stripe--gradient">
        <div class="container-md container-vertical-spacing-lg">
            <h3>Wenn Vertrauen die Regel ist, braucht es keine Regeln.</h3>
            <p>
                Bevor wir INNOQ gegründet haben, haben wir viel gelernt. Leider auch, wie wir nicht arbeiten wollen.
                Deshalb war von Anfang an unser Ziel, der Arbeitgeber zu sein, bei dem wir auch selbst schon immer gerne
                gearbeitet hätten. Wir wünschen uns immer Kolleg*innen, die Fragen stellen und mitdenken, neugierig,
                lernbereit, kooperativ und tolerant sind. Überzeuge Dich hier selbst, wie wir arbeiten und was wir Dir
                bieten können. Wir freuen uns darauf, Dich kennenzulernen!
            </p>
        </div>

        <div class="container-xl container-vertical-spacing-lg">
            <img
                itemprop="photo"
                src="{{path '/assets/bg-images/general/visual-culture-07.webp'}}"
                alt="INNOQ Mitarbeiter:innen"
            />
            <div class="image-divider-right">
                <div class="image-divider-right-content">
                    <div class="image-divider-right-textbox">
                        <super-quote>
                            <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
                                <p>
                                    Exzellentes Technologie-Know-how ist unsere zentrale Stärke, und dank unserer
                                    Kolleg*innen wächst sie Tag für Tag.
                                </p>
                            </blockquote>
                        </super-quote>
                    </div>
                    <img
                        class="image-divider-right-image"
                        itemprop="photo"
                        src="{{path '/assets/bg-images/general/visual-culture-12.webp'}}"
                        alt="INNOQ Mitarbeiter:innen"
                    />
                </div>
            </div>
        </div>
    </div>

    <div class="container-xl">
        <h3 class="section-heading--primary">Was uns ausmacht</h3>
        <section class="tile-grid-sm">
            <div class="big-content-teaser big-content-teaser--image bg-image-edition-10">
                <div class="big-content-teaser__content">
                    <div class="big-content-teaser__body">
                        <h4 class="big-content-teaser__headline">Austausch</h4>
                        <p class="big-content-teaser__text">
                            Wir leben offenen und konstruktiven Austausch, was zu anspruchsvollen Diskussionen und nicht
                            selten zu Widerspruch führt. Aber Eitelkeiten und Spielchen gibt es nicht. Darauf sind wir
                            stolz.
                        </p>
                    </div>
                </div>
            </div>
            <div class="big-content-teaser big-content-teaser--colored">
                <div class="big-content-teaser__content">
                    <div class="big-content-teaser__body">
                        <h4 class="big-content-teaser__headline">Freie Raum- und Zeiteinteilung</h4>
                        <p class="big-content-teaser__text">
                            Bei uns zählt das Ergebnis. Wenn es das Projekt zulässt, entscheidet man selbst, wie man
                            seine Zeit einteilt und ob man in unseren Räumen oder lieber im Home-Office arbeitet.
                        </p>
                    </div>
                </div>
            </div>
            <div class="big-content-teaser big-content-teaser--inverted">
                <div class="big-content-teaser__content">
                    <div class="big-content-teaser__body">
                        <h4 class="big-content-teaser__headline big-content-teaser__headline--inverted">
                            Offene Ohren
                        </h4>
                        <p class="big-content-teaser__text">
                            Für deine Fragen steht dir dein*e zukünftige*r Mentor*in zur Verfügung. Selbstverständlich
                            hat auch die Geschäftsleitung und das Team immer ein offenes Ohr. Das gilt natürlich auch
                            für langjährige Mitarbeiter*innen. Denn auch wenn alle möglichst selbstständig arbeiten,
                            wird bei INNOQ niemand alleingelassen.
                        </p>
                    </div>
                </div>
            </div>

            <div class="big-content-teaser big-content-teaser--inverted">
                <div class="big-content-teaser__content">
                    <div class="big-content-teaser__body">
                        <h4 class="big-content-teaser__headline big-content-teaser__headline--inverted">Vertrauen</h4>
                        <p class="big-content-teaser__text">
                            Absolutes Vertrauen in unsere Mitarbeiter*innen ist noch so eine Sache, die uns bei INNOQ
                            besonders wichtig ist. Wir verzichten gerne auf Formulare und Prozesse – und verlangen im
                            Gegenzug Entscheidungen mit gesundem Menschenverstand.
                        </p>
                    </div>
                </div>
            </div>
            <div class="big-content-teaser big-content-teaser--image bg-image-edition-10">
                <div class="big-content-teaser__content">
                    <div class="big-content-teaser__body">
                        <h4 class="big-content-teaser__headline">Selbstständigkeit</h4>
                        <p class="big-content-teaser__text">
                            Alle können selbst entscheiden, mit welcher Hard- und Software sie zu den besten Ergebnissen
                            gelangen. Alle bekommen den Rechner, den sie möchten, können die Materialien bestellen, die
                            sie brauchen.
                        </p>
                    </div>
                </div>
            </div>
            <div class="big-content-teaser big-content-teaser--colored">
                <div class="big-content-teaser__content">
                    <div class="big-content-teaser__body">
                        <h4 class="big-content-teaser__headline">Für alle:</h4>
                        <p class="big-content-teaser__text">
                            Wir sind davon überzeugt, dass Vielfalt uns dabei hilft, ein besseres Unternehmen zu werden.
                            Wir suchen Menschen, die zu uns passen, unsere Werte und Ansprüche teilen. Hier werden alle
                            toleriert und akzeptiert, wie sie eben sind. Schließlich können wir uns nicht Diversität und
                            Chancengleichheit auf die Fahnen schreiben, ohne auf die unterschiedlichen Bedürfnisse
                            unserer Mitarbeiter*innen einzugehen. Dazu gehört auch, dass man Privatleben und Familie mit
                            der Arbeit in Einklang bringt.
                        </p>
                    </div>
                </div>
            </div>

            <div class="big-content-teaser big-content-teaser--image bg-image-edition-10">
                <div class="big-content-teaser__content">
                    <div class="big-content-teaser__body">
                        <h4 class="big-content-teaser__headline">Firmenevents</h4>
                        <p class="big-content-teaser__text">
                            Ganz INNOQ trifft sich mehrmals im Jahr zu Firmenevents, bei denen es Fachvorträge gibt,
                            Workshops gehalten werden und neue technische Herausforderungen diskutiert werden. Ein
                            schöner Nebeneffekt: durch den regelmäßigen Austausch lernen wir uns alle besser kennen und
                            bleiben regelmäßig in Kontakt – trotz unterschiedlicher Standorte und individueller
                            Arbeitsmodelle.
                        </p>
                    </div>
                </div>
            </div>
            <div class="big-content-teaser big-content-teaser--inverted">
                <div class="big-content-teaser__content">
                    <div class="big-content-teaser__body">
                        <h4 class="big-content-teaser__headline big-content-teaser__headline--inverted">
                            Weiterbildung
                        </h4>
                        <p class="big-content-teaser__text">
                            Wir räumen allen während der Arbeitszeit genug Freiraum für Weiterbildung ein. Schließlich
                            kann das Wissen oft schon im nächsten Kundenprojekt praktisch angewendet werden. Das Teilen
                            von Wissen ist uns besonders wichtig. Wir ermutigen alle, ihr Wissen durch Blogposts,
                            Artikel in Fachmagazinen, in unserem Podcast oder schlicht bei einem Gespräch mit
                            Kolleg*innen weiterzugeben.
                        </p>
                    </div>
                </div>
            </div>
            <div class="big-content-teaser big-content-teaser--image bg-image-edition-10">
                <div class="big-content-teaser__content">
                    <div class="big-content-teaser__body">
                        <h4 class="big-content-teaser__headline">Keine Hierarchien</h4>
                        <p class="big-content-teaser__text">
                            Selbstverständlich gibt es eine Geschäftsleitung und auch Jobtitel: Consultants, Senior
                            Consultants, Principal Consultants und Fellows. Doch die beschreiben eine Tätigkeit, keine
                            Position. Von erfahrenen Consultants erwarten wir nicht, dass sie eine Management-Rolle
                            übernehmen. Sie dürfen trotz Berufserfahrung noch programmieren, designen oder – abhängig
                            vom Schwerpunkt – in anderer Form inhaltlich in Projekten arbeiten.
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <h3 class="section-heading--primary">Wen wir suchen</h3>
        <div class="topic-teaser bg-image-culture-09">
            <div class="topic-teaser__body">
                <h4 class="topic-teaser__header">P*</h4>
                <div class="topic-teaser__text">
                    Als P* unterstützt Du dabei, Software-Projekte erfolgreich aufzusetzen und Prozesse zu begleiten. Du
                    sorgst durch methodische Begleitung und Beratung für einen reibungslosen Projektablauf und
                    unterstützt sowohl auf Projektebene als auch auf Ebene der Organisation. P* stehen bei uns für
                    verschiedene Rollen der Software-Entwicklung, z.B. Product Owner*in, Projekt- oder
                    Produktmanager*in.
                </div>
                <a href="#" class="btn btn--cta btn--small" data-label="Mehr erfahren" >Mehr erfahren</a>
            </div>
        </div>

        <div class="topic-teaser bg-image-culture-10">
            <div class="topic-teaser__body">
                <h4 class="topic-teaser__header">UX</h4>
                <div class="topic-teaser__text">
                    Design entwickelst du im Team ein Produkt, das auf die Bedürfnisse der Nutzer*innen eingeht und ihre
                    Erwartungen erfüllt. Du sammelst Informationen über das Umfeld und Verhalten, auf deren Grundlage du
                    Navigationskonzepte und Aufgabenabläufe entwirfst. In regelmäßigen Tests und Nutzer*inneninterviews
                    validierst Du Hypothesen und holst Feedback ein.
                </div>
                <a href="#" class="btn btn--cta btn--small" data-label="Mehr erfahren" >Mehr erfahren</a>
            </div>
        </div>

        <div class="topic-teaser bg-image-culture-11">
            <div class="topic-teaser__body">
                <h4 class="topic-teaser__header">Entwickler*innen</h4>
                <div class="topic-teaser__text">
                    Du entwickelst im Team ein Produkt, das Unternehmensziele erfüllt *und* für zufriedene Nutzer*innen
                    sorgt. Du berätst unsere Auftraggeber*innen, übernimmst Verantwortung und entscheidest im Team.
                    Dinge, die keinen Sinn machen, tun wir nicht. Du setzt Technologien ein, die zu dem Problem passen,
                    das wir lösen. Dabei ist von Vorteil, wenn du dich von modernen Technologien begeistern lässt.
                </div>
                <a href="#" class="btn btn--cta btn--small" data-label="Mehr erfahren" >Mehr erfahren</a>
            </div>
        </div>

        <a href="#" class="kununu-link">
            <img itemprop="photo" src="{{path '/assets/logos/kununu-2022.svg'}}" alt="kununu Top Company 2022" />
            <img itemprop="photo" src="{{path '/assets/logos/kununu-2023.png'}}" alt="kununu Top Company 2023" />
            <img itemprop="photo" src="{{path '/assets/logos/kununu-2024.svg'}}" alt="kununu Top Company 2024" />
        </a>

        <a href="https://www.charta-der-vielfalt.de/" class="link-unstyled" style="width: 300px">
            <img itemprop="photo" src="{{path '/assets/logos/CdV.svg'}}" alt="Charta der Vielfalt" />
        </a>

        <section class="contact-person">
            <h3 class="section-heading--primary">Deine Bewerbungsbuddies</h3>
            <h4 class="contact-person__subheading">Sprich uns persönlich an, wir antworten dir gerne.</h4>
            <div class="contact-person__wrapper">
                <div rel="author" class="author-bio author-bio--large" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--xl">
                        <img
                            itemprop="photo"
                            class="avatar__image"
                            src="{{path '/assets/people/andreas-maier.png'}}"
                            alt="Portrait von Andreas Maier"
                        />
                    </div>
                    <address class="author-bio__text">
                        <span rel="author" class="author-bio__name" itemprop="fullName">Andreas Maier</span>
                        <p class="author-bio__expertise" itemprop="knowsAbout">UX, Accessibility</p>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                        <p class="author-bio__info" itemprop="description">seit 2 Jahren dabei.</p>
                        <a class="link-teaser" href="#">Email an Andreas Maier</a>
                    </address>
                </div>
                <div rel="author" class="author-bio author-bio--large" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--xl">
                        <img
                            itemprop="photo"
                            class="avatar__image"
                            src="{{path '/assets/people/anja-kammer.png'}}"
                            alt="Portrait von Anja Kammer"
                        />
                    </div>
                    <address class="author-bio__text">
                        <span rel="author" class="author-bio__name" itemprop="fullName">Anja Kammer</span>
                        <p class="author-bio__expertise" itemprop="knowsAbout">DevOps, Infrastruktur</p>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                        <p class="author-bio__info" itemprop="description">seit 2 Jahren dabei.</p>
                        <a class="link-teaser" href="#">Email an Anja Kammer</a>
                    </address>
                </div>
                <div rel="author" class="author-bio author-bio--large" itemscope itemtype="http://schema.org/Person">
                    <div class="author-bio__image avatar avatar--xl">
                        <img
                            itemprop="photo"
                            class="avatar__image"
                            src="{{path '/assets/people/benjamin-wolf.png'}}"
                            alt="Portrait von Benjamin Wolf"
                        />
                    </div>
                    <address class="author-bio__text">
                        <span rel="author" class="author-bio__name" itemprop="fullName">Benjamin Wolf</span>
                        <p class="author-bio__expertise" itemprop="knowsAbout">Softwarearchitektur, Kaffee</p>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                        <p class="author-bio__info" itemprop="description">seit 4 Jahren dabei.</p>
                        <a class="link-teaser" href="#">Email an Benjamin Wolf</a>
                    </address>
                </div>
            </div>
        </section>
        <h3 class="section-heading--primary">Dein Weg zu uns</h3>
        <div class="textbox-sequence__wrapper container-vertical-spacing-xl">
            <div class="textbox-sequence__box--a">
                <h3 class="textbox-sequence__header">1.<br />Deine Bewerbung</h3>
                <div class="textbox-sequence__text">
                    Schicke Deine Bewerbung mit Lebenslauf an Uschi Nettersheim (jobs@innoq.com). Du erhältst die erste
                    Rückmeldung so schnell wie möglich (innerhalb weniger Tage).
                </div>
                <div
                    class="icon icon--brand-primary icon-arrow-drawn-upright textbox-sequence__icon--topright"
                ></div>
            </div>

            <div class="textbox-sequence__box--b">
                <h3 class="textbox-sequence__header">2.<br />Kennenlernen</h3>
                <div class="textbox-sequence__text">
                    Wir vereinbaren mit Dir ein erstes Vorgespräch mit einem der Geschäftsführer, bei dem wir einen
                    ersten Eindruck von Dir gewinnen möchten. Hier klären wir, was du bei uns machen willst und welche
                    Ausgangslage du mitbringst. Außerdem klären wir grobe Rahmenbedingungen.
                </div>
                <div
                    class="icon icon--brand-primary icon-arrow-drawn-downright textbox-sequence__icon--bottomright"
                ></div>
            </div>

            <div class="textbox-sequence__box--c">
                <h3 class="textbox-sequence__header">3.<br />Gespräch mit den Geschäftsführern</h3>
                <div class="textbox-sequence__text">
                    Du wirst ein Bewerbungsgespräch mit zwei der Geschäftsführer via Zoom haben, bei dem wir Dich noch
                    besser kennenlernen. Dauer: ca. 2 Stunden. Was ist deine Geschichte? Welche Erfahrungen bringst Du
                    mit und was möchtest Du bei uns tun? Warum möchtest Du bei uns arbeiten? Bei uns gibt es außerdem
                    keine Coding Challenge wie in anderen Unternehmen. Überzeug uns einfach von dem, was du weißt in
                    einem kurzen Fachgespräch. Außerdem werden wir Dir alles über INNOQ erzählen, was du möchtest.
                    Außerdem sprechen wir hier auch über deine Gehaltsvorstellungen und wann Du bei uns anfangen kannst.
                </div>
                <div
                    class="icon icon--brand-primary icon-arrow-drawn-downleft textbox-sequence__icon--bottomleft"
                ></div>
            </div>

            <div class="textbox-sequence__box--d">
                <h3 class="textbox-sequence__header">4.<br />Gespräch mit anderen Teammitgliedern</h3>
                <div class="textbox-sequence__text">
                    Optional gibt es noch ein Gespräch mit anderen Teammitgliedern deines Fachgebiets.
                </div>
            </div>

            <div class="textbox-sequence__box--e">
                <h3 class="textbox-sequence__header">5.<br />Unser Jobangebot</h3>
                <div class="textbox-sequence__text">
                    Wir schicken Dir einen Vertragsentwurf zu, bei dem Anmerkungen immer willkommen sind und
                    finalisieren den Bewerbungsprozess mit der digitalen Unterschrift. Und dann kann es losgehen!
                </div>
                <div
                    class="icon icon--brand-primary icon-arrow-drawn-downleft-2 textbox-sequence__icon--topright"
                ></div>
                <div
                    class="icon icon--brand-primary icon-arrow-drawn-downright-2 textbox-sequence__icon--bottomright"
                ></div>
            </div>

            <div class="textbox-sequence__box--f">
                <h3 class="textbox-sequence__header">6.<br />Dein Einstieg</h3>
                <div class="textbox-sequence__text">
                    Du bekommst eine*n Mentor*in an Deine Seite, um Dich bestmöglich zu unterstützen. Die ersten Tage
                    stehen im Zeichen des Ankommens. Du wirst Deine Teammitglieder kennenlernen sowie unsere Kultur,
                    bevor Du dann in Deinem ersten Projekt starten wirst!
                </div>
            </div>
        </div>
    </div>
    <section class="contact-person contact-person--inverted bg-image-culture-08">
        <h3 class="section-heading--primary">Noch Fragen?</h3>
        <h4 class="contact-person__subheading">
            Du möchtest Dich bewerben, hast aber noch Fragen? Sprich uns persönlich an, wir antworten Dir gerne.
        </h4>
        <div class="contact-person__wrapper">
            <div rel="author" class="author-bio author-bio--large" itemscope itemtype="http://schema.org/Person">
                <div class="author-bio__image avatar avatar--xl">
                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/people/uschi-nettersheim.png'}}"
                        alt="Portrait von Uschi Nettersheim" />
                </div>
                <address class="author-bio__text">
                    <span rel="author" class="author-bio__name" itemprop="fullName">Uschi Nettersheim</span>
                    <a class="link-teaser inverted-interaction-color" href="#">Email an Uschi Nettersheim</a>
                </address>
            </div>
        </div>
    </section>
    <section class="container-xl container-vertical-spacing-lg">
        <h2 class="teaser-section-heading--primary">Mehr zum Thema</h2>
        <section class="masonry-grid">
            <a href="#" class="span-4 list-teaser-podcast list-teaser-podcast--avatar--overlay--big"
                style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }}), url({{ path '/assets/example-content/heribert-links.png' }}) ">
                <div class="list-teaser-podcast__body">
                    <div class="list-teaser-podcast__caption">Podcast</div>
                    <h2 class="list-teaser-podcast__headline">Podcast Headline</h2>
                    <h3 class="list-teaser-podcast__subheadline">Podcast Subheadline</h3>
                    <span class="icon icon-arrow-long-right icon--brand-white"></span>
                </div>
                <div class="list-teaser-podcast__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
                </div>
            </a>

            <a href="#" class="span-4 list-teaser-podcast list-teaser-podcast--avatar--overlay--big"
                style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }}), url({{ path '/assets/example-content/heribert-links.png' }}) ">
                <div class="list-teaser-podcast__body">
                    <div class="list-teaser-podcast__caption">Podcast</div>
                    <h2 class="list-teaser-podcast__headline">Podcast Headline</h2>
                    <h3 class="list-teaser-podcast__subheadline">Podcast Subheadline</h3>
                    <span class="icon icon-arrow-long-right icon--brand-white"></span>
                </div>
                <div class="list-teaser-podcast__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">Heribert Innoq</div>
                </div>
            </a>

            <a href="#" class="span-3 list-teaser-abstract primary">
                <div class="list-teaser__body">
                    <div class="list-teaser-abstract__caption">Artikel</div>
                    <h2 class="list-teaser-abstract__headline">Artikel Headline</h2>
                    <p class="list-teaser-abstract__text">
                        Lorem gibson dermatrodes boy nodality neural office sprawl futurity Lado-Acheson count zero
                        interrupt Night City tanto papier-mache kanji corporation meta-lights neurosurgery. Lorem gibson
                        Chiba neon neon motion Mycotoxin Metro Holografix boat RAM AI disposable lights saturation point
                        stimulate boat systemic vehicle.
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </p>
                </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>
            </a>

            <a href="#" class="span-5 list-teaser-abstract secondary">
                <div class="list-teaser__body">
                    <div class="list-teaser-abstract__caption">Artikel</div>
                    <h2 class="list-teaser-abstract__headline">Artikel Headline</h2>
                    <p class="list-teaser-abstract__text">
                        Lorem gibson dermatrodes boy nodality neural office sprawl
                        <span class="icon icon-arrow-long-right icon--brand-white"></span>
                    </p>
                </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>
            </a>
        </section>
    </section>
    <section class="stripe stripe--gray">
        <div class="container-xl container-vertical-spacing-xl">
            <h2 class="section-heading--primary">INNOQ Stories</h2>

            <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="container-md text-align-center">
                <a class="link-teaser" href="#">Mehr INNOQ Stories lesen</a>
            </div>
        </div>
    </section>
</main>