Trainings Overview Page

<main role="main">
    <header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.webp' }}); background-color: var(--overlay-standard-color);">
        <h1 class="standard-header__title">Unser Schulungsangebot</h1>
        <h2 class="standard-header__subtitle">Weil wir Wissen gerne mit Ihnen teilen</h2>
        <div class="standard-header__intro">
            <div class="standard-header__intro__text">
                Sich auf das Wissen von Beratern und externen Dienstleistern zu verlassen ist das Eine, das Wissen im
                eigenen Haus zu vertiefen, um die Leistung Dritter beurteilen zu können das Andere. INNOQ unterstützt
                Sie natürlich auch beim „Anderen“,
                sodass Sie nicht immer auf unsere Projektbegleitung angewiesen sind.
            </div>
        </div>
    </header>


    <article class="page-layout-md--default">
        <p>Wir bieten Schulungen zu bewährten und aktuellen Themen an. Dabei achten wir immer darauf, dass die
            Inhalte einen hohen Praxisbezug haben und wenden einprägsame Methoden an.</p>
        <p>Darüber hinaus können Ihre Mitarbeiter bei uns Ausbildungen zum iSAQB Certified Professional for Software
            Architecture (CPSA) – Foundation Level besuchen und sich anschließend zertifizieren lassen.</p>
    </article>
    <article class="stripe stripe--gray">
        <section class="page-layout-md--default">
            <h3 class="section-heading--primary">Unser Schulungsangebot im Überblick</h3>
            <a class=" list-teaser-training primary">
                <div class="list-teaser__body">
                    <h2 class="list-teaser-training__headline">Titel</h2>
                    <div class="list-teaser-training__caption">Untertitel</div>
                    <div class="label-big badge badge--inverted">Labeltext</div>
                </div>
                <div class="list-teaser__footer">
                    <span class="link-teaser inverted-text-color">Termine &amp; Details</span>
                </div>
            </a>

            <a class="list-teaser-training secondary">
                <div class="list-teaser__body">
                    <h2 class="list-teaser-training__headline">Titel</h2>
                    <div class="list-teaser-training__caption">Untertitel</div>
                    <div class="label-big badge">Labeltext</div>
                </div>
                <div class="list-teaser__footer">
                    <span class="link-teaser inverted-interaction-color">Termine &amp; Details</span>
                </div>
            </a>
            <div class="tile-grid-sm">
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Training Caption</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Training Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                                <div class="label-big badge">
                                    Interaktiv!
                                </div>
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">Termine &amp; Details</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Training Caption</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Training Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">Termine &amp; Details</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Training Caption</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Training Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">Termine &amp; Details</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Training Caption</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Training Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text--sm">
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">Termine &amp; Details</span>
                        </div>
                    </div>
                </a>
            </div>
        </section>
    </article>
    <article class="page-layout-md--default">
            <h3 class="section-heading--primary">Unser Schulungsangebot im Überblick</h3>
            <div class="tile-grid-sm">
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
                <div class="simple-teaser">
                    <div class="simple-teaser__body">
                        <a class="simple-teaser__link">
                            <h5>Inhouse Schulung Titel</h5>
                            <h6>Das ist ein Untertitel</h6>
                        </a>
                    </div>
                    <div class="simple-teaser__footer">
                        <button class="btn btn--small btn--cta" data-label="Jetzt anfragen!">
                            Jetzt anfragen!
                        </button>
                    </div>
                </div>
            </div>
    </article>
    <div class="default-full-width-teaser bg-image-trainings-03">
        <div class="default-full-width-teaser__wrapper">
            <div class="default-full-width-teaser__body">
                <div>
                    <div class="default-full-width-teaser__caption">Individuelle Schulungen</div>
                    <div>
                        <div class="default-full-width-teaser__header">
                            <h2>Auf Ihr Bedürfnis angepasst</h2>
                        </div>
                        <div class="default-full-width-teaser">
                            Ich erhalte Informationen dazu, das ich die Schulungsinhalte individualisieren kann, den
                            Umfang
                            individualisieren kann, etc. Ich erhalte Informationen dazu, das ich die
                            Schulungsinhalte individualisieren
                            kann, den Umfang individualisieren kann, etc. Ich erhalte Informationen dazu, das ich
                            die Schulungsinhalte
                            individualisieren kann, den Umfang individualisieren kann, etc.
                        </div>
                        <div class="default-full-width-teaser__footer">
                            <a href="#" class="btn btn--small btn--cta" data-label="Schulung anfragen">Schulung
                                anfragen</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>