Header
Unter dem Navigationspunkt Produkte > Produktfamilien > Lufterhitzer > Katherm QK Nano sieht man die vollständigste Ausprägung der Navigation. Zu besseren Ansicht den Header in einem neuen Tab öffnen.
Header On Page Demo
ready
      <header class="header">
  <div class="header__wrapper">
    <section class="header__section header__section--meta">
      <div class="container">
        <div class="row justify-content-between align-items-center">
          <a class="link image image--brand col-auto" href="javascript:void(0)"
            ><img class="image__file" src="/styleguide/branding/kampmann-wort-bild-marke-light.svg"
          /></a>

          <nav class="navigation navigation--meta col-auto">
            <ul class="navigation__list">
              <li class="navigation__element">
                <div class="navigation__element-wrapper">
                  <a
                    data-bs-toggle="collapse"
                    data-bs-target="#language-switch"
                    aria-expanded="false"
                    class="navigation__link link language-switch__toggle"
                    href="#language-switch"
                    ><img
                      class="link__icon mr-0 mr-sm-2"
                      src="/src/assets/images/icons/kampmann-navigate-country.svg"
                    />Germany</a
                  >
                </div>
              </li>
              <li class="navigation__element">
                <div class="navigation__element-wrapper">
                  <a class="navigation__link link" href="javascript:void(0)"
                    ><img
                      class="link__icon mr-0 mr-sm-2"
                      src="/src/assets/images/icons/kampmann-navigate-user.svg"
                    />Kundenkonto</a
                  >
                </div>
              </li>
              <li class="navigation__element">
                <div class="navigation__element-wrapper">
                  <a class="navigation__link link" href="javascript:void(0)"
                    ><img
                      class="link__icon mr-0 mr-sm-2"
                      src="/src/assets/images/icons/kampmann-navigate-watchlist.svg"
                    />Merkliste</a
                  >
                </div>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </section>

    <section class="header__section header__section--language">
      <div id="language-switch" class="container collapse">
        <div class="row header__section-wrapper language-switch">
          <div class="col-10 col-sm-11 col-xl-3 language-switch__headline">
            <h3 class="headline headline--h3">Land und Sprache</h3>
          </div>
          <div class="col-2 col-sm-1 order-xl-3 language-switch__close">
            <img
              class="language-switch__close__icon"
              data-bs-toggle="collapse"
              data-bs-target="#language-switch"
              aria-expanded="false"
              src="/src/compiled/assets/images/icons/kampmann-close.svg"
            />
          </div>
          <div class="col-12 col-xl-8 language-switch__choice">
            <div class="row">
              {% for country in page.languages %}
              <div class="col-6 col-sm-4 col-lg-3 language-switch__item {{ country.classes }}">
                <img class="language-switch__image" src="{{ country.img }}" />
                <div class="language-switch__label">
                  <h5 class="headline headline--h5 text--lower language-switch__country mb-0">{{ country.name }}</h5>
                  {% for language in country.languages %}
                  <a class="language-switch__link" href="{{ language.id }}"
                    ><small
                      class="language-switch__language {% if language.is_active %}{{ 'language-switch__language--active' }}{% endif %}"
                      >{{ language.label }}</small
                    ></a
                  >
                  {% endfor %}
                </div>
              </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="header__section header__section--main">
      <div class="container header__part--fullheight">
        <div class="header__section-wrapper header__part--fullheight">
          <div class="row flex-column flex-md-row justify-content-md-between header__part--fullheight">
            <div class="header__interaction col-auto col-md-4 col-lg-5 col-xl-4 d-md-block">
              <div class="row">
                <div class="header__search form col-auto col-md">
                  <div class="formelement__wrapper formelement__wrapper--search">
                    <input
                      id="search"
                      class="formelement formelement--input formelement--search"
                      type="text"
                      placeholder="Search"
                    />
                    <label for="search" class="formelement__label">Search</label>

                    <svg
                      class="formelement__icon formelement__icon--search"
                      width="17px"
                      height="17px"
                      viewBox="0 0 17 17"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                    >
                      <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g
                          id="Form/Input/Text/Search/Hover"
                          transform="translate(-422.000000, -15.000000)"
                          fill="currentColor"
                          fill-rule="nonzero"
                        >
                          <g id="Icon/Search" transform="translate(422.000000, 15.000000)">
                            <path
                              d="M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z"
                              id="Shape"
                            ></path>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                </div>

                <div
                  data-navigation="#navigation__main .navigation__wrapper"
                  class="header__burger navigation__burger col-auto ml-auto d-md-none"
                >
                  <span class="navigation__burger-part"></span>
                  <span class="navigation__burger-part"></span>
                  <span class="navigation__burger-part"></span>
                </div>
              </div>
            </div>

            <nav
              id="navigation__main"
              class="navigation navigation--main col col-md-auto header__navigation header__part"
              style="--active-level: 0"
            >
              <div class="navigation__wrapper header__part--fullheight">
                <div class="navigation__wrapper-inner header__part--fullheight">
                  <ul
                    class="navigation__list navigation__list--active navigation__list--level-0 header__part--fullheight"
                  >
                    <li class="navigation__element navigation__element--breadcrumb d-md-none">
                      <span class="navigation__link navigation__link--breadcrumb navigation__link--icon" data-level="0">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                          <path
                            fill="currentColor"
                            d="M20 7.093v-5.093h-3v2.093l3 3zm4 5.907l-12-12-12 12h3v10h7v-5h4v5h7v-10h3zm-5 8h-3v-5h-8v5h-3v-10.26l7-6.912 7 6.99v10.182z"
                          />
                        </svg>
                      </span>
                    </li>
                    <li class="navigation__element" data-target="products">
                      <div class="navigation__element-wrapper">
                        <a class="navigation__link link pr-4 pr-md-0" href="javascript:void(0)">Produkte</a
                        ><span class="navigation__subnavigation-trigger d-md-none"
                          ><img class="col-12" src="/src/assets/images/graphics/arrow-right.svg"
                        /></span>
                      </div>

                      <div class="subnavigation" style="--active-level: 0">
                        <ul
                          data-parent="products"
                          class="navigation__list navigation__list--subnavigation navigation__list--subnavigation-0 navigation__list--level-1 container-md"
                        >
                          <li class="navigation__element navigation__element--breadcrumb">
                            <span
                              class="d-md-none navigation__link navigation__link--breadcrumb navigation__link--icon"
                              data-level="0"
                            >
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path
                                  fill="currentColor"
                                  d="M20 7.093v-5.093h-3v2.093l3 3zm4 5.907l-12-12-12 12h3v10h7v-5h4v5h7v-10h3zm-5 8h-3v-5h-8v5h-3v-10.26l7-6.912 7 6.99v10.182z"
                                />
                              </svg>
                            </span>
                            <span class="navigation__link navigation__link--breadcrumb" data-level="0">Produkte</span>
                          </li>

                          <li data-target="product-family" class="navigation__element navigation__element--first">
                            <div class="navigation__element-wrapper">
                              <a class="navigation__link link" href="javascript:void(0)">Produktfamilien</a
                              ><span class="navigation__subnavigation-trigger"
                                ><img class="col-12" src="/src/assets/images/graphics/arrow-right.svg"
                              /></span>
                            </div>
                            <ul
                              data-parent="product-family"
                              class="navigation__list navigation__list--subnavigation navigation__list--level-2 container-md"
                            >
                              <li class="navigation__element navigation__element--breadcrumb">
                                <span
                                  class="d-md-none navigation__link navigation__link--breadcrumb navigation__link--icon"
                                  data-level="0"
                                >
                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <path
                                      fill="currentColor"
                                      d="M20 7.093v-5.093h-3v2.093l3 3zm4 5.907l-12-12-12 12h3v10h7v-5h4v5h7v-10h3zm-5 8h-3v-5h-8v5h-3v-10.26l7-6.912 7 6.99v10.182z"
                                    />
                                  </svg>
                                </span>
                                <span class="navigation__link navigation__link--breadcrumb" data-level="0"
                                  >Produkte</span
                                ><span class="navigation__link navigation__link--breadcrumb" data-level="1"
                                  >Produktfamilien</span
                                >
                              </li>

                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Unterflurkonvektoren</a>
                                </div>
                              </li>
                              <li class="navigation__element" data-target="product-family-air-heater">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link pr-4" href="javascript:void(0)">Lufterhitzer</a
                                  ><span class="navigation__subnavigation-trigger"
                                    ><img class="col-12" src="/src/assets/images/graphics/arrow-right.svg"
                                  /></span>
                                </div>

                                <ul
                                  data-parent="product-family-air-heater"
                                  class="navigation__list navigation__list--subnavigation navigation__list--level-3"
                                >
                                  <li class="navigation__element navigation__element--breadcrumb">
                                    <span
                                      class="d-md-none navigation__link navigation__link--breadcrumb navigation__link--icon"
                                      data-level="0"
                                    >
                                      <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          fill="currentColor"
                                          d="M20 7.093v-5.093h-3v2.093l3 3zm4 5.907l-12-12-12 12h3v10h7v-5h4v5h7v-10h3zm-5 8h-3v-5h-8v5h-3v-10.26l7-6.912 7 6.99v10.182z"
                                        />
                                      </svg>
                                    </span>
                                    <span class="navigation__link navigation__link--breadcrumb" data-level="0"
                                      >Produkte</span
                                    ><span class="navigation__link navigation__link--breadcrumb" data-level="1"
                                      >Produktfamilien</span
                                    ><span class="navigation__link navigation__link--breadcrumb" data-level="2"
                                      >Lufterhitzer</span
                                    >
                                  </li>

                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm HK</a>
                                    </div>
                                  </li>
                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm NK</a>
                                    </div>
                                  </li>
                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm QK</a>
                                    </div>
                                  </li>
                                  <li class="navigation__element" data-target="product-family-katherm-qk-nano">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm QK nano</a>
                                    </div>

                                    <ul
                                      data-parent="product-family-katherm-qk-nano"
                                      class="navigation__list navigation__list--subnavigation navigation__list--level-4"
                                    >
                                      <li class="navigation__element">
                                        <div class="navigation__element-wrapper">
                                          <div class="row">
                                            <img
                                              class="col-12 mb-4"
                                              src="/src/assets/images/pictures/kampmann-unterflurkonvektor-katherm-qk-nano.png"
                                            />
                                            <h3 class="headline headline--h3 col-12">Katherm QK nano</h3>
                                            <p class="text text--primary col-12 mt-0">
                                              Unterflurkonvektor mit EC-Querstrom-ventilator-Konvektion.
                                            </p>
                                            <div class="col-12">
                                              <a class="btn btn--outline-primary" href="javascript:void(0)"
                                                >Mehr erfahren</a
                                              >
                                            </div>
                                          </div>
                                        </div>
                                      </li>
                                    </ul>
                                  </li>
                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm QL</a>
                                    </div>
                                  </li>
                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm ID</a>
                                    </div>
                                  </li>
                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm QE</a>
                                    </div>
                                  </li>
                                </ul>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Fan Coils</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">RLT-Geräte</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Luftdurchlässe</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Luftschleier</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Konvektoren</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)"
                                    >Dezenrale Lüftungsgeräte</a
                                  >
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)"
                                    >Kaltwassererzeuger/ Wärmepumpen</a
                                  >
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Deckenstrahlplatten</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Kühlbalken</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Kühldeckensysteme</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Schwerkraftkühlung</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Klappen/Regler</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Design Roste</a>
                                </div>
                              </li>
                            </ul>
                          </li>
                          <li data-target="department" class="navigation__element">
                            <div class="navigation__element-wrapper">
                              <a class="navigation__link link pr-4" href="javascript:void(0)">Einsatzbereiche</a
                              ><span class="navigation__subnavigation-trigger"
                                ><img class="col-12" src="/src/assets/images/graphics/arrow-right.svg"
                              /></span>
                            </div>

                            <ul
                              data-parent="department"
                              class="navigation__list navigation__list--subnavigation navigation__list--level-2 container-md"
                            >
                              <li class="navigation__element navigation__element--breadcrumb">
                                <span
                                  class="d-md-none navigation__link navigation__link--breadcrumb navigation__link--icon"
                                  data-level="0"
                                >
                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <path
                                      fill="currentColor"
                                      d="M20 7.093v-5.093h-3v2.093l3 3zm4 5.907l-12-12-12 12h3v10h7v-5h4v5h7v-10h3zm-5 8h-3v-5h-8v5h-3v-10.26l7-6.912 7 6.99v10.182z"
                                    />
                                  </svg>
                                </span>
                                <span class="navigation__link navigation__link--breadcrumb" data-level="0"
                                  >Produkte</span
                                ><span class="navigation__link navigation__link--breadcrumb" data-level="1"
                                  >Einsatzbereiche</span
                                >
                              </li>

                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Bürogebäude</a>
                                </div>
                              </li>
                              <li class="navigation__element" data-target="air-heater">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link pr-4" href="javascript:void(0)"
                                    >Gewerbe- und Industrie</a
                                  ><span class="navigation__subnavigation-trigger"
                                    ><img class="col-12" src="/src/assets/images/graphics/arrow-right.svg"
                                  /></span>
                                </div>

                                <ul
                                  data-parent="air-heater"
                                  class="navigation__list navigation__list--subnavigation navigation__list--level-3"
                                >
                                  <li class="navigation__element navigation__element--breadcrumb">
                                    <span
                                      class="d-md-none navigation__link navigation__link--breadcrumb navigation__link--icon"
                                      data-level="0"
                                    >
                                      <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          fill="currentColor"
                                          d="M20 7.093v-5.093h-3v2.093l3 3zm4 5.907l-12-12-12 12h3v10h7v-5h4v5h7v-10h3zm-5 8h-3v-5h-8v5h-3v-10.26l7-6.912 7 6.99v10.182z"
                                        />
                                      </svg>
                                    </span>
                                    <span class="navigation__link navigation__link--breadcrumb" data-level="0"
                                      >Produkte</span
                                    ><span class="navigation__link navigation__link--breadcrumb" data-level="1"
                                      >Einsatzbereiche</span
                                    ><span class="navigation__link navigation__link--breadcrumb" data-level="2"
                                      >Lufterhitzer</span
                                    >
                                  </li>

                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm HK</a>
                                    </div>
                                  </li>
                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm NK</a>
                                    </div>
                                  </li>
                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm QK</a>
                                    </div>
                                  </li>
                                  <li class="navigation__element" data-target="katherm-qk-nano">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm QK nano</a>
                                    </div>

                                    <ul
                                      data-parent="katherm-qk-nano"
                                      class="navigation__list navigation__list--subnavigation navigation__list--level-4"
                                    >
                                      <li class="navigation__element">
                                        <div class="navigation__element-wrapper">
                                          <div class="row">
                                            <img
                                              class="col-12 mb-4"
                                              src="/src/assets/images/pictures/kampmann-unterflurkonvektor-katherm-qk-nano.png"
                                            />
                                            <h3 class="headline headline--h3 col-12">Katherm QK nano</h3>
                                            <p class="text text--primary col-12 mt-0">
                                              Unterflurkonvektor mit EC-Querstrom-ventilator-Konvektion.
                                            </p>
                                            <div class="col-12">
                                              <a class="btn btn--outline-primary" href="javascript:void(0)"
                                                >Mehr erfahren</a
                                              >
                                            </div>
                                          </div>
                                        </div>
                                      </li>
                                    </ul>
                                  </li>
                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm QL</a>
                                    </div>
                                  </li>
                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm ID</a>
                                    </div>
                                  </li>
                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <a class="navigation__link link" href="javascript:void(0)">Katherm QE</a>
                                    </div>
                                  </li>
                                </ul>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)"
                                    >Hotel und Serviced Living</a
                                  >
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)"
                                    >Handelskette und Verkaufsgebäude</a
                                  >
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)"
                                    >Multifunktions- und Sporthalle</a
                                  >
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Kita und Schule</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Bahnhof und Flughafen</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Großküche</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Medizin</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Historische Gebäude</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Spa und Bad</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Wohnraum</a>
                                </div>
                              </li>
                            </ul>
                          </li>
                          <li data-target="shop" class="navigation__element">
                            <div class="navigation__element-wrapper">
                              <a class="navigation__link link" href="javascript:void(0)">Shop</a>
                            </div>
                          </li>
                          <li data-target="tools" class="navigation__element">
                            <div class="navigation__element-wrapper">
                              <a class="navigation__link link" href="javascript:void(0)">Tools</a>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </li>
                    <li class="navigation__element" data-target="service">
                      <div class="navigation__element-wrapper">
                        <a class="navigation__link link pr-4 pr-md-0" href="javascript:void(0)">Service</a
                        ><span class="navigation__subnavigation-trigger d-md-none"
                          ><img class="col-12" src="/src/assets/images/graphics/arrow-right.svg"
                        /></span>
                      </div>

                      <div class="subnavigation" style="--active-level: 0">
                        <ul
                          data-parent="service"
                          class="navigation__list navigation__list--subnavigation navigation__list--subnavigation-0 navigation__list--level-1 container-md"
                        >
                          <li class="navigation__element navigation__element--breadcrumb">
                            <span
                              class="d-md-none navigation__link navigation__link--breadcrumb navigation__link--icon"
                              data-level="0"
                            >
                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                <path
                                  fill="currentColor"
                                  d="M20 7.093v-5.093h-3v2.093l3 3zm4 5.907l-12-12-12 12h3v10h7v-5h4v5h7v-10h3zm-5 8h-3v-5h-8v5h-3v-10.26l7-6.912 7 6.99v10.182z"
                                />
                              </svg>
                            </span>
                            <span class="navigation__link navigation__link--breadcrumb" data-level="0">Service</span>
                          </li>

                          <li data-target="campus" class="navigation__element navigation__element--first">
                            <div class="navigation__element-wrapper">
                              <a class="navigation__link link" href="javascript:void(0)">Kampus</a
                              ><span class="navigation__subnavigation-trigger"
                                ><img class="col-12" src="/src/assets/images/graphics/arrow-right.svg"
                              /></span>
                            </div>

                            <ul
                              data-parent="campus"
                              class="navigation__list navigation__list--subnavigation navigation__list--level-2"
                            >
                              <li class="navigation__element navigation__element--breadcrumb">
                                <span
                                  class="d-md-none navigation__link navigation__link--breadcrumb navigation__link--icon"
                                  data-level="0"
                                >
                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <path
                                      fill="currentColor"
                                      d="M20 7.093v-5.093h-3v2.093l3 3zm4 5.907l-12-12-12 12h3v10h7v-5h4v5h7v-10h3zm-5 8h-3v-5h-8v5h-3v-10.26l7-6.912 7 6.99v10.182z"
                                    />
                                  </svg>
                                </span>
                                <span class="navigation__link navigation__link--breadcrumb" data-level="0">Service</span
                                ><span class="navigation__link navigation__link--breadcrumb" data-level="1"
                                  >Kampus</span
                                >
                              </li>

                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Beratung</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Auslegung</a>
                                </div>

                                <ul
                                  data-parent="katherm-qk-nano"
                                  class="navigation__list navigation__list--subnavigation navigation__list--level-4"
                                >
                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <div class="row">
                                        <img
                                          class="col-12 mb-4"
                                          src="/src/assets/images/pictures/kampmann-projektunsterstuetzung-auslegung-kontakt.png"
                                        />
                                        <h3 class="headline headline--h3 col-12">Kontakt</h3>
                                        <p class="text text--primary col-12 mt-0">
                                          Finden Sie Ihren persönlichen Ansprechpartner
                                        </p>
                                        <div class="col-12">
                                          <a class="btn btn--outline-primary" href="javascript:void(0)"
                                            >Mehr erfahren</a
                                          >
                                        </div>
                                      </div>
                                    </div>
                                  </li>
                                </ul>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)"
                                    >Konstruktion und Sonderlösungen</a
                                  >
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Lieferung</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Montage</a>
                                </div>
                              </li>
                            </ul>
                          </li>

                          <li data-target="projectsupport" class="navigation__element">
                            <div class="navigation__element-wrapper">
                              <a class="navigation__link link pr-4" href="javascript:void(0)"
                                >Projekt&shy;unterstützung</a
                              ><span class="navigation__subnavigation-trigger"
                                ><img class="col-12" src="/src/assets/images/graphics/arrow-right.svg"
                              /></span>
                            </div>

                            <ul
                              data-parent="projectsupport"
                              class="navigation__list navigation__list--subnavigation navigation__list--level-2"
                            >
                              <li class="navigation__element navigation__element--breadcrumb">
                                <span
                                  class="d-md-none navigation__link navigation__link--breadcrumb navigation__link--icon"
                                  data-level="0"
                                >
                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <path
                                      fill="currentColor"
                                      d="M20 7.093v-5.093h-3v2.093l3 3zm4 5.907l-12-12-12 12h3v10h7v-5h4v5h7v-10h3zm-5 8h-3v-5h-8v5h-3v-10.26l7-6.912 7 6.99v10.182z"
                                    />
                                  </svg>
                                </span>
                                <span class="navigation__link navigation__link--breadcrumb" data-level="0">Service</span
                                ><span class="navigation__link navigation__link--breadcrumb" data-level="1"
                                  >Projektunterstützung</span
                                >
                              </li>

                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Beratung</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Auslegung</a>
                                </div>

                                <ul
                                  data-parent="katherm-qk-nano"
                                  class="navigation__list navigation__list--subnavigation navigation__list--level-4"
                                >
                                  <li class="navigation__element">
                                    <div class="navigation__element-wrapper">
                                      <div class="row">
                                        <img
                                          class="col-12 mb-4"
                                          src="/src/assets/images/pictures/kampmann-projektunsterstuetzung-auslegung-kontakt.png"
                                        />
                                        <h3 class="headline headline--h3 col-12">Kontakt</h3>
                                        <p class="text text--primary col-12 mt-0">
                                          Finden Sie Ihren persönlichen Ansprechpartner
                                        </p>
                                        <div class="col-12">
                                          <a class="btn btn--outline-primary" href="javascript:void(0)"
                                            >Mehr erfahren</a
                                          >
                                        </div>
                                      </div>
                                    </div>
                                  </li>
                                </ul>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)"
                                    >Konstruktion und Sonderlösungen</a
                                  >
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Lieferung</a>
                                </div>
                              </li>
                              <li class="navigation__element">
                                <div class="navigation__element-wrapper">
                                  <a class="navigation__link link" href="javascript:void(0)">Montage</a>
                                </div>
                              </li>
                            </ul>
                          </li>
                          <li class="navigation__element">
                            <div class="navigation__element-wrapper">
                              <a class="navigation__link link" href="javascript:void(0)">Customer Service</a>
                            </div>
                          </li>
                          <li class="navigation__element">
                            <div class="navigation__element-wrapper">
                              <a class="navigation__link link" href="javascript:void(0)">Regelung</a>
                            </div>
                          </li>
                          <li class="navigation__element">
                            <div class="navigation__element-wrapper">
                              <a class="navigation__link link" href="javascript:void(0)">Tools</a>
                            </div>
                          </li>
                          <li class="navigation__element">
                            <div class="navigation__element-wrapper">
                              <a class="navigation__link link" href="javascript:void(0)">Ersatzteilshop</a>
                            </div>
                          </li>
                          <li class="navigation__element">
                            <div class="navigation__element-wrapper">
                              <a class="navigation__link link" href="javascript:void(0)">Kontakt</a>
                            </div>
                          </li>
                          <li class="navigation__element">
                            <div class="navigation__element-wrapper">
                              <a class="navigation__link link" href="javascript:void(0)">Lorem ipsum 3</a>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </li>
                    <li class="navigation__element" data-target="company">
                      <div class="navigation__element-wrapper">
                        <a class="navigation__link link" href="javascript:void(0)">Unternehmen</a>
                      </div>
                    </li>
                    <li class="navigation__element" data-target="contact">
                      <div class="navigation__element-wrapper">
                        <a class="navigation__link link" href="javascript:void(0)">Kontakt</a>
                      </div>
                    </li>

                    <li class="navigation__element d-md-none" data-target="company">
                      <div class="navigation__element-wrapper">
                        <a class="navigation__link link" href="javascript:void(0)">Unternehmen</a>
                      </div>
                    </li>
                    <li class="navigation__element d-md-none" data-target="career">
                      <div class="navigation__element-wrapper">
                        <a class="navigation__link link" href="javascript:void(0)">Karriere</a>
                      </div>
                    </li>
                    <li class="navigation__element d-md-none" data-target="news">
                      <div class="navigation__element-wrapper">
                        <a class="navigation__link link" href="javascript:void(0)">Kampmann Heute</a>
                      </div>
                    </li>
                    <li class="navigation__element d-md-none" data-target="podcast">
                      <div class="navigation__element-wrapper">
                        <a class="navigation__link link" href="javascript:void(0)">Podcast</a>
                      </div>
                    </li>

                    <li class="navigation__element d-none d-md-flex" data-target="more">
                      <div class="navigation__element-wrapper">
                        <a class="navigation__link link link--symbol" href="javascript:void(0)">
                          <svg
                            width="25px"
                            height="5px"
                            viewBox="0 0 25 5"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                          >
                            <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                              <g
                                id="Menu-Bar-Open/Columns"
                                transform="translate(-626.000000, -38.000000)"
                                fill="#0E2249"
                              >
                                <g id="Menu-Links" transform="translate(160.000000, 31.000000)">
                                  <g id="Slider-Icons" transform="translate(466.000000, 7.000000)">
                                    <circle id="Oval" cx="12.5" cy="2.5" r="2.5"></circle>
                                    <circle id="Oval" cx="2.5" cy="2.5" r="2.5"></circle>
                                    <circle id="Oval" cx="22.5" cy="2.5" r="2.5"></circle>
                                  </g>
                                </g>
                              </g>
                            </g>
                          </svg>
                        </a>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </section>
  </div>
</header>
<div class="header-dummy-hero"></div>
<div class="header-third-nav-dummy" data-navigation="onpage" style="height: 64px; background-color: #008f8c"></div>
<div class="container content text--extra-large">
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
    vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
    mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
    feugiat a, tellus.
  </p>
</div>

<script src="{{ page.script }}"></script>