From 90e4860f6ff52bade7125ba9c56da2ccd4153457 Mon Sep 17 00:00:00 2001
From: fsst <fabian.schieder.1010.1916@gmail.com>
Date: Fri, 23 Jan 2026 08:46:11 +0100
Subject: [PATCH] catbar 1.0 Version

---
 assets/css/catbar.css | 51 +++++++++++++++++++++++++++++++++++--------
 catbar.php            | 10 ++++-----
 header.php            |  4 +---
 3 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/assets/css/catbar.css b/assets/css/catbar.css
index 6637b9c..3e817be 100644
--- a/assets/css/catbar.css
+++ b/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;
-    position: relative;
+    font-size: 1rem;
+
+    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%;
-    height: 60%;
+    top: 15%;
+    height: 70%;
     width: 1px;
-    background-color: rgba(255, 255, 255, 0.6);
+    background-color: rgba(255, 255, 255, 0.4);
 }
diff --git a/catbar.php b/catbar.php
index 51d57f5..09252fb 100644
--- a/catbar.php
+++ b/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>
diff --git a/header.php b/header.php
index c5f962d..190a632 100644
--- a/header.php
+++ b/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="home.php" class="nav__link">Home</a> -->
-                        <p>Home</p>
+                        <a href="index.php" class="nav__link">Home</a> -->
                    </li>
 
                    <li class="nav__item">