Case Study Overview

<main class="main-layout">
    <div class="container-xl">
        <div class="superhero">
            <h1 class="superhero__lead">Success Stories</h1>
            <p class="superhero__title">Nicht einfach nur Dinge bauen, sondern <span class="superhero__highlight">Mehrwert</span> schaffen.</p>
        </div>
    </div>
    <div class="icon-divider">
        <span class="icon icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
    </div>
    <div class="container-md">
        <long-quote>
            <blockquote class="longquote" itemscope itemtype="http://schema.org/Person">
                <span class="longquote__zigzag"></span>
                <p>
                    Eins ist klar: Ohne Euren Einsatz wären wir noch lange nicht da, wo wir heute stehen.
                    Und das nicht nur aufgrund Eures Wissens und Könnens, sondern weil Ihr echte Teamplayer seid.
                    Und auch methodisch haben wir schon einiges von Euch gelernt. Wir freuen uns auf die weitere
                    Zusammenarbeit!
                </p>
                <cite class="longquote__author" itemprop="name">Rieke Kandel</cite>
                <span class="longquote__role" itemprop="jobTitle">PO & Digital Brand Managerin, Krombacher</span>
            </blockquote>
        </long-quote>
    </div>

    <section class="stripe stripe--gray">
        <div class="container-xl container-vertical-spacing-xl">
            <auto-submit-form>
                <form class="filter-group">
                    <div class="filter-group__item">
                        <label class="filter-label" for="filter">Tag wählen:</label>
                        <select name="filter" id="filter" class="filter-select">
                            <option value="all">All</option>
                            <option value="category1">Category 1</option>
                            <option value="category2">Category 2</option>
                            <option value="category3">Category 3</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn--xsmall">Filtern</button>
                </form>
            </auto-submit-form>
            <div class="masonry-grid">
                <a href="#" class="case-tile-teaser bg-image-edition-12 span-4">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo"
                                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg' }}" />
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 span-4">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 span-3">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo"
                                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg' }}" />
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 span-5">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo"
                                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg' }}" />
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 span-4">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo"
                                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg' }}" />
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 span-4">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 span-5">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo"
                                src="{{ path '/assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg' }}" />
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 span-3">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>

            </div>
        </div>
    </section>

    <section class="container-xl">
        <h2 class="teaser-section-heading">Projektliste</h2>
        <div class="project-index__entry">
            <header class="project-index__header">
                <h2 class="project-index__title">A</h2>
            </header>
            <ul class="project-index__client-projects client-projects">
                <li class="client-projects__client">
                    <header class="client-projects__header">
                        <h2 class="client-projects__client-name">Allianz</h2>
                    </header>
                    <div class="client-projects__project">
                        <div class="client-projects__intro">
                            <h2 class="client-projects__project-title">Frische neue Ideen</h2>
                            <p class="client-projects__intro-text">Dolor commodo dolor id consequat elit cillum tempor
                                ad culpa ipsum ea sint. Minim anim esse proident sint sit laborum tempor dolore cillum
                                aliqua aliqua. Nisi ipsum deserunt minim commodo est ut aliqua.</p>
                        </div>
                        <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                    </div>
                    <div class="client-projects__project">
                        <div class="client-projects__intro">
                            <h2 class="client-projects__project-title">Meteoriteneinschlag in der IT</h2>
                            <p class="client-projects__intro-text">Dolor commodo dolor id consequat elit cillum tempor
                                dolore cillum aliqua aliqua.</p>
                        </div>
                        <multi-toggler aria-hidden="true" class="collapse-toggler client-projects__show-more-btn"
                            data-target-next data-toggle-class="sr-only" data-toggle-self-class="collapsed"
                            data-toggle-on-init>
                            <span class="collapse-toggler__flop">mehr anzeigen
                                <span class="icon icon-plus icon--brand-primary"></span>
                            </span>
                            <span class="collapse-toggler__flip">weniger anzeigen
                                <span class="icon icon-minus icon--brand-primary"></span>
                            </span>
                        </multi-toggler>
                        <p class="client-projects__text">Ipsum ex nisi cillum voluptate qui sunt voluptate nostrud
                            consequat adipisicing in occaecat sit qui. Irure excepteur tempor eu consectetur proident
                            laborum commodo ullamco deserunt excepteur culpa. Excepteur dolore ad veniam et in culpa
                            dolore irure aliqua. Ea fugiat minim cillum exercitation. Culpa ex nulla id consequat
                            pariatur quis non veniam qui consequat ipsum cillum. Sint eiusmod nulla veniam mollit sunt
                            cillum ea adipisicing adipisicing laborum quis ea aliqua. Et sit mollit aliqua irure minim
                            do deserunt proident consectetur consequat.</p>
                    </div>
                </li>
                <li class="client-projects__client">
                    <header class="client-projects__header">
                        <h2 class="client-projects__client-name">AXA</h2>
                    </header>
                    <div class="client-projects__project">
                        <div class="client-projects__intro">
                            <h2 class="client-projects__project-title">Benutzerfreundlich und Agil</h2>
                            <p class="client-projects__intro-text">Dolor commodo dolor id consequat elit cillum tempor
                                ad culpa ipsum ea sint. Minim anim esse proident sint sit laborum tempor dolore cillum
                                aliqua aliqua. Nisi ipsum deserunt minim commodo est ut aliqua.</p>
                        </div>
                        <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                    </div>
                </li>
            </ul>
        </div>

        <div class="project-index__entry">
            <header class="project-index__header">
                <h2 class="project-index__title">B</h2>
            </header>
            <ul class="project-index__client-projects client-projects">
                <li class="client-projects__client">
                    <header class="client-projects__header">
                        <h2 class="client-projects__client-name">Client</h2>
                    </header>
                    <div class="client-projects__project">
                        <div class="client-projects__intro">
                            <h2 class="client-projects__project-title">A very nice project</h2>
                            <p class="client-projects__intro-text">Dolor commodo dolor id consequat elit cillum tempor
                                ad culpa ipsum ea sint. Minim anim esse proident sint sit laborum tempor dolore cillum
                                aliqua aliqua. Nisi ipsum deserunt minim commodo est ut aliqua.</p>
                        </div>
                        <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                    </div>
                </li>
            </ul>
        </div>
    </section>
</main>