<!doctype html>
<html lang="{{ settings.language | default("de") }}">
<head>
    <meta charset="utf-8">
    <title>{{ settings.title }}</title>
    <style>
        :root {
            --color-background: {{ settings.colors.background | e }};
            --color-text: {{ settings.colors.text | e }};
            --color-link: {{ settings.colors.link | e }};
            --color-link-hover: {{ settings.colors.link_hover | e }};
            --color-surface: {{ settings.colors.surface | e }};
            --color-surface-alt: {{ settings.colors.surface_alt | e }};
            --color-muted-text: {{ settings.colors.muted_text | e }};
            --color-border: {{ settings.colors.border | e }};
            --color-header-background: {{ settings.colors.header_background | e }};
            --color-header-hover: {{ settings.colors.header_hover | e }};
            --color-header-text: {{ settings.colors.header_text | e }};
            --color-footer-background: {{ settings.colors.footer_background | e }};
            --color-footer-text: {{ settings.colors.footer_text | e }};
            --color-hero-background: {{ settings.colors.hero_background | e }};
            --color-accent: {{ settings.colors.accent | e }};
            --font-body: {{ settings.typography.body | default("system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif") | e }};
            --font-heading: {{ settings.typography.heading | default(settings.typography.body | default("system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif")) | e }};
        }
    </style>
    <link rel="stylesheet" href="{{ static_path }}">
</head>
<body class="nav-height-{{ settings.navigation.height | default("medium") }} nav-position-{{ settings.navigation.position | default("sticky") }} nav-align-{{ settings.navigation.align | default("center") }} mobile-menu-{{ settings.mobile_menu.align | default("auto") }} mobile-submenus-{{ settings.mobile_menu.submenus | default("closed") }} font-{{ settings.typography.font | default("system") }} font-size-{{ settings.typography.size | default("medium") }} icons-{{ settings.icons.style | default("round") }} images-{{ "rounded" if settings.gallery.rounded | default(true) else "square" }}{% if logo.enabled %} logo-placement-{{ "header" if logo.header else "footer" }} logo-align-{{ logo.align | default("left") }}{% endif %}">
    <header class="site-header">
        <div class="nav-wrap">
            {% if logo.enabled and logo.header %}
                <a class="site-logo site-logo-nav" href="{{ navigation[0].url if navigation }}">
                    {% if logo.url %}
                        <img src="{{ logo.url }}" alt="{{ logo.alt }}">
                    {% else %}
                        <span>{{ logo.text }}</span>
                    {% endif %}
                </a>
            {% endif %}

            <input type="checkbox" id="nav-toggle" class="nav-toggle">
            <label for="nav-toggle" class="burger">☰</label>

            <nav class="main-nav">
                {% for item in navigation %}
                    {% if item.type == "link" %}
                        <div class="nav-item">
                            <a href="{{ item.url }}">{{ item.title }}</a>
                        </div>
                    {% elif item.type == "dropdown" %}
                        <div class="nav-item dropdown">
                            <button class="dropdown-label" type="button" aria-expanded="{{ "true" if settings.mobile_menu.submenus | default("open") == "open" else "false" }}">{{ item.title }}</button>

                            <div class="submenu">
                                {% for child in item.children %}
                                    <a href="{{ child.url }}">{{ child.title }}</a>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </nav>
        </div>
    </header>

    <main class="site-main">
        {{ body | safe }}
    </main>

    {{ footer | safe }}

    <script type="module" src="{{ static_path | replace('style.css', 'external-content.js') }}"></script>
</body>
</html>
