From 09af7af2283f06005155c708d039f8dfe5096e0f Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 22 Jan 2026 12:56:53 +0100
Subject: [PATCH] Update color scheme in AppHeader and AppNavigation components
 for visual consistency

- Changed background color in AppHeader.vue and AppNavigation.vue to a new shade for improved aesthetics.
- Adjusted hover states and submenu background colors in AppNavigation.vue to match the updated theme.
- Refactored FamilyView.vue to enhance layout with additional padding for better alignment of elements.
---
 frontend/src/components/AppHeader.vue      |  2 +-
 frontend/src/components/AppNavigation.vue  | 12 ++++++------
 frontend/src/views/falukant/FamilyView.vue |  3 ++-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 81bad62..45457b0 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -47,7 +47,7 @@ header {
   display: flex;
   justify-content: space-between;
   padding: 10px;
-  background-color: #FF8C5A;
+  background-color: #f8a22b;
 }
 .logo, .title, .advertisement {
   text-align: center;
diff --git a/frontend/src/components/AppNavigation.vue b/frontend/src/components/AppNavigation.vue
index 9950b0f..3084034 100644
--- a/frontend/src/components/AppNavigation.vue
+++ b/frontend/src/components/AppNavigation.vue
@@ -295,7 +295,7 @@ nav,
 nav > ul {
   display: flex;
   justify-content: space-between;
-  background-color: #FF8C5A;
+  background-color: #f8a22b;
   color: #000;
   padding: 0;
   margin: 0;
@@ -317,7 +317,7 @@ nav > ul > li {
 }
 
 nav > ul > li:hover {
-  background-color: #FF8C5A;
+  background-color: #f8a22b;
   white-space: nowrap;
 }
 
@@ -364,7 +364,7 @@ a {
 .submenu1 {
   position: absolute;
   border: 1px solid #5D4037;
-  background-color: #FF8C5A;
+  background-color: #f8a22b;
   left: 0;
   top: 2.5em;
   max-height: 0;
@@ -394,7 +394,7 @@ a {
 
 .submenu1 > li:hover {
   color: #000;
-  background-color: #FF8C5A;
+  background-color: #f8a22b;
 }
 
 .menu-icon,
@@ -419,7 +419,7 @@ a {
 
 .submenu2 {
   position: absolute;
-  background-color: #FF8C5A;
+  background-color: #f8a22b;
   left: 100%;
   top: 0;
   border: 1px solid #5D4037;
@@ -449,7 +449,7 @@ a {
 
 .submenu2 > li:hover {
   color: #000;
-  background-color: #FF8C5A;
+  background-color: #f8a22b;
 }
 
 .subsubmenu {
diff --git a/frontend/src/views/falukant/FamilyView.vue b/frontend/src/views/falukant/FamilyView.vue
index f5bbc5b..ebf0d8a 100644
--- a/frontend/src/views/falukant/FamilyView.vue
+++ b/frontend/src/views/falukant/FamilyView.vue
@@ -448,6 +448,7 @@ export default {
     display: flex;
     gap: 20px;
     align-items: flex-start;
+    padding-top: 24px;
 }
 
 .self-character-3d {
@@ -485,7 +486,7 @@ export default {
 }
 
 .relationship {
-    flex: 1;
+    flex: 0 1 auto;
 }
 
 .partner-character-3d {