catbar 1.0 Version

assets/css/catbar.css

@@ -1,9 +1,9 @@
 .home-nav {
-    min-height: 16px;
     width: 100%;
     display: flex;
     align-items: center;
-    background-color: #2d3b50; /* helleres Lapis-/Hellblau */
+    background-color: #2d3b50;
+    padding: 3px 0; /* nur minimal größer als Buttons */
 }
 
 /* Inner zentriert */
@@ -24,15 +24,48 @@
     padding: 0;
 }
 
-/* Kategorien */
+/* LI nur als Container – KEINE Höhe hier */
 .home-nav__list li {
     flex: 1;
-    text-align: center;
+    position: relative;
+}
+
+/* =============================== */
+/* HOME CATEGORY BUTTON            */
+/* =============================== */
+
+.home-nav__list li button[type="categorybutton"] {
+    width: 100%;
+    padding: 12px 0;          /* <-- HIER steuerst du die Höhe */
+
+    background-color: #2d3b50;
     color: #ffffff;
     font-weight: bold;
-    padding: 1rem 0;
+    font-size: 1rem;
-    position: relative;
+
+    border: none;
     cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Hover */
+.home-nav__list li button[type="categorybutton"]:hover {
+    background-color: #3b4f6b;
+}
+
+/* Active */
+.home-nav__list li button[type="categorybutton"]:active {
+    background-color: #1f2a3a;
+}
+
+/* Fokus sichtbar aber clean */
+.home-nav__list li button[type="categorybutton"]:focus-visible {
+    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
 }
 
 /* Trennstriche */
@@ -40,8 +73,8 @@
     content: "";
     position: absolute;
     right: 0;
-    top: 20%;
+    top: 15%;
-    height: 60%;
+    height: 70%;
     width: 1px;
-    background-color: rgba(255, 255, 255, 0.6);
+    background-color: rgba(255, 255, 255, 0.4);
 }

catbar.php

@@ -12,23 +12,23 @@
             <ul class="home-nav__list">
 
                 <li class="home-nav__item">
-                    <button type="button">Click Me!</button>
+                    <button type="categorybutton">Kategorie 0</button>
                 </li>
 
                 <li class="home-nav__item">
-                    <p>Computer</p>
+                    <button type="categorybutton">Kategorie 1</button>
                 </li>
 
                 <li class="home-nav__item">
-                    <p>Smartphones</p>
+                    <button type="categorybutton">Kategorie 2</button>
                 </li>
 
                 <li class="home-nav__item">
-                    <p>Kopfhörer</p>
+                    <button type="categorybutton">Kategorie 3</button>
                 </li>
 
                 <li class="home-nav__item">
-                    <p>Laptop</p>
+                    <button type="categorybutton">Kategorie 4</button>
                 </li>
             </ul>
         </div>

header.php

@@ -24,9 +24,7 @@
             <div class="nav__menu" id="nav-menu">
                 <ul class="nav__list">
                     <li class="nav__item">
-                        <!-- button in bearbeitung -->
+                        <a href="index.php" class="nav__link">Home</a> -->
-                        <!--<a href="home.php" class="nav__link">Home</a> -->
-                        <p>Home</p>
                    </li>
 
                    <li class="nav__item">