<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ title }} | Michael Schiemer</title>

        <!-- Favicon (optional) -->
        <link rel="icon" href="/favicon.ico" type="image/x-icon">

        <!-- Eigene Styles -->

        <!-- Open Graph / SEO Meta-Tags (optional) -->
        <meta name="description" content="Kurzbeschreibung der Seite">

        <!-- Dark Mode Unterstützung (optional) -->
        <meta name="color-scheme" content="light dark">
    </head>
    <body class="grainy">
        <div class="noise-overlay"></div>

        <a href="#pageTitle" class="skip-link">Skip to content</a>

        <!-- Header -->
            <header view-transition-name="site-header">
                <div>
                <a href="/" aria-label="Zur Startseite">MS</a>


                    <nav>
                        <menu>
                            <li><a href="/">Startseite</a></li>
                            <li><a href="/impressum">Impressum</a></li>
                            <li><a href="/kontakt">Kontakt</a></li>
                        </menu>
                    </nav>

                <!--<button popovertarget="mypopover"
                        popovertargetaction="show"
                        aria-label="Menü öffnen"
                        aria-controls="Main Navigation"
                        aria-expanded="false"
                        id="menu-toggle"
                >☰</button>-->
                </div>
            </header>

        <!--<div class="backdrop"></div>

        <aside id="sidebar" view-transition-name="sidebar">

            <nav aria-label="Hauptnavigation" id="mypopover">
                <menu>
                    <li><a href="/">Startseite</a></li>
                    <li><a href="/impressum">Impressum</a></li>
                    <li><a href="/kontakt">Kontakt</a></li>
                </menu>
            </nav>
        </aside>-->

            <!--<div class="page-container"  tabindex="-1" id="pageTitle" style="outline: none">-->

                <main view-transition-name="main-content">
                    <component name="alert" type="danger" message="Dies ist ein Hinweis" />

                    <component name="card" title="Titel" message="Nachricht" />


                    <!-- @dev START -->
                    <div>Dies ist nur für Entwickler sichtbar.</div>
                    <!-- @dev END -->
                    <div>Das ist öffentlich.</div>

                </main>


            <!--</div>-->

            <footer role="contentinfo" view-transition-name="site-footer">
                <nav aria-label="Footer Navigation">
                    <menu class="footer-nav">
                        <li><a href="/impressum">Impressum</a></li>
                        <li><a href="/datenschutz">Datenschutz</a></li>
                        <li><a href="/sitemap">Sitemap</a></li>
                    </menu>
                </nav>
                <p>&copy; 2025 Michael Schiemer. Alle Rechte vorbehalten.</p>
            </footer>
    </body>
</html>
