{#- Kopfbereich: Markenzeile, Suche, Design-Umschalter, Navigations-Umschalter.
    Die KERN-Kopfzeile (Bundesbanner) ist bewusst nicht Teil des Themes. -#}
<header class="kux-header" role="banner">
  <div class="kux-shell kux-header__inner">

    {%- block site_name %}
    <div class="kux-branding">
      <a class="kux-branding__link" href="{% if nav.homepage %}{{ nav.homepage.url|url }}{% else %}{{ base_url }}/{% endif %}">
        {%- if kux.logo %}
        <img class="kux-branding__logo" src="{{ kux.logo|url }}" alt="{{ kux.logo_alt|e }}">
        {%- endif %}
        <span class="kux-branding__text">
          <span class="kux-branding__title">{{ config.site_name }}</span>
          {%- if config.site_description %}
          <span class="kux-branding__description">{{ config.site_description }}</span>
          {%- endif %}
        </span>
      </a>
    </div>
    {%- endblock %}

    <div class="kux-header__actions">
      {%- block search_button %}
      {%- if kux_search %}
      <button type="button" class="kern-btn kern-btn--tertiary kux-search-toggle" data-kux-search-open
              aria-haspopup="dialog" aria-controls="kux-search-dialog">
        <span class="kern-icon kern-icon--search" aria-hidden="true"></span>
        <span class="kern-label kern-sr-only-mobile">{{ kux.lang_search }}</span>
      </button>
      {%- endif %}
      {%- endblock %}

      {%- if kux.user_color_mode_toggle %}
      {%- include "partials/theme-toggle.html" %}
      {%- endif %}

      {%- if nav|length %}
      <button type="button" class="kern-btn kern-btn--secondary kux-nav-toggle" data-kux-nav-toggle
              aria-expanded="false" aria-controls="kux-nav">
        <span class="kern-icon kern-icon--dehaze" aria-hidden="true"></span>
        <span class="kern-label">{{ kux.lang_nav_toggle }}</span>
      </button>
      {%- endif %}
    </div>

  </div>
</header>