# Work Page

Ready

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

`

    <div class="stripe stripe--primary">
        <header class="standard-header" style="background-image: url(../../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="../../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="../../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="../../assets/logos/kununu-2022.svg" alt="kununu Top Company 2022" />
                <img itemprop="photo" src="../../assets/logos/kununu-2023.png" alt="kununu Top Company 2023" />
                <img itemprop="photo" src="../../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="../../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="../../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="../../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="../../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="../../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(../../assets/example-content/heribert-rechts.png), url(../../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(../../assets/example-content/heribert-rechts.png), url(../../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="../../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>
                </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="../../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>

`
`

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

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .work-page {
        .section-heading--primary,
        .teaser-section-heading {
          margin-top: $spacer-lg;
        }

        .superquote > p {
          background-color: inherit;
          box-shadow: none;
        }

        .big-content-teaser__text {
          @extend %body-font-regular;
        }

        .topic-teaser__text {
          @extend %heading-font-regular;

          line-height: $paragraph-line-height;
        }

        @media screen and (min-width: $grid-breakpoint-md) {
          .big-content-teaser {
            min-height: $big-content-teaser-height-sm;
          }
        }

        @media screen and (min-width: $grid-breakpoint-lg) {
          .big-content-teaser__headline {
            font-size: $font-size-xl;
          }

          .topic-teaser {
            min-height: ms(42);
          }
        }
      }

  `
- URL: /components/raw/work-page/_work-page.scss
- Filesystem Path: components/01-pages/culture-pages/work-page/_work-page.scss
- Size: 683 Bytes

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

No notes defined.