Web Design Guide 2023-12-11 10:29:21 | 2.0.0
<header class="header">
    <div class="header__wrapper">
        <div class="header__head">
            <a class="header__logo logo " href="#">
                <img class="logo__image" src="../../images/rehau-logo.svg" alt="">
            </a>

            <a class="header__toggle" href="#" data-action="toggle-nav">
                <span class="header__hamburger"></span>
            </a>
        </div>
        <div class="header__body">
            <a class="header__logo logo -vanishing" href="#">
                <img class="logo__image" src="../../images/rehau-logo.svg" alt="">
            </a>

            <nav class="header__meta-nav meta-nav ">
                <div class="meta-nav__lang-nav lang-nav ">
                    <span class="lang-nav__selection -next">
                        <span class="lang-nav__text">Deutsch</span>
                    </span>
                    <ul class="lang-nav__list">
                        <li class="lang-nav__item ">
                            <a class="lang-nav__link" href="#">
                                <span class="lang-nav__text">English</span>
                            </a>
                        </li>
                        <li class="lang-nav__item ">
                            <a class="lang-nav__link" href="#">
                                <span class="lang-nav__text">Français</span>
                            </a>
                        </li>
                        <li class="lang-nav__item ">
                            <a class="lang-nav__link" href="#">
                                <span class="lang-nav__text">Netherlands</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <ul class="meta-nav__list">
                    <li class="meta-nav__item">
                        <a class="meta-nav__link " href="#">Karriere</a>
                    </li>
                    <li class="meta-nav__item">
                        <a class="meta-nav__link " href="#">Unternehmen</a>
                    </li>
                    <li class="meta-nav__item">
                        <a class="meta-nav__link " href="#">Downloads</a>
                    </li>
                    <li class="meta-nav__item">
                        <a class="meta-nav__link " href="#">Log in</a>
                    </li>
                    <li class="meta-nav__item">
                        <a class="meta-nav__link " href="#">Händlersuche</a>
                    </li>
                </ul>
            </nav>

            <div class="header__search-bar search-bar -vanishing">
                <input class="search-bar__input" type="text" placeholder="Search..." />
                <button class="search-bar__btn"></button>
            </div>

            <nav class="header__main-nav main-nav ">
                <a class="main-nav__back -prev -hide" href="#">Main menu</a>
                <ul class="main-nav__list">
                    <li class="main-nav__item">
                        <a class="main-nav__link -next" href="#">Privatkunden</a>
                        <nav class="main-nav__flyout flyout ">
                            <ul class="flyout__section section__list -grouped">
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Hochbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Elektroinstallation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Erneuerbare Energien</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Fenster und Türen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Heizen und Kühlen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Industrierohrsysteme</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Nahwärme</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Raumakustik</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Sanitärinstallation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Terassensysteme</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Tiefbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Abwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Regenwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Telekommunikation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Verkehrswegebau</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Gasversorgung</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Innenausbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Kanten</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Oberflächen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Schrankrolladen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Wandanschluss</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Sockelblenden</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Terassensystem</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Raumakustik</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Industriebau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Trinkwasserversorgung</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Kältetransport</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Industrieabwasser</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Tiefbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Abwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Regenwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Telekommunikation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Verkehrswegebau</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Gasversorgung</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="flyout__service service__list">
                                <li class="service__item">
                                    <a class="service__link" href="#">Referenzen</a>
                                </li>
                                <li class="service__item">
                                    <a class="service__link" href="#">Services</a>
                                </li>
                                <li class="service__item">
                                    <a class="service__link" href="#">Akademie</a>
                                </li>
                            </ul>
                        </nav>

                    </li>
                    <li class="main-nav__item">
                        <a class="main-nav__link -next" href="#">Handwerker und Bauunternehmer</a>
                        <nav class="main-nav__flyout flyout ">
                            <ul class="flyout__section section__list -grouped">
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Hochbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Elektroinstallation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Erneuerbare Energien</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Fenster und Türen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Heizen und Kühlen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Industrierohrsysteme</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Nahwärme</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Raumakustik</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Sanitärinstallation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Terassensysteme</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Tiefbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Abwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Regenwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Telekommunikation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Verkehrswegebau</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Gasversorgung</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Innenausbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Kanten</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Oberflächen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Schrankrolladen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Wandanschluss</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Sockelblenden</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Terassensystem</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Raumakustik</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Industriebau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Trinkwasserversorgung</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Kältetransport</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Industrieabwasser</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Tiefbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Abwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Regenwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Telekommunikation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Verkehrswegebau</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Gasversorgung</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="flyout__service service__list">
                                <li class="service__item">
                                    <a class="service__link" href="#">Referenzen</a>
                                </li>
                                <li class="service__item">
                                    <a class="service__link" href="#">Services</a>
                                </li>
                                <li class="service__item">
                                    <a class="service__link" href="#">Akademie</a>
                                </li>
                            </ul>
                        </nav>

                    </li>
                    <li class="main-nav__item">
                        <a class="main-nav__link -active -next" href="#">Architekten und Planer</a>
                        <nav class="main-nav__flyout flyout ">
                            <ul class="flyout__section section__list -grouped">
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Hochbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Elektroinstallation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Erneuerbare Energien</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Fenster und Türen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Heizen und Kühlen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Industrierohrsysteme</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Nahwärme</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Raumakustik</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Sanitärinstallation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Terassensysteme</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Tiefbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Abwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Regenwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Telekommunikation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Verkehrswegebau</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Gasversorgung</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Innenausbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Kanten</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Oberflächen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Schrankrolladen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Wandanschluss</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Sockelblenden</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Terassensystem</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Raumakustik</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Industriebau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Trinkwasserversorgung</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Kältetransport</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Industrieabwasser</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Tiefbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Abwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Regenwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Telekommunikation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Verkehrswegebau</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Gasversorgung</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="flyout__service service__list">
                                <li class="service__item">
                                    <a class="service__link" href="#">Referenzen</a>
                                </li>
                                <li class="service__item">
                                    <a class="service__link" href="#">Services</a>
                                </li>
                                <li class="service__item">
                                    <a class="service__link" href="#">Akademie</a>
                                </li>
                            </ul>
                        </nav>

                    </li>
                    <li class="main-nav__item">
                        <a class="main-nav__link -next" href="#">Industrie</a>
                        <nav class="main-nav__flyout flyout ">
                            <ul class="flyout__section section__list -grouped">
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Hochbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Elektroinstallation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Erneuerbare Energien</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Fenster und Türen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Heizen und Kühlen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Industrierohrsysteme</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Nahwärme</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Raumakustik</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Sanitärinstallation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Terassensysteme</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Tiefbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Abwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Regenwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Telekommunikation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Verkehrswegebau</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Gasversorgung</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Innenausbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Kanten</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Oberflächen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Schrankrolladen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Wandanschluss</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Sockelblenden</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Terassensystem</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Raumakustik</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Industriebau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Trinkwasserversorgung</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Kältetransport</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Industrieabwasser</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Tiefbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Abwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Regenwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Telekommunikation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Verkehrswegebau</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Gasversorgung</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="flyout__service service__list">
                                <li class="service__item">
                                    <a class="service__link" href="#">Referenzen</a>
                                </li>
                                <li class="service__item">
                                    <a class="service__link" href="#">Services</a>
                                </li>
                                <li class="service__item">
                                    <a class="service__link" href="#">Akademie</a>
                                </li>
                            </ul>
                        </nav>

                    </li>
                    <li class="main-nav__item">
                        <a class="main-nav__link -next" href="#">Investoren und öffentliche Bauherren</a>
                        <nav class="main-nav__flyout flyout ">
                            <ul class="flyout__section section__list -grouped">
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Hochbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Elektroinstallation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Erneuerbare Energien</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Fenster und Türen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Heizen und Kühlen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Industrierohrsysteme</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Nahwärme</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Raumakustik</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Sanitärinstallation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Terassensysteme</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Tiefbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Abwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Regenwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Telekommunikation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Verkehrswegebau</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Gasversorgung</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Innenausbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Kanten</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Oberflächen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Schrankrolladen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Wandanschluss</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Sockelblenden</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Terassensystem</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Raumakustik</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Industriebau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Trinkwasserversorgung</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Kältetransport</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Industrieabwasser</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Tiefbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Abwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Regenwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Telekommunikation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Verkehrswegebau</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Gasversorgung</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="flyout__service service__list">
                                <li class="service__item">
                                    <a class="service__link" href="#">Referenzen</a>
                                </li>
                                <li class="service__item">
                                    <a class="service__link" href="#">Services</a>
                                </li>
                                <li class="service__item">
                                    <a class="service__link" href="#">Akademie</a>
                                </li>
                            </ul>
                        </nav>

                    </li>
                    <li class="main-nav__item">
                        <a class="main-nav__link -next" href="#">Handel</a>
                        <nav class="main-nav__flyout flyout ">
                            <ul class="flyout__section section__list -grouped">
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Hochbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Elektroinstallation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Erneuerbare Energien</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Fenster und Türen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Heizen und Kühlen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Industrierohrsysteme</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Nahwärme</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Raumakustik</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Sanitärinstallation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Terassensysteme</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Tiefbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Abwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Regenwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Telekommunikation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Verkehrswegebau</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Gasversorgung</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Innenausbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Kanten</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Oberflächen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Schrankrolladen</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Wandanschluss</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Sockelblenden</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Terassensystem</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Raumakustik</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Industriebau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Trinkwasserversorgung</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Kältetransport</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Industrieabwasser</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="section__item">
                                    <a class="section__link -next" href="#">Tiefbau</a>
                                    <ul class="section__sub-section sub-section__list section__second-level">
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Abwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Regenwasser</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Telekommunikation</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Verkehrswegebau</a>
                                        </li>
                                        <li class="sub-section__item ">
                                            <a class="sub-section__link" href="#">Gasversorgung</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <ul class="flyout__service service__list">
                                <li class="service__item">
                                    <a class="service__link" href="#">Referenzen</a>
                                </li>
                                <li class="service__item">
                                    <a class="service__link" href="#">Services</a>
                                </li>
                                <li class="service__item">
                                    <a class="service__link" href="#">Akademie</a>
                                </li>
                            </ul>
                        </nav>

                    </li>
                </ul>
            </nav>

        </div>
        <div class="header__foot">
            <div class="header__search-bar search-bar ">
                <input class="search-bar__input" type="text" placeholder="Search..." />
                <button class="search-bar__btn"></button>
            </div>

        </div>
    </div>
</header>

<div class="container -full">
    <div class="grid-x grid-margin-x grid-margin-y -halve">
        <div class="cell large-4"><a href="#" class="link__teaser">
                <div class=" teaser teaser--overlay -light -bottom">
                    <div class="teaser__visual">
                        <div class="teaser__image media -ar-large-7x10 -ar-medium-2x1">
                            <img class="media__item" src="/demo/teaser/teaser7.jpg" alt=Klettsystem Rautherm Speed>
                        </div>

                    </div>

                    <div class="teaser__signet"><span>New</span></div>

                    <div class="teaser__content">

                        <span class="teaser__headline h2">
                            Handwerker und Bauunternehmer
                        </span>
                        <div class="teaser__text">
                            <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                        </div>

                        <div class="teaser__cta">
                            <span class="teaser__btn-wrapper">
                                <span class="teaser__btn btn "> More
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </a></div>
        <div class="cell large-8">
            <div class="grid-x grid-margin-x grid-margin-y -halve">
                <div class="cell"><a href="#" class="link__teaser">
                        <div class=" teaser teaser--highlight -light">
                            <div class="teaser__visual">
                                <div class="teaser__image media -ar-large-14x5 -ar-medium-2x1">
                                    <img class="media__item" src="/demo/teaser/teaser8.jpg" alt=Klettsystem Rautherm Speed>
                                </div>

                            </div>

                            <div class="teaser__signet"><span>New</span></div>

                            <div class="teaser__content">

                                <span class="teaser__headline h2">
                                    Handwerker und Bauunternehmer
                                </span>
                                <div class="teaser__text">
                                    <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                                </div>

                                <div class="teaser__cta">
                                    <span class="teaser__btn-wrapper">
                                        <span class="teaser__btn btn "> More
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a></div>
                <div class="cell medium-6"><a href="#" class="link__teaser">
                        <div class=" teaser teaser--highlight -dark">
                            <div class="teaser__visual">
                                <div class="teaser__image media ">
                                    <img class="media__item" src="/demo/teaser/teaser5.jpg" alt=Klettsystem Rautherm Speed>
                                </div>

                            </div>

                            <div class="teaser__signet"><span>New</span></div>

                            <div class="teaser__content">

                                <span class="teaser__headline h2">
                                    Handwerker und Bauunternehmer
                                </span>
                                <div class="teaser__text">
                                    <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                                </div>

                                <div class="teaser__cta">
                                    <span class="teaser__btn-wrapper">
                                        <button class="teaser__btn btn "> More
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a></div>
                <div class="cell medium-6"><a href="#" class="link__teaser">
                        <div class=" teaser teaser--overlay -dark">
                            <div class="teaser__visual">
                                <div class="teaser__image media ">
                                    <img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
                                </div>

                            </div>

                            <div class="teaser__signet"><span>New</span></div>

                            <div class="teaser__content">

                                <span class="teaser__headline h2">
                                    Handwerker und Bauunternehmer
                                </span>
                                <div class="teaser__text">
                                    <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                                </div>

                                <div class="teaser__cta">
                                    <span class="teaser__btn-wrapper">
                                        <span class="teaser__btn btn "> More
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a></div>
            </div>
        </div>
    </div>
</div>
<div class="container -st-small -sb-large">
    <p class="h2 section-headline">News</p>
    <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell medium-6 large-3"><a href="#" class="link__teaser">
                <div class=" teaser teaser--simple">
                    <div class="teaser__visual">
                        <div class="teaser__image media ">
                            <img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
                        </div>

                    </div>

                    <div class="teaser__content">
                        <span class="teaser__date -event">10.01.12</span>
                        <span class="teaser__headline h2">
                            Handwerker und Bauunternehmer
                        </span>
                        <div class="teaser__text">
                            <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung. Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                        </div>

                        <div class="teaser__cta">
                            <span class="teaser__link">More</span>
                        </div>
                    </div>
                </div>
            </a></div>
        <div class="cell medium-6 large-3"><a href="#" class="link__teaser">
                <div class=" teaser teaser--simple">
                    <div class="teaser__visual">
                        <div class="teaser__image media ">
                            <img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
                        </div>

                    </div>

                    <div class="teaser__signet"><span>New</span></div>

                    <div class="teaser__content">
                        <span class="teaser__date -event">10.01.12</span>
                        <span class="teaser__headline h2">
                            Handwerker und Bauunternehmer
                        </span>
                        <div class="teaser__text">
                            <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung. Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                        </div>

                        <div class="teaser__cta">
                            <span class="teaser__btn-wrapper">
                                <span class="teaser__btn btn "> More
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </a></div>
        <div class="cell medium-6 large-3"><a href="#" class="link__teaser">
                <div class=" teaser teaser--simple">
                    <div class="teaser__visual">
                        <div class="teaser__image media ">
                            <img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
                        </div>

                    </div>

                    <div class="teaser__content">
                        <span class="teaser__date -event">10.01.12</span>
                        <span class="teaser__headline h2">
                            Handwerker und Bauunternehmer
                        </span>
                        <div class="teaser__text">
                            <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung. Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                        </div>

                        <div class="teaser__cta">
                            <span class="teaser__link">More</span>
                        </div>
                    </div>
                </div>
            </a></div>
        <div class="cell medium-6 large-3"><a href="#" class="link__teaser">
                <div class=" teaser teaser--simple">
                    <div class="teaser__visual">
                        <div class="teaser__image media ">
                            <img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
                        </div>

                    </div>

                    <div class="teaser__signet"><span>New</span></div>

                    <div class="teaser__content">
                        <span class="teaser__date -event">10.01.12</span>
                        <span class="teaser__headline h2">
                            Handwerker und Bauunternehmer
                        </span>
                        <div class="teaser__text">
                            <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung. Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                        </div>

                        <div class="teaser__cta">
                            <span class="teaser__btn-wrapper">
                                <span class="teaser__btn btn "> More
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </a></div>
    </div>
</div>
</div>
<div class="container -st-small -sb-large">
    <p class="h2 section-headline">Events / Messen / Seminare</p>
    <div class="grid-x grid-margin-x grid-margin-y large-up-2">
        <div class="cell"><a href="#" class="link__teaser">
                <div class=" teaser teaser--horizontal -narrow">
                    <div class="teaser__visual">
                        <div class="teaser__image media ">
                            <img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
                        </div>

                    </div>

                    <div class="teaser__content">
                        <span class="teaser__date -event">10.01.12</span>
                        <span class="teaser__headline h2">
                            Handwerker und Bauunternehmer
                        </span>
                        <div class="teaser__text">
                            <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                        </div>

                        <div class="teaser__cta">
                            <span class="teaser__btn-wrapper">
                                <button class="teaser__btn btn "> More
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </a></div>
        <div class="cell"><a href="#" class="link__teaser">
                <div class=" teaser teaser--horizontal -narrow">
                    <div class="teaser__visual">
                        <div class="teaser__image media ">
                            <img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
                        </div>

                    </div>

                    <div class="teaser__content">
                        <span class="teaser__date -event">10.01.12</span>
                        <span class="teaser__headline h2">
                            Handwerker und Bauunternehmer
                        </span>
                        <div class="teaser__text">
                            <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                        </div>

                        <div class="teaser__cta">
                            <span class="teaser__btn-wrapper">
                                <button class="teaser__btn btn "> More
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </a></div>
        <div class="cell"><a href="#" class="link__teaser">
                <div class=" teaser teaser--horizontal -narrow">
                    <div class="teaser__visual">
                        <div class="teaser__image media ">
                            <img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
                        </div>

                    </div>

                    <div class="teaser__content">
                        <span class="teaser__date -event">10.01.12</span>
                        <span class="teaser__headline h2">
                            Handwerker und Bauunternehmer
                        </span>
                        <div class="teaser__text">
                            <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                        </div>

                        <div class="teaser__cta">
                            <span class="teaser__btn-wrapper">
                                <button class="teaser__btn btn "> More
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </a></div>
        <div class="cell"><a href="#" class="link__teaser">
                <div class=" teaser teaser--horizontal -narrow">
                    <div class="teaser__visual">
                        <div class="teaser__image media ">
                            <img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
                        </div>

                    </div>

                    <div class="teaser__content">
                        <span class="teaser__date -event">10.01.12</span>
                        <span class="teaser__headline h2">
                            Handwerker und Bauunternehmer
                        </span>
                        <div class="teaser__text">
                            <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                        </div>

                        <div class="teaser__cta">
                            <span class="teaser__btn-wrapper">
                                <button class="teaser__btn btn "> More
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </a></div>
    </div>
</div>
<div class="container -st-small -sb-large">
    <p class="h2 section-headline">Events</p>
    <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell"><a href="#" class="link__teaser">
                <div class=" teaser teaser--horizontal">
                    <div class="teaser__visual">
                        <div class="teaser__image media ">
                            <img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
                        </div>

                    </div>

                    <div class="teaser__content">
                        <span class="teaser__date -event">10.01.12</span>
                        <span class="teaser__headline h2">
                            Handwerker und Bauunternehmer
                        </span>
                        <div class="teaser__text">
                            <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                        </div>

                    </div>
                </div>
            </a></div>
        <div class="cell"><a href="#" class="link__teaser">
                <div class=" teaser teaser--horizontal">
                    <div class="teaser__visual">
                        <div class="teaser__image media ">
                            <img class="media__item" src="/demo/teaser/teaser2.jpg" alt=Klettsystem Rautherm Speed>
                        </div>

                    </div>

                    <div class="teaser__content">
                        <span class="teaser__date -event">10.01.12</span>
                        <span class="teaser__headline h2">
                            Handwerker und Bauunternehmer
                        </span>
                        <div class="teaser__text">
                            <p>Das schnelle 1-Mann-System für die Flächenheizung/-kühlung</p>
                        </div>

                    </div>
                </div>
            </a></div>
    </div>
</div>
<div class="container -st-small -sb-small">
    <a id="ihr-vorteil--die-lebenzykluskosten-fest-im-griff">
        <!-- --></a>
    <p class="h2">Ihr Vorteil: Die Lebenzykluskosten fest im Griff</p>
    <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell medium-4">
            <div class="grid-x grid-margin-x grid-margin-y">
                <div class="cell -bg-black -cs-white">
                    <p class="h3">Schneller geplant mit Rundum-Betreuung<br><br>&nbsp;</p>
                </div>
                <div class="cell -green -bg-secondary -cs-light">
                    <p class="h3 -center -ta-center">Planung</p>
                </div>
                <div class="cell -bg-white -cs-dark">
                    <p><strong>EINFACH ZU PLANEN AUCH IN SCHWIERIGEN EINBAUSITUATIONEN</strong></p>
                    <p>Ideal für geringe Verlegetiefen und auch große Überdeckungen dank passendem Formteilprogramm für eine
                        einheitliche Mindest-Ringsteifigkeit</p>
                    <p><strong>FACHLICHE PLANUNGSUNTERTÜTZUNG</strong></p>
                    <ul class="list -unordered">
                        <li class="list__item">Wirtschaftlichkeitsberechnungen</li>
                        <li class="list__item">Berechnungen zu Rohrstatik und Rohrleitungshydaulik</li>
                        <li class="list__item">CAD-Daten</li>
                        <li class="list__item">Auschreibungstexte</li>
                    </ul>
                    <p><strong>MIT PASSENDER SOFTWARE</strong></p>
                    <ul class="list -unordered">
                        <li class="list__item">Net-san Kanalplanungssoftware</li>
                        <li class="list__item">Online-Statik-Rechner</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="cell medium-4">
            <div class="grid-x grid-margin-x grid-margin-y">
                <div class="cell -bg-black -cs-white">
                    <p class="h3">Kosten sparen bei Transport, Montage und Erdaushub<br><br>&nbsp;</p>
                </div>
                <div class="cell -green -bg-secondary -cs-light">
                    <p class="h3 -center -ta-center">Ausführung</p>
                </div>
                <div class="cell -bg-white -cs-dark">
                    <p><strong>GERINGERE TRANSPORTKOSTEN</strong></p>
                    <ul class="list -unordered">
                        <li class="list__item">Durch kleiner dimensionierte Fahrzeuge</li>
                        <li class="list__item">Die hohe Schlagfestigkeit unseres Materials PP schützt vor Schäden beim Transport.
                        </li>
                    </ul>
                    <p><strong>GERINGERE MONTAGEKOSTEN</strong><br>Leichter als Beton oder Steinzeug ist AWADUKT PP schneller
                        montiert und verlegt.</p>
                    <p><strong>EINSPARUNGEN BEI ERDARBEITEN</strong><br>Bedarfsgerechte Schachtplanung verringert durch reduzierte
                        Abmessungen die notwendigen Erdarbeiten.</p>
                </div>
            </div>
        </div>
        <div class="cell medium-4">
            <div class="grid-x grid-margin-x grid-margin-y">
                <div class="cell -bg-black -cs-white">
                    <p class="h3">Lange Abschreibungszeiträume, geringere Instandhaltungskosten, nachhaltig und zukunftssicher</p>
                </div>
                <div class="cell -green -bg-secondary -cs-light">
                    <p class="h3 -center -ta-center">Betrieb</p>
                </div>
                <div class="cell -bg-white -cs-dark">
                    <p><strong>GERINGE ABSCHREIBUNGSKOSTEN</strong></p>
                    <ul class="list -unordered">
                        <li class="list__item">100 Jahre Lebensdauer, attestiert durch Landesgewerbeanstalt Nürnberg</li>
                        <li class="list__item">Schächte und Verbindungen: 100 % dauerhaft dicht durch lastfreie
                            Schachtelementdichtung und Safety-Lock- System</li>
                    </ul>
                    <p><strong>EINSPARUNGEN BEI INSTANDHALTUNGSKOSTEN</strong></p>
                    <ul class="list -unordered">
                        <li class="list__item">Nachgewiesene Wurzelfestigkeit des Gesamtsystems</li>
                        <li class="list__item">pH-beständig und korrosionssicher durch Einsatz von 100 % Polypropylen</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container -st-small -sb-large">
    <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell medium-4">
            <div class="grid-x grid-margin-x grid-margin-y">
                <div class="cell -bg-white -cs-dark">
                    <p><strong>PARAGRAPH</strong></p>

                    <ul class=" list -unordered">
                        <li class="list__item">schnelle Verlegung von großen Nennweiten
                        </li>
                        <li class="list__item">RAUMAT auf einen Blick
                            <ul class=" list -unordered">
                                <li class="list__item">Vliese aus weißen Primärfasern
                                </li>
                                <li class="list__item">Versicker- und Transportrohre für unterschiedliche Einsatzfälle, z.B. Versickerung, Rückhaltung und Nutzung
                                </li>
                                <li class="list__item">Flächengewicht von 120 bis 200 g/m²
                                </li>
                            </ul>
                        </li>
                        <li class="list__item">Ringsteifigkeit SN8 oder SN16
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="teaser teaser--simple" data-cm-metadata="[{&quot;_&quot;:{&quot;$Ref&quot;:&quot;content/113054&quot;}}]">
    <div class="teaser__content">
        <span class="teaser__headline h4" data-cm-metadata="[{&quot;_&quot;:&quot;properties.teaserTitle&quot;}]">
            REHAU Smart Guard Fachbetriebe in Ihrer Nähe
        </span>
        <div class="teaser__text" data-cm-metadata="[{&quot;_&quot;:&quot;properties.teaserText&quot;}]">
            <p>Sie suchen einen qualifizierten REHAU Smart Guard Fachbetrieb in Ihrer Nähe? Hier finden Sie schnell kompetente
                Anbieter, die Sie direkt kontaktieren können.</p>
        </div>
    </div>
    <!-- BEGIN com.rehau.cms.cae.contentbeans.REHDealerFinderImpl$$[id=113054] _callToAction FreemarkerView[template=/WEB&#8211;INF/templates/rehau&#8211;2019/com.rehau.cms.common.contentbeans/REHDealerFinder._callToAction.ftl] -->
    <div class="teaser__cta">
        <div class="search">
            <form class="search__field" action="/blueprint/servlet/de-de/smartguard-dealerfinder" method="get" role="search" autocomplete="off">
                <div class="container -full">
                    <div class="grid-x grid-margin-x grid-margin-y">
                        <div class="cell shrink">
                            <input type="text" class="input -w-auto" name="address" placeholder="Stadt oder Postleitzahl">
                        </div>
                        <div class="cell shrink"><button class="btn -icon-only -fill -search"></button></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- END com.rehau.cms.cae.contentbeans.REHDealerFinderImpl$$[id=113054] _callToAction FreemarkerView[template=/WEB&#8211;INF/templates/rehau&#8211;2019/com.rehau.cms.common.contentbeans/REHDealerFinder._callToAction.ftl] -->
</div>

<div class=" go-top -bg-gray-lighter">
    <a href="#" class="go-top__link"></a>
</div>

<div class=" extra -bg-primary">
    <div class="extra__container container">
        <div class=" claim ">
            <p class="claim__text">Engineering progress</p>
            <p class="claim__text">Enhancing lives</p>
        </div>

    </div>
</div>

<footer class="footer">
    <div class="footer__main">
        <div class="container">
            <div class="grid-x grid-margin-x grid-margin-y">
                <div class="cell medium-4 large-3">
                    <p class="h4 footer__title">Unsere Services</p>

                    <ul class=" list ">
                        <li class="list__item"><a href="#">Materialinformationen</a>
                        </li>
                        <li class="list__item"><a href="#">Liefer-& Zahlungsbedingungen</a>
                        </li>
                        <li class="list__item"><a href="#">Gelangensbestätigung</a>
                        </li>
                        <li class="list__item"><a href="#">Downloads</a>
                        </li>
                        <li class="list__item"><a href="#">Händlersuche</a>
                        </li>
                    </ul>
                </div>
                <div class="cell pre-medium-auto">
                    <div class="footer__contact contact ">
                        <p class="h4 contact__title">REHAU AG + CO | Kontakt</p>
                        <div class="contact__list">
                            <div class="contact__address address ">
                                <p class="address__info">
                                    <a class="address__link" href="">Rheniumhaus<br>Otto-Hahn-Straße 2<br>95111 Rehau | DE</a>
                                </p>

                                <p class="address__info">
                                    <a class="address__link" href="tel:+499283770">+ 49 9283 77-0</a>
                                </p>
                                <p class="address__info">
                                    <a class="address__link" href="mailto:info@rehau.com?subject=feedback">info@rehau.com</a>
                                </p>
                            </div>

                            <div class="contact__address address ">
                                <p class="address__info">
                                    <a class="address__link" href="">Eltersdorf<br>Ytterbium 4<br>91058 Erlangen | DE</a>
                                </p>

                                <p class="address__info">
                                    <a class="address__link" href="tel:+4991319250">+ 49 9131 92-50</a>
                                </p>
                                <p class="address__info">
                                    <a class="address__link" href="mailto:erlangen@rehau.com?subject=feedback">erlangen@rehau.com</a>
                                </p>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="footer__cell cell large-shrink">
                    <div class="footer__social-media social-media ">

                        <ul class="social-media__list list -social-icons">
                            <li class="list__item"><a href="#"><i class='icon -facebook'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -twitter'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -linkedin'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -google'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -xing'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -youtube'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -instagram'></i></a>
                            </li>
                            <li class="list__item"><a href="#"><i class='icon -pinterest'></i></a>
                            </li>
                        </ul>

                        <ul class="social-media__list list -social-buttons">
                            <li class="list__item"><a href="#"><img src="/images/app-store.png"></a>
                            </li>
                            <li class="list__item"><a href="#"><img src="/images/google-play.png"></a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="footer__nav">
        <div class="container">
            <div class="grid-x grid-margin-x grid-margin-y">
                <div class="cell medium-auto">

                    <ul class="footer__list list -horizontal">
                        <li class="list__item"><a href="#">Unternehmen</a>
                        </li>
                        <li class="list__item"><a href="#">Karierre</a>
                        </li>
                        <li class="list__item"><a href="#">Presse</a>
                        </li>
                        <li class="list__item"><a href="#">Downloads</a>
                        </li>
                        <li class="list__item"><a href="#">Unternehmensmagazin</a>
                        </li>
                        <li class="list__item"><a href="#">Impressum</a>
                        </li>
                        <li class="list__item"><a href="#">Datenschutz</a>
                        </li>
                    </ul>
                </div>
                <div class="cell medium-shrink">
                    <div class="footer__country-selector select -country-selector">
                        <select>
                            <option value="Germany">
                                Germany
                            </option>
                            <option value="Lithuania">
                                Lithuania
                            </option>
                        </select>
                    </div>

                </div>
            </div>
        </div>
    </div>
</footer>
{{render '@organisms-header' header-organism merge=true}}
<div class="container -full">
  <div class="grid-x grid-margin-x grid-margin-y -halve">
    <div class="cell large-4">{{render '@molecules-teaser--light-overlay' teaser1 merge=true}}</div>
    <div class="cell large-8">
      <div class="grid-x grid-margin-x grid-margin-y -halve">
        <div class="cell">{{render '@molecules-teaser--light-highlight' teaser2 merge=true}}</div>
        <div class="cell medium-6">{{render '@molecules-teaser--dark-highlight' teaser3 merge=true}}</div>
        <div class="cell medium-6">{{render '@molecules-teaser--dark-overlay'}}</div>
      </div>
    </div>
  </div>
</div>
<div class="container -st-small -sb-large">
  <p class="h2 section-headline">News</p>
  <div class="grid-x grid-margin-x grid-margin-y">
    <div class="cell medium-6 large-3">{{render '@molecules-teaser'}}</div>
    <div class="cell medium-6 large-3">{{render '@molecules-teaser--simple'}}</div>
    <div class="cell medium-6 large-3">{{render '@molecules-teaser'}}</div>
    <div class="cell medium-6 large-3">{{render '@molecules-teaser--simple'}}</div>
  </div>
</div>
</div>
<div class="container -st-small -sb-large">
  <p class="h2 section-headline">Events / Messen / Seminare</p>
  <div class="grid-x grid-margin-x grid-margin-y large-up-2">
    <div class="cell">{{render '@molecules-teaser--horizontal' eventsTeaser merge=true}}</div>
    <div class="cell">{{render '@molecules-teaser--horizontal' eventsTeaser merge=true}}</div>
    <div class="cell">{{render '@molecules-teaser--horizontal' eventsTeaser merge=true}}</div>
    <div class="cell">{{render '@molecules-teaser--horizontal' eventsTeaser merge=true}}</div>
  </div>
</div>
<div class="container -st-small -sb-large">
  <p class="h2 section-headline">Events</p>
  <div class="grid-x grid-margin-x grid-margin-y">
    <div class="cell">{{render '@molecules-teaser--horizontal'}}</div>
    <div class="cell">{{render '@molecules-teaser--horizontal'}}</div>
  </div>
</div>
<div class="container -st-small -sb-small">
  <a id="ihr-vorteil--die-lebenzykluskosten-fest-im-griff">
    <!-- --></a>
  <p class="h2">Ihr Vorteil: Die Lebenzykluskosten fest im Griff</p>
  <div class="grid-x grid-margin-x grid-margin-y">
    <div class="cell medium-4">
      <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell -bg-black -cs-white">
          <p class="h3">Schneller geplant mit Rundum-Betreuung<br><br>&nbsp;</p>
        </div>
        <div class="cell -green -bg-secondary -cs-light">
          <p class="h3 -center -ta-center">Planung</p>
        </div>
        <div class="cell -bg-white -cs-dark">
          <p><strong>EINFACH ZU PLANEN AUCH IN SCHWIERIGEN EINBAUSITUATIONEN</strong></p>
          <p>Ideal für geringe Verlegetiefen und auch große Überdeckungen dank passendem Formteilprogramm für eine
            einheitliche Mindest-Ringsteifigkeit</p>
          <p><strong>FACHLICHE PLANUNGSUNTERTÜTZUNG</strong></p>
          <ul class="list -unordered">
            <li class="list__item">Wirtschaftlichkeitsberechnungen</li>
            <li class="list__item">Berechnungen zu Rohrstatik und Rohrleitungshydaulik</li>
            <li class="list__item">CAD-Daten</li>
            <li class="list__item">Auschreibungstexte</li>
          </ul>
          <p><strong>MIT PASSENDER SOFTWARE</strong></p>
          <ul class="list -unordered">
            <li class="list__item">Net-san Kanalplanungssoftware</li>
            <li class="list__item">Online-Statik-Rechner</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="cell medium-4">
      <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell -bg-black -cs-white">
          <p class="h3">Kosten sparen bei Transport, Montage und Erdaushub<br><br>&nbsp;</p>
        </div>
        <div class="cell -green -bg-secondary -cs-light">
          <p class="h3 -center -ta-center">Ausführung</p>
        </div>
        <div class="cell -bg-white -cs-dark">
          <p><strong>GERINGERE TRANSPORTKOSTEN</strong></p>
          <ul class="list -unordered">
            <li class="list__item">Durch kleiner dimensionierte Fahrzeuge</li>
            <li class="list__item">Die hohe Schlagfestigkeit unseres Materials PP schützt vor Schäden beim Transport.
            </li>
          </ul>
          <p><strong>GERINGERE MONTAGEKOSTEN</strong><br>Leichter als Beton oder Steinzeug ist AWADUKT PP schneller
            montiert und verlegt.</p>
          <p><strong>EINSPARUNGEN BEI ERDARBEITEN</strong><br>Bedarfsgerechte Schachtplanung verringert durch reduzierte
            Abmessungen die notwendigen Erdarbeiten.</p>
        </div>
      </div>
    </div>
    <div class="cell medium-4">
      <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell -bg-black -cs-white">
          <p class="h3">Lange Abschreibungszeiträume, geringere Instandhaltungskosten, nachhaltig und zukunftssicher</p>
        </div>
        <div class="cell -green -bg-secondary -cs-light">
          <p class="h3 -center -ta-center">Betrieb</p>
        </div>
        <div class="cell -bg-white -cs-dark">
          <p><strong>GERINGE ABSCHREIBUNGSKOSTEN</strong></p>
          <ul class="list -unordered">
            <li class="list__item">100 Jahre Lebensdauer, attestiert durch Landesgewerbeanstalt Nürnberg</li>
            <li class="list__item">Schächte und Verbindungen: 100 % dauerhaft dicht durch lastfreie
              Schachtelementdichtung und Safety-Lock- System</li>
          </ul>
          <p><strong>EINSPARUNGEN BEI INSTANDHALTUNGSKOSTEN</strong></p>
          <ul class="list -unordered">
            <li class="list__item">Nachgewiesene Wurzelfestigkeit des Gesamtsystems</li>
            <li class="list__item">pH-beständig und korrosionssicher durch Einsatz von 100 % Polypropylen</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{{!-- {{render '@atoms-list--unordered'}} --}}
<div class="container -st-small -sb-large">
  <div class="grid-x grid-margin-x grid-margin-y">
    <div class="cell medium-4">
      <div class="grid-x grid-margin-x grid-margin-y">
        <div class="cell -bg-white -cs-dark">
          <p><strong>PARAGRAPH</strong></p>
          {{render '@atoms-list--unordered'}}
        </div>
      </div>
    </div>
  </div>
</div>

<div class="teaser teaser--simple" data-cm-metadata="[{&quot;_&quot;:{&quot;$Ref&quot;:&quot;content/113054&quot;}}]">
  <div class="teaser__content">
    <span class="teaser__headline h4" data-cm-metadata="[{&quot;_&quot;:&quot;properties.teaserTitle&quot;}]">
      REHAU Smart Guard Fachbetriebe in Ihrer Nähe
    </span>
    <div class="teaser__text" data-cm-metadata="[{&quot;_&quot;:&quot;properties.teaserText&quot;}]">
      <p>Sie suchen einen qualifizierten REHAU Smart Guard Fachbetrieb in Ihrer Nähe? Hier finden Sie schnell kompetente
        Anbieter, die Sie direkt kontaktieren können.</p>
    </div>
  </div>
  <!-- BEGIN com.rehau.cms.cae.contentbeans.REHDealerFinderImpl$$[id=113054] _callToAction FreemarkerView[template=/WEB&#8211;INF/templates/rehau&#8211;2019/com.rehau.cms.common.contentbeans/REHDealerFinder._callToAction.ftl] -->
  <div class="teaser__cta">
    <div class="search">
      <form class="search__field" action="/blueprint/servlet/de-de/smartguard-dealerfinder" method="get" role="search"
        autocomplete="off">
        <div class="container -full">
          <div class="grid-x grid-margin-x grid-margin-y">
            <div class="cell shrink">
              <input type="text" class="input -w-auto" name="address" placeholder="Stadt oder Postleitzahl">
            </div>
            <div class="cell shrink"><button class="btn -icon-only -fill -search"></button></div>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- END com.rehau.cms.cae.contentbeans.REHDealerFinderImpl$$[id=113054] _callToAction FreemarkerView[template=/WEB&#8211;INF/templates/rehau&#8211;2019/com.rehau.cms.common.contentbeans/REHDealerFinder._callToAction.ftl] -->
</div>

{{render '@atoms-go-top'}}
{{render '@molecules-extra' extra merge=true}}
{{render '@organisms-footer'}}
{
  "teaser1": {
    "image": {
      "modifiers": "-ar-large-7x10 -ar-medium-2x1",
      "src": "/demo/teaser/teaser7.jpg",
      "alt": "Klettsystem Rautherm Speed"
    },
    "content": {
      "headline": {
        "text": "Handwerker und Bauunternehmer"
      },
      "text": "Das schnelle 1-Mann-System für die Flächenheizung/-kühlung",
      "cta": {
        "tag": "span",
        "title": "More"
      }
    }
  },
  "teaser2": {
    "image": {
      "modifiers": "-ar-large-14x5 -ar-medium-2x1",
      "src": "/demo/teaser/teaser8.jpg",
      "alt": "Klettsystem Rautherm Speed"
    },
    "content": {
      "headline": {
        "text": "Handwerker und Bauunternehmer"
      },
      "text": "Das schnelle 1-Mann-System für die Flächenheizung/-kühlung",
      "cta": {
        "tag": "span",
        "title": "More"
      }
    }
  },
  "teaser3": {
    "image": {
      "src": "/demo/teaser/teaser5.jpg",
      "alt": "Klettsystem Rautherm Speed"
    },
    "content": {
      "headline": {
        "text": "Handwerker und Bauunternehmer"
      },
      "text": "Das schnelle 1-Mann-System für die Flächenheizung/-kühlung",
      "cta": {
        "tag": "button",
        "title": "More"
      }
    }
  },
  "eventsTeaser": {
    "modifiers": "teaser--horizontal -narrow",
    "image": {
      "src": "/demo/teaser/teaser2.jpg",
      "alt": "Klettsystem Rautherm Speed"
    },
    "content": {
      "date": {
        "modifiers": "-event",
        "text": "10.01.12"
      },
      "headline": {
        "text": "Handwerker und Bauunternehmer"
      },
      "text": "Das schnelle 1-Mann-System für die Flächenheizung/-kühlung",
      "cta": {
        "mixes": "teaser__btn",
        "tag": "button",
        "title": "More"
      }
    }
  }
}

There are no notes for this item.