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

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

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 {

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 {