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 @@

🚗 Fahrzeug & Zeitraum

- -
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;