Update AppHeader and FamilyView components for improved styling and layout

- Changed background color in AppHeader.vue for enhanced visual appeal.
- Refactored FamilyView.vue to improve layout by introducing a flexbox structure for better alignment of relationship details and 3D character models.
- Added new CSS classes to support the updated layout and ensure responsive design.

frontend/src/components/AppHeader.vue

@@ -47,7 +47,7 @@ header {
   display: flex;
   justify-content: space-between;
   padding: 10px;
-  background-color: #f8a22b;
+  background-color: #FF8C5A;
 }
 .logo, .title, .advertisement {
   text-align: center;

frontend/src/views/falukant/FamilyView.vue

@@ -16,13 +16,7 @@
             <div class="spouse-section">
                 <h3>{{ $t('falukant.family.spouse.title') }}</h3>
                 <div v-if="relationships.length > 0" class="relationship-container">
-                    <!-- 3D-Modell für Partner rechts neben Beziehung -->
+                    <div class="relationship-row">
-                    <div class="partner-character-3d">
-                        <Character3D 
-                            :gender="relationships[0].character2.gender" 
-                            :age="relationships[0].character2.age" 
-                        />
-                    </div>
                         <div class="relationship">
                             <table>
                                 <tr>
@@ -67,7 +61,14 @@
                                 </li>
                             </ul>
                         </div>
-                    <div v-if="relationships[0].relationshipType === 'wooing'">
+                        <div class="partner-character-3d">
+                            <Character3D 
+                                :gender="relationships[0].character2.gender" 
+                                :age="relationships[0].character2.age" 
+                            />
+                        </div>
+                    </div>
+                    <div v-if="relationships[0].relationshipType === 'wooing'" class="gifts-section">
                         <h3>{{ $t('falukant.family.spouse.wooing.gifts') }}</h3>
                         <table class="spouse-table">
                             <thead>
@@ -472,11 +473,21 @@ export default {
 }
 
 .relationship-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.relationship-row {
     display: flex;
     gap: 20px;
     align-items: flex-start;
 }
 
+.relationship {
+    flex: 1;
+}
+
 .partner-character-3d {
     width: 200px;
     height: 280px;
@@ -486,6 +497,11 @@ export default {
     flex-shrink: 0;
 }
 
+.gifts-section {
+    width: 100%;
+    margin-top: 10px;
+}
+
 .children-container {
     display: flex;
     gap: 20px;