From 84d77f0e0ed2fb679b6fc0d150346d22d1de7c77 Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Fri, 27 Feb 2026 23:02:10 +0100
Subject: [PATCH] add bookmark icon and enhance mobile search bar for improved
 usability

---
 assets/icons/bookmark.svg |  1 +
 header.php                | 21 +++++----
 style.css                 | 91 ++++++++++++++++++++++-----------------
 3 files changed, 63 insertions(+), 50 deletions(-)
 create mode 100644 assets/icons/bookmark.svg

diff --git a/assets/icons/bookmark.svg b/assets/icons/bookmark.svg
new file mode 100644
index 0000000..23654ef
--- /dev/null
+++ b/assets/icons/bookmark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24"><path fill="#000000" d="M16 2H8a3 3 0 0 0-3 3v16a1 1 0 0 0 .5.87a1 1 0 0 0 1 0l5.5-3.18l5.5 3.18a1 1 0 0 0 .5.13a1 1 0 0 0 .5-.13A1 1 0 0 0 19 21V5a3 3 0 0 0-3-3Zm1 17.27l-4.5-2.6a1 1 0 0 0-1 0L7 19.27V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1Z"/></svg>
\ No newline at end of file
diff --git a/header.php b/header.php
index 22ff767..287c888 100644
--- a/header.php
+++ b/header.php
@@ -54,7 +54,7 @@
             <img class="nav__logo" src="/assets/images/logoText.png" alt="Geizkragen" width="150">
         </a>
 
-        <!-- Desktop-Suche (wird per CSS auf ≤900 px ausgeblendet) -->
+        <!-- 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"
@@ -66,15 +66,6 @@
 
             <!-- ═══ Slide-In-Menü (wird auf Mobile per JS getoggelt) ═══ -->
             <div class="nav__menu" id="nav-menu">
-
-                <!-- Mobile-Suche (nur im Hamburger sichtbar) -->
-                <form class="nav__searchForm nav__searchForm--mobile" 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>
-
                 <ul class="nav__list">
                     <li class="nav__item">
                         <a href="index.php" class="nav__link">Home</a>
@@ -101,7 +92,7 @@
             <div class="nav__actions">
                 <a class="nav__login nav__wishlist" href="wunschliste.php" aria-label="Wunschliste">
                     <svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true">
-                        <path d="M8 6.00067L21 6.00139M8 12.0007L21 12.0015M8 18.0007L21 18.0015M3.5 6H3.51M3.5 12H3.51M3.5 18H3.51M4 6C4 6.27614 3.77614 6.5 3.5 6.5C3.22386 6.5 3 6.27614 3 6C3 5.72386 3.22386 5.5 3.5 5.5C3.77614 5.5 4 5.72386 4 6ZM4 12C4 12.2761 3.77614 12.5 3.5 12.5C3.22386 12.5 3 12.2761 3 12C3 11.7239 3.22386 11.5 3.5 11.5C3.77614 11.5 4 11.7239 4 12ZM4 18C4 18.2761 3.77614 18.5 3.5 18.5C3.22386 18.5 3 18.2761 3 18C3 17.7239 3.22386 17.5 3.5 17.5C3.77614 17.5 4 17.7239 4 18Z"
+                        <path d="M16 2H8a3 3 0 0 0-3 3v16a1 1 0 0 0 .5.87a1 1 0 0 0 1 0l5.5-3.18l5.5 3.18a1 1 0 0 0 .5.13a1 1 0 0 0 .5-.13A1 1 0 0 0 19 21V5a3 3 0 0 0-3-3Zm1 17.27l-4.5-2.6a1 1 0 0 0-1 0L7 19.27V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1Z"
                               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                     </svg>
                 </a>
@@ -123,6 +114,14 @@
             </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>
diff --git a/style.css b/style.css
index 52eb38f..188b8db 100755
--- a/style.css
+++ b/style.css
@@ -262,6 +262,7 @@ a:hover {
     margin-left: auto;
 }
 
+/* ─── Desktop: nav__menu ist eine horizontale Flex-Zeile ─── */
 .nav__menu {
     display: flex;
     align-items: center;
@@ -338,11 +339,11 @@ a:hover {
 }
 
 /* ==========================================================
-   TOGGLE / CLOSE  (sind <button>, also Standard-Styles resetten)
+   TOGGLE / CLOSE  – auf Desktop komplett versteckt
    ========================================================== */
 .nav__toggle,
 .nav__close {
-    display: none;           /* auf Desktop unsichtbar */
+    display: none;
     background: none;
     border: none;
     color: var(--text-secondary);
@@ -360,94 +361,106 @@ a:hover {
     background: rgba(255, 255, 255, 0.08);
 }
 
-/* Mobile-only search + items: hidden on desktop */
-.nav__searchForm--mobile { display: none; }
-.nav__item--mobile { display: none; }
+/* Auf Desktop versteckt */
+.nav__searchBar          { display: none; }
+.nav__item--mobile       { display: none !important; }
 
 /* ==========================================================
    MOBILE NAV  (≤ 900 px)
    ========================================================== */
 @media (max-width: 900px) {
 
-    /* --- Hamburger-Icon anzeigen --- */
+    /* Hamburger-Button sichtbar machen */
     .nav__toggle {
         display: inline-flex;
         align-items: center;
         justify-content: center;
     }
 
-    /* --- Mobile-only Nav-Einträge anzeigen --- */
+    /* Mobile-only Links sichtbar */
     .nav__item--mobile {
-        display: list-item;
+        display: list-item !important;
     }
 
-    /* --- Slide-In-Panel --- */
+    /* ────────────────────────────────────────────
+       Das Slide-In-Panel
+       - position:fixed  → über allem
+       - right:-100%     → standardmäßig außerhalb
+       - right:0         → reingleiten bei .show-menu
+       ──────────────────────────────────────────── */
     .nav__menu {
         position: fixed;
         top: 0;
-        right: -100%;              /* startet außerhalb */
+        right: -100%;
         width: min(300px, 85vw);
-        height: 100%;
-        background: rgba(13, 17, 23, 0.97);
+        height: 100vh;
+        height: 100dvh;            /* dynamic viewport auf Mobilgeräten */
+        background: rgba(13, 17, 23, 0.98);
         backdrop-filter: blur(30px);
         -webkit-backdrop-filter: blur(30px);
         border-left: 1px solid var(--border-subtle);
-        padding: 5rem 1.5rem 2rem;
+        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
+
+        /* Layout */
         display: flex;
         flex-direction: column;
         align-items: stretch;
-        gap: 0.75rem;
-        z-index: 1001;
+        gap: 0.5rem;
+        padding: 4.5rem 1.5rem 2rem;
+
+        /* Scroll */
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
+
+        /* Z-Index */
+        z-index: 1001;
+
+        /* Transition */
         transition: right 350ms cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     .nav__menu.show-menu {
-        right: 0;                  /* reingleiten */
+        right: 0;
     }
 
-    /* --- Mobile-Suche im Hamburger --- */
-    .nav__searchForm--mobile {
+    /* ─── Mobile-Suchleiste im Header (unterhalb der Nav) ─── */
+    .nav__searchBar {
         display: block;
-        width: 100%;
-        position: static;
-        transform: none;
-        margin-bottom: 0.25rem;
+        padding: 0 0.75rem 0.6rem;
     }
 
-    .nav__searchForm--mobile .nav__searchField {
+    .nav__searchBar .nav__searchField {
         width: 100%;
     }
 
-    .nav__searchForm--mobile .nav__searchField::before {
+    .nav__searchBar .nav__searchInput {
+        width: 100%;
+        height: 40px;
+        padding: 0 14px 0 36px;
+        font-size: 16px;           /* verhindert iOS-Zoom */
+        border-radius: var(--radius-full);
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid var(--border-default);
+    }
+
+    .nav__searchBar .nav__searchField::before {
         content: "🔍";
         position: absolute;
         left: 12px;
         top: 50%;
         transform: translateY(-50%);
-        font-size: 0.8rem;
+        font-size: 0.78rem;
         pointer-events: none;
         opacity: 0.45;
     }
 
-    .nav__searchForm--mobile .nav__searchInput {
-        width: 100%;
-        height: 46px;
-        padding: 0 14px 0 36px;
-        font-size: 16px;           /* verhindert iOS-Zoom */
-        border-radius: var(--radius-md);
-        background: rgba(255, 255, 255, 0.05);
-        border: 1px solid var(--border-default);
-    }
-
-    .nav__searchForm--mobile .nav__searchInput:focus {
+    .nav__searchBar .nav__searchInput:focus {
         border-color: var(--color-primary);
         background: rgba(255, 255, 255, 0.08);
         box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
     }
 
-    /* --- Nav-Links im Panel --- */
+    /* ─── Links im Panel ─── */
     .nav__list {
         flex-direction: column;
         gap: 0.15rem;
@@ -470,7 +483,7 @@ a:hover {
         transform: translateX(4px);
     }
 
-    /* --- Schließen-Button --- */
+    /* ─── Schließen-Button ─── */
     .nav__close {
         display: flex;
         align-items: center;
@@ -480,6 +493,7 @@ a:hover {
         right: 1rem;
         min-height: 44px;
         min-width: 44px;
+        z-index: 1;
     }
 
     .nav__close:hover {
@@ -911,7 +925,6 @@ a:hover {
 
 /* ─── Touch Optimizations ─── */
 @media (pointer: coarse) {
-    .nav__link,
     .home-nav__list li a,
     .nav__login,
     .nav__wishlist,