diff --git a/frontend/src/styles/hooks/useHpGlobalStyles.js b/frontend/src/styles/hooks/useHpGlobalStyles.js
index 90fa927..fe6e3bf 100644
--- a/frontend/src/styles/hooks/useHpGlobalStyles.js
+++ b/frontend/src/styles/hooks/useHpGlobalStyles.js
@@ -81,6 +81,14 @@ export function useHpGlobalStyles() {
       }
       #root { background: transparent; }
       * { -webkit-tap-highlight-color: transparent; }
+      button, input, select { font-family: inherit; }
+      button { transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease, background 140ms ease; }
+      button:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-1px); }
+      button:not(:disabled):active { transform: translateY(0); filter: brightness(0.98); }
+      button:disabled { cursor: not-allowed; opacity: 0.55; }
+      input:focus, select:focus { border-color: var(--hp-textGold) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-textGold) 16%, transparent); }
+      .hp-row { transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
+      .hp-row:hover { box-shadow: inset 0 0 0 1px rgba(233,216,166,0.12); }
     `;
     document.head.appendChild(style);
   }, []);
@@ -89,4 +97,4 @@ export function useHpGlobalStyles() {
   useEffect(() => {
     applyTheme("default");
   }, []);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/styles/styles.js b/frontend/src/styles/styles.js
index c8c7212..956cd65 100644
--- a/frontend/src/styles/styles.js
+++ b/frontend/src/styles/styles.js
@@ -10,8 +10,8 @@ export const styles = {
 
   shell: {
     fontFamily: '"IM Fell English", system-ui',
-    padding: 16,
-    maxWidth: 680,
+    padding: "22px 16px 42px",
+    maxWidth: 760,
     margin: "0 auto",
   },
 
@@ -22,34 +22,38 @@ export const styles = {
     justifyContent: "space-between",
     alignItems: "center",
     gap: 10,
-    padding: 12,
-    borderRadius: 16,
-    background: stylesTokens.panelBg,
-    border: `1px solid ${stylesTokens.panelBorder}`,
-    boxShadow: "0 12px 30px rgba(0,0,0,0.45)",
-    backdropFilter: "blur(6px)",
+    padding: "14px 16px",
+    borderRadius: 18,
+    background: `linear-gradient(135deg, rgba(31, 28, 32, 0.90), ${stylesTokens.panelBg})`,
+    border: `1px solid ${stylesTokens.headerBorder}`,
+    boxShadow: "0 18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08)",
+    backdropFilter: "blur(14px) saturate(1.12)",
+    WebkitBackdropFilter: "blur(14px) saturate(1.12)",
   },
 
   card: {
-    borderRadius: 18,
+    borderRadius: 20,
     overflow: "hidden",
     border: `1px solid ${stylesTokens.panelBorder}`,
-    background: "rgba(18, 18, 20, 0.50)",
-    boxShadow: "0 18px 40px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.06)",
+    background: `linear-gradient(145deg, rgba(25, 24, 28, 0.88), ${stylesTokens.panelBg})`,
+    boxShadow: "0 20px 48px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.07)",
+    backdropFilter: "blur(14px) saturate(1.08)",
+    WebkitBackdropFilter: "blur(14px) saturate(1.08)",
   },
 
   cardBody: {
-    padding: 12,
+    padding: "14px 16px",
     display: "flex",
     gap: 10,
     alignItems: "center",
   },
 
   sectionHeader: {
-    padding: "11px 14px",
+    padding: "13px 16px",
     fontWeight: 1000,
     fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
-    letterSpacing: 1.0,
+    letterSpacing: 1.5,
+    fontSize: 14,
     color: stylesTokens.textGold,
 
     // WICHTIG: Header-Farben aus Theme-Tokens, nicht hart codiert
@@ -57,16 +61,16 @@ export const styles = {
     borderBottom: `1px solid ${stylesTokens.headerBorder}`,
 
     textTransform: "uppercase",
-    textShadow: "0 1px 0 rgba(0,0,0,0.6)",
+    textShadow: "0 1px 0 rgba(0,0,0,0.72)",
   },
 
   row: {
     display: "grid",
     gridTemplateColumns: "1fr 54px 68px",
     gap: 10,
-    padding: "12px 14px",
+    padding: "13px 16px",
     alignItems: "center",
-    borderBottom: "1px solid rgba(233,216,166,0.08)",
+    borderBottom: "1px solid rgba(233,216,166,0.10)",
     borderLeft: "4px solid rgba(0,0,0,0)",
   },
 
@@ -100,9 +104,9 @@ export const styles = {
   tagBtn: {
     padding: "8px 0",
     fontWeight: 1000,
-    borderRadius: 12,
-    border: `1px solid rgba(233,216,166,0.18)`,
-    background: "rgba(255,255,255,0.06)",
+    borderRadius: 13,
+    border: `1px solid rgba(233,216,166,0.22)`,
+    background: "rgba(255,255,255,0.055)",
     color: stylesTokens.textGold,
     cursor: "pointer",
     boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
@@ -110,9 +114,9 @@ export const styles = {
 
   helpBtn: {
     padding: "10px 12px",
-    borderRadius: 12,
-    border: `1px solid rgba(233,216,166,0.18)`,
-    background: "rgba(255,255,255,0.06)",
+    borderRadius: 13,
+    border: `1px solid rgba(233,216,166,0.22)`,
+    background: "rgba(255,255,255,0.055)",
     color: stylesTokens.textGold,
     fontWeight: 1000,
     cursor: "pointer",
@@ -122,31 +126,31 @@ export const styles = {
 
   input: {
     width: "100%",
-    padding: "10px 12px",
-    borderRadius: 14,
-    border: `1px solid rgba(233,216,166,0.18)`,
-    background: "rgba(10,10,12,0.55)",
+    padding: "11px 12px",
+    borderRadius: 13,
+    border: `1px solid rgba(233,216,166,0.22)`,
+    background: "rgba(7,7,10,0.64)",
     color: stylesTokens.textMain,
     outline: "none",
     fontSize: 15,
   },
 
   primaryBtn: {
-    padding: "10px 12px",
-    borderRadius: 12,
-    border: `1px solid rgba(233,216,166,0.28)`,
-    background: "linear-gradient(180deg, rgba(233,216,166,0.24), rgba(233,216,166,0.10))",
+    padding: "11px 15px",
+    borderRadius: 13,
+    border: `1px solid rgba(233,216,166,0.34)`,
+    background: "linear-gradient(135deg, rgba(233,216,166,0.28), rgba(120,88,35,0.20))",
     color: stylesTokens.textGold,
     fontWeight: 1000,
     cursor: "pointer",
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)",
+    boxShadow: "0 8px 20px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.11)",
   },
 
   secondaryBtn: {
     padding: "10px 12px",
-    borderRadius: 12,
+    borderRadius: 13,
     border: `1px solid rgba(233,216,166,0.18)`,
-    background: "rgba(255,255,255,0.05)",
+    background: "rgba(255,255,255,0.055)",
     color: stylesTokens.textMain,
     fontWeight: 900,
     cursor: "pointer",
@@ -158,12 +162,13 @@ export const styles = {
     position: "relative",
     zIndex: 1,
     marginTop: 14,
-    padding: 12,
-    borderRadius: 16,
-    border: `1px solid rgba(233,216,166,0.14)`,
-    background: "rgba(18, 18, 20, 0.40)",
-    boxShadow: "0 12px 30px rgba(0,0,0,0.45)",
-    backdropFilter: "blur(6px)",
+    padding: 14,
+    borderRadius: 20,
+    border: `1px solid ${stylesTokens.panelBorder}`,
+    background: `linear-gradient(145deg, rgba(25, 24, 28, 0.86), ${stylesTokens.panelBg})`,
+    boxShadow: "0 18px 42px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06)",
+    backdropFilter: "blur(14px) saturate(1.08)",
+    WebkitBackdropFilter: "blur(14px) saturate(1.08)",
   },
   adminTop: {
     display: "flex",
@@ -181,7 +186,7 @@ export const styles = {
     gap: 8,
     padding: 10,
     borderRadius: 12,
-    background: "rgba(255,255,255,0.06)",
+    background: "rgba(255,255,255,0.055)",
     border: `1px solid rgba(233,216,166,0.10)`,
   },
 
@@ -203,11 +208,11 @@ export const styles = {
 
   modalCard: {
     width: "min(560px, 100%)",
-    borderRadius: 18,
+    borderRadius: 20,
     border: `1px solid rgba(233,216,166,0.18)`,
-    background: "rgba(12,12,14,0.96)",
-    boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
-    padding: 14,
+    background: "linear-gradient(145deg, rgba(27,25,30,0.98), rgba(11,11,14,0.98))",
+    boxShadow: "0 24px 70px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.07)",
+    padding: 16,
     maxHeight: "calc(100vh - 32px)",
     overflow: "auto",
   },
@@ -305,13 +310,14 @@ export const styles = {
     width: "100%",
     maxWidth: 420,
     padding: 26,
-    borderRadius: 22,
+    borderRadius: 24,
     position: "relative",
     zIndex: 2,
-    border: `1px solid rgba(233,216,166,0.18)`,
-    background: "rgba(18, 18, 20, 0.55)",
-    boxShadow: "0 18px 60px rgba(0,0,0,0.70)",
-    backdropFilter: "blur(8px)",
+    border: `1px solid ${stylesTokens.headerBorder}`,
+    background: `linear-gradient(145deg, rgba(29, 27, 31, 0.92), ${stylesTokens.panelBg})`,
+    boxShadow: "0 24px 80px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.08)",
+    backdropFilter: "blur(16px) saturate(1.12)",
+    WebkitBackdropFilter: "blur(16px) saturate(1.12)",
     animation: "popIn 240ms ease-out",
     color: stylesTokens.textMain,
   },
@@ -338,24 +344,24 @@ export const styles = {
   },
   loginInput: {
     width: "100%",
-    padding: 10,
-    borderRadius: 12,
-    border: `1px solid rgba(233,216,166,0.18)`,
-    background: "rgba(10,10,12,0.60)",
+    padding: "11px 12px",
+    borderRadius: 13,
+    border: `1px solid rgba(233,216,166,0.22)`,
+    background: "rgba(7,7,10,0.64)",
     color: stylesTokens.textMain,
     outline: "none",
     fontSize: 16,
   },
   loginBtn: {
-    padding: "12px 14px",
+    padding: "12px 15px",
     borderRadius: 14,
-    border: `1px solid rgba(233,216,166,0.28)`,
-    background: "linear-gradient(180deg, rgba(233,216,166,0.24), rgba(233,216,166,0.10))",
+    border: `1px solid rgba(233,216,166,0.34)`,
+    background: "linear-gradient(135deg, rgba(233,216,166,0.28), rgba(120,88,35,0.20))",
     color: stylesTokens.textGold,
     fontWeight: 1000,
     fontSize: 16,
     cursor: "pointer",
-    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)",
+    boxShadow: "0 8px 20px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.11)",
   },
   loginHint: {
     marginTop: 18,
@@ -431,7 +437,10 @@ export const styles = {
     backgroundSize: "cover",
     backgroundPosition: "center",
     backgroundRepeat: "no-repeat",
-    filter: "saturate(0.9) contrast(1.05) brightness(0.55)",
+    filter: "saturate(0.72) contrast(1.12) brightness(0.42) blur(1.2px)",
+    transform: "scale(1.015)",
+    backgroundColor: "rgba(8, 7, 12, 0.34)",
+    backgroundBlendMode: "multiply",
   },
 
   chipGrid: {
@@ -443,9 +452,9 @@ export const styles = {
 
   chipBtn: {
     padding: "10px 14px",
-    borderRadius: 12,
+    borderRadius: 13,
     border: "1px solid rgba(233,216,166,0.18)",
-    background: "rgba(255,255,255,0.06)",
+    background: "rgba(255,255,255,0.055)",
     color: stylesTokens.textGold,
     fontWeight: 1000,
     cursor: "pointer",
@@ -457,7 +466,7 @@ export const styles = {
     alignItems: "center",
     gap: 8,
     padding: "10px 12px",
-    borderRadius: 12,
+    borderRadius: 14,
     border: `1px solid rgba(233,216,166,0.18)`,
     background: "rgba(255,255,255,0.05)",
     color: stylesTokens.textMain,
@@ -474,11 +483,11 @@ export const styles = {
     minWidth: 220,
     borderRadius: 14,
     border: `1px solid rgba(233,216,166,0.18)`,
-    background: "linear-gradient(180deg, rgba(20,20,24,0.96), rgba(12,12,14,0.92))",
+    background: "linear-gradient(145deg, rgba(29,27,33,0.98), rgba(10,10,13,0.96))",
     boxShadow: "0 18px 55px rgba(0,0,0,0.70)",
     overflow: "hidden",
     zIndex: 99999,
-    backdropFilter: "blur(8px)",
+    backdropFilter: "blur(14px)",
   },
 
   userDropdownItem: {
@@ -496,4 +505,4 @@ export const styles = {
     height: 1,
     background: "rgba(233,216,166,0.12)",
   },
-};
\ No newline at end of file
+};