From 21d7f1628999cd263a2838900322531200de2361 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Mon, 2 Feb 2026 16:49:10 -0600
Subject: [PATCH] CSS Fix for Firefox

---
 .../src/app/pages/home/home.component.scss    | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/bizmatch/src/app/pages/home/home.component.scss b/bizmatch/src/app/pages/home/home.component.scss
index 77bfe2f..de62ec2 100644
--- a/bizmatch/src/app/pages/home/home.component.scss
+++ b/bizmatch/src/app/pages/home/home.component.scss
@@ -19,13 +19,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(
-      180deg,
-      rgba(0, 0, 0, 0.35) 0%,
-      rgba(0, 0, 0, 0.15) 40%,
-      rgba(0, 0, 0, 0.05) 70%,
-      rgba(0, 0, 0, 0) 100%
-    );
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.05) 70%, rgba(0, 0, 0, 0) 100%);
     border-radius: 20px;
     pointer-events: none;
     z-index: 1;
@@ -130,7 +124,9 @@ input[type='text'][name='aiSearchText'] {
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
+    transition:
+      width 0.6s,
+      height 0.6s;
     pointer-events: none;
   }
 
@@ -190,7 +186,9 @@ select,
 // Trust section container - more prominent
 .trust-section-container {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  transition:
+    box-shadow 0.3s ease,
+    transform 0.3s ease;
 
   &:hover {
     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
@@ -207,7 +205,9 @@ select,
 }
 
 .trust-icon {
-  transition: background-color 0.2s ease, color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
 }
 
 .trust-badge:hover .trust-icon {
@@ -227,7 +227,15 @@ select,
 // Search form container enhancement
 .search-form-container {
   transition: all 0.3s ease;
-  backdrop-filter: blur(10px);
+
+  // Fallback: Etwas weniger transparent, damit es ohne Blur gut lesbar bleibt
+  background-color: rgba(255, 255, 255, 0.95);
+
+  // Nur anwenden, wenn der Browser backdrop-filter unterstützt
+  @supports (backdrop-filter: blur(10px)) {
+    background-color: rgba(255, 255, 255, 0.8); // Hier wieder transparenter
+    backdrop-filter: blur(10px);
+  }
 
   &:hover {
     background-color: rgba(255, 255, 255, 0.9);