<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="assets/css/login.css">
    <link rel="stylesheet" href="assets/css/catbar.css">
    <link rel="stylesheet" href="assets/css/compcard.css">
    <link rel="stylesheet" href="assets/css/productpage.css">
    <link rel="stylesheet" href="assets/css/productAdder.css">
    <link rel="stylesheet" href="assets/css/compare.css">

    <!-- Favicon (zentral) -->
    <link rel="icon" href="assets/images/favicon.ico" sizes="any">
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <title>Geizkragen</title>

    <style>
        /* ─── Mobile tap highlight ─── */
        * { -webkit-tap-highlight-color: transparent; }

        /* ─── Safe areas (notch phones) ─── */
        .header  { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
        .footer  { padding-bottom: env(safe-area-inset-bottom); }

        /* ─── Mobile overlay ─── */
        .nav__overlay {
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            visibility: hidden;
            opacity: 0;
            transition: opacity 300ms ease, visibility 0s 300ms;
        }
        .nav__overlay.is-visible {
            visibility: visible;
            opacity: 1;
            transition: opacity 300ms ease, visibility 0s 0s;
        }
    </style>
</head>
<body>

<!-- Overlay (klick = Menü schließen) -->
<div class="nav__overlay" id="nav-overlay"></div>

<header class="header" id="header">
    <nav class="nav" aria-label="Hauptnavigation">
        <a class="nav__logoLink" href="index.php">
            <img class="nav__logo" src="assets/images/logoText.png" alt="Geizkragen" width="150">
        </a>

        <!-- Desktop-Suche (zentriert, wird auf ≤900px per CSS ausgeblendet) -->
        <form class="nav__searchForm" action="index.php" method="GET" autocomplete="off">
            <div class="nav__searchField">
                <input class="nav__searchInput" type="text" id="search" name="search"
                       placeholder="Produkte suchen…" inputmode="text">
            </div>
        </form>

        <div class="nav__inner container">

            <!-- ═══ Slide-In-Menü (wird auf Mobile per JS getoggelt) ═══ -->
            <div class="nav__menu" id="nav-menu">
                <ul class="nav__list">
                    <li class="nav__item nav__item--mobile">
                        <a href="index.php" class="nav__link">Home</a>
                    </li>
                    <li class="nav__item nav__item--mobile">
                        <a href="wunschliste.php" class="nav__link">Wunschliste</a>
                    </li>
                    <li class="nav__item nav__item--mobile">
                        <a href="compare.php" class="nav__link">Vergleich</a>
                    </li>
                    <li class="nav__item nav__item--mobile">
                        <a href="account.php" class="nav__link">Account</a>
                    </li>
                </ul>

                <!-- Schließen-Button -->
                <button class="nav__close" id="nav-close" type="button" aria-label="Menü schließen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>
            <!-- ═══ /Slide-In-Menü ═══ -->

            <div class="nav__actions">
                <a class="nav__login" href="index.php" aria-label="Home">
                    <svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
                    </svg>
                    <span class="nav__btn-text">Home</span>
                </a>
                <a class="nav__login" href="compare.php" aria-label="Vergleich">
                    <svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="20" x2="18" y2="10"></line>
                        <line x1="12" y1="20" x2="12" y2="4"></line>
                        <line x1="6" y1="20" x2="6" y2="14"></line>
                    </svg>
                    <span class="nav__btn-text">Vergleich</span>
                </a>
                <a class="nav__login" href="wunschliste.php" aria-label="Wunschliste">
                    <svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                    <span class="nav__btn-text">Wunschliste</span>
                </a>
                <a class="nav__login" href="account.php" aria-label="Account">
                    <svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                    <span class="nav__btn-text">Account</span>
                </a>

                <!-- Hamburger-Toggle -->
                <button class="nav__toggle" id="nav-toggle" type="button" aria-label="Menü öffnen">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round">
                        <line x1="3" y1="6"  x2="21" y2="6"/>
                        <line x1="3" y1="12" x2="21" y2="12"/>
                        <line x1="3" y1="18" x2="21" y2="18"/>
                    </svg>
                </button>
            </div>
        </div>
    </nav>

    <!-- Mobile-Suchleiste (unterhalb der Nav-Zeile, nur auf ≤900px sichtbar) -->
    <form class="nav__searchBar" action="index.php" method="GET" autocomplete="off">
        <div class="nav__searchField">
            <input class="nav__searchInput" type="text" name="search"
                   placeholder="Produkte suchen…" inputmode="text">
        </div>
    </form>
</header>

<script>
(function () {
    var toggle  = document.getElementById('nav-toggle');
    var closeBtn = document.getElementById('nav-close');
    var menu    = document.getElementById('nav-menu');
    var overlay = document.getElementById('nav-overlay');
    if (!toggle || !closeBtn || !menu || !overlay) return;

    function open() {
        menu.classList.add('show-menu');
        overlay.classList.add('is-visible');
        document.body.style.overflow = 'hidden';
    }

    function close() {
        menu.classList.remove('show-menu');
        overlay.classList.remove('is-visible');
        document.body.style.overflow = '';
    }

    toggle.addEventListener('click', open);
    closeBtn.addEventListener('click', close);
    overlay.addEventListener('click', close);

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') close();
    });

    // Links im Menü → schließen
    var links = menu.querySelectorAll('a');
    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener('click', close);
    }
})();
</script>









