{{!-- Kopfbereich: schmale Menüleiste, darunter Logo und Untertitel über einer kräftigen Linie --}}
<header class="site-header container">

    <div class="topbar">

        <button class="nav-toggle" type="button" aria-label="{{t "Menu"}}" aria-expanded="false" aria-controls="site-nav">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></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="12" height="12" fill="none" stroke="currentColor" stroke-width="3" 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*((?:[-–—]\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="topbar__actions">
            {{#if @site.members_enabled}}
                {{#if @member}}
                    <a class="btn" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
                {{else}}
                    <a class="btn" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
                {{/if}}
            {{/if}}

            <button class="theme-toggle" type="button" aria-label="{{t "Toggle dark mode"}}">
                <svg class="theme-toggle__sun" viewBox="0 0 24 24" width="14" height="14" 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>
                <svg class="theme-toggle__moon" viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
                <span class="theme-toggle__light">{{t "Light"}}</span>
                <span class="theme-toggle__dark">{{t "Dark"}}</span>
            </button>
        </div>

        <div class="topbar__icons">
            {{#if @site.facebook}}
                <a class="icon-link" href="{{social_url type="facebook"}}" target="_blank" rel="noopener" aria-label="Facebook">
                    <svg viewBox="0 0 24 24" width="17" height="17" fill="currentColor"><path d="M13.5 22v-8.5h2.9l.45-3.4H13.5V7.95c0-.98.27-1.65 1.68-1.65h1.8V3.26A24 24 0 0 0 14.36 3.1c-2.6 0-4.37 1.58-4.37 4.5v2.5H7.05v3.4H10V22h3.5z"/></svg>
                </a>
            {{/if}}
            {{#if @site.twitter}}
                <a class="icon-link" href="{{social_url type="twitter"}}" target="_blank" rel="noopener" aria-label="X">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M17.75 3h3.07l-6.7 7.66L22 21h-6.17l-4.83-6.32L5.47 21H2.4l7.17-8.2L2 3h6.33l4.37 5.77L17.75 3zm-1.08 16.17h1.7L7.4 4.73H5.58l11.09 14.44z"/></svg>
                </a>
            {{/if}}
            {{#if @custom.instagram_url}}
                <a class="icon-link" href="{{@custom.instagram_url}}" target="_blank" rel="noopener" aria-label="Instagram">
                    <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
                </a>
            {{/if}}
            {{#if @custom.youtube_url}}
                <a class="icon-link" href="{{@custom.youtube_url}}" target="_blank" rel="noopener" aria-label="YouTube">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M21.6 7.2a2.5 2.5 0 0 0-1.76-1.77C18.28 5 12 5 12 5s-6.28 0-7.84.43A2.5 2.5 0 0 0 2.4 7.2 26 26 0 0 0 2 12a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.76 1.77C5.72 19 12 19 12 19s6.28 0 7.84-.43a2.5 2.5 0 0 0 1.76-1.77A26 26 0 0 0 22 12a26 26 0 0 0-.4-4.8zM10 15V9l5.2 3-5.2 3z"/></svg>
                </a>
            {{/if}}
            <button class="icon-link" type="button" data-ghost-search aria-label="{{t "Search"}}">
                <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
            </button>
        </div>

    </div>

    <div class="masthead">
        <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}}">
            {{else}}
                <span class="site-brand__title">{{@site.title}}</span>
            {{/if}}
        </a>
        {{#if @site.description}}
            <p class="masthead__tagline">{{@site.description}}</p>
        {{/if}}
    </div>

</header>