Improve SearchCard: hover effects, responsive grid, smooth transitions

components/search/SearchCard.tsx

@@ -11,6 +11,29 @@ interface SearchCardProps {
   onSubmit: () => void;
 }
 
+const inputStyle: React.CSSProperties = {
+  width: "100%",
+  background: "#0d0d18",
+  border: "1px solid #1e1e2e",
+  borderRadius: 8,
+  padding: "10px 12px",
+  fontSize: 14,
+  color: "#ffffff",
+  outline: "none",
+  boxSizing: "border-box",
+  transition: "border-color 0.15s",
+};
+
+const labelStyle: React.CSSProperties = {
+  display: "block",
+  fontSize: 11,
+  fontWeight: 500,
+  color: "#6b7280",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  marginBottom: 6,
+};
+
 export function SearchCard({ query, region, count, loading, onChange, onSubmit }: SearchCardProps) {
   const canSubmit = query.trim().length > 0 && !loading;
 
@@ -26,8 +49,20 @@ export function SearchCard({ query, region, count, loading, onChange, onSubmit }
         transition: "opacity 0.2s",
       }}
     >
+      <style>{`
+        .search-input:hover { border-color: #2e2e3e !important; }
+        .search-input:focus { border-color: #3b82f6 !important; }
+        .search-btn:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
+        .search-btn:active:not(:disabled) { transform: translateY(0); }
+        .search-btn { transition: filter 0.15s, transform 0.15s, opacity 0.15s; }
+        @media (max-width: 600px) {
+          .search-grid { grid-template-columns: 1fr !important; }
+        }
+      `}</style>
+
       {/* 3-column grid */}
       <div
+        className="search-grid"
         style={{
           display: "grid",
           gridTemplateColumns: "1fr 1fr 120px",
@@ -37,110 +72,40 @@ export function SearchCard({ query, region, count, loading, onChange, onSubmit }
       >
         {/* Suchbegriff */}
         <div>
-          <label
+          <label style={labelStyle}>Suchbegriff</label>
-            style={{
-              display: "block",
-              fontSize: 11,
-              fontWeight: 500,
-              color: "#6b7280",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 6,
-            }}
-          >
-            Suchbegriff
-          </label>
           <input
+            className="search-input"
             type="text"
             value={query}
             onChange={(e) => onChange("query", e.target.value)}
             onKeyDown={(e) => { if (e.key === "Enter" && canSubmit) onSubmit(); }}
-            placeholder="z.B. Dachdecker, Solaranlage, Steuerberater…"
+            placeholder="z.B. Dachdecker, Solaranlage…"
-            style={{
+            style={inputStyle}
-              width: "100%",
-              background: "#0d0d18",
-              border: "1px solid #1e1e2e",
-              borderRadius: 8,
-              padding: "9px 12px",
-              fontSize: 14,
-              color: "#ffffff",
-              outline: "none",
-              boxSizing: "border-box",
-              transition: "border-color 0.15s",
-            }}
-            onFocus={(e) => { e.currentTarget.style.borderColor = "#3b82f6"; }}
-            onBlur={(e) => { e.currentTarget.style.borderColor = "#1e1e2e"; }}
           />
         </div>
 
         {/* Region */}
         <div>
-          <label
+          <label style={labelStyle}>Region</label>
-            style={{
-              display: "block",
-              fontSize: 11,
-              fontWeight: 500,
-              color: "#6b7280",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 6,
-            }}
-          >
-            Region
-          </label>
           <input
+            className="search-input"
             type="text"
             value={region}
             onChange={(e) => onChange("region", e.target.value)}
             onKeyDown={(e) => { if (e.key === "Enter" && canSubmit) onSubmit(); }}
-            placeholder="z.B. Bayern, München, Deutschland"
+            placeholder="z.B. Bayern, München…"
-            style={{
+            style={inputStyle}
-              width: "100%",
-              background: "#0d0d18",
-              border: "1px solid #1e1e2e",
-              borderRadius: 8,
-              padding: "9px 12px",
-              fontSize: 14,
-              color: "#ffffff",
-              outline: "none",
-              boxSizing: "border-box",
-              transition: "border-color 0.15s",
-            }}
-            onFocus={(e) => { e.currentTarget.style.borderColor = "#3b82f6"; }}
-            onBlur={(e) => { e.currentTarget.style.borderColor = "#1e1e2e"; }}
           />
         </div>
 
         {/* Anzahl */}
         <div>
-          <label
+          <label style={labelStyle}>Anzahl</label>
-            style={{
-              display: "block",
-              fontSize: 11,
-              fontWeight: 500,
-              color: "#6b7280",
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 6,
-            }}
-          >
-            Anzahl
-          </label>
           <select
+            className="search-input"
             value={count}
             onChange={(e) => onChange("count", Number(e.target.value))}
-            style={{
+            style={{ ...inputStyle, cursor: "pointer" }}
-              width: "100%",
-              background: "#0d0d18",
-              border: "1px solid #1e1e2e",
-              borderRadius: 8,
-              padding: "9px 12px",
-              fontSize: 14,
-              color: "#ffffff",
-              outline: "none",
-              cursor: "pointer",
-              boxSizing: "border-box",
-            }}
           >
             <option value={25}>25 Leads</option>
             <option value={50}>50 Leads</option>
@@ -152,6 +117,7 @@ export function SearchCard({ query, region, count, loading, onChange, onSubmit }
 
       {/* Submit button */}
       <button
+        className="search-btn"
         onClick={onSubmit}
         disabled={!canSubmit}
         style={{
@@ -170,10 +136,8 @@ export function SearchCard({ query, region, count, loading, onChange, onSubmit }
           justifyContent: "center",
           gap: 8,
           marginBottom: 20,
-          transition: "opacity 0.15s",
         }}
       >
-        {/* Magnifying glass icon */}
         <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
           <circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" strokeWidth="1.5" />
           <line x1="10.5" y1="10.5" x2="13.5" y2="13.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
@@ -182,20 +146,12 @@ export function SearchCard({ query, region, count, loading, onChange, onSubmit }
       </button>
 
       {/* Divider */}
-      <div
+      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 12,
-          marginBottom: 16,
-        }}
-      >
         <div style={{ flex: 1, height: 1, background: "#1e1e2e" }} />
         <span style={{ fontSize: 12, color: "#6b7280", flexShrink: 0 }}>Beispielsuche</span>
         <div style={{ flex: 1, height: 1, background: "#1e1e2e" }} />
       </div>
 
-      {/* Example pills */}
       <ExamplePills
         onSelect={(q, r) => {
           onChange("query", q);