
<!DOCTYPE html>
<html lang="de">
<head>
    <title>Startseite | SmartTec</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="">
    
    <link rel="apple-touch-icon" sizes="57x57" href="/assets/img/favs/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/assets/img/favs/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/assets/img/favs/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/assets/img/favs/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/assets/img/favs/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/assets/img/favs/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/assets/img/favs/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/assets/img/favs/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favs/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/assets/img/favs/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favs/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/img/favs/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favs/favicon-16x16.png">
    <link rel="manifest" href="/assets/img/favs/manifest.json">

    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/assets/img/favs/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">


    <link rel="preload" href="/dist/fonts/blinker-latin-600.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/dist/fonts/blinker-latin-700.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/dist/fonts/blinker-latin-400.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/dist/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/dist/fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin>

            <script src="/dist/bundle.js" defer></script>
    
    <script src="https://www.google.com/recaptcha/api.js?render=6LfKQ_YUAAAAAPEy5kzYnBzwWkKk-q3WLHdlKBLe"></script>

    <link rel="stylesheet" href="/dist/main.css">
    
        <!-- Google Tag Manager -->
    <script>(function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start':
                    new Date().getTime(), event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', '');</script>
    <!-- ENd Google Tag Manager -->
    </head>
<body tabindex="0" class="font-body relative" x-data="{ isMenuOpen: false }" :class="{ 'overflow-hidden': isMenuOpen }">
<!-- Google Tag Manager (noscript) -->
<noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5ZNVLNM"
            height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
    <header tabindex="0"
            class="bg-white flex xl:block max-h-screen w-full z-40 top-0 left-0 focus:outline-none"
            :class="{ 'p-0': isMenuOpen, 'py-3': !isMenuOpen }"
            @keydown.escape="isMenuOpen = false"
    >
        <a
                x-show="!isMenuOpen"
                class="xl:absolute mx-4 block md:h-16 md:w-16 w-12 h-12 xl:h-40 xl:w-40 z-50 top-hero logo-hero rounded-full bg-white xl:mx-8"
                href="/"
        >
            <img class="xl:p-4 m-auto"
                 src="https://smarttec-dev.web2.standpunkt-hosting.de/Logos/image-thumb__4__header-logo/Logo_SMART-TEC.png"
                 alt="">
        </a>

        <button  x-show="isMenuOpen === false" @click="isMenuOpen = true" type="button"
                class="block xl:hidden px-3 text-gray-500 hover:text-white focus:outline-none focus:text-white ml-auto"
                :class="{ 'transition transform-180': isMenuOpen }">
            <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path x-show="!isMenuOpen" fill-rule="evenodd"
                      d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
            </svg>
        </button>

        
        <nav  class="w-full hidden bg-white xl:static flex-grow xl:flex xl:items-center xl:w-auto"
             @click.away="isMenuOpen = false" x-transition:enter="ease-out duration-200"
             x-transition:enter-start="opacity-0 transform" x-transition:enter-end="opacity-100 transform"
             x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 transform"
             x-transition:leave-end="opacity-0 transform">
            <button @click="isMenuOpen = !isMenuOpen" type="button"
                    class="block xl:hidden px-3 text-gray-500 hover:text-white focus:outline-none focus:text-white ml-auto"
                    :class="{ 'transition transform-180': isMenuOpen }">
                <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path x-show="isMenuOpen" fill-rule="evenodd" clip-rule="evenodd"
                          d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"></path>
                </svg>
            </button>
            <ul  class="xl:pt-6 xl:pt-0 list-reset xl:flex justify-end flex-1 items-center font-semibold xl:text-xl text-2xl text-center xl:text-left"
                x-data="header()">
                                                                            
                                                                <li class="mr-3 relative"><a

                                    class="inline-block transition-all duration-200 ease-in-out py-2 px-4 text-st-green underline"
                                    href="/Startseite"
                                    @mouseenter="isOpen = false, selected !== 0 ? selected = 0 : selected = null"
                                    @focus="isOpen = false, selected !== 0 ? selected = 0 : selected = null"
                                    >Startseite</a>
                        </li>
                                                                                                    
                                                                <li class="mr-3 relative"><a
                                    class="inline-block transition-all duration-200 ease-in-out hover:text-st-green hover:underline py-2 px-4 hover:text-st-green hover:underline"
                                    href="/waerme"
                                    @mouseenter="isOpen = false, selected !== 1 ? selected = 1 : selected = null"
                                    @focus="isOpen = false, selected !== 1 ? selected = 1 : selected = null"
                                    :class="{'text-st-green underline': selected === 1}">Wärme</a>

                            <ul x-cloak x-show="selected == 1"
                                x-transition:enter="transition ease duration-300"
                                x-transition:enter-start="opacity-0 transform scale-y-0"
                                x-transition:enter-end="opacity-100  transform scale-y-100"
                                x-transition:leave="ease-in transition duration-300"
                                x-transition:leave-start="opacity-100  transform  scale-y-100"
                                x-transition:leave-end="opacity-0 transform scale-y-0"
                                class="bg-white z-10 shadow rounded-sm xl:absolute xl:w-auto w-full mt-3 mx-auto list text-sm uppercase font-medium overflow-hidden origin-top"
                                @mouseleave="selected = null">
                                                                                                        <li><a @click="selected = null"
                                           class="block text-xl font-semibold px-4 py-2  focus:bg-st-green focus:text-white hover:bg-st-green hover:text-white"
                                           href="/waerme/zuhause">Für Ihr Zuhause</a>
                                    </li>
                                                                                                        <li><a @click="selected = null"
                                           class="block text-xl font-semibold px-4 py-2  focus:bg-st-green focus:text-white hover:bg-st-green hover:text-white"
                                           href="/W%C3%A4rme/F%C3%BCr%20Ihr%20Unternehmen">Für Ihr Unternehmen</a>
                                    </li>
                                                            </ul>
                        </li>

                                                                                                    
                                                                <li class="mr-3 relative"><a
                                    class="inline-block transition-all duration-200 ease-in-out hover:text-st-green hover:underline py-2 px-4 hover:text-st-green hover:underline"
                                    href="/kaelte"
                                    @mouseenter="isOpen = false, selected !== 2 ? selected = 2 : selected = null"
                                    @focus="isOpen = false, selected !== 2 ? selected = 2 : selected = null"
                                    :class="{'text-st-green underline': selected === 2}">Kälte</a>

                            <ul x-cloak x-show="selected == 2"
                                x-transition:enter="transition ease duration-300"
                                x-transition:enter-start="opacity-0 transform scale-y-0"
                                x-transition:enter-end="opacity-100  transform scale-y-100"
                                x-transition:leave="ease-in transition duration-300"
                                x-transition:leave-start="opacity-100  transform  scale-y-100"
                                x-transition:leave-end="opacity-0 transform scale-y-0"
                                class="bg-white z-10 shadow rounded-sm xl:absolute xl:w-auto w-full mt-3 mx-auto list text-sm uppercase font-medium overflow-hidden origin-top"
                                @mouseleave="selected = null">
                                                                                                        <li><a @click="selected = null"
                                           class="block text-xl font-semibold px-4 py-2  focus:bg-st-green focus:text-white hover:bg-st-green hover:text-white"
                                           href="/kaelte/F%C3%BCr%20Ihr%20Zuhause">Für Ihr Zuhause</a>
                                    </li>
                                                                                                        <li><a @click="selected = null"
                                           class="block text-xl font-semibold px-4 py-2  focus:bg-st-green focus:text-white hover:bg-st-green hover:text-white"
                                           href="/kaelte/F%C3%BCr%20Ihr%20Unternehmen">Für Ihr Unternehmen</a>
                                    </li>
                                                            </ul>
                        </li>

                                                                                                    
                                                                <li class="mr-3 relative"><a
                                    class="inline-block transition-all duration-200 ease-in-out hover:text-st-green hover:underline py-2 px-4 hover:text-st-green hover:underline"
                                    href="/Solar"
                                    @mouseenter="isOpen = false, selected !== 3 ? selected = 3 : selected = null"
                                    @focus="isOpen = false, selected !== 3 ? selected = 3 : selected = null"
                                    :class="{'text-st-green underline': selected === 3}">Solar</a>

                            <ul x-cloak x-show="selected == 3"
                                x-transition:enter="transition ease duration-300"
                                x-transition:enter-start="opacity-0 transform scale-y-0"
                                x-transition:enter-end="opacity-100  transform scale-y-100"
                                x-transition:leave="ease-in transition duration-300"
                                x-transition:leave-start="opacity-100  transform  scale-y-100"
                                x-transition:leave-end="opacity-0 transform scale-y-0"
                                class="bg-white z-10 shadow rounded-sm xl:absolute xl:w-auto w-full mt-3 mx-auto list text-sm uppercase font-medium overflow-hidden origin-top"
                                @mouseleave="selected = null">
                                                                                                        <li><a @click="selected = null"
                                           class="block text-xl font-semibold px-4 py-2  focus:bg-st-green focus:text-white hover:bg-st-green hover:text-white"
                                           href="/Solar/F%C3%BCr%20Ihr%20Zuhause">Für Ihr Zuhause</a>
                                    </li>
                                                                                                        <li><a @click="selected = null"
                                           class="block text-xl font-semibold px-4 py-2  focus:bg-st-green focus:text-white hover:bg-st-green hover:text-white"
                                           href="/Solar/F%C3%BCr%20Ihr%20Unternehmen">Für Ihr Unternehmen</a>
                                    </li>
                                                            </ul>
                        </li>

                                                                                                    
                                                                <li class="mr-3 relative"><a

                                    class="inline-block transition-all duration-200 ease-in-out py-2 px-4 hover:text-st-green hover:underline"
                                    href="/Abrechnen"
                                    @mouseenter="isOpen = false, selected !== 4 ? selected = 4 : selected = null"
                                    @focus="isOpen = false, selected !== 4 ? selected = 4 : selected = null"
                                    :class="{'text-st-green underline': selected === 4}">Abrechnen</a>
                        </li>
                                                                                                    
                                                                <li class="mr-3 relative"><a

                                    class="inline-block transition-all duration-200 ease-in-out py-2 px-4 hover:text-st-green hover:underline"
                                    href="/LED"
                                    @mouseenter="isOpen = false, selected !== 5 ? selected = 5 : selected = null"
                                    @focus="isOpen = false, selected !== 5 ? selected = 5 : selected = null"
                                    :class="{'text-st-green underline': selected === 5}">LED</a>
                        </li>
                                                                                                    
                                                                <li class="mr-3 relative"><a
                                    class="inline-block transition-all duration-200 ease-in-out hover:text-st-green hover:underline py-2 px-4 hover:text-st-green hover:underline"
                                    href="/e-Mobilit%C3%A4t"
                                    @mouseenter="isOpen = false, selected !== 6 ? selected = 6 : selected = null"
                                    @focus="isOpen = false, selected !== 6 ? selected = 6 : selected = null"
                                    :class="{'text-st-green underline': selected === 6}">e-Mobilität</a>

                            <ul x-cloak x-show="selected == 6"
                                x-transition:enter="transition ease duration-300"
                                x-transition:enter-start="opacity-0 transform scale-y-0"
                                x-transition:enter-end="opacity-100  transform scale-y-100"
                                x-transition:leave="ease-in transition duration-300"
                                x-transition:leave-start="opacity-100  transform  scale-y-100"
                                x-transition:leave-end="opacity-0 transform scale-y-0"
                                class="bg-white z-10 shadow rounded-sm xl:absolute xl:w-auto w-full mt-3 mx-auto list text-sm uppercase font-medium overflow-hidden origin-top"
                                @mouseleave="selected = null">
                                                                                                        <li><a @click="selected = null"
                                           class="block text-xl font-semibold px-4 py-2  focus:bg-st-green focus:text-white hover:bg-st-green hover:text-white"
                                           href="/e-Mobilit%C3%A4t/F%C3%BCr%20Privatpersonen">Für Privatpersonen</a>
                                    </li>
                                                                                                        <li><a @click="selected = null"
                                           class="block text-xl font-semibold px-4 py-2  focus:bg-st-green focus:text-white hover:bg-st-green hover:text-white"
                                           href="/e-Mobilit%C3%A4t/F%C3%BCr%20Ihr%20Unternehmen">Für Ihr Unternehmen</a>
                                    </li>
                                                            </ul>
                        </li>

                                                                                                    
                                                                <li class="mr-3 relative"><a

                                    class="inline-block transition-all duration-200 ease-in-out py-2 px-4 hover:text-st-green hover:underline"
                                    href="/Magazin"
                                    @mouseenter="isOpen = false, selected !== 7 ? selected = 7 : selected = null"
                                    @focus="isOpen = false, selected !== 7 ? selected = 7 : selected = null"
                                    :class="{'text-st-green underline': selected === 7}">Magazin</a>
                        </li>
                                                                                                    
                                                                <li class="mr-3 relative"><a

                                    class="inline-block transition-all duration-200 ease-in-out py-2 px-4 hover:text-st-green hover:underline"
                                    href="/Wir%20%C3%BCber%20uns"
                                    @mouseenter="isOpen = false, selected !== 8 ? selected = 8 : selected = null"
                                    @focus="isOpen = false, selected !== 8 ? selected = 8 : selected = null"
                                    :class="{'text-st-green underline': selected === 8}">Wir über uns</a>
                        </li>
                                                                                                                                                                                                                                                                                                                                                                                                                
                                                                <li class="mr-3 relative"><a

                                    class="inline-block transition-all duration-200 ease-in-out py-2 px-4 hover:text-st-green hover:underline"
                                    href="/Neue%20Forms"
                                    @mouseenter="isOpen = false, selected !== 9 ? selected = 9 : selected = null"
                                    @focus="isOpen = false, selected !== 9 ? selected = 9 : selected = null"
                                    :class="{'text-st-green underline': selected === 9}">Neue Forms</a>
                        </li>
                                                                                                    
                                                                <li class="mr-3 relative"><a

                                    class="inline-block transition-all duration-200 ease-in-out py-2 px-4 hover:text-st-green hover:underline"
                                    href="/Energiehaus"
                                    @mouseenter="isOpen = false, selected !== 10 ? selected = 10 : selected = null"
                                    @focus="isOpen = false, selected !== 10 ? selected = 10 : selected = null"
                                    :class="{'text-st-green underline': selected === 10}">Energiehaus</a>
                        </li>
                                                        <!-- Search bar -->
                <li class="xl:mr-3"  tabindex="0" @mouseenter="searchHover()"  @focus="searchHover()" @click.away="isSearchBarshown = false">

                    <div class="flex items-center justify-center xl:justify-start transition-all duration-300 ease-in-out border-b hover:border-b-2 group hover:border-st-green py-2">
                        <input  x-show.transition="isSearchBarshown" x-model="searchInput"
                               x-transition:enter="transition-all ease-in-out duration-300"
                               x-transition:enter-start="opacity-0 transform max-w-0 scale-x-0"
                               x-transition:enter-end="opacity-100 transform max-w-full scale-x-100"
                               x-transition:leave="ease-in transition-all duration-300"
                               x-transition:leave-start="opacity-100 max-w-full  transform scale-x-100"
                               x-transition:leave-end="opacity-0 transform max-w-0 scale-x-0"
                               class="appearance-none bg-transparent border-none font-semibold mr-3 px-2 focus:outline-none"
                               type="text" id="searchbar" autofocus="isSearchBarshown" x-ref="searchField" @change="search()"
                               placeholder="Tippen Sie etwas ein">
                        <i class="fas transition-colors ease-in-out duration-200 group-hover:text-st-green fa-search text-2xl"></i>
                    </div>
                </li>
                <!-- DropDown for Search results -->
                <ul x-model="searchResults" x-show="isSearchBarshown" x-transition:enter="transition ease duration-300"
                    x-transition:enter-start="opacity-0 transform scale-y-0"
                    x-transition:enter-end="opacity-100  transform scale-y-100"
                    x-transition:leave="ease-in transition duration-300"
                    x-transition:leave-start="opacity-100  transform  scale-y-100"
                    x-transition:leave-end="opacity-0 transform scale-y-0"
                    class="bg-white max-h-15 xl:max-h-25 shadow-xl w-full xl:w-1/3 rounded-sm top-5 mt-3 right-0 xl:absolute list text-sm font-medium overflow-auto origin-top">
                    <template x-for="result in searchResults" :key="result">
                        <li class="border-st-gray border-b group">
                            <a x-bind:href="result.item.href"
                               class="w-full bg-white px-4 py-2 xl:px-12 xl:py-6 flex flex-col group-hover:bg-st-green transition-colors duration-300 ease-in-out">
                                <div class="flex items-center">
                                    <i class="fas text-2xl fa-chevron-circle-right text-st-green mr-3 group-hover:text-white"></i>
                                    <h2 class="font-semibold text-2xl group-hover:text-white"
                                        x-text="result.item.title">
                                    </h2>
                                </div>
                                <p class="text-left group-hover:text-white lg:text-base text-lg"
                                   x-text="cutString(result.item.text)">
                                </p>
                            </a>
                        </li>
                    </template>
                </ul>
            </ul>
        </nav>
    </header>

    <div class="w-full xl:hidden top-0 fixed bg-white flex-grow z-40"
         :class="{ 'block shadow-3xl pt-6': isMenuOpen, 'hidden': !isMenuOpen }" @click.away="isMenuOpen = false"
         x-show="isMenuOpen ===true" x-transition:enter="ease-out duration-200"
         x-transition:enter-start="opacity-0 transform" x-transition:enter-end="opacity-100 transform"
         x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 transform"
         x-transition:leave-end="opacity-0 transform">
        <button @click="isMenuOpen = !isMenuOpen" type="button"
                class="block xl:hidden px-3 text-gray-500 hover:text-white focus:outline-none focus:text-white ml-auto"
                :class="{ 'transition transform-180': isMenuOpen }">
            <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path x-show="isMenuOpen" fill-rule="evenodd" clip-rule="evenodd"
                      d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"></path>
            </svg>
        </button>

        <ul class="w-full mt-4 mx-auto" x-data="headerMobile()">
                                                            
                                                    <li>
                        <a @click="selected = null"
                           class="block text-2xl font-semibold px-4 py-2 bg-st-green text-white focus:bg-st-green focus:text-white "
                           href="/Startseite">Startseite</a>
                    </li>
                                                                                
                                                    <li class="flex align-center flex-col">
                        <div :class="{'bg-st-green text-white' : accordionIndex == 1,  'bg-white' : accordionIndex !== 1}"
                             @click="accordionIndex !== 1 ? accordionIndex = 1 : accordionIndex = null"
                             class="cursor-pointer px-6 py-2 transition-colors duration-200 ease-in-out font-semibold text-2xl inline-block">
                            <i :class="{'rotate-90 transform text-white' : accordionIndex == 1}"
                               class="fas fa-chevron-circle-right trasition-all duration-200 ease-in-out mr-3 "></i>
                            Wärme                        </div>
                        <ul x-show="accordionIndex == 1"
                            class="border origin-top max-h-15 overflow-auto max-h-15 overflow-auto  lg:text-base text-lg"
                            x-transition:enter="transition-all ease duration-300"
                            x-transition:enter-start="opacity-0 max-h-0 "
                            x-transition:enter-end="opacity-100  max-h-15 "
                            x-transition:leave="ease-in transition-all duration-300"
                            x-transition:leave-start="opacity-100  max-h-15"
                            x-transition:leave-end="opacity-0  max-h-0">
                            <li><a @click="selected = null"
                                   class="block xl:border-none border-t-2  border-st-green text-2xl font-semibold px-4 py-2 hover:bg-st-green hover:text-white"
                                   href="/waerme">Wärme</a></li>
                                                                                            <li><a @click="selected = null"
                                       class="block xl:border-none border-t-2  border-st-green text-2xl font-semibold px-4 py-2 hover:bg-st-green hover:text-white"
                                       href="/waerme/zuhause">Für Ihr Zuhause</a></li>
                                                                                            <li><a @click="selected = null"
                                       class="block xl:border-none border-t-2  border-st-green text-2xl font-semibold px-4 py-2 hover:bg-st-green hover:text-white"
                                       href="/W%C3%A4rme/F%C3%BCr%20Ihr%20Unternehmen">Für Ihr Unternehmen</a></li>
                                                    </ul>
                    </li>
                                                                                
                                                    <li class="flex align-center flex-col">
                        <div :class="{'bg-st-green text-white' : accordionIndex == 2,  'bg-white' : accordionIndex !== 2}"
                             @click="accordionIndex !== 2 ? accordionIndex = 2 : accordionIndex = null"
                             class="cursor-pointer px-6 py-2 transition-colors duration-200 ease-in-out font-semibold text-2xl inline-block">
                            <i :class="{'rotate-90 transform text-white' : accordionIndex == 2}"
                               class="fas fa-chevron-circle-right trasition-all duration-200 ease-in-out mr-3 "></i>
                            Kälte                        </div>
                        <ul x-show="accordionIndex == 2"
                            class="border origin-top max-h-15 overflow-auto max-h-15 overflow-auto  lg:text-base text-lg"
                            x-transition:enter="transition-all ease duration-300"
                            x-transition:enter-start="opacity-0 max-h-0 "
                            x-transition:enter-end="opacity-100  max-h-15 "
                            x-transition:leave="ease-in transition-all duration-300"
                            x-transition:leave-start="opacity-100  max-h-15"
                            x-transition:leave-end="opacity-0  max-h-0">
                            <li><a @click="selected = null"
                                   class="block xl:border-none border-t-2  border-st-green text-2xl font-semibold px-4 py-2 hover:bg-st-green hover:text-white"
                                   href="/kaelte">Kälte</a></li>
                                                                                            <li><a @click="selected = null"
                                       class="block xl:border-none border-t-2  border-st-green text-2xl font-semibold px-4 py-2 hover:bg-st-green hover:text-white"
                                       href="/kaelte/F%C3%BCr%20Ihr%20Zuhause">Für Ihr Zuhause</a></li>
                                                                                            <li><a @click="selected = null"
                                       class="block xl:border-none border-t-2  border-st-green text-2xl font-semibold px-4 py-2 hover:bg-st-green hover:text-white"
                                       href="/kaelte/F%C3%BCr%20Ihr%20Unternehmen">Für Ihr Unternehmen</a></li>
                                                    </ul>
                    </li>
                                                                                
                                                    <li class="flex align-center flex-col">
                        <div :class="{'bg-st-green text-white' : accordionIndex == 3,  'bg-white' : accordionIndex !== 3}"
                             @click="accordionIndex !== 3 ? accordionIndex = 3 : accordionIndex = null"
                             class="cursor-pointer px-6 py-2 transition-colors duration-200 ease-in-out font-semibold text-2xl inline-block">
                            <i :class="{'rotate-90 transform text-white' : accordionIndex == 3}"
                               class="fas fa-chevron-circle-right trasition-all duration-200 ease-in-out mr-3 "></i>
                            Solar                        </div>
                        <ul x-show="accordionIndex == 3"
                            class="border origin-top max-h-15 overflow-auto max-h-15 overflow-auto  lg:text-base text-lg"
                            x-transition:enter="transition-all ease duration-300"
                            x-transition:enter-start="opacity-0 max-h-0 "
                            x-transition:enter-end="opacity-100  max-h-15 "
                            x-transition:leave="ease-in transition-all duration-300"
                            x-transition:leave-start="opacity-100  max-h-15"
                            x-transition:leave-end="opacity-0  max-h-0">
                            <li><a @click="selected = null"
                                   class="block xl:border-none border-t-2  border-st-green text-2xl font-semibold px-4 py-2 hover:bg-st-green hover:text-white"
                                   href="/Solar">Solar</a></li>
                                                                                            <li><a @click="selected = null"
                                       class="block xl:border-none border-t-2  border-st-green text-2xl font-semibold px-4 py-2 hover:bg-st-green hover:text-white"
                                       href="/Solar/F%C3%BCr%20Ihr%20Zuhause">Für Ihr Zuhause</a></li>
                                                                                            <li><a @click="selected = null"
                                       class="block xl:border-none border-t-2  border-st-green text-2xl font-semibold px-4 py-2 hover:bg-st-green hover:text-white"
                                       href="/Solar/F%C3%BCr%20Ihr%20Unternehmen">Für Ihr Unternehmen</a></li>
                                                    </ul>
                    </li>
                                                                                
                                                    <li>
                        <a @click="selected = null"
                           class="block text-2xl font-semibold px-4 py-2 "
                           href="/Abrechnen">Abrechnen</a>
                    </li>
                                                                                
                                                    <li>
                        <a @click="selected = null"
                           class="block text-2xl font-semibold px-4 py-2 "
                           href="/LED">LED</a>
                    </li>
                                                                                
                                                    <li class="flex align-center flex-col">
                        <div :class="{'bg-st-green text-white' : accordionIndex == 6,  'bg-white' : accordionIndex !== 6}"
                             @click="accordionIndex !== 6 ? accordionIndex = 6 : accordionIndex = null"
                             class="cursor-pointer px-6 py-2 transition-colors duration-200 ease-in-out font-semibold text-2xl inline-block">
                            <i :class="{'rotate-90 transform text-white' : accordionIndex == 6}"
                               class="fas fa-chevron-circle-right trasition-all duration-200 ease-in-out mr-3 "></i>
                            e-Mobilität                        </div>
                        <ul x-show="accordionIndex == 6"
                            class="border origin-top max-h-15 overflow-auto max-h-15 overflow-auto  lg:text-base text-lg"
                            x-transition:enter="transition-all ease duration-300"
                            x-transition:enter-start="opacity-0 max-h-0 "
                            x-transition:enter-end="opacity-100  max-h-15 "
                            x-transition:leave="ease-in transition-all duration-300"
                            x-transition:leave-start="opacity-100  max-h-15"
                            x-transition:leave-end="opacity-0  max-h-0">
                            <li><a @click="selected = null"
                                   class="block xl:border-none border-t-2  border-st-green text-2xl font-semibold px-4 py-2 hover:bg-st-green hover:text-white"
                                   href="/e-Mobilit%C3%A4t">e-Mobilität</a></li>
                                                                                            <li><a @click="selected = null"
                                       class="block xl:border-none border-t-2  border-st-green text-2xl font-semibold px-4 py-2 hover:bg-st-green hover:text-white"
                                       href="/e-Mobilit%C3%A4t/F%C3%BCr%20Privatpersonen">Für Privatpersonen</a></li>
                                                                                            <li><a @click="selected = null"
                                       class="block xl:border-none border-t-2  border-st-green text-2xl font-semibold px-4 py-2 hover:bg-st-green hover:text-white"
                                       href="/e-Mobilit%C3%A4t/F%C3%BCr%20Ihr%20Unternehmen">Für Ihr Unternehmen</a></li>
                                                    </ul>
                    </li>
                                                                                
                                                    <li>
                        <a @click="selected = null"
                           class="block text-2xl font-semibold px-4 py-2 "
                           href="/Magazin">Magazin</a>
                    </li>
                                                                                
                                                    <li>
                        <a @click="selected = null"
                           class="block text-2xl font-semibold px-4 py-2 "
                           href="/Wir%20%C3%BCber%20uns">Wir über uns</a>
                    </li>
                                                                                                                                                                                                                                                                                                                                
                                                    <li>
                        <a @click="selected = null"
                           class="block text-2xl font-semibold px-4 py-2 "
                           href="/Neue%20Forms">Neue Forms</a>
                    </li>
                                                                                
                                                    <li>
                        <a @click="selected = null"
                           class="block text-2xl font-semibold px-4 py-2 "
                           href="/Energiehaus">Energiehaus</a>
                    </li>
                                
            <!-- Search bar -->
            <li @mouseenter="searchHover()" @focus="searchHover()" class="mb-4" @click.away="isSearchBarshown = false">

                <div class="flex items-center justify-center  transition-all duration-300 ease-in-out border-b hover:border-b-2 group hover:border-st-green  px-4 py-2 text-2xl">
                    <input x-show.transition="isSearchBarshown" x-model="searchInput"
                           x-transition:enter="transition-all ease-in-out duration-300"
                           x-transition:enter-start="opacity-0 transform max-w-0 scale-x-0"
                           x-transition:enter-end="opacity-100 transform max-w-full scale-x-100"
                           x-transition:leave="ease-in transition-all duration-300"
                           x-transition:leave-start="opacity-100 max-w-full  transform scale-x-100"
                           x-transition:leave-end="opacity-0 transform max-w-0 scale-x-0"
                           class="appearance-none bg-transparent border-none font-semibold mr-3 px-2 focus:outline-none"
                           type="text" autofocus="isSearchBarshown" x-ref="searchField" @change="search()"
                           placeholder="Tippen Sie etwas ein">
                    <i class="fas transition-colors ease-in-out duration-200 group-hover:text-st-green fa-search text-2xl"></i>
                </div>
            </li>
            <!-- DropDown for Search results -->
            <ul x-model="searchResults" x-show="isSearchBarshown" x-transition:enter="transition ease duration-300"
                x-transition:enter-start="opacity-0 transform scale-y-0"
                x-transition:enter-end="opacity-100  transform scale-y-100"
                x-transition:leave="ease-in transition duration-300"
                x-transition:leave-start="opacity-100  transform  scale-y-100"
                x-transition:leave-end="opacity-0 transform scale-y-0"
                class="bg-white max-h-15 -mt-4 shadow-xl w-full rounded-sm list text-sm font-medium overflow-auto origin-top">
                <template x-for="result in searchResults" :key="result">
                    <li class="border-st-gray border-b group">
                        <a x-bind:href="result.item.href"
                           class="w-full bg-white px-4 py-2 xl:px-12 xl:py-6 flex flex-col group-hover:bg-st-green transition-colors duration-300 ease-in-out">
                            <div class="flex items-center">
                                <i class="fas text-2xl fa-chevron-circle-right text-st-green mr-3 group-hover:text-white"></i>
                                <h2 class="font-semibold text-2xl group-hover:text-white" x-text="result.item.title">
                                </h2>
                            </div>
                            <p class="text-left group-hover:text-white lg:text-base text-lg"
                               x-text="cutString(result.item.text)">
                            </p>
                        </a>
                    </li>
                </template>
            </ul>
        </ul>
    </div>

    <script>
        header = function() {
            return {
                searchInput: "",
                searchResults: [],
                isSearchBarshown: false,
                areSearchResultsShown: false,
                selected: null,
                search() {
                    let options = {
                        shouldSort: true,
                        includeScore: true,
                        threshold: 0.5,
                        location: 0,
                        distance: 100,
                        minMatchCharLength: 1,
                        keys: ["title", "text"],
                    };
                    let fuse = new Fuse(topicsList, options);
                    this.searchResults = fuse.search(this.searchInput);
                },
                searchHover() {
                    this.isSearchBarshown = true;
                    setTimeout(() => {
                        this.$refs.searchField.focus();
                    });
                },
                cutString(str) {
                    if (str.length > 100) {
                        return str.substring(0, 100) + "...";
                    } else {
                        return str;
                    }
                },
            };
        };
        headerMobile = function() {
            return {
                searchInput: "",
                searchResults: [],
                isSearchBarshown: false,
                areSearchResultsShown: false,
                accordionIndex: null,
                search() {
                    let options = {
                        shouldSort: true,
                        includeScore: true,
                        threshold: 0.5,
                        location: 0,
                        distance: 100,
                        minMatchCharLength: 1,
                        keys: ["title", "text"],
                    };
                    let fuse = new Fuse(topicsList, options);
                    this.searchResults = fuse.search(this.searchInput);
                },
                searchHover() {
                    this.isSearchBarshown = true;
                    setTimeout(() => {
                        this.$refs.searchField.focus();
                    });
                },
                cutString(str) {
                    if (str.length > 100) {
                        return str.substring(0, 100) + "...";
                    } else {
                        return str;
                    }
                },
            };
        };
    </script>

<div id="content" >
    <div class="pimcore_area_hero-slider pimcore_area_content">    <section x-data="smartTec.heroSlider()" x-init="sliderInit()" class="relative">
        <div class="flex relative w-full" x-ref="heroSlider">

            <div data-glide-el="track" class="glide__track h-full">
                <ul class="glide__slides h-full w-full inline-flex justify-between">
                                                                    <img class="glide__slide w-full h-full lazy"
                             data-src="https://smarttec-dev.web2.standpunkt-hosting.de/image-thumb__27__hero-slide-image/Hero.pjpeg"
                             alt="Smart: Wärme">
                                                                                            <img class="glide__slide w-full h-full lazy"
                             data-src="https://smarttec-dev.web2.standpunkt-hosting.de/_default_upload_bucket/image-thumb__80__hero-slide-image/daniela2.pjpeg"
                             alt="">
                                                                                            <img class="glide__slide w-full h-full lazy"
                             data-src="https://smarttec-dev.web2.standpunkt-hosting.de/_default_upload_bucket/image-thumb__82__hero-slide-image/alex2.pjpeg"
                             alt="">
                                                            </ul>
                <div class="glide__bullets bottom-0 -mb-6" data-glide-el="controls[nav]">
                                            <button class="glide__bullet hero-bullet bg-white" data-glide-dir="=0" @focus="goToFocusedSlide(0)"></button>
                                            <button class="glide__bullet hero-bullet bg-white" data-glide-dir="=1" @focus="goToFocusedSlide(1)"></button>
                                            <button class="glide__bullet hero-bullet bg-white" data-glide-dir="=2" @focus="goToFocusedSlide(2)"></button>
                                    </div>
            </div>
                            <!-- side section -->
                <div class="h-full absolute right-0 w-2/3 lg:w-1/3 z-20 hidden lg:flex flex-col justify-center">
                    <!-- slider-box -->
                                            <a href="">
                            <div
                                    class="w-full px-4 py-2 lg:px-12 lg:py-6 flex flex-col my-4 group bg-st-gray hover:bg-product-waerme transition-colors duration-300 ease-in-out"
                            >
                                <div class="flex items-center">
                                    <p class="font-semibold text-base md:text-2xl group-hover:text-white text-white">
                                        <i
                                                class="fas fa-chevron-circle-right text-white mr-3 group-hover:text-white"
                                        ></i>
                                        SMART TEC Haustechnik                                    </p>
                                </div>
                                <p class="group-hover:text-white text-white">
                                                                    </p>
                            </div>
                        </a>
                    
                </div>
                    </div>
    </section>

    <section class="px-6 py-4 overflow-x-hidden block lg:hidden">
        <div class="container flex flex-col mx-auto pl-6 pt-6">
                            <a href="" target=""
                   class="w-full bg-st-gray px-12 py-6 flex flex-col my-4 group hover:bg-product-waerme transition-colors duration-300 ease-in-out text-white ?>">
                    <div class="flex items-center">
                        <p class="font-semibold text-xl lg:text-3xl group-hover:text-white">
                            <i class="fas fa-chevron-circle-right text-white mr-3 group-hover:text-white"></i>
                            SMART TEC Haustechnik                        </p>
                    </div>
                    <p class="group-hover:text-white text-base lg:text-2xl">
                                            </p>
                </a>
                    </div>
    </section>

</div><div class="pimcore_area_side-buttons pimcore_area_content">
    <div x-show="isMenuOpen===false"
         class="fixed top-30 z-50 md:flex hidden md:-ml-md-side-bar lg:-ml-lg-side-bar xl:-ml-lg-side-bar w-full sm:w-1/2 xl:w-1/4 justify-between bg-st-gray items-center hover:ml-0 hover: transition-all duration-500 ease-in-out">
        <a class="text-white py-2 px-4 text-xl w-3/4 hover:underline hover:text-st-green transition-colors duration-200 ease-in-out"
           href="mailto:info@smarttec.de">info@smarttec.de</a>
        <div class="w-16 h-16 md:w-24 md:h-24 p-2 md:p-4">
            <div class="bg-email-speech bg-cover bg-no-repeat bg-center w-full h-full"></div>
        </div>
    </div>
    <div x-show="isMenuOpen===false"
         class=" top-45 z-50 w-full sm:w-1/2 xl:w-1/4 md:-ml-md-side-bar  lg:-ml-lg-side-bar xl:-ml-lg-side-bar hidden fixed md:flex justify-between bg-st-gray items-center hover:ml-0 transition-all duration-500 ease-in-out">
        <a href="tel:02389394"
           class="text-white py-2 px-4 text-center text-xl w-3/4 hover:underline hover:text-st-green transition-colors duration-200 ease-in-out">02389394</a>
        <div class="w-16 h-16 md:w-24 md:h-24 p-2 md:p-4">
            <div class="bg-telefon-speech bg-cover bg-no-repeat bg-center w-full h-full"></div>
        </div>
    </div>

</div><div class="pimcore_area_wysiwyg-heading pimcore_area_content">            <section class="px-6  overflow-x-hidden"
                 >
                        <div class="container flex flex-col mx-auto px-6">
                <div class="flex flex-col">
                        <h1 class="mb-4 font-bold">Machen Sie doch einfach, was Sie wollen</h1>
                    <div class="flex flex-col lg:flex-row ">
                        <div class="w-full lg:w- lg:pr-8">
                            <p>Manchmal ist es eben einfach so. Zwei Seelen schlagen in der Brust. Sie wollen umweltfreundlicher werden. Sie wollen Energie sparen. Sie wissen, dass Sie dazu Ihre Haustechnik auf den neuesten Stand bringen müssen. Aber wirkliche Lust, sich in die Materie einzuarbeiten, haben sie trotzdem nicht. Stimmt‘s? Dann sind Sie bei uns genau richtig. Innovation und Service werden bei uns großgeschrieben.</p>

<p>Wir machen Ihre Haustechnik entsprechend Ihrer Wünsche fit. Und Sie genießen einfach weiter ihr Leben. Lernen Sie unsere SMART-TEC-Produktfamilie kennen. Da kann Ihnen jedes einzelne Mitglied etwas dazu erzählen, wie man Haustechnik nicht nur einfach, sondern auch richtig gut macht.</p>
                        </div>
                        <div class="w-" x-ref="bannerSlider">
                                                                                </div>
                    </div>
                </div>
            </div>
        </section>
    </div><div class="pimcore_area_image-flipbox pimcore_area_content">    <section class="md:px-6 py-8 overflow-x-hidden">
        <a name=""></a>
                <div class="container flex flex-wrap w-full mx-auto px-4">
                            <div
                        class="flip-card  flex flex-col items-stretch bg-transparent w-full min-h-flip xl:w-1/3  md:w-1/2 xl:px-12 md:px-6 my-4 relative">

                    <div class="flip-card-inner flex-auto items-stretch flex shadow-xl w-full relative">
                        <div class="flip-card-front bg-white z-10 w-full h-full absolute flex items-center lg:p-6 p-2 justify-center flex-col border-gray-300 border shadow-flip-boxes lazy">
                            <img data-src="/_default_upload_bucket/image-thumb__76__image-flipbox-front/emanuel1_1.pjpeg"
                                 alt="">
                            <h3 class="font-bold flex items-center break-all text-st-gray flex-wrap my-3 lg:text-3xl text-4xl">
                                SMART abrechnen                            </h3>
                        </div>
                        <div class="flip-card-back z-50 justify-between bg-white shadow-flip-boxes w-full flex-auto flex-col flex items-stretch border-gray-300 border px-6 py-8">
                            <div class="flex">
                                <h3 class="font-bold w-1/2 flex items-center break-normal text-st-gray justify-between my-2 lg:text-3xl text-4xl">
                                    SMART abrechnen                                </h3>
                                <img class="w-1/2 lazy"
                                     data-src="/Abrechnen/image-thumb__21__image-flipbox-back/Smart-Tec_Icons_RGB_Heizkostenabrechnung.png"
                                     alt="">
                            </div>
                            <p class="my-2">
                                Ablesung? Per Funk. Rechnungserstellung? Automatisch.                            </p>
                            <a href="/Abrechnen"
                               target="">
                                <div class="w-full flex justify-center bg-product-abrechnen py-2 px-6 text-white hover:bg-st-green hover:text-white border hover:border-st-green transition-all duration-300 ease-in-out text-lg">
                                    Mehr erfahren                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                            <div
                        class="flip-card  flex flex-col items-stretch bg-transparent w-full min-h-flip xl:w-1/3  md:w-1/2 xl:px-12 md:px-6 my-4 relative">

                    <div class="flip-card-inner flex-auto items-stretch flex shadow-xl w-full relative">
                        <div class="flip-card-front bg-white z-10 w-full h-full absolute flex items-center lg:p-6 p-2 justify-center flex-col border-gray-300 border shadow-flip-boxes lazy">
                            <img data-src="/_default_upload_bucket/image-thumb__83__image-flipbox-front/nick3.pjpeg"
                                 alt="">
                            <h3 class="font-bold flex items-center break-all text-st-gray flex-wrap my-3 lg:text-3xl text-4xl">
                                SMART E-Mobilität                            </h3>
                        </div>
                        <div class="flip-card-back z-50 justify-between bg-white shadow-flip-boxes w-full flex-auto flex-col flex items-stretch border-gray-300 border px-6 py-8">
                            <div class="flex">
                                <h3 class="font-bold w-1/2 flex items-center break-normal text-st-gray justify-between my-2 lg:text-3xl text-4xl">
                                    SMART E-Mobilität                                </h3>
                                <img class="w-1/2 lazy"
                                     data-src="/eMobilit%C3%A4t/image-thumb__26__image-flipbox-back/Smart-Tec_Icons_RGBe-Mobilitaet.png"
                                     alt="">
                            </div>
                            <p class="my-2">
                                Das Auto zuhause tanken. Umweltbewusster leben. Und sparen.                            </p>
                            <a href="/e-Mobilit%C3%A4t"
                               target="">
                                <div class="w-full flex justify-center bg-product-e-mobilitaet py-2 px-6 text-white hover:bg-st-green hover:text-white border hover:border-st-green transition-all duration-300 ease-in-out text-lg">
                                    Mehr erfahren                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                            <div
                        class="flip-card  flex flex-col items-stretch bg-transparent w-full min-h-flip xl:w-1/3  md:w-1/2 xl:px-12 md:px-6 my-4 relative">

                    <div class="flip-card-inner flex-auto items-stretch flex shadow-xl w-full relative">
                        <div class="flip-card-front bg-white z-10 w-full h-full absolute flex items-center lg:p-6 p-2 justify-center flex-col border-gray-300 border shadow-flip-boxes lazy">
                            <img data-src="/_default_upload_bucket/image-thumb__84__image-flipbox-front/regina1.pjpeg"
                                 alt="">
                            <h3 class="font-bold flex items-center break-all text-st-gray flex-wrap my-3 lg:text-3xl text-4xl">
                                SMART-Wärme                            </h3>
                        </div>
                        <div class="flip-card-back z-50 justify-between bg-white shadow-flip-boxes w-full flex-auto flex-col flex items-stretch border-gray-300 border px-6 py-8">
                            <div class="flex">
                                <h3 class="font-bold w-1/2 flex items-center break-normal text-st-gray justify-between my-2 lg:text-3xl text-4xl">
                                    SMART-Wärme                                </h3>
                                <img class="w-1/2 lazy"
                                     data-src="/W%C3%A4rme/image-thumb__25__image-flipbox-back/Smart-Tec_Icons_RGB_Waerme.png"
                                     alt="">
                            </div>
                            <p class="my-2">
                                So wollte ich schon immer heizen: umweltbewusst und kostensparend                            </p>
                            <a href="/waerme"
                               target="">
                                <div class="w-full flex justify-center bg-product-waerme py-2 px-6 text-white hover:bg-st-green hover:text-white border hover:border-st-green transition-all duration-300 ease-in-out text-lg">
                                    Mehr erfahren                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                            <div
                        class="flip-card  flex flex-col items-stretch bg-transparent w-full min-h-flip xl:w-1/3  md:w-1/2 xl:px-12 md:px-6 my-4 relative">

                    <div class="flip-card-inner flex-auto items-stretch flex shadow-xl w-full relative">
                        <div class="flip-card-front bg-white z-10 w-full h-full absolute flex items-center lg:p-6 p-2 justify-center flex-col border-gray-300 border shadow-flip-boxes lazy">
                            <img data-src="/_default_upload_bucket/image-thumb__82__image-flipbox-front/alex2.pjpeg"
                                 alt="">
                            <h3 class="font-bold flex items-center break-all text-st-gray flex-wrap my-3 lg:text-3xl text-4xl">
                                SMART-Kälte                            </h3>
                        </div>
                        <div class="flip-card-back z-50 justify-between bg-white shadow-flip-boxes w-full flex-auto flex-col flex items-stretch border-gray-300 border px-6 py-8">
                            <div class="flex">
                                <h3 class="font-bold w-1/2 flex items-center break-normal text-st-gray justify-between my-2 lg:text-3xl text-4xl">
                                    SMART-Kälte                                </h3>
                                <img class="w-1/2 lazy"
                                     data-src="/K%C3%A4lte/image-thumb__22__image-flipbox-back/Smart-Tec_Icons_RGB_Kaelte.png"
                                     alt="">
                            </div>
                            <p class="my-2">
                                Lassen Sie sich überraschen: So günstig und einfach kommen Sie an Ihr ideales Raumklima.                            </p>
                            <a href="/kaelte"
                               target="">
                                <div class="w-full flex justify-center bg-product-thermografie py-2 px-6 text-white hover:bg-st-green hover:text-white border hover:border-st-green transition-all duration-300 ease-in-out text-lg">
                                    Mehr erfahren                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                            <div
                        class="flip-card  flex flex-col items-stretch bg-transparent w-full min-h-flip xl:w-1/3  md:w-1/2 xl:px-12 md:px-6 my-4 relative">

                    <div class="flip-card-inner flex-auto items-stretch flex shadow-xl w-full relative">
                        <div class="flip-card-front bg-white z-10 w-full h-full absolute flex items-center lg:p-6 p-2 justify-center flex-col border-gray-300 border shadow-flip-boxes lazy">
                            <img data-src="/_default_upload_bucket/image-thumb__80__image-flipbox-front/daniela2.pjpeg"
                                 alt="">
                            <h3 class="font-bold flex items-center break-all text-st-gray flex-wrap my-3 lg:text-3xl text-4xl">
                                SMART-LED                            </h3>
                        </div>
                        <div class="flip-card-back z-50 justify-between bg-white shadow-flip-boxes w-full flex-auto flex-col flex items-stretch border-gray-300 border px-6 py-8">
                            <div class="flex">
                                <h3 class="font-bold w-1/2 flex items-center break-normal text-st-gray justify-between my-2 lg:text-3xl text-4xl">
                                    SMART-LED                                </h3>
                                <img class="w-1/2 lazy"
                                     data-src="/LED/image-thumb__10__image-flipbox-back/Smart-Tec_Icons_RGB_LED.png"
                                     alt="">
                            </div>
                            <p class="my-2">
                                Für alle, die nicht nur beim Kauf, sondern auch beim Verbrauch sparen wollen.                            </p>
                            <a href="/LED"
                               target="">
                                <div class="w-full flex justify-center bg-product-led py-2 px-6 text-white hover:bg-st-green hover:text-white border hover:border-st-green transition-all duration-300 ease-in-out text-lg">
                                    Mehr erfahren                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                            <div
                        class="flip-card  flex flex-col items-stretch bg-transparent w-full min-h-flip xl:w-1/3  md:w-1/2 xl:px-12 md:px-6 my-4 relative">

                    <div class="flip-card-inner flex-auto items-stretch flex shadow-xl w-full relative">
                        <div class="flip-card-front bg-white z-10 w-full h-full absolute flex items-center lg:p-6 p-2 justify-center flex-col border-gray-300 border shadow-flip-boxes lazy">
                            <img data-src="/_default_upload_bucket/image-thumb__74__image-flipbox-front/hannah3.pjpeg"
                                 alt="">
                            <h3 class="font-bold flex items-center break-all text-st-gray flex-wrap my-3 lg:text-3xl text-4xl">
                                SMART-Solar                            </h3>
                        </div>
                        <div class="flip-card-back z-50 justify-between bg-white shadow-flip-boxes w-full flex-auto flex-col flex items-stretch border-gray-300 border px-6 py-8">
                            <div class="flex">
                                <h3 class="font-bold w-1/2 flex items-center break-normal text-st-gray justify-between my-2 lg:text-3xl text-4xl">
                                    SMART-Solar                                </h3>
                                <img class="w-1/2 lazy"
                                     data-src="/Solar/image-thumb__24__image-flipbox-back/Smart-Tec_Icons_RGB_Solar.png"
                                     alt="">
                            </div>
                            <p class="my-2">
                                Mit uns werden Sie ganz einfach Ökostromproduzent!                            </p>
                            <a href="/Solar"
                               target="">
                                <div class="w-full flex justify-center bg-product-solar py-2 px-6 text-white hover:bg-st-green hover:text-white border hover:border-st-green transition-all duration-300 ease-in-out text-lg">
                                    Mehr erfahren                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            
        </div>
    </section>

</div><div class="pimcore_area_text-image-banner pimcore_area_content">
                <section class="flex flex-wrap py-4 md:py-8" x-data="smartTec.bannerSlider()" x-init="sliderInit()">
                    <div class="lg:w-1/3 w-full h-20 lg:h-auto"
                 x-show="2>1" x-ref="bannerSlider">
                <div data-glide-el="track" class="glide__track h-full">

                    <ul class="glide__slides h-full w-full inline-flex justify-between">
                                                    <li class="glide__slide w-full bg-cover bg-no-repeat bg-top h-full lazy"
                                data-bg="/_default_upload_bucket/image-thumb__80__banner-slider-image/daniela2.pjpeg"
                                title=""></li>
                                                    <li class="glide__slide w-full bg-cover bg-no-repeat bg-top h-full lazy"
                                data-bg="/_default_upload_bucket/image-thumb__81__banner-slider-image/daniela2_1.pjpeg"
                                title=""></li>
                                            </ul>
                </div>
            </div>
        

            <div class="w-full lg:w-2/3 bg-st-gray ">
                <div class="flex flex-col px-4 py-2 lg:px-18 lg:py-6 h-full justify-between lg:w-4/5">
                    <h2 class="font-bold text-2xl md:text-3xl text-white py-2">
                        Über uns                    </h2>
                    <p class="text-white text-base text-lg py-2">
                        SMART-TEC ist die Dienstleistungsmarke der Stadtwerke Herne. Als Energielieferant blicken wir auf eine über 100-jährige Geschichte zurück. Mit SMART-TEC setzen wir nun diese Erfahrung auf neue Weise ein: Wenn Sie Ihre Haustechnik erneuern wollen, unterstützen wir Sie dabei. Umweltschutz und Energiesparen? Zuhause das Auto tanken? Mit Hilfe der Sonne den eigenen Energieverbrauch absichern? Wir helfen Ihnen, die richtige Haustechnik für Ihre Wünsche nicht nur zu finden, sondern auch nutzbar zu machen. Durch uns und unsere Netzwerkpartner sind Sie dabei nicht nur bei der Planung immer bestens beraten, sondern auch bei der Umsetzung immer auf der sicheren Seite. Wir kümmern uns um alles. Wenn Sie das wollen. Mit SMART-TEC arbeiten wir mit voller Kraft an einer nachhaltigeren und umweltfreundlicheren Zukunft. Unseren Stadtwerke-Werten bleiben wir dabei treu: Kundennähe und der Wunsch, Ihnen das Leben so einfach wie möglich zu machen. Zumindest immer dann, wenn es Haustechnik und Energieversorgung geht. Denn davon verstehen wir was.
                                                    <img class="h-24 py-6 lazy"
                                 data-src="/Logos/image-thumb__104__text-image-banner/STWH_Zusatz_RGB_Wei%E2%94%9C%C6%92.png"
                                 alt="">
                        
                                                    <a href="/Wir%20%C3%BCber%20uns"
                               target="_blank" class="w-1/2">
                                <div class="w-1/2 text-center font-semibold py-2 px-6 my-4 text- hover:text- hover:bg-st-purple bg-st-green transition-all duration-300 ease-in-out text-lg">
                                    Mehr erfahren                                </div>
                            </a>
                                            </p>

                </div>
            </div>
        </section>
    </div><div class="pimcore_area_topic-preview pimcore_area_content">
<section class="md:px-6 px-2 py-8 overflow-x-hidden">
        <div class="container flex flex-col mx-auto p-2 md:p-6">
            <h3 class="px-6 my-4 font-bold text-3xl"></h3>

        
        
        
                    <div class="flex flex-wrap justify-center my-4 lg:flex-row">
                                    <a href="/LED"
                       class="flex flex-col my-4 group w-full lg:w-1/3 py-4 px-6">
                        <img class="w-full h-auto lazy"
                             data-src="/_default_upload_bucket/image-thumb__101__topic-box/SmartTec_Herne_mku_11.pjpeg"
                             alt="">
                        <div class="px-6 py-4 flex flex-col jutify-between h-full bg-">
                            <div class="flex flex-col relative h-full justify-between">
                                <div class="flex items-center lg:items-baseline">
                                    <i class="fas transition-colors duration-300 ease-in-out fa-chevron-circle-right text-3xl mr-3 text-"></i>

                                    <h3 class="font-bold my-2 text-2xl text-"
                                        style="overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3;">
                                        Innovative Heiztechnik                                    </h3>
                                </div>
                                <div class="text-st-gray text-lg lg:text-base"
                                     style="overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 4;">
                                    <p>Das Projekt Albert-Schweizer-Carré setzt auf innovative <strong>Heiztechniken</strong>. Genration Nachhaltigkeit - zukunftsorientiert mit SMART-TEC</p>
                                </div>
                            </div>
                            <div>
                                <div class="text-center lg:text-base text-lg font-semibold bg-st-gray py-2 px-6 my-4 text-white group-hover:bg-st-purple group-hover:text-white transition-all duration-300 ease-in-out text-lg">
                                    Mehr lesen                                </div>
                            </div>
                        </div>
                    </a>
                                    <a href=""
                       class="flex flex-col my-4 group w-full lg:w-1/3 py-4 px-6">
                        <img class="w-full h-auto lazy"
                             data-src="/image-thumb__27__topic-box/Hero.pjpeg"
                             alt="Smart: Wärme">
                        <div class="px-6 py-4 flex flex-col jutify-between h-full bg-">
                            <div class="flex flex-col relative h-full justify-between">
                                <div class="flex items-center lg:items-baseline">
                                    <i class="fas transition-colors duration-300 ease-in-out fa-chevron-circle-right text-3xl mr-3 text-"></i>

                                    <h3 class="font-bold my-2 text-2xl text-"
                                        style="overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3;">
                                        Thermografie                                    </h3>
                                </div>
                                <div class="text-st-gray text-lg lg:text-base"
                                     style="overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 4;">
                                    <p>Sie wollen wissen, ob Ihr Haus noch ganz dicht ist? Das können wir Ihnen nicht nur sagen, sondern machen Ihnen sogar ein Bild davon. Und Sie sehen, ob und wenn...</p>
                                </div>
                            </div>
                            <div>
                                <div class="text-center lg:text-base text-lg font-semibold bg-st-gray py-2 px-6 my-4 text-white group-hover:bg-st-purple group-hover:text-white transition-all duration-300 ease-in-out text-lg">
                                    Mehr lesen                                </div>
                            </div>
                        </div>
                    </a>
                                    <a href=""
                       class="flex flex-col my-4 group w-full lg:w-1/3 py-4 px-6">
                        <img class="w-full h-auto lazy"
                             data-src="/_default_upload_bucket/image-thumb__85__topic-box/Energieausweis.pjpeg"
                             alt="">
                        <div class="px-6 py-4 flex flex-col jutify-between h-full bg-">
                            <div class="flex flex-col relative h-full justify-between">
                                <div class="flex items-center lg:items-baseline">
                                    <i class="fas transition-colors duration-300 ease-in-out fa-chevron-circle-right text-3xl mr-3 text-"></i>

                                    <h3 class="font-bold my-2 text-2xl text-"
                                        style="overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3;">
                                        Energieausweis wie sieht eine dreizeilige headline aus?                                    </h3>
                                </div>
                                <div class="text-st-gray text-lg lg:text-base"
                                     style="overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 4;">
                                    Wenn das Haus die Hände wechseln soll, müssen Sie ihn haben: Den Nachweis darüber, wie energieeffizient Ihre Immobilie ist. Wir machen das für Sie. Wie? Das erfahren hier.                                </div>
                            </div>
                            <div>
                                <div class="text-center lg:text-base text-lg font-semibold bg-st-gray py-2 px-6 my-4 text-white group-hover:bg-st-purple group-hover:text-white transition-all duration-300 ease-in-out text-lg">
                                    Mehr lesen                                </div>
                            </div>
                        </div>
                    </a>
                            </div>
            </div>
</section>

</div></div>

<footer class="border-t-2 border-st-gray mt-12">
    <div class="container p-6 mx-auto">
        <!-- Icons Line -->
        <div class="flex flex-wrap">
                            <div
                        class="w-full lg:w-2/3 my-4 lg:my-0 flex flex-col lg:flex-row justify-between items-center"
                >
                    <div class="mb-4 lg:mb-0 lg:w-1/5">
                        <a href="/Startseite"
                           target=""><img class="h-32 w-32 lazy"
                                                                                        data-src="/Logos/image-thumb__4__footer-image-small/Logo_SMART-TEC.png"
                                                                                        alt=""/></a>
                    </div>
                    <div class="lg:w-4/5">
                        <a
                           class="lazy"
                           href="https://www.stadtwerke-herne.de/privatkunden"
                           target="_blank"><img
                                    data-src="/image-thumb__2__footer-image-big/footer.pjpeg"
                                    alt=""/></a>
                    </div>
                </div>
                        <div
                    class="w-full lg:w-1/3 my-4 lg:my-0 flex justify-center items-center"
            >
                                    <a tabindex="-1" href=""
                       target="">
                        <i
                                class="fab text-st-gray text-5xl mx-1 hover:text-product-peach transition-colors ease-in-out duration-200 "
                        ></i>
                    </a>
                                    <a tabindex="-1" href=""
                       target="">
                        <i
                                class="fab text-st-gray text-5xl mx-1 hover:text-product-peach transition-colors ease-in-out duration-200 "
                        ></i>
                    </a>
                                    <a tabindex="-1" href=""
                       target="">
                        <i
                                class="fab text-st-gray text-5xl mx-1 hover:text-product-peach transition-colors ease-in-out duration-200 "
                        ></i>
                    </a>
                            </div>
        </div>
        <!-- Three Columns -->
        <div class="flex flex-wrap justify-between my-12">
            <div
                    class="flex w-full items-baseline lg:items-start lg:w-1/4 my-4 lg:my-0 flex-col"
            >
                <div class="text-xl font-bold uppercase mb-4">Wichtige Links</div>
                                                                                    <div class="text-xl">Grenzweg 18</div>                                                                                                        <div class="text-xl">44623 Herne</div>                                                                                <a href="tel:+4923235921234" class="transition-all duration-200 ease-in-out hover:text-st-green hover:underline">                        <div class="text-xl">Telefon: 02323 592 12 34</div></a>                                                                                <a href="mailto:info@smart-tec.de" class="transition-all duration-200 ease-in-out hover:text-st-green hover:underline">                        <div class="text-xl">E-Mail: info@smart-tec.de</div></a>                                    
            </div>

                            <div
                        class="flex w-full items-baseline lg:items-start lg:w-1/4 my-4 lg:my-0 flex-col"
                >
                    <div class="text-xl font-bold uppercase mb-4">Produkte</div>
                                                                        <a href="/waerme" class="transition-all duration-200 ease-in-out hover:text-st-green hover:underline">                            <div class="text-xl">SMART Wärme</div></a>                                                                                                <a href="/kaelte" class="transition-all duration-200 ease-in-out hover:text-st-green hover:underline">                            <div class="text-xl">SMART Kälte</div></a>                                                                                                <a href="/Solar" class="transition-all duration-200 ease-in-out hover:text-st-green hover:underline">                            <div class="text-xl">SMART Solar</div></a>                                                                                                <a href="/Abrechnen" class="transition-all duration-200 ease-in-out hover:text-st-green hover:underline">                            <div class="text-xl">SMART Abrechnen</div></a>                                                                                                <a href="/e-Mobilit%C3%A4t" class="transition-all duration-200 ease-in-out hover:text-st-green hover:underline">                            <div class="text-xl">SMART eMobilität</div></a>                                                                                                <a href="/LED" class="transition-all duration-200 ease-in-out hover:text-st-green hover:underline">                            <div class="text-xl">SMART LED</div></a>                                                            </div>
            
                            <div
                        class="flex w-full items-baseline lg:items-start lg:w-1/4 my-4 lg:my-0 flex-col"
                >
                    <div class="text-xl font-bold uppercase mb-4">Unternehmen</div>
                                                                        <a href="/Wir%20%C3%BCber%20uns" class="transition-all duration-200 ease-in-out hover:text-st-green hover:underline">                            <div class="text-xl">Über uns</div></a>                                                                                                <a href="/Impressum" class="transition-all duration-200 ease-in-out hover:text-st-green hover:underline">                            <div class="text-xl">Impressum</div></a>                                                                                                <a href="/Datenschutz" class="transition-all duration-200 ease-in-out hover:text-st-green hover:underline">                            <div class="text-xl">Datenschutz</div></a>                                                            </div>

            
        </div>
    </div>
</footer>
</body>
</html>
