From aca60696ae7439f0be2b5b22c55260d5a26adfd8 Mon Sep 17 00:00:00 2001
From: Lago <jose_manuel_99@hotmail.com>
Date: Sat, 9 May 2026 23:45:30 +0200
Subject: [PATCH] fix: improve accessibility and styling for vehicle selection
 and review buttons

---
 frontend/index.html |  4 ++--
 frontend/styles.css | 35 +++++++++++++++++++++++++++++------
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 5e4a344..1974cbb 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -251,8 +251,8 @@
                             <h3 class="bpf-panel-title">🚗 <span data-i18n="stepVehicleTime">Fahrzeug & Zeitraum</span></h3>
 
                             <div class="bpf-field">
-                                <label data-i18n="bpfVehicle">Fahrzeug</label>
-                                <select id="bpfCar">
+                                <label for="bpfCar" id="bpfCarLabel" data-i18n="bpfVehicle">Fahrzeug</label>
+                                <select id="bpfCar" aria-labelledby="bpfCarLabel">
                                     <option value="" data-i18n="bpfSelectVehicle">Fahrzeug wählen</option>
                                 </select>
                             </div>
diff --git a/frontend/styles.css b/frontend/styles.css
index f28f2f9..9f6e89b 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -562,12 +562,32 @@ select:focus, input:focus, textarea:focus {
 }
 
 .review-dots button {
-    width: 10px; height: 10px; border-radius: 50%;
-    border: none; background: var(--line); cursor: pointer;
-    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease, width 0.3s ease;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     outline-offset: 4px;
 }
+
+.review-dots button::before {
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--line);
+    transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
+}
+
 .review-dots button:hover {
+    transform: scale(1.04);
+}
+
+.review-dots button:hover::before {
     background: rgba(196, 138, 66, 0.5);
     transform: scale(1.2);
 }
@@ -575,12 +595,15 @@ select:focus, input:focus, textarea:focus {
     outline: 2px solid var(--accent);
 }
 .review-dots button.active { 
-    background: var(--accent); 
-    width: 32px; 
-    border-radius: 6px; 
     transform: scale(1);
 }
 
+.review-dots button.active::before {
+    background: var(--accent);
+    width: 32px;
+    border-radius: 6px;
+}
+
 /* ---------------- Booking ---------------- */
 .booking-form {
     display: grid;