{{!-- Kopfzeile: Logo links, Menü, Symbole rechts — dahinter das Hintergrundbild --}}
<header class="site-header site-header--overlay-{{#match @custom.header_overlay "Dunkel"}}dark{{else match @custom.header_overlay "Keine"}}none{{else}}light{{/match}}">

    {{!-- Hintergrundbild als echtes Bild: so bestimmt es die Höhe der Kopfzeile und wird ganz gezeigt --}}
    {{#if @custom.header_background}}
        <img class="site-header__bg" alt=""
            srcset="{{img_url @custom.header_background size="m"}} 750w, {{img_url @custom.header_background size="l"}} 1140w, {{img_url @custom.header_background size="xl"}} 1920w"
            sizes="100vw" src="{{img_url @custom.header_background size="xl"}}">
    {{else if @site.cover_image}}
        <img class="site-header__bg" alt=""
            srcset="{{img_url @site.cover_image size="m"}} 750w, {{img_url @site.cover_image size="l"}} 1140w, {{img_url @site.cover_image size="xl"}} 1920w"
            sizes="100vw" src="{{img_url @site.cover_image size="xl"}}">
    {{/if}}

    <div class="site-header__inner">

        <a class="site-brand" href="{{@site.url}}">
            {{#if @site.logo}}
                <img class="site-brand__logo" src="{{img_url @site.logo size="s"}}" alt="{{@site.title}}">
            {{/if}}
            {{#if @custom.show_site_title}}
                <span class="site-brand__title">{{@site.title}}</span>
            {{else}}
                {{#unless @site.logo}}<span class="site-brand__title">{{@site.title}}</span>{{/unless}}
            {{/if}}
        </a>

        <button class="nav-toggle" type="button" aria-label="{{t "Menu"}}" aria-expanded="false" aria-controls="site-nav">
            <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
        </button>

        <nav class="site-nav" id="site-nav" aria-label="{{t "Menu"}}">
            {{navigation}}
        </nav>
        {{!--
            Aufklappmenüs: Ghost kennt nur ein flaches Menü. Die Ebene ergibt sich aus den
            Bindestrichen am Anfang des Namens:
                Unsere Reisen
                - Europa            (Unterpunkt von "Unsere Reisen")
                -- Zypern           (Unterpunkt von "Europa")
                - Asien
            Das Skript steht direkt hinter dem Menü, damit nichts sichtbar umspringt.
        --}}
        <script>
            (function () {
                var list = document.querySelector('#site-nav > ul');
                if (!list) return;

                var chevron = '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>';
                var submenuOf = function (parent) {
                    var submenu = parent.querySelector(':scope > .nav-submenu');
                    if (submenu) return submenu;
                    submenu = document.createElement('ul');
                    submenu.className = 'nav-submenu';
                    var toggle = document.createElement('button');
                    toggle.type = 'button';
                    toggle.className = 'nav-submenu-toggle';
                    toggle.setAttribute('aria-expanded', 'false');
                    toggle.setAttribute('aria-label', parent.querySelector('a').textContent);
                    toggle.innerHTML = chevron;
                    parent.classList.add('nav-has-children');
                    parent.appendChild(toggle);
                    parent.appendChild(submenu);
                    return submenu;
                };

                // parents[0] = letzter Hauptpunkt, parents[1] = letzter Unterpunkt der ersten Ebene
                var parents = [null, null];
                Array.prototype.slice.call(list.children).forEach(function (item) {
                    var link = item.querySelector('a');
                    if (!link) return;
                    var match = /^\s*((?:[-\u2013\u2014]\s*)+)(.+)$/.exec(link.textContent);
                    var depth = match ? Math.min(match[1].replace(/\s/g, '').length, 2) : 0;
                    // Ohne passenden Oberpunkt eine Ebene höher einhängen
                    while (depth > 0 && !parents[depth - 1]) depth--;

                    if (depth === 0) {
                        parents = [item, null];
                        return;
                    }
                    link.textContent = match[2];
                    submenuOf(parents[depth - 1]).appendChild(item);
                    if (depth === 1) parents[1] = item;

                    // Ist ein Unterpunkt die aktuelle Seite, werden auch seine Oberpunkte hervorgehoben
                    if (item.classList.contains('nav-current')) {
                        for (var i = 0; i < depth; i++) parents[i].classList.add('nav-current-parent');
                    }
                });
            })();
        </script>

        <div class="site-actions">
            {{#if @custom.linkedin_url}}
                <a class="icon-link" href="{{@custom.linkedin_url}}" target="_blank" rel="noopener" aria-label="LinkedIn">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3V9.75zm6.5 0h3.8v1.6h.06c.53-1 1.83-1.9 3.76-1.9 4.02 0 4.88 2.5 4.88 6.1V21h-4v-4.9c0-1.2-.02-2.7-1.7-2.7s-1.96 1.3-1.96 2.6V21h-4V9.75z"/></svg>
                </a>
            {{/if}}
            {{#if @custom.bluesky_url}}
                <a class="icon-link" href="{{@custom.bluesky_url}}" target="_blank" rel="noopener" aria-label="Bluesky">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M5.2 3.6C7.95 5.66 10.9 9.85 12 12.1c1.1-2.25 4.05-6.44 6.8-8.5 1.98-1.5 5.2-2.65 5.2 1.03 0 .73-.42 6.17-.67 7.05-.86 3.07-3.99 3.85-6.78 3.38 4.87.83 6.11 3.57 3.43 6.32-5.08 5.21-7.3-1.31-7.87-2.98-.1-.31-.15-.45-.11-.33-.04-.12-.01.02-.11.33-.57 1.67-2.79 8.19-7.87 2.98-2.68-2.75-1.44-5.49 3.43-6.32-2.79.47-5.92-.31-6.78-3.38C.42 10.8 0 5.36 0 4.63 0 .95 3.22 2.1 5.2 3.6z"/></svg>
                </a>
            {{/if}}
            {{#if @custom.mastodon_url}}
                <a class="icon-link" href="{{@custom.mastodon_url}}" target="_blank" rel="me noopener" aria-label="Mastodon">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M21.33 14.34c-.3 1.52-2.66 3.19-5.37 3.51-1.41.17-2.8.32-4.29.25-2.42-.11-4.34-.58-4.34-.58 0 .24.02.46.05.67.31 2.38 2.37 2.53 4.31 2.59 1.96.07 3.71-.48 3.71-.48l.08 1.77s-1.37.74-3.82.87c-1.35.07-3.02-.03-4.97-.55C2.46 21.27 1.73 16.74 1.62 12.14c-.03-1.36-.01-2.65-.01-3.73 0-4.7 3.08-6.08 3.08-6.08C6.24 1.62 8.9 1.32 11.67 1.3h.07c2.77.02 5.43.32 6.98 1.03 0 0 3.08 1.38 3.08 6.08 0 0 .04 3.47-.47 5.93zM18.4 8.83c0-1.16-.3-2.09-.89-2.77-.61-.68-1.41-1.03-2.4-1.03-1.15 0-2.02.44-2.6 1.32L12 7.3l-.56-.94c-.58-.88-1.45-1.32-2.6-1.32-.99 0-1.79.35-2.4 1.03-.59.68-.89 1.61-.89 2.77v5.68h2.25V9c0-1.16.49-1.75 1.47-1.75 1.08 0 1.62.7 1.62 2.08v3.02h2.24V9.34c0-1.38.54-2.08 1.62-2.08.98 0 1.47.59 1.47 1.75v5.51h2.25V8.83z"/></svg>
                </a>
            {{/if}}

            <button class="icon-link theme-toggle" type="button" aria-label="{{t "Toggle dark mode"}}">
                <svg class="theme-toggle__moon" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
                <svg class="theme-toggle__sun" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
            </button>

            <button class="icon-link" type="button" data-ghost-search aria-label="{{t "Search"}}">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            </button>
        </div>

    </div>
</header>