From c8254df98c8d0bf29780e38cd009fa5595ca9b08 Mon Sep 17 00:00:00 2001
From: Tim Lohmeier <250880285+timbenjaminlmr@users.noreply.github.com>
Date: Fri, 3 Jul 2026 20:49:55 +0200
Subject: [PATCH] Polish JobBridge interface

---
 src/app/globals.css                           | 296 ++++++++++++++----
 src/app/jobs-polish.css                       |  71 +++++
 src/app/layout.tsx                            |   1 +
 src/app/onboarding/waitlist/page.tsx          |  12 +-
 src/app/page.tsx                              |   2 +-
 src/components/OnboardingWizard.tsx           |  46 +--
 src/components/jobs/JobsList.tsx              |  21 +-
 src/components/jobs/JobsListSection.tsx       |   6 +-
 src/components/layout/ProfileChip.tsx         |   4 +-
 .../layout/header/LeftBrandChip.tsx           |   2 +-
 src/components/onboarding/LocationStep.tsx    |   1 +
 src/components/ui/CinematicDateInput.tsx      |  14 +-
 12 files changed, 367 insertions(+), 109 deletions(-)
 create mode 100644 src/app/jobs-polish.css

diff --git a/src/app/globals.css b/src/app/globals.css
index bc93b40..21a6ec2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -880,7 +880,9 @@ button,
   color-scheme: dark;
   height: 100vh;
   min-height: 100vh;
-  background: #07090f;
+  background:
+    radial-gradient(circle at 34% 18%, rgba(37, 99, 235, 0.055), transparent 68%),
+    var(--background);
   color: #f8fafc;
 }
 
@@ -900,23 +902,28 @@ button,
 }
 
 .onboarding-panel {
-  background: #202630;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.75);
+  isolation: isolate;
+  border: 0;
+  border-radius: 2rem !important;
+  background:
+    linear-gradient(180deg, rgba(12, 19, 36, 0.92), rgba(7, 12, 27, 0.96));
+  box-shadow:
+    0 0 0 1px rgba(148, 163, 184, 0.085),
+    0 24px 70px rgba(0, 0, 0, 0.28);
   color: #f8fafc;
 }
 
 @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
   .onboarding-panel {
-    background: rgba(32, 38, 48, 0.9);
     -webkit-backdrop-filter: blur(24px) saturate(160%);
     backdrop-filter: blur(24px) saturate(160%);
   }
 }
 
 .onboarding-panel-glow {
-  background: rgba(255, 255, 255, 0.08);
-  filter: blur(56px);
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.16), transparent 62%);
+  filter: blur(64px);
+  opacity: 0.45;
 }
 
 .onboarding-panel-texture {
@@ -924,23 +931,50 @@ button,
 }
 
 .onboarding-choice {
-  background: #343b47 !important;
-  border-color: rgba(255, 255, 255, 0.12) !important;
-  border-radius: 1.125rem !important;
+  background: rgba(15, 23, 42, 0.52) !important;
+  border-color: rgba(148, 163, 184, 0.1) !important;
+  border-radius: 1.5rem !important;
   color: #f8fafc !important;
+  box-shadow:
+    0 0 0 1px rgba(148, 163, 184, 0.065),
+    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
 }
 
 .onboarding-choice:hover {
-  background: #3a4250 !important;
-  border-color: rgba(255, 255, 255, 0.2) !important;
+  background: rgba(30, 41, 59, 0.6) !important;
+  border-color: rgba(129, 140, 248, 0.24) !important;
+  box-shadow:
+    0 0 0 1px rgba(129, 140, 248, 0.16),
+    0 16px 40px rgba(0, 0, 0, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
 }
 
 .onboarding-choice[aria-pressed="true"] {
-  background: #182235 !important;
-  border-color: rgba(96, 165, 250, 0.46) !important;
+  background: rgba(37, 99, 235, 0.13) !important;
+  border-color: rgba(129, 140, 248, 0.3) !important;
   box-shadow:
-    0 0 0 1px rgba(37, 99, 235, 0.18),
-    0 18px 54px rgba(0, 0, 0, 0.38);
+    0 0 0 1px rgba(129, 140, 248, 0.2),
+    0 20px 52px rgba(37, 99, 235, 0.16),
+    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
+}
+
+.onboarding-mode-choice {
+  min-height: 8.25rem;
+}
+
+.onboarding-choice-icon {
+  border: 1px solid rgba(148, 163, 184, 0.1);
+  background: rgba(15, 23, 42, 0.48);
+  color: rgba(129, 140, 248, 0.78);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.035),
+    0 12px 30px rgba(0, 0, 0, 0.18);
+}
+
+.onboarding-choice[aria-pressed="true"] .onboarding-choice-icon {
+  border-color: rgba(129, 140, 248, 0.32);
+  background: rgba(99, 102, 241, 0.18);
+  color: #c7d2fe;
 }
 
 .onboarding-choice-title {
@@ -1059,7 +1093,7 @@ button,
 }
 
 .onboarding-feedback-action {
-  border-radius: 1.125rem !important;
+  border-radius: 999px !important;
 }
 
 .onboarding-feedback-action-primary {
@@ -1121,7 +1155,89 @@ button,
 
 .onboarding-panel :where(button[class*="bg-blue-600"], button[class*="border-white/30"]) {
   min-height: 3.5rem;
-  border-radius: 1.125rem !important;
+  border-radius: 999px !important;
+}
+
+.onboarding-panel :where(button[class*="bg-blue-600"]) {
+  border: 1px solid rgba(147, 197, 253, 0.26) !important;
+  background: #2563eb !important;
+  box-shadow:
+    0 0 0 1px rgba(129, 140, 248, 0.18),
+    0 0 0 6px rgba(37, 99, 235, 0.08),
+    0 18px 42px rgba(37, 99, 235, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
+}
+
+.onboarding-panel :where(button[class*="bg-blue-600"]):hover:not(:disabled) {
+  border-color: rgba(191, 219, 254, 0.36) !important;
+  background: #3b82f6 !important;
+  box-shadow:
+    0 0 0 1px rgba(129, 140, 248, 0.24),
+    0 0 0 7px rgba(37, 99, 235, 0.11),
+    0 22px 54px rgba(37, 99, 235, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
+}
+
+.onboarding-panel :where(button[class*="border-white/30"]) {
+  background: rgba(15, 23, 42, 0.42) !important;
+  border-color: transparent !important;
+  color: #e2e8f0 !important;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
+}
+
+.onboarding-panel :where(button[class*="border-white/30"]):hover:not(:disabled) {
+  background: rgba(30, 41, 59, 0.6) !important;
+  color: #ffffff !important;
+  box-shadow:
+    0 0 0 1px rgba(129, 140, 248, 0.24),
+    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
+}
+
+.onboarding-panel :where(input, textarea, select) {
+  border-color: transparent !important;
+  background: rgba(15, 23, 42, 0.48) !important;
+  color: #f8fafc;
+  box-shadow:
+    0 0 0 1px rgba(148, 163, 184, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
+  transition-property: background-color, box-shadow, color, border-color;
+  transition-duration: 200ms;
+  transition-timing-function: ease-out;
+}
+
+.onboarding-panel :where(input, select) {
+  border-radius: 999px !important;
+}
+
+.onboarding-panel textarea {
+  border-radius: 1.5rem !important;
+}
+
+.onboarding-panel :where(input, textarea, select)::placeholder {
+  color: #64748b;
+}
+
+.onboarding-panel :where(input, textarea, select):focus {
+  background: rgba(15, 23, 42, 0.62) !important;
+  box-shadow:
+    0 0 0 1px rgba(129, 140, 248, 0.38),
+    0 0 0 4px rgba(99, 102, 241, 0.14) !important;
+}
+
+.onboarding-panel .cinematic-date-control {
+  border-radius: 999px !important;
+  background: rgba(15, 23, 42, 0.48) !important;
+  box-shadow:
+    0 0 0 1px rgba(148, 163, 184, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
+}
+
+.onboarding-panel .cinematic-date-input :where(input) {
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
 }
 
 .onboarding-shell .theme-logo-dark {
@@ -1453,7 +1569,7 @@ button,
 }
 
 .onboarding-location-panel {
-  border-radius: 1.75rem;
+  border-radius: 2rem !important;
 }
 
 .onboarding-location-header-badge {
@@ -1463,24 +1579,33 @@ button,
 
 .onboarding-location-panel .location-search-control {
   height: 3.25rem;
-  border-radius: 1.125rem !important;
+  border-radius: 999px !important;
 }
 
 .onboarding-location-panel .location-search-menu {
-  border-radius: 1.125rem !important;
+  border-radius: 2rem !important;
 }
 
 .onboarding-location-panel .location-search-result {
-  border-radius: 0.625rem !important;
+  border-radius: 999px !important;
 }
 
 .onboarding-location-panel .onboarding-location-notice {
-  border-radius: 1rem !important;
+  border-radius: 999px !important;
+}
+
+.onboarding-location-panel .onboarding-location-notice[data-open="true"] {
+  border-radius: 2rem !important;
 }
 
 .onboarding-location-panel .onboarding-location-notice-trigger {
   min-height: 4rem;
   padding: 0.95rem 1rem;
+  border-radius: 999px !important;
+}
+
+.onboarding-location-panel .onboarding-location-notice[data-open="true"] .onboarding-location-notice-trigger {
+  border-radius: 2rem 2rem 0 0 !important;
 }
 
 .onboarding-location-panel .onboarding-location-notice-title {
@@ -1495,7 +1620,7 @@ button,
 .onboarding-location-panel .onboarding-location-primary,
 .onboarding-location-panel .onboarding-location-back {
   height: 3.5rem;
-  border-radius: 1.125rem !important;
+  border-radius: 999px !important;
 }
 
 .onboarding-location-panel .onboarding-location-back {
@@ -1504,10 +1629,6 @@ button,
     inset 0 1px 0 rgba(255, 255, 255, 0.035);
 }
 
-.onboarding-location-panel .onboarding-location-back:hover:not(:active) {
-  transform: none;
-}
-
 @media (min-width: 768px) {
   .onboarding-location-header-badge {
     width: 5rem;
@@ -1524,7 +1645,7 @@ button,
 }
 
 .light .onboarding-location-panel {
-  border-radius: 1.75rem;
+  border-radius: 2rem !important;
 }
 
 .light .onboarding-location-heading {
@@ -1561,17 +1682,23 @@ button,
 }
 
 .light .onboarding-location-panel .onboarding-location-primary {
+  border: 1px solid rgba(33, 79, 208, 0.26) !important;
   background: #214fd0 !important;
   box-shadow:
     0 0 0 1px rgba(33, 79, 208, 0.18),
-    0 18px 42px rgba(33, 79, 208, 0.22) !important;
+    0 0 0 6px rgba(33, 79, 208, 0.08),
+    0 18px 42px rgba(33, 79, 208, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
 }
 
 .light .onboarding-location-panel .onboarding-location-primary:hover:not(:disabled) {
+  border-color: rgba(33, 79, 208, 0.36) !important;
   background: #1d46bd !important;
   box-shadow:
-    0 0 0 1px rgba(33, 79, 208, 0.22),
-    0 22px 54px rgba(33, 79, 208, 0.26) !important;
+    0 0 0 1px rgba(33, 79, 208, 0.24),
+    0 0 0 7px rgba(33, 79, 208, 0.1),
+    0 22px 54px rgba(33, 79, 208, 0.26),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
 }
 
 .light .onboarding-location-panel .onboarding-location-primary:disabled {
@@ -1660,11 +1787,12 @@ button,
 .waitlist-input,
 .waitlist-select {
   border: 0;
-  background: rgba(255, 255, 255, 0.055);
+  border-radius: 999px !important;
+  background: rgba(15, 23, 42, 0.48);
   color: #ffffff;
   box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.12),
-    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    0 0 0 1px rgba(148, 163, 184, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.035);
 }
 
 .waitlist-input::placeholder {
@@ -1674,18 +1802,18 @@ button,
 .waitlist-input:focus,
 .waitlist-select:focus {
   --tw-ring-color: rgba(59, 130, 246, 0.2);
-  background: rgba(255, 255, 255, 0.075);
+  background: rgba(15, 23, 42, 0.62);
   box-shadow:
-    0 0 0 1px rgba(96, 165, 250, 0.38),
-    0 0 0 4px rgba(59, 130, 246, 0.16);
+    0 0 0 1px rgba(129, 140, 248, 0.38),
+    0 0 0 4px rgba(99, 102, 241, 0.14);
 }
 
 .waitlist-input-readonly {
   cursor: not-allowed;
   color: #94a3b8;
-  background: rgba(15, 23, 42, 0.28);
+  background: rgba(15, 23, 42, 0.36);
   box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.09),
+    0 0 0 1px rgba(148, 163, 184, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
@@ -1703,18 +1831,25 @@ button,
 }
 
 .waitlist-submit {
+  border-radius: 999px !important;
+  border: 1px solid rgba(147, 197, 253, 0.26);
   background: #2563eb;
   color: #ffffff;
   box-shadow:
-    0 0 0 1px rgba(147, 197, 253, 0.22),
-    0 18px 42px rgba(37, 99, 235, 0.22);
+    0 0 0 1px rgba(129, 140, 248, 0.18),
+    0 0 0 6px rgba(37, 99, 235, 0.08),
+    0 18px 42px rgba(37, 99, 235, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.18);
 }
 
 .waitlist-submit:hover:not(:disabled) {
-  background: #1d4ed8;
+  border-color: rgba(191, 219, 254, 0.36);
+  background: #3b82f6;
   box-shadow:
-    0 0 0 1px rgba(147, 197, 253, 0.3),
-    0 22px 54px rgba(37, 99, 235, 0.28);
+    0 0 0 1px rgba(129, 140, 248, 0.24),
+    0 0 0 7px rgba(37, 99, 235, 0.11),
+    0 22px 54px rgba(37, 99, 235, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.22);
 }
 
 .waitlist-submit:disabled {
@@ -1723,7 +1858,8 @@ button,
 }
 
 .waitlist-back-button {
-  background: rgba(255, 255, 255, 0.04);
+  border-radius: 999px !important;
+  background: rgba(15, 23, 42, 0.42);
   color: #e2e8f0;
   box-shadow:
     0 0 0 1px rgba(255, 255, 255, 0.12),
@@ -1731,21 +1867,23 @@ button,
 }
 
 .waitlist-back-button:hover {
-  background: rgba(255, 255, 255, 0.07);
+  background: rgba(30, 41, 59, 0.6);
   color: #ffffff;
   box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.18),
+    0 0 0 1px rgba(129, 140, 248, 0.24),
     inset 0 1px 0 rgba(255, 255, 255, 0.045);
 }
 
 .waitlist-link-button {
-  background: rgba(255, 255, 255, 0.08);
+  border-radius: 999px !important;
+  background: rgba(15, 23, 42, 0.42);
   color: #ffffff;
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
 }
 
 .waitlist-link-button:hover {
-  background: rgba(255, 255, 255, 0.12);
+  background: rgba(30, 41, 59, 0.6);
+  box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.24);
 }
 
 .waitlist-success-icon {
@@ -1811,18 +1949,24 @@ button,
 }
 
 .light .waitlist-submit {
+  border: 1px solid rgba(33, 79, 208, 0.26);
   background: #214fd0;
   color: #ffffff;
   box-shadow:
     0 0 0 1px rgba(33, 79, 208, 0.18),
-    0 18px 42px rgba(33, 79, 208, 0.22);
+    0 0 0 6px rgba(33, 79, 208, 0.08),
+    0 18px 42px rgba(33, 79, 208, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.18);
 }
 
 .light .waitlist-submit:hover:not(:disabled) {
+  border-color: rgba(33, 79, 208, 0.36);
   background: #1d46bd;
   box-shadow:
-    0 0 0 1px rgba(33, 79, 208, 0.22),
-    0 22px 54px rgba(33, 79, 208, 0.26);
+    0 0 0 1px rgba(33, 79, 208, 0.24),
+    0 0 0 7px rgba(33, 79, 208, 0.1),
+    0 22px 54px rgba(33, 79, 208, 0.26),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 .light .waitlist-back-button {
@@ -5005,14 +5149,31 @@ textarea.profile-field-control {
 
 .location-search-menu {
   z-index: 1300 !important;
+  border-radius: 1.75rem !important;
   border-color: var(--border-subtle) !important;
   background: var(--surface-overlay) !important;
   box-shadow: var(--shadow-popover) !important;
 }
 
+.location-search-result {
+  border-radius: 999px !important;
+  transform: translateY(0);
+  transition-property: background-color, box-shadow, color, transform;
+  transition-duration: 180ms;
+  transition-timing-function: ease-out;
+}
+
 .location-search-result:hover,
 .location-search-result:focus {
+  transform: translateY(-1px);
   background: color-mix(in srgb, var(--brand) 7%, transparent);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent),
+    0 10px 26px color-mix(in srgb, var(--brand) 10%, transparent);
+}
+
+.location-search-result:active {
+  transform: translateY(0);
 }
 
 .location-search-result-icon {
@@ -5077,7 +5238,7 @@ textarea.profile-field-control {
 }
 
 .job-create-location-search .location-search-menu {
-  border-radius: 0.75rem !important;
+  border-radius: 1.5rem !important;
   border-color: rgba(255, 255, 255, 0.12) !important;
   background: rgba(2, 6, 23, 0.98) !important;
 }
@@ -5089,6 +5250,9 @@ textarea.profile-field-control {
 .job-create-location-search .location-search-result:hover,
 .job-create-location-search .location-search-result:focus {
   background: rgba(99, 102, 241, 0.14);
+  box-shadow:
+    0 0 0 1px rgba(165, 180, 252, 0.32),
+    0 10px 26px rgba(37, 99, 235, 0.16);
 }
 
 .jobbridge-map-frame,
@@ -6420,6 +6584,14 @@ html[data-mobile-nav-preference="bottom"] .app-shell-main {
   border: 1px solid var(--border-subtle) !important;
   background: var(--surface-muted) !important;
   color: var(--text-muted) !important;
+  min-width: 2.15rem !important;
+  height: 2.15rem !important;
+  padding-inline: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border-radius: 999px !important;
+  font-variant-numeric: tabular-nums;
 }
 
 .jobs-section-icon {
@@ -7011,9 +7183,9 @@ html[data-mobile-nav-preference="bottom"] .app-shell-main {
   }
 }
 
-/* Mobile jobs tabs: rectangular shell with quieter selected state. */
+/* Mobile jobs tabs: rounded shell with quieter selected state. */
 .jobs-mobile-tabs {
-  border-radius: 1.08rem !important;
+  border-radius: 999px !important;
   padding: 0.34rem !important;
   background:
     linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(8, 13, 29, 0.84)) !important;
@@ -7028,7 +7200,7 @@ html[data-mobile-nav-preference="bottom"] .app-shell-main {
 
 .jobs-mobile-tab {
   min-height: 2.55rem;
-  border-radius: 0.74rem !important;
+  border-radius: 999px !important;
   padding-inline: 0.72rem !important;
   color: rgba(148, 163, 184, 0.82) !important;
   font-variant-numeric: tabular-nums;
@@ -7046,12 +7218,13 @@ html[data-mobile-nav-preference="bottom"] .app-shell-main {
 
 .jobs-mobile-tab-badge {
   display: inline-flex;
+  width: 1.35rem;
   min-width: 1.35rem;
   height: 1.35rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.48rem;
-  padding-inline: 0.38rem;
+  border-radius: 999px;
+  padding-inline: 0;
   background: rgba(148, 163, 184, 0.12);
   color: rgba(226, 232, 240, 0.82);
   font-size: 0.68rem;
@@ -7066,7 +7239,10 @@ html[data-mobile-nav-preference="bottom"] .app-shell-main {
 }
 
 .jobs-mobile-tabs .jobs-filter-icon-button {
-  border-radius: 0.74rem !important;
+  width: 2.55rem !important;
+  height: 2.55rem !important;
+  min-width: 2.55rem !important;
+  border-radius: 999px !important;
 }
 
 .light .jobs-mobile-tabs {
diff --git a/src/app/jobs-polish.css b/src/app/jobs-polish.css
new file mode 100644
index 0000000..3130ea8
--- /dev/null
+++ b/src/app/jobs-polish.css
@@ -0,0 +1,71 @@
+.jobs-filter-trigger {
+  min-height: 2.8rem;
+  border-radius: 999px !important;
+  padding-inline: 1rem 1.12rem !important;
+  box-shadow: var(--shadow-card) !important;
+}
+
+.jobs-filter-trigger[data-active="true"] {
+  border-color: var(--brand-border) !important;
+  background: var(--surface-solid) !important;
+  color: var(--text-strong) !important;
+}
+
+.dark .jobs-filter-trigger {
+  border-color: rgba(148, 163, 184, 0.12) !important;
+  background: rgba(8, 13, 29, 0.72) !important;
+  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
+}
+
+.dark .jobs-filter-trigger:hover,
+.dark .jobs-filter-trigger[data-active="true"] {
+  border-color: rgba(129, 140, 248, 0.28) !important;
+  background: rgba(255, 255, 255, 0.1) !important;
+  color: #ffffff !important;
+}
+
+.jobs-empty-state {
+  position: relative;
+  isolation: isolate;
+  border-color: transparent !important;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 88%, transparent), color-mix(in srgb, var(--surface-solid) 84%, transparent)) !important;
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--border-subtle) 72%, transparent),
+    0 22px 58px rgba(31, 45, 74, 0.09),
+    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
+}
+
+.dark .jobs-empty-state {
+  background:
+    linear-gradient(180deg, rgba(12, 19, 36, 0.92), rgba(7, 12, 27, 0.96)) !important;
+  box-shadow:
+    0 0 0 1px rgba(148, 163, 184, 0.085),
+    0 24px 70px rgba(0, 0, 0, 0.28) !important;
+}
+
+.jobs-empty-title {
+  text-wrap: balance;
+}
+
+.jobs-empty-message {
+  text-wrap: pretty;
+}
+
+.jobs-empty-icon {
+  border-color: color-mix(in srgb, var(--border-subtle) 82%, transparent) !important;
+  background: color-mix(in srgb, var(--surface-muted) 76%, transparent) !important;
+  color: color-mix(in srgb, var(--brand) 56%, var(--text-muted)) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    0 10px 26px rgba(31, 45, 74, 0.08) !important;
+}
+
+.dark .jobs-empty-icon {
+  border-color: rgba(148, 163, 184, 0.09) !important;
+  background: rgba(15, 23, 42, 0.48) !important;
+  color: rgba(129, 140, 248, 0.54) !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.035),
+    0 12px 30px rgba(0, 0, 0, 0.18) !important;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 61b7d6f..661b177 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { TestModeBanner } from "@/components/admin/TestModeBanner";
 import { getCurrentSessionAndProfile } from "@/lib/auth";
 import { normalizeThemePreference, type ThemePreference } from "@/lib/theme-preference";
 import "./globals.css";
+import "./jobs-polish.css";
 
 const fontSans = Plus_Jakarta_Sans({
   variable: "--font-sans",
diff --git a/src/app/onboarding/waitlist/page.tsx b/src/app/onboarding/waitlist/page.tsx
index fd5b610..2001d92 100644
--- a/src/app/onboarding/waitlist/page.tsx
+++ b/src/app/onboarding/waitlist/page.tsx
@@ -13,11 +13,11 @@ type WaitlistShellProps = {
     size?: string;
 };
 
-function WaitlistShell({ children, size = "max-w-2xl" }: WaitlistShellProps) {
+function WaitlistShell({ children, size = "max-w-3xl" }: WaitlistShellProps) {
     return (
-        <div className="landing-auth-shell min-h-dvh bg-[#07090f]">
+        <div className="landing-auth-shell min-h-dvh bg-background">
             <main className="onboarding-shell waitlist-shell flex min-h-dvh items-start justify-center overflow-y-auto overflow-x-hidden px-4 py-4 pb-16 no-scrollbar md:items-center md:py-4 md:pb-16">
-                <div className={`onboarding-panel waitlist-panel relative w-full ${size} overflow-hidden rounded-3xl p-6 md:p-12`}>
+                <div className={`onboarding-panel waitlist-panel relative w-full ${size} overflow-hidden rounded-[2rem] p-6 md:p-12`}>
                     <div className="onboarding-panel-glow pointer-events-none absolute -left-20 -top-20 h-56 w-56" />
                     <div className="onboarding-panel-texture pointer-events-none absolute inset-0" />
                     <div className="relative z-10">
@@ -92,7 +92,7 @@ function WaitlistContent() {
 
     if (success) {
         return (
-            <WaitlistShell size="max-w-md">
+            <WaitlistShell size="max-w-lg">
                 <div className="waitlist-success text-center">
                     <div className="waitlist-success-icon mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full">
                         <CheckCircle2 className="h-8 w-8" aria-hidden="true" />
@@ -118,9 +118,7 @@ function WaitlistContent() {
                 <LogoBadge size="md" className="waitlist-header-badge shrink-0" />
                 <div className="min-w-0 flex-1">
                     <h1 className="waitlist-heading text-2xl font-bold leading-tight tracking-tight text-white md:text-3xl">
-                        <span className="block">{cityLabel} ist noch</span>
-                        {" "}
-                        <span className="block">nicht gestartet.</span>
+                        JobBridge in {cityLabel} ist noch nicht einsatzbereit.
                     </h1>
                     <p className="waitlist-copy mt-2.5 leading-relaxed text-slate-300">
                         Trag dich ein, und wir informieren dich, sobald JobBridge in <strong>{cityLabel}</strong> verfügbar ist.
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c256d0c..2aed381 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,7 +29,7 @@ export default async function LandingPage({
 
   // Ohne Session zeigt der Client-Wizard ggf. einen lokal gespeicherten Pending-Onboarding-Stand.
   return (
-    <div className="landing-auth-shell min-h-dvh bg-[#07090f]">
+    <div className="landing-auth-shell min-h-dvh bg-background">
       <AuthBridge authState={authState} redirectTo={redirectTo} initialMode={authMode} />
       <MiniFooter />
     </div>
diff --git a/src/components/OnboardingWizard.tsx b/src/components/OnboardingWizard.tsx
index 1a417c1..84020f7 100644
--- a/src/components/OnboardingWizard.tsx
+++ b/src/components/OnboardingWizard.tsx
@@ -12,7 +12,7 @@ import { supabaseBrowser } from "@/lib/supabaseClient";
 import { useEmailResend } from "@/lib/hooks/useEmailResend";
 import { type OnboardingRole, type Profile } from "@/lib/types";
 import { BRAND_EMAIL } from "@/lib/constants";
-import { Sparkles, HandHeart, Building2, Mail, UserX, KeyRound } from "lucide-react";
+import { Sparkles, HandHeart, Building2, Mail, UserX, KeyRound, UserPlus, LogIn } from "lucide-react";
 import { LocationStep } from "./onboarding/LocationStep";
 import { CinematicDateInput } from "@/components/ui/CinematicDateInput";
 import type { User } from "@supabase/supabase-js";
@@ -693,7 +693,7 @@ export function OnboardingWizard({
     setErrorMsg(null);
   };
 
-  const panelClass = "onboarding-panel relative rounded-3xl p-8 md:p-12 overflow-hidden";
+  const panelClass = "onboarding-panel relative rounded-[2rem] p-7 md:p-12 overflow-hidden";
   const panelGlowClass = "onboarding-panel-glow pointer-events-none absolute -top-16 -left-16 w-56 h-56";
   const panelTextureClass = "onboarding-panel-texture pointer-events-none absolute inset-0";
   const emailConfirmStatus = codeMessage || resendError || resendMessage;
@@ -722,7 +722,7 @@ export function OnboardingWizard({
     >
       <div
         className={[
-          "relative z-10 my-auto w-full max-w-2xl",
+          "relative z-10 my-auto w-full max-w-3xl",
         ].join(" ")}
       >
         <AnimatePresence initial={false} mode="wait">
@@ -742,14 +742,14 @@ export function OnboardingWizard({
                 <div className="flex flex-col items-start gap-4 text-left">
                   <CardHeader
                     title="JobBridge"
-                    subtitle="Sichere Taschengeldjobs zwischen Jugendlichen und Auftraggebern."
+                    subtitle="Sichere Taschengeldjobs bieten oder finden."
                     spacing="tight"
                   />
                   <p className="text-base text-slate-200/80 max-w-md">
                     Plattform mit verifizierten Aufgaben, klaren Schritten und seniorenfreundlicher Bedienung.
                   </p>
                   <div className="pt-2 w-full">
-                    <ButtonPrimary onClick={nextStep} className="w-full">Jetzt starten</ButtonPrimary>
+                    <ButtonPrimary onClick={nextStep} className="onboarding-start-button w-full">Jetzt starten</ButtonPrimary>
                   </div>
                 </div>
               </div>
@@ -770,11 +770,11 @@ export function OnboardingWizard({
                 <div className={panelTextureClass} />
 
                 <CardHeader
-                  title="Warst du schon bei JobBridge?"
+                  title="Hast du schon einen JobBridge-Account?"
                   subtitle="Damit wir dich richtig weiterleiten können."
                 />
 
-                <div className="grid gap-4 mb-8">
+                <div className="onboarding-mode-grid grid gap-4 mb-8 md:grid-cols-2">
                   <ChoiceTile
                     onClick={() => {
                       setMode("signup");
@@ -782,11 +782,16 @@ export function OnboardingWizard({
                       setErrorMsg(null);
                     }}
                     selected={mode === "signup"}
-                    className="onboarding-choice"
+                    className="onboarding-choice onboarding-mode-choice"
                   >
-                    <div className="space-y-1">
-                      <div className="onboarding-choice-title text-lg font-semibold">Ich bin neu hier</div>
-                      <div className="onboarding-choice-text text-sm">Ich möchte ein neues Konto erstellen.</div>
+                    <div className="onboarding-choice-content flex h-full items-start gap-4">
+                      <div className="onboarding-choice-icon flex h-11 w-11 shrink-0 items-center justify-center rounded-full">
+                        <UserPlus className="h-5 w-5" aria-hidden="true" />
+                      </div>
+                      <div className="min-w-0 flex-1 space-y-1">
+                        <div className="onboarding-choice-title text-lg font-semibold">Ich bin neu hier</div>
+                        <div className="onboarding-choice-text text-sm">Ich möchte ein neues Konto erstellen.</div>
+                      </div>
                     </div>
                   </ChoiceTile>
                   <ChoiceTile
@@ -796,11 +801,16 @@ export function OnboardingWizard({
                       setErrorMsg(null);
                     }}
                     selected={mode === "signin"}
-                    className="onboarding-choice"
+                    className="onboarding-choice onboarding-mode-choice"
                   >
-                    <div className="space-y-1">
-                      <div className="onboarding-choice-title text-lg font-semibold">Ich war schon hier</div>
-                      <div className="onboarding-choice-text text-sm">Ich habe bereits ein Konto.</div>
+                    <div className="onboarding-choice-content flex h-full items-start gap-4">
+                      <div className="onboarding-choice-icon flex h-11 w-11 shrink-0 items-center justify-center rounded-full">
+                        <LogIn className="h-5 w-5" aria-hidden="true" />
+                      </div>
+                      <div className="min-w-0 flex-1 space-y-1">
+                        <div className="onboarding-choice-title text-lg font-semibold">Ich war schon hier</div>
+                        <div className="onboarding-choice-text text-sm">Ich habe bereits ein Konto.</div>
+                      </div>
                     </div>
                   </ChoiceTile>
                 </div>
@@ -826,7 +836,7 @@ export function OnboardingWizard({
               exit={{ opacity: 0, y: -8 }}
               transition={{ duration: 0.4, ease: "easeOut" }}
             >
-              <div className={`${panelClass} onboarding-location-panel mx-auto w-full max-w-2xl`}>
+              <div className={`${panelClass} onboarding-location-panel mx-auto w-full max-w-3xl`}>
                 <div className={panelGlowClass} />
                 <div className={panelTextureClass} />
                 <LocationStep
@@ -956,7 +966,7 @@ export function OnboardingWizard({
                             </ButtonPrimary>
                             <a
                               href={`mailto:support@jobbridge.app?subject=Hilfe bei Passwort (JobBridge)&body=Hallo Support-Team,%0D%0A%0D%0Amein Passwort für ${email} wird nicht akzeptiert.%0D%0A%0D%0ABitte helft mir weiter.`}
-                              className="onboarding-feedback-action onboarding-feedback-action-secondary flex h-12 w-full items-center justify-center text-sm font-semibold transition-[background-color,color,scale,border-color,box-shadow] duration-200 ease-out active:scale-[0.98]"
+                              className="onboarding-feedback-action onboarding-feedback-action-secondary flex h-12 w-full items-center justify-center text-sm font-semibold transition-[background-color,color,scale,border-color,box-shadow] duration-200 ease-out active:scale-[0.96]"
                             >
                               Support kontaktieren
                             </a>
@@ -993,7 +1003,7 @@ export function OnboardingWizard({
                             </ButtonPrimary>
                             <a
                               href={`mailto:support@jobbridge.app?subject=Account nicht gefunden (JobBridge)&body=Hallo Support-Team,%0D%0A%0D%0Aich versuche mich mit ${email} anzumelden, aber der Account existiert angeblich nicht.%0D%0A%0D%0ABitte helft mir weiter.`}
-                              className="onboarding-feedback-action onboarding-feedback-action-secondary flex h-12 w-full items-center justify-center text-sm font-semibold transition-[background-color,color,scale,border-color,box-shadow] duration-200 ease-out active:scale-[0.98]"
+                              className="onboarding-feedback-action onboarding-feedback-action-secondary flex h-12 w-full items-center justify-center text-sm font-semibold transition-[background-color,color,scale,border-color,box-shadow] duration-200 ease-out active:scale-[0.96]"
                             >
                               Support kontaktieren
                             </a>
diff --git a/src/components/jobs/JobsList.tsx b/src/components/jobs/JobsList.tsx
index 89787b1..31965f9 100644
--- a/src/components/jobs/JobsList.tsx
+++ b/src/components/jobs/JobsList.tsx
@@ -203,7 +203,7 @@ export function JobsList({
         <>
             {/* ── Mobile Tab Bar ───────────────────────────────────────── */}
             <div className="mb-7 flex w-full justify-center md:hidden">
-                <div className="jobs-mobile-tabs flex w-full items-center justify-between rounded-2xl border border-white/[0.08] bg-gradient-to-br from-slate-900/95 via-slate-900/80 to-slate-950/95 p-1.5 shadow-[0_18px_50px_-26px_rgba(0,0,0,0.75)]">
+                <div className="jobs-mobile-tabs flex w-full items-center justify-between rounded-full border border-white/[0.08] bg-gradient-to-br from-slate-900/95 via-slate-900/80 to-slate-950/95 p-1.5 shadow-[0_18px_50px_-26px_rgba(0,0,0,0.75)]">
                     <div className="flex items-center gap-0.5 overflow-x-auto no-scrollbar flex-1 min-w-0">
                         <MobileTab
                             active={activeTab === "active"}
@@ -252,7 +252,7 @@ export function JobsList({
                         onClick={() => setShowFilterPanel(true)}
                         badgeCount={totalBadgeCount}
                         isActive={hasChanges}
-                        className="h-9 w-9 rounded-xl"
+                        className="h-10 w-10 rounded-full"
                     />
                 </div>
             </div>
@@ -291,8 +291,9 @@ export function JobsList({
 
                 <button
                     onClick={() => setShowFilterPanel(true)}
+                    data-active={showFilterPanel || hasChanges}
                     className={cn(
-                        "jobs-filter-trigger relative ml-4 flex items-center gap-2.5 whitespace-nowrap rounded-xl border border-transparent px-3.5 py-2.5 text-slate-400 transition-colors duration-200 hover:border-white/10 hover:bg-white/5 hover:text-white sm:px-4",
+                        "jobs-filter-trigger relative ml-4 flex items-center gap-2.5 whitespace-nowrap rounded-full border border-transparent px-3.5 py-2.5 text-slate-400 transition-[background-color,border-color,color,box-shadow,transform] duration-200 ease-out active:scale-[0.96] sm:px-4",
                         showFilterPanel && "bg-white/10 text-indigo-300 border-indigo-500/20",
                         hasChanges && !showFilterPanel && "text-indigo-300 border-indigo-500/20 bg-indigo-500/10"
                     )}
@@ -322,7 +323,7 @@ export function JobsList({
                                 emptyMsg={
                                     <EmptyState
                                         icon={Briefcase}
-                                        title="Aktuell keine lokalen Jobs"
+                                        title="Keine lokalen Jobs gefunden"
                                         message={
                                             hasChanges
                                                 ? "Keine lokalen Jobs für deine aktuellen Filter. Versuche, die Filter anzupassen."
@@ -430,7 +431,7 @@ function MobileTab({
             onClick={onClick}
             data-active={active}
             className={cn(
-                "jobs-mobile-tab relative flex items-center gap-1 whitespace-nowrap rounded-lg border px-2 py-2 text-[11px] font-semibold transition-colors sm:gap-1.5 sm:rounded-xl sm:px-3 sm:text-xs",
+                "jobs-mobile-tab relative flex items-center gap-1 whitespace-nowrap rounded-full border px-2 py-2 text-[11px] font-semibold transition-colors sm:gap-1.5 sm:rounded-full sm:px-3 sm:text-xs",
                 active ? activeClass : "text-slate-400 hover:text-slate-200 hover:bg-white/5 border-transparent"
             )}
         >
@@ -515,12 +516,12 @@ function EmptyState({
     message: string;
 }) {
     return (
-        <div className="jobs-empty-copy flex flex-col items-center justify-center space-y-4 px-4 py-8">
-            <div className="jobs-empty-icon flex h-16 w-16 items-center justify-center rounded-2xl border border-white/[0.05] bg-slate-900/60 text-indigo-400/80">
-                <Icon size={26} className="opacity-80" />
+        <div className="jobs-empty-copy flex flex-col items-center justify-center space-y-3 px-4 py-8">
+            <div className="jobs-empty-icon flex h-12 w-12 items-center justify-center rounded-[0.95rem] border border-white/[0.05] bg-slate-900/40 text-indigo-300/50">
+                <Icon size={20} className="opacity-[0.62]" />
             </div>
-            <div className="text-center space-y-1.5">
-                <h3 className="jobs-empty-title text-xl font-bold tracking-tight text-white">{title}</h3>
+            <div className="space-y-1.5 text-center">
+                <h3 className="jobs-empty-title text-lg font-bold leading-tight tracking-tight text-white">{title}</h3>
                 <p className="jobs-empty-message mx-auto max-w-sm text-sm leading-relaxed text-slate-400">{message}</p>
             </div>
         </div>
diff --git a/src/components/jobs/JobsListSection.tsx b/src/components/jobs/JobsListSection.tsx
index 4cefa31..3954966 100644
--- a/src/components/jobs/JobsListSection.tsx
+++ b/src/components/jobs/JobsListSection.tsx
@@ -42,7 +42,7 @@ export const JobsListSection = memo(function JobsListSection({
                         </div>
                     )}
                     <span className="truncate">{title}</span>
-                    <span className="jobs-section-count rounded-full bg-white/10 px-3 py-1 text-sm font-semibold tracking-normal text-slate-400">
+                    <span className="jobs-section-count inline-flex h-8 min-w-8 items-center justify-center rounded-full bg-white/10 px-0 py-0 text-sm font-semibold tracking-normal text-slate-400 tabular-nums">
                         {jobs.length}
                     </span>
                 </h2>
@@ -50,8 +50,8 @@ export const JobsListSection = memo(function JobsListSection({
 
             <div className="jobs-card-grid grid grid-cols-1 gap-6 lg:grid-cols-2">
                 {jobs.length === 0 ? (
-                    <div className="jobs-empty-state col-span-full rounded-[1.35rem] border border-white/10 bg-white/[0.025] py-10 text-center">
-                        <div className="text-slate-400">{emptyMsg}</div>
+                    <div className="jobs-empty-state col-span-full flex min-h-[17.5rem] items-center justify-center overflow-hidden rounded-[1.5rem] border-0 px-5 py-10 text-center">
+                        <div className="w-full">{emptyMsg}</div>
                     </div>
                 ) : (
                     jobs.map(job => (
diff --git a/src/components/layout/ProfileChip.tsx b/src/components/layout/ProfileChip.tsx
index dfc61de..b827012 100644
--- a/src/components/layout/ProfileChip.tsx
+++ b/src/components/layout/ProfileChip.tsx
@@ -51,7 +51,7 @@ export function ProfileChip({ profile, className, isDemo, isStaff, accountEmail
     if (!profile) {
         return (
             <div className={cn("relative", className)}>
-                <div className="flex h-[52px] items-center gap-2 rounded-full border border-white/10 bg-slate-900/40 px-[6px] md:pr-3 shadow-xl backdrop-blur-md">
+                <div className="flex h-[52px] w-[52px] items-center justify-center gap-0 rounded-full border border-white/10 bg-slate-900/40 p-[6px] shadow-xl backdrop-blur-md md:w-auto md:justify-start md:gap-2 md:py-0 md:pl-[6px] md:pr-3">
                     <div className="h-10 w-10 rounded-full bg-white/10 animate-pulse" />
                     <div className="hidden md:flex flex-col gap-1.5">
                         <div className="h-3 w-20 rounded bg-white/10 animate-pulse" />
@@ -100,7 +100,7 @@ export function ProfileChip({ profile, className, isDemo, isStaff, accountEmail
                 aria-expanded={isOpen}
                 aria-haspopup="menu"
                 className={cn(
-                    "app-profile-chip group flex h-[52px] items-center gap-2 rounded-full border pl-[6px] pr-2 shadow-xl backdrop-blur-md transition-colors duration-200 md:pr-3",
+                    "app-profile-chip group flex h-[52px] w-[52px] items-center justify-center gap-0 rounded-full border p-[6px] shadow-xl backdrop-blur-md transition-colors duration-200 md:w-auto md:justify-start md:gap-2 md:py-0 md:pl-[6px] md:pr-3",
                     isOpen && "is-open"
                 )}
             >
diff --git a/src/components/layout/header/LeftBrandChip.tsx b/src/components/layout/header/LeftBrandChip.tsx
index eb43542..1df8271 100644
--- a/src/components/layout/header/LeftBrandChip.tsx
+++ b/src/components/layout/header/LeftBrandChip.tsx
@@ -10,7 +10,7 @@ export function LeftBrandChip({ market }: { market: Market | null }) {
         <Link
             href="/app-home"
             prefetch={false}
-            className="app-brand-chip group flex h-[52px] items-center gap-2 rounded-full border pl-[6px] pr-3 shadow-xl backdrop-blur-md transition-all duration-200 md:pr-4"
+            className="app-brand-chip group flex h-[52px] w-[52px] items-center justify-center gap-0 rounded-full border p-[6px] shadow-xl backdrop-blur-md transition-all duration-200 md:w-auto md:justify-start md:gap-2 md:py-0 md:pl-[6px] md:pr-4"
         >
             <div className="app-brand-logo-ring relative h-10 w-10 shrink-0 rounded-full border p-[1px]">
                 <div className="app-brand-logo-badge h-full w-full overflow-hidden rounded-full">
diff --git a/src/components/onboarding/LocationStep.tsx b/src/components/onboarding/LocationStep.tsx
index 91d4d02..cd7b5a9 100644
--- a/src/components/onboarding/LocationStep.tsx
+++ b/src/components/onboarding/LocationStep.tsx
@@ -105,6 +105,7 @@ export function LocationStep({ onComplete, onBack }: LocationStepProps) {
                 initial={{ opacity: 0, y: 8 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.35, ease: "easeOut" }}
+                data-open={isNoticeOpen ? "true" : "false"}
                 className="onboarding-location-notice relative overflow-hidden rounded-2xl border border-amber-200/10 bg-white/[0.025] shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]"
             >
                 <motion.div
diff --git a/src/components/ui/CinematicDateInput.tsx b/src/components/ui/CinematicDateInput.tsx
index c73b073..3746dd2 100644
--- a/src/components/ui/CinematicDateInput.tsx
+++ b/src/components/ui/CinematicDateInput.tsx
@@ -151,11 +151,11 @@ export function CinematicDateInput({ value, onChange, error, role, onErrorChange
   const hasError = !!activeError;
 
   return (
-    <div className="space-y-3 w-full">
+    <div className="cinematic-date-input space-y-3 w-full">
       <div
         ref={containerRef}
         className={cn(
-          "relative flex items-stretch h-[72px] rounded-2xl overflow-hidden transition-all duration-300",
+          "cinematic-date-control relative flex items-stretch h-[72px] rounded-2xl overflow-hidden transition-[background-color,border-color,box-shadow] duration-300",
           "bg-white/5 cursor-text",
           !hasError && !focused ? "border border-white/10 hover:border-white/20 hover:bg-white/10" : "",
           !hasError && focused ? "border border-transparent bg-white/10" : "",
@@ -197,8 +197,8 @@ export function CinematicDateInput({ value, onChange, error, role, onErrorChange
                 y="1"
                 width="calc(100% - 2px)"
                 height="calc(100% - 2px)"
-                rx="15"
-                ry="15"
+                rx="34"
+                ry="34"
                 fill="none"
                 stroke="#f43f5e"
                 strokeWidth="2"
@@ -235,7 +235,7 @@ export function CinematicDateInput({ value, onChange, error, role, onErrorChange
             onBlur={() => setFocused(null)}
             placeholder={focused === "day" || day ? "" : "Tag (TT)"}
             className={cn(
-              "w-full h-full bg-transparent text-center text-base sm:text-lg md:text-xl font-medium focus:outline-none transition-all placeholder:text-slate-500",
+              "w-full h-full bg-transparent text-center text-base sm:text-lg md:text-xl font-medium focus:outline-none transition-[color,padding-top] placeholder:text-slate-500",
               day || focused === 'day' ? "pt-5 sm:pt-6 text-white" : "text-slate-500",
               hasError ? "text-rose-100" : ""
             )}
@@ -269,7 +269,7 @@ export function CinematicDateInput({ value, onChange, error, role, onErrorChange
             onBlur={() => setFocused(null)}
             placeholder={focused === "month" || month ? "" : "Monat (MM)"}
             className={cn(
-              "w-full h-full bg-transparent text-center text-base sm:text-lg md:text-xl font-medium focus:outline-none transition-all placeholder:text-slate-500",
+              "w-full h-full bg-transparent text-center text-base sm:text-lg md:text-xl font-medium focus:outline-none transition-[color,padding-top] placeholder:text-slate-500",
               month || focused === 'month' ? "pt-5 sm:pt-6 text-white" : "text-slate-500",
               hasError ? "text-rose-100" : ""
             )}
@@ -303,7 +303,7 @@ export function CinematicDateInput({ value, onChange, error, role, onErrorChange
             onBlur={() => setFocused(null)}
             placeholder={focused === "year" || year ? "" : "Jahr (JJJJ)"}
             className={cn(
-              "w-full h-full bg-transparent text-center text-base sm:text-lg md:text-xl font-medium focus:outline-none transition-all placeholder:text-slate-500",
+              "w-full h-full bg-transparent text-center text-base sm:text-lg md:text-xl font-medium focus:outline-none transition-[color,padding-top] placeholder:text-slate-500",
               year || focused === 'year' ? "pt-5 sm:pt-6 text-white" : "text-slate-500",
               hasError ? "text-rose-100" : ""
             )}