From 949aacc34bf0dea73a80889f09db0227b92349dc Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Sat, 28 Feb 2026 13:31:29 +0100
Subject: [PATCH] refactor styles for improved consistency and responsiveness
 across components

---
 assets/css/catbar.css       | 118 +++++++++------------
 assets/css/compcard.css     |  29 +++---
 assets/css/login.css        | 197 ++++++++++++------------------------
 assets/css/productAdder.css | 137 +++++++++----------------
 assets/css/productpage.css  | 118 ++++++++-------------
 style.css                   | 100 +++++++++---------
 6 files changed, 269 insertions(+), 430 deletions(-)

diff --git a/assets/css/catbar.css b/assets/css/catbar.css
index f1dac4a..daece0b 100644
--- a/assets/css/catbar.css
+++ b/assets/css/catbar.css
@@ -1,112 +1,105 @@
 /* ==========================================================
-   CATEGORY BAR – Animated Pill Navigation
+   CATEGORY BAR
    ========================================================== */
 
 .home-nav {
     width: 100%;
-    background: rgba(20, 28, 43, 0.6);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    border-bottom: 1px solid var(--border-subtle);
-    padding: 0;
-    position: relative;
-    z-index: 1;
-    animation: fadeIn 0.6s ease 0.2s both;
+    display: flex;
+    align-items: center;
+    background-color: #2d3b50;
+    padding: 1px 0;
 }
 
+/* Inner zentriert */
 .home-nav__inner {
     flex: 1;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0.6rem 1rem;
 }
 
+/* List */
 .home-nav__list {
     width: 100%;
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
-    gap: 0.3rem;
-    justify-content: center;
 }
 
+/* LI nur als Container */
 .home-nav__list li {
-    flex: 0 1 auto;
+    flex: 1;
     position: relative;
 }
 
+/* =============================== */
+/* HOME CATEGORY LINKS             */
+/* =============================== */
+
 .home-nav__list li a {
-    padding: 0.5rem 1.4rem;
-    background: transparent;
-    color: var(--text-muted);
-    font-weight: 500;
-    font-size: 0.85rem;
+    width: 100%;
+    padding: 8px 0;
+
+    background-color: rgb(45, 59, 80);
+    color: #ffffff;
+    font-weight: 600;
+    font-size: 0.9rem;
     font-family: var(--font-family);
+
     text-decoration: none;
     cursor: pointer;
+
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-full);
-    transition: all var(--transition-smooth);
-    white-space: nowrap;
-    position: relative;
-    letter-spacing: 0.2px;
-}
-
-/* Animated underline on hover */
-.home-nav__list li a::after {
-    content: "";
-    position: absolute;
-    bottom: 4px;
-    left: 50%;
-    width: 0;
-    height: 2px;
-    background: var(--color-primary);
-    border-radius: var(--radius-full);
-    transition: all var(--transition-smooth);
-    transform: translateX(-50%);
+
+    border-radius: 0;
+    transition: background-color 0.2s ease;
 }
 
+/* Hover */
 .home-nav__list li a:hover {
-    color: var(--text-invert);
-    background: rgba(255, 255, 255, 0.05);
-    transform: translateY(-1px);
-}
-
-.home-nav__list li a:hover::after {
-    width: 50%;
+    background-color: rgba(255,255,255,0.18);
 }
 
+/* Active (Mausklick) */
 .home-nav__list li a:active {
-    transform: scale(0.97);
+    background-color: rgba(255,255,255,0.28);
 }
 
+/* Fokus (Tastatur) */
 .home-nav__list li a:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 2px var(--color-primary);
+    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
 }
 
+/* Aktive Kategorie (per PHP) */
 .home-nav__list li a.active {
-    color: var(--color-primary);
-    background: var(--color-primary-soft);
-    font-weight: 600;
-    box-shadow: 0 0 16px rgba(59, 130, 246, 0.1);
+    background-color: rgba(255,255,255,0.25);
 }
 
-.home-nav__list li a.active::after {
-    width: 60%;
-    background: var(--color-primary);
+/* =============================== */
+/* TRENNSTRICHE ZWISCHEN KATEGORIEN */
+/* =============================== */
+
+/* Trennstrich rechts – außer beim letzten */
+.home-nav__list li:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    height: 100%;
+    width: 2px;
+    background-color: rgba(255,255,255,0.3);
 }
 
 /* ─── Responsive: horizontal scroll on mobile ─── */
 @media (max-width: 768px) {
     .home-nav__inner {
         justify-content: flex-start;
-        padding: 0.4rem 0.5rem;
     }
 
     .home-nav__list {
@@ -115,12 +108,7 @@
         scroll-snap-type: x mandatory;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
-        gap: 0.2rem;
         flex-wrap: nowrap;
-        justify-content: flex-start;
-        /* Fade edges */
-        mask-image: linear-gradient(90deg, transparent, black 0.5rem, black calc(100% - 0.5rem), transparent);
-        -webkit-mask-image: linear-gradient(90deg, transparent, black 0.5rem, black calc(100% - 0.5rem), transparent);
     }
 
     .home-nav__list::-webkit-scrollbar { display: none; }
@@ -131,24 +119,16 @@
     }
 
     .home-nav__list li a {
-        padding: 0.5rem 1rem;
+        padding: 8px 16px;
         font-size: 0.82rem;
         min-height: 40px;
     }
 }
 
 @media (max-width: 480px) {
-    .home-nav__inner {
-        padding: 0.35rem 0.25rem;
-    }
-
     .home-nav__list li a {
-        padding: 0.45rem 0.8rem;
+        padding: 8px 12px;
         font-size: 0.78rem;
         min-height: 36px;
     }
-
-    .home-nav__list li a::after {
-        display: none; /* Simpler on tiny screens */
-    }
 }
diff --git a/assets/css/compcard.css b/assets/css/compcard.css
index 1283dca..822cba1 100644
--- a/assets/css/compcard.css
+++ b/assets/css/compcard.css
@@ -12,7 +12,7 @@
 
 /* ─── Product Card ─── */
 .product-card {
-    background: var(--bg-card);
+    background: #2d3b50;
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-lg);
     overflow: hidden;
@@ -36,9 +36,9 @@
     padding: 1px;
     background: linear-gradient(
         135deg,
-        rgba(59, 130, 246, 0.3),
-        rgba(16, 185, 129, 0.2),
-        rgba(59, 130, 246, 0.1)
+        rgba(37, 99, 235, 0.3),
+        rgba(74, 222, 128, 0.2),
+        rgba(37, 99, 235, 0.1)
     );
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
@@ -57,7 +57,7 @@
     left: 0;
     right: 0;
     height: 120px;
-    background: linear-gradient(180deg, rgba(59, 130, 246, 0.04), transparent);
+    background: linear-gradient(180deg, rgba(37, 99, 235, 0.04), transparent);
     opacity: 0;
     transition: opacity var(--transition-smooth);
     pointer-events: none;
@@ -65,8 +65,8 @@
 }
 
 .product-card:hover {
-    transform: translateY(-8px) scale(1.02);
-    box-shadow: var(--shadow-md), var(--shadow-glow-blue);
+    transform: translateY(2px);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
     border-color: transparent;
 }
 
@@ -79,7 +79,7 @@
 }
 
 .product-card:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid #0071e3;
     outline-offset: 3px;
 }
 
@@ -101,7 +101,7 @@
     object-position: center;
     display: block;
     flex: 0 0 auto;
-    background: rgba(255, 255, 255, 0.96);
+    background: #ffffff;
     padding: 16px;
     border-bottom: 1px solid var(--border-subtle);
     transition: transform var(--transition-smooth);
@@ -128,7 +128,7 @@
 .product-card__content h3 {
     font-size: 0.92rem;
     font-weight: 600;
-    color: var(--text-primary);
+    color: #ffffff;
     margin-bottom: 0;
     overflow: hidden;
     display: -webkit-box;
@@ -144,11 +144,11 @@
 
 .product-card__content p {
     font-size: 0.8rem;
-    color: var(--text-muted);
+    color: #ffffff;
     margin-bottom: 0;
     overflow: hidden;
     display: -webkit-box;
-    -webkit-line-clamp: 3;
+    -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;
     word-break: break-word;
     line-height: 1.5;
@@ -157,7 +157,7 @@
 .product-card__content .price {
     font-size: 1.05rem;
     font-weight: 700;
-    color: var(--color-primary);
+    color: #0071e3;
     margin-top: auto;
     padding-top: 0.5rem;
 }
@@ -173,8 +173,7 @@
     margin-bottom: 1.25rem;
     font-size: 1.3rem;
     font-weight: 700;
-    color: var(--text-primary);
-    letter-spacing: -0.3px;
+    color: #d8d8ee;
     position: relative;
     padding-left: 1rem;
     display: inline-block;
diff --git a/assets/css/login.css b/assets/css/login.css
index 3549193..35b306e 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -23,7 +23,7 @@
     width: 400px;
     height: 400px;
     border-radius: 50%;
-    background: radial-gradient(circle, rgba(59, 130, 246, 0.08), transparent 70%);
+    background: radial-gradient(circle, rgba(37, 99, 235, 0.08), transparent 70%);
     pointer-events: none;
     z-index: -1;
     animation: float 12s ease-in-out infinite;
@@ -90,12 +90,9 @@
 .auth__card,
 .auth__sideCard {
     width: min(520px, 100%);
-    background: rgba(15, 21, 32, 0.8);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid var(--border-subtle);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-md);
+    background: #1f2937;
+    border-radius: 5px;
+    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.35);
     animation: fadeInUp 0.5s ease both;
     transition: border-color var(--transition-smooth),
                 box-shadow var(--transition-smooth);
@@ -113,7 +110,7 @@
 .auth__grid .auth__card:nth-child(4) { animation-delay: 0.24s; }
 
 .auth__card {
-    padding: 1.75rem;
+    padding: 22px;
 }
 
 /* ─── Card Header ─── */
@@ -154,27 +151,21 @@
 
 /* ─── Alerts – Animated ─── */
 .auth__alert__error {
-    margin: 0.75rem 0 1rem;
-    color: var(--text-invert);
-    background: linear-gradient(135deg, var(--color-danger), #dc2626);
-    border-radius: var(--radius-md);
-    padding: 0.75rem 1rem;
-    font-size: 0.88rem;
-    font-weight: 500;
-    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
-    animation: scaleIn 0.3s ease;
+    margin: 12px 0 14px;
+    color: #ffffff;
+    background: #d92d20;
+    border-radius: 5px;
+    padding: 10px 12px;
+    box-shadow: 0 8px 18px rgba(217, 45, 32, 0.18);
 }
 
 .auth__alert__sucess {
-    margin: 0.75rem 0 1rem;
-    color: var(--text-invert);
-    background: linear-gradient(135deg, var(--color-success), #16a34a);
-    border-radius: var(--radius-md);
-    padding: 0.75rem 1rem;
-    font-size: 0.88rem;
-    font-weight: 500;
-    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.2);
-    animation: scaleIn 0.3s ease;
+    margin: 12px 0 14px;
+    color: #ffffff;
+    background: #558346;
+    border-radius: 5px;
+    padding: 10px 12px;
+    box-shadow: 0 8px 18px rgba(72, 142, 62, 0.18);
 }
 
 .auth__alert {
@@ -242,7 +233,7 @@
     padding: 0.75rem 0.9rem;
     border: 1px solid var(--border-default);
     border-radius: var(--radius-md);
-    background: rgba(18, 26, 40, 0.6);
+    background: #1e2537;
     color: var(--text-primary);
     font-family: var(--font-family);
     font-size: 0.9rem;
@@ -254,11 +245,8 @@
 .auth__field input[type="password"]:focus,
 .auth__field input[type="email"]:focus,
 .auth__field input[type="file"]:focus {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1),
-                0 0 20px rgba(59, 130, 246, 0.06);
-    background: rgba(18, 26, 40, 0.9);
-    transform: translateY(-1px);
+    border-color: rgba(37, 99, 235, 0.75);
+    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28);
 }
 
 .auth__field input[type="text"]::placeholder,
@@ -269,79 +257,50 @@
 
 .auth__field input[type="file"]::file-selector-button {
     margin-right: 10px;
-    padding: 0.6rem 1rem;
+    padding: 10px 12px;
     border: 0;
-    border-radius: var(--radius-md);
-    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
+    border-radius: 5px;
+    background: #274a97;
     color: #ffffff;
-    font-weight: 600;
-    font-family: var(--font-family);
-    font-size: 0.82rem;
+    font-weight: 750;
     cursor: pointer;
-    transition: all var(--transition-normal);
+    transition: transform 120ms ease, filter 120ms ease;
 }
 
 .auth__field input[type="file"]::file-selector-button:hover {
+    filter: brightness(1.02);
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
 }
 
 .auth__field input[type="file"]::file-selector-button:active {
-    transform: translateY(0);
+    transform: translateY(0px);
 }
 
 /* ─── Actions ─── */
 .auth__actions {
-    margin-top: 1.25rem;
+    margin-top: 14px;
 }
 
 .auth__submit {
     width: 100%;
-    padding: 0.8rem 1rem;
+    padding: 12px 14px;
     border: 0;
-    border-radius: var(--radius-md);
-    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
-    background-size: 200% 200%;
+    border-radius: 5px;
+    background: #274a97;
     color: #ffffff;
-    font-weight: 600;
-    font-family: var(--font-family);
-    font-size: 0.93rem;
+    font-weight: 750;
     letter-spacing: 0.2px;
     cursor: pointer;
-    transition: all var(--transition-normal);
-    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
-    position: relative;
-    overflow: hidden;
-}
-
-/* Shimmer effect on button */
-.auth__submit::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-        90deg,
-        transparent,
-        rgba(255, 255, 255, 0.15),
-        transparent
-    );
-    transition: left 0.5s ease;
-}
-
-.auth__submit:hover::before {
-    left: 100%;
+    transition: 0.2s ease;
 }
 
 .auth__submit:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.4);
+    opacity: 0.9;
 }
 
 .auth__submit:active {
-    transform: translateY(0) scale(0.98);
+    transform: translateY(0px);
 }
 
 .auth__submit:disabled {
@@ -357,86 +316,62 @@
 
 /* Danger button variant */
 .auth__submit--danger {
-    background: linear-gradient(135deg, var(--color-danger), #dc2626);
-    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.25);
-}
-
-.auth__submit--danger:hover {
-    box-shadow: 0 8px 28px rgba(239, 68, 68, 0.4);
+    background: #d92d20;
 }
 
 /* ─── Links ─── */
 .auth__links {
-    margin-top: 1.25rem;
-    padding-top: 1rem;
-    border-top: 1px solid var(--border-subtle);
+    margin-top: 14px;
+    padding-top: 12px;
+    border-top: 1px dashed #5e6075;
 }
 
 .auth__muted {
-    margin: 0.5rem 0 0;
-    color: var(--text-secondary);
-    font-size: 0.88rem;
+    margin: 8px 0 0;
+    color: #ffffff;
 }
 
 .auth__muted a {
-    color: var(--color-primary);
+    color: #3c5fb6;
     text-decoration: none;
-    font-weight: 600;
-    transition: all var(--transition-normal);
-    position: relative;
-}
-
-.auth__muted a::after {
-    content: "";
-    position: absolute;
-    bottom: -2px;
-    left: 0;
-    width: 0;
-    height: 1.5px;
-    background: var(--color-primary);
-    transition: width var(--transition-smooth);
+    font-weight: 700;
 }
 
 .auth__muted a:hover {
-    color: var(--color-primary-hover);
-}
-
-.auth__muted a:hover::after {
-    width: 100%;
+    text-decoration: underline;
 }
 
 /* ─── Side Card ─── */
 .auth__sideCard {
-    padding: 1.25rem;
+    padding: 18px;
+    background: #1f2937;
 }
 
 .auth__sideCard h3 {
-    margin: 0 0 0.75rem;
+    margin: 0 0 10px;
     font-size: 1.05rem;
-    color: var(--text-primary);
+    color: #ffffff;
 }
 
 .auth__sideCard ul {
     margin: 0;
-    padding-left: 1.25rem;
-    color: var(--text-secondary);
+    padding-left: 18px;
+    color: #ffffff;
 }
 
 .auth__sideCard li {
-    margin: 0.5rem 0;
-    color: var(--text-secondary);
+    margin: 8px 0;
+    color: #ffffff;
 }
 
 /* ─── Tip Box ─── */
 .auth__tip {
-    margin-top: 0.75rem;
-    padding: 0.7rem 0.9rem;
-    border-radius: var(--radius-md);
-    background: var(--color-primary-soft);
-    border: 1px solid rgba(59, 130, 246, 0.1);
-    color: var(--text-secondary);
-    font-size: 0.8rem;
-    line-height: 1.5;
+    margin-top: 14px;
+    padding: 12px;
+    border-radius: 5px;
+    background: rgba(37, 99, 235, 0.06);
+    border: 1px solid rgba(37, 99, 235, 0.16);
+    color: #ffffff;
 }
 
 /* ==========================================================
@@ -473,13 +408,13 @@
     border-radius: 50%;
     overflow: hidden;
     border: 3px solid var(--border-default);
-    box-shadow: 0 0 30px rgba(59, 130, 246, 0.1);
+    box-shadow: 0 0 30px rgba(37, 99, 235, 0.1);
     transition: all var(--transition-smooth);
 }
 
 .account__avatar-wrapper:hover {
     border-color: var(--color-primary);
-    box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
+    box-shadow: 0 0 40px rgba(37, 99, 235, 0.2);
     transform: scale(1.03);
 }
 
@@ -495,10 +430,7 @@
     font-size: 1.35rem;
     font-weight: 700;
     letter-spacing: -0.3px;
-    background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    color: #ffffff;
 }
 
 /* ─── Detail Rows (User info) ─── */
@@ -581,17 +513,16 @@
 }
 
 .account__action-link--secondary {
-    background: linear-gradient(135deg, var(--color-accent), #059669) !important;
-    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25) !important;
+    background: #22c55e !important;
 }
 
 .account__action-link--secondary:hover {
-    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.4) !important;
+    opacity: 0.9;
 }
 
 /* ─── Danger Section ─── */
 .account__section--danger {
-    border-color: rgba(239, 68, 68, 0.1);
+    border-color: rgba(217, 45, 32, 0.15);
 }
 
 .account__section--danger:hover {
diff --git a/assets/css/productAdder.css b/assets/css/productAdder.css
index 3e82943..2e03e80 100644
--- a/assets/css/productAdder.css
+++ b/assets/css/productAdder.css
@@ -1,61 +1,52 @@
 /* ==========================================================
-   PRODUCT ADDER – Animated Dropdown & Form Styles
+   PRODUCT ADDER – Dropdown & Form Styles
    ========================================================== */
 
 /* ─── Select Wrapper ─── */
 .auth__select__wrap {
     width: min(520px, 100%);
     display: grid;
-    gap: 0.4rem;
+    gap: 6px;
     justify-self: center;
-    margin-top: 0.75rem;
+    margin-top: 12px;
 }
 
 .auth__select__label {
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: var(--text-muted);
-    transition: color var(--transition-normal);
-}
-
-.auth__select__wrap:focus-within .auth__select__label {
-    color: var(--color-primary);
+    font-size: 0.95rem;
+    color: #ffffff;
 }
 
 .auth__select {
     width: 100%;
     box-sizing: border-box;
-    padding: 0.75rem 2.5rem 0.75rem 0.9rem;
-    border: 1px solid var(--border-default);
-    border-radius: var(--radius-md);
-    background-color: rgba(18, 26, 40, 0.6);
-    color: var(--text-primary);
-    font-family: var(--font-family);
-    font-size: 0.9rem;
+    padding: 12px 40px 12px 12px;
+    border: 1px solid #5e6075;
+    border-radius: 5px;
+    background-color: #1e2537;
+    color: #ffffff;
     outline: none;
     appearance: none;
-    cursor: pointer;
-    transition: all var(--transition-smooth);
+    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
     background-image:
-        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
-        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
+        linear-gradient(45deg, transparent 50%, #cbd5f5 50%),
+        linear-gradient(135deg, #cbd5f5 50%, transparent 50%),
+        linear-gradient(to right, #1e2537, #1e2537);
     background-position:
-        calc(100% - 18px) calc(50% + 1px),
-        calc(100% - 13px) calc(50% + 1px);
-    background-size: 5px 5px, 5px 5px;
+        calc(100% - 18px) calc(1em + 2px),
+        calc(100% - 13px) calc(1em + 2px),
+        100% 0;
+    background-size: 5px 5px, 5px 5px, 2.5em 100%;
     background-repeat: no-repeat;
 }
 
 .auth__select:focus {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1),
-                0 0 20px rgba(59, 130, 246, 0.06);
-    background-color: rgba(18, 26, 40, 0.9);
+    border-color: rgba(37, 99, 235, 0.75);
+    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28);
 }
 
 .auth__select option {
-    background: var(--bg-input);
-    color: var(--text-primary);
+    background: #1e2537;
+    color: #ffffff;
 }
 
 /* ─── Product Adder Layout ─── */
@@ -63,84 +54,65 @@
     min-height: 100vh;
     display: grid;
     place-items: start center;
-    padding: 2rem 1rem;
-    gap: 1rem;
+    padding: 32px 16px;
+    gap: 16px;
 }
 
 .auth__grid {
-    width: min(700px, 100%);
+    width: min(1100px, 100%);
     display: grid;
     grid-template-columns: 1fr;
-    gap: 1.25rem;
+    gap: 20px;
 }
 
 .auth__card {
-    background: rgba(15, 21, 32, 0.8);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid var(--border-subtle);
-    border-radius: var(--radius-lg);
-    padding: 1.5rem;
-    box-shadow: var(--shadow-md);
-    animation: fadeInUp 0.5s ease both;
-    transition: border-color var(--transition-smooth),
-                box-shadow var(--transition-smooth);
-}
-
-.auth__card:hover {
-    border-color: var(--border-default);
+    background: #1f2937;
+    border: 1px solid #5e6075;
+    border-radius: 5px;
+    padding: 18px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }
 
 .auth__header {
-    margin-bottom: 0.75rem;
+    margin-bottom: 12px;
 }
 
 .auth__title {
     margin: 0;
-    font-size: 1.15rem;
-    font-weight: 700;
-    color: var(--text-primary);
-    letter-spacing: -0.2px;
+    font-size: 1.1rem;
+    color: #ffffff;
 }
 
 .auth__form {
     display: grid;
-    gap: 0.65rem;
-    margin-bottom: 0.75rem;
+    gap: 8px;
+    margin-bottom: 12px;
 }
 
 .auth__form label {
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: var(--text-muted);
-    margin-top: 0.5rem;
-    transition: color var(--transition-normal);
+    font-size: 0.95rem;
+    color: #ffffff;
 }
 
 .auth__input {
     width: 100%;
     box-sizing: border-box;
-    padding: 0.7rem 0.9rem;
-    border: 1px solid var(--border-default);
-    border-radius: var(--radius-md);
-    background: rgba(18, 26, 40, 0.6);
-    color: var(--text-primary);
-    font-family: var(--font-family);
-    font-size: 0.9rem;
+    padding: 10px 12px;
+    border: 1px solid #5e6075;
+    border-radius: 5px;
+    background: #1e2537;
+    color: #ffffff;
     outline: none;
-    transition: all var(--transition-smooth);
+    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
 }
 
 .auth__input:focus {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1),
-                0 0 20px rgba(59, 130, 246, 0.06);
-    background: rgba(18, 26, 40, 0.9);
-    transform: translateY(-1px);
+    border-color: rgba(37, 99, 235, 0.75);
+    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.28);
 }
 
 .auth__input::placeholder {
-    color: var(--text-muted);
+    color: #cbd5e1;
 }
 
 textarea.auth__input {
@@ -156,21 +128,11 @@ textarea.auth__input {
 /* ─── Responsive ─── */
 @media (max-width: 720px) {
     .auth {
-        padding: 1.25rem 0.75rem;
+        padding: 24px 12px;
     }
 
     .auth__card {
-        padding: 1.25rem;
-    }
-
-    .auth__select {
-        font-size: 16px; /* Prevents iOS zoom */
-        padding: 0.8rem 2.5rem 0.8rem 0.8rem;
-    }
-
-    .auth__input {
-        font-size: 16px; /* Prevents iOS zoom */
-        padding: 0.75rem 0.8rem;
+        padding: 16px;
     }
 }
 
@@ -181,7 +143,6 @@ textarea.auth__input {
 
     .auth__card {
         padding: 1rem;
-        border-radius: var(--radius-md);
     }
 
     .auth__grid {
diff --git a/assets/css/productpage.css b/assets/css/productpage.css
index 91e6b87..3ee697d 100644
--- a/assets/css/productpage.css
+++ b/assets/css/productpage.css
@@ -19,11 +19,10 @@
 }
 
 .product-image-box {
-    background: rgba(255, 255, 255, 0.96);
-    padding: 2.5rem;
-    border-radius: var(--radius-xl);
-    border: 1px solid var(--border-subtle);
-    box-shadow: var(--shadow-md);
+    background: #ffffff;
+    padding: 40px;
+    border-radius: 14px;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
     text-align: center;
     transition: all var(--transition-smooth);
     position: relative;
@@ -37,7 +36,7 @@
     inset: -1px;
     border-radius: var(--radius-xl);
     padding: 1px;
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(16, 185, 129, 0.2), transparent);
+    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(74, 222, 128, 0.2), transparent);
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
@@ -72,38 +71,31 @@
 }
 
 .product-title {
-    font-size: 1.85rem;
-    color: var(--text-primary);
-    font-weight: 700;
-    margin-bottom: 1.5rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid var(--border-subtle);
-    letter-spacing: -0.5px;
-    line-height: 1.3;
-    /* Gradient text */
-    background: linear-gradient(135deg, var(--text-invert), var(--text-secondary));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    font-size: 32px;
+    color: white;
+    font-weight: 600;
+    margin-bottom: 30px;
+    border-bottom: 2px solid #eaeaea;
+    padding-bottom: 15px;
 }
 
 .product-desc {
-    font-size: 1rem;
-    line-height: 1.75;
-    color: var(--text-secondary);
-    margin-bottom: 1.5rem;
+    font-size: 23px;
+    line-height: 1.7;
+    color: #ffffff;
+    margin-bottom: 15px;
 }
 
 .product-specs {
     display: flex;
-    color: var(--text-primary);
+    color: #ffffff;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: 12px;
 }
 
 .product-specs p {
     padding: 0.7rem 1rem;
-    background: rgba(20, 28, 43, 0.6);
+    background: rgba(27, 34, 48, 0.65);
     backdrop-filter: blur(8px);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-md);
@@ -112,7 +104,7 @@
 }
 
 .product-specs p:hover {
-    background: rgba(20, 28, 43, 0.9);
+    background: rgba(27, 34, 48, 0.9);
     border-color: var(--border-default);
     transform: translateX(4px);
 }
@@ -135,7 +127,7 @@
 }
 
 .spec-row:hover {
-    background: rgba(20, 28, 43, 0.9);
+    background: rgba(27, 34, 48, 0.9);
     transform: translateX(4px);
 }
 
@@ -233,10 +225,9 @@
     grid-template-columns: 250px 1fr auto;
     align-items: center;
     gap: 1.5rem;
-    background: rgba(15, 21, 32, 0.7);
-    backdrop-filter: blur(12px);
-    border: 1px solid var(--border-subtle);
-    border-radius: var(--radius-lg);
+    background: #1f2a3a;
+    border: 1px solid #2f3c52;
+    border-radius: 12px;
     padding: 1rem 1.5rem;
     transition: all var(--transition-smooth);
     animation: fadeInUp 0.4s ease both;
@@ -259,10 +250,9 @@
 }
 
 .shop-line:hover {
-    border-color: var(--border-strong);
+    background: #243248;
     transform: translateY(-3px);
-    box-shadow: var(--shadow-md), var(--shadow-glow-blue);
-    padding-left: 1.75rem;
+    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
 }
 
 .shop-line:hover::before {
@@ -302,26 +292,26 @@
 }
 
 .shop-name {
+    color: white;
     font-weight: 600;
-    font-size: 0.95rem;
+    font-size: 16px;
 }
 
 .shop-name a {
-    color: var(--text-primary);
+    color: white;
     text-decoration: none;
-    transition: color var(--transition-normal);
 }
 
 .shop-name a:hover {
-    color: var(--color-primary);
+    text-decoration: underline;
 }
 
 .shop-middle {
     display: flex;
     align-items: center;
     gap: 2rem;
-    font-size: 0.85rem;
-    color: var(--text-secondary);
+    font-size: 14px;
+    color: #cbd5e1;
 }
 
 .shop-shipping {
@@ -332,45 +322,27 @@
 }
 
 .shop-stock {
-    font-weight: 600;
-    display: inline-flex;
+    font-weight: 500;
+    display: flex;
     align-items: center;
     gap: 6px;
-    padding: 0.3rem 0.8rem;
-    border-radius: var(--radius-full);
-    font-size: 0.78rem;
-    text-transform: uppercase;
-    letter-spacing: 0.4px;
-}
-
-.shop-stock.in-stock {
-    color: var(--color-accent);
-    background: var(--color-accent-soft);
-    box-shadow: 0 0 12px rgba(16, 185, 129, 0.08);
 }
 
 .shop-stock.in-stock::before {
     content: "✔";
-}
-
-.shop-stock.out-stock {
-    color: var(--color-danger);
-    background: var(--color-danger-soft);
-    box-shadow: 0 0 12px rgba(239, 68, 68, 0.08);
+    color: #22c55e;
 }
 
 .shop-stock.out-stock::before {
     content: "✖";
+    color: #ef4444;
 }
 
 .shop-price {
-    font-size: 1.4rem;
-    font-weight: 800;
-    color: var(--color-accent);
-    white-space: nowrap;
-    letter-spacing: -0.5px;
-    text-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
-    transition: transform var(--transition-normal);
+    margin-left: auto;
+    font-size: 18px;
+    font-weight: 700;
+    color: #4ade80;
 }
 
 .shop-line:hover .shop-price {
@@ -378,15 +350,11 @@
 }
 
 .no-shop {
-    background: rgba(15, 21, 32, 0.6);
-    backdrop-filter: blur(12px);
-    border: 1px solid var(--border-subtle);
-    padding: 2.5rem;
-    border-radius: var(--radius-lg);
-    color: var(--text-secondary);
+    background: #1f2a3a;
+    padding: 20px;
+    border-radius: 12px;
+    color: #cbd5e1;
     text-align: center;
-    font-size: 0.95rem;
-    animation: fadeInUp 0.5s ease 0.3s both;
 }
 
 /* ─── Responsive Shop Offers ─── */
diff --git a/style.css b/style.css
index 188b8db..ff57ec5 100755
--- a/style.css
+++ b/style.css
@@ -18,47 +18,47 @@
 
 :root {
     /* ─── Farben ─── */
-    --bg-main:            #080b12;
-    --bg-card:            #0f1520;
-    --bg-surface:         #141c2b;
-    --bg-header:          #0d1117;
-    --bg-input:           #121a28;
+    --bg-main:            #151923;
+    --bg-card:            #1f2937;
+    --bg-surface:         #2d3b50;
+    --bg-header:          #151923;
+    --bg-input:           #1e2537;
 
-    --color-primary:      #3b82f6;
-    --color-primary-hover:#2563eb;
-    --color-primary-soft: rgba(59, 130, 246, 0.1);
-    --color-primary-glow: rgba(59, 130, 246, 0.25);
-    --color-accent:       #10b981;
-    --color-accent-soft:  rgba(16, 185, 129, 0.1);
-    --color-accent-glow:  rgba(16, 185, 129, 0.2);
-    --color-danger:       #ef4444;
-    --color-danger-soft:  rgba(239, 68, 68, 0.1);
+    --color-primary:      #274a97;
+    --color-primary-hover:#1d4ed8;
+    --color-primary-soft: rgba(39, 74, 151, 0.15);
+    --color-primary-glow: rgba(39, 74, 151, 0.25);
+    --color-accent:       #4ade80;
+    --color-accent-soft:  rgba(74, 222, 128, 0.1);
+    --color-accent-glow:  rgba(74, 222, 128, 0.2);
+    --color-danger:       #d92d20;
+    --color-danger-soft:  rgba(217, 45, 32, 0.1);
     --color-warning:      #f59e0b;
     --color-success:      #22c55e;
 
-    --text-primary:       #e8edf5;
-    --text-secondary:     #8b98b0;
-    --text-muted:         #556178;
+    --text-primary:       #ffffff;
+    --text-secondary:     #cbd5e1;
+    --text-muted:         #cbd5e1;
     --text-invert:        #ffffff;
 
-    --border-subtle:      rgba(255, 255, 255, 0.04);
-    --border-default:     rgba(255, 255, 255, 0.08);
-    --border-strong:      rgba(255, 255, 255, 0.14);
-    --border-glow:        rgba(59, 130, 246, 0.3);
+    --border-subtle:      #2f3c52;
+    --border-default:     #5e6075;
+    --border-strong:      #7a7f94;
+    --border-glow:        rgba(37, 99, 235, 0.3);
 
-    /* ─── Radii ─── */
-    --radius-sm:  8px;
-    --radius-md:  12px;
-    --radius-lg:  16px;
-    --radius-xl:  24px;
+    /* ─── Radii (kompakt) ─── */
+    --radius-sm:  3px;
+    --radius-md:  5px;
+    --radius-lg:  5px;
+    --radius-xl:  10px;
     --radius-full: 9999px;
 
     /* ─── Schatten ─── */
-    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.2);
-    --shadow-md:  0 8px 30px rgba(0, 0, 0, 0.25);
-    --shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.35);
-    --shadow-glow-blue: 0 0 40px rgba(59, 130, 246, 0.12);
-    --shadow-glow-green: 0 0 40px rgba(16, 185, 129, 0.1);
+    --shadow-sm:  0 10px 30px rgba(0, 0, 0, 0.08);
+    --shadow-md:  0 14px 34px rgba(2, 6, 23, 0.35);
+    --shadow-lg:  0 20px 50px rgba(0, 0, 0, 0.35);
+    --shadow-glow-blue: 0 0 40px rgba(37, 99, 235, 0.12);
+    --shadow-glow-green: 0 0 40px rgba(74, 222, 128, 0.1);
 
     /* ─── Transitions ─── */
     --transition-fast:    150ms ease;
@@ -102,8 +102,8 @@
 }
 
 @keyframes pulse-glow {
-    0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.08); }
-    50%      { box-shadow: 0 0 40px rgba(59, 130, 246, 0.18); }
+    0%, 100% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.08); }
+    50%      { box-shadow: 0 0 40px rgba(37, 99, 235, 0.18); }
 }
 
 @keyframes float {
@@ -118,8 +118,8 @@
 }
 
 @keyframes borderGlow {
-    0%, 100% { border-color: rgba(59, 130, 246, 0.15); }
-    50%      { border-color: rgba(59, 130, 246, 0.35); }
+    0%, 100% { border-color: rgba(37, 99, 235, 0.15); }
+    50%      { border-color: rgba(37, 99, 235, 0.35); }
 }
 
 /* ==========================================================
@@ -149,8 +149,8 @@ body::before {
     position: fixed;
     inset: 0;
     background-image:
-        linear-gradient(rgba(59, 130, 246, 0.02) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(59, 130, 246, 0.02) 1px, transparent 1px);
+        linear-gradient(rgba(37, 99, 235, 0.02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(37, 99, 235, 0.02) 1px, transparent 1px);
     background-size: 80px 80px;
     pointer-events: none;
     z-index: 0;
@@ -166,7 +166,7 @@ body::after {
     width: 600px;
     height: 600px;
     border-radius: 50%;
-    background: radial-gradient(circle, rgba(59, 130, 246, 0.06), transparent 70%);
+    background: radial-gradient(circle, rgba(37, 99, 235, 0.06), transparent 70%);
     pointer-events: none;
     z-index: 0;
     animation: float 15s ease-in-out infinite;
@@ -189,7 +189,7 @@ a:hover {
 }
 
 ::selection {
-    background: rgba(59, 130, 246, 0.3);
+    background: rgba(37, 99, 235, 0.3);
     color: var(--text-invert);
 }
 
@@ -209,7 +209,7 @@ a:hover {
     position: sticky;
     top: 0;
     z-index: 1000;
-    background: rgba(13, 17, 23, 0.75);
+    background: rgba(21, 25, 35, 0.92);
     backdrop-filter: blur(24px) saturate(200%);
     -webkit-backdrop-filter: blur(24px) saturate(200%);
     border-bottom: 1px solid var(--border-subtle);
@@ -296,7 +296,7 @@ a:hover {
 .nav__link.active {
     color: var(--color-primary);
     background: var(--color-primary-soft);
-    box-shadow: 0 0 12px rgba(59, 130, 246, 0.12);
+    box-shadow: 0 0 12px rgba(37, 99, 235, 0.12);
 }
 
 /* ─── Nav Actions ─── */
@@ -395,7 +395,7 @@ a:hover {
         width: min(300px, 85vw);
         height: 100vh;
         height: 100dvh;            /* dynamic viewport auf Mobilgeräten */
-        background: rgba(13, 17, 23, 0.98);
+        background: rgba(21, 25, 35, 0.98);
         backdrop-filter: blur(30px);
         -webkit-backdrop-filter: blur(30px);
         border-left: 1px solid var(--border-subtle);
@@ -457,7 +457,7 @@ a:hover {
     .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);
+        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
     }
 
     /* ─── Links im Panel ─── */
@@ -561,7 +561,7 @@ a:hover {
 .nav__searchInput:focus {
     border-color: var(--color-primary);
     background: rgba(255, 255, 255, 0.07);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12),
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12),
                 var(--shadow-glow-blue);
 }
 
@@ -634,7 +634,7 @@ a:hover {
 .filter-group select:focus {
     border-color: var(--color-primary);
     outline: none;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
 }
 
 /* ==========================================================
@@ -667,7 +667,7 @@ a:hover {
     inset: 0;
     border-radius: var(--radius-lg);
     padding: 1px;
-    background: linear-gradient(135deg, transparent, rgba(59,130,246,0.15), transparent);
+    background: linear-gradient(135deg, transparent, rgba(37,99,235,0.15), transparent);
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
@@ -769,11 +769,11 @@ a:hover {
 .btn-primary {
     background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
     color: #fff;
-    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
+    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
 }
 
 .btn-primary:hover {
-    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.45);
+    box-shadow: 0 6px 24px rgba(37, 99, 235, 0.45);
 }
 
 .btn-secondary {
@@ -852,7 +852,7 @@ a:hover {
    ========================================================== */
 .footer {
     margin-top: auto;
-    background: rgba(13, 17, 23, 0.75);
+    background: rgba(21, 25, 35, 0.92);
     backdrop-filter: blur(24px) saturate(200%);
     -webkit-backdrop-filter: blur(24px) saturate(200%);
     border-top: 1px solid var(--border-subtle);
@@ -950,7 +950,7 @@ a:hover {
         padding-left: 1.5rem;
     }
     .shop-line:active {
-        background: rgba(15, 21, 32, 0.9);
+        background: #243248;
     }
 }