Enhance child management features in Falukant module

- Added new translations for gender, baptism status, and child details in both German and English localization files, improving user experience.
- Integrated ChildDetailsDialog component into FamilyView for displaying detailed information about children.
- Updated the showChildDetails method to utilize the new dialog for better user interaction.
- Modified button styles for improved visual feedback when setting heirs.

frontend/src/dialogues/falukant/ChildDetailsDialog.vue

@@ -0,0 +1,141 @@
+<template>
+    <DialogWidget
+        ref="dialog"
+        :title="$t('falukant.family.children.details.title')"
+        :isTitleTranslated="true"
+        :show-close="true"
+        :buttons="[{ text: 'message.close', action: 'close' }]"
+        :modal="true"
+        @close="closeDialog"
+        width="500px"
+        name="ChildDetailsDialog"
+    >
+        <div v-if="child" class="child-details">
+            <table class="details-table">
+                <tr>
+                    <td>{{ $t('falukant.family.children.name') }}</td>
+                    <td>
+                        <span v-if="child.hasName">{{ child.name }}</span>
+                        <span v-else class="no-name">{{ $t('falukant.family.children.notBaptized') }}</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td>{{ $t('falukant.family.children.age') }}</td>
+                    <td>{{ child.age }}</td>
+                </tr>
+                <tr>
+                    <td>{{ $t('falukant.family.children.gender') }}</td>
+                    <td>{{ $t(`falukant.titles.${child.gender}.noncivil`) }}</td>
+                </tr>
+                <tr>
+                    <td>{{ $t('falukant.family.children.heir') }}</td>
+                    <td>
+                        <span v-if="child.isHeir" class="heir-badge">{{ $t('falukant.family.children.isHeir') }}</span>
+                        <span v-else>{{ $t('falukant.family.children.notHeir') }}</span>
+                    </td>
+                </tr>
+            </table>
+            <div v-if="!child.hasName" class="baptism-notice">
+                <p>{{ $t('falukant.family.children.baptismNotice') }}</p>
+                <button @click="goToBaptism" class="baptism-button">
+                    {{ $t('falukant.family.children.baptism') }}
+                </button>
+            </div>
+        </div>
+    </DialogWidget>
+</template>
+
+<script>
+import DialogWidget from '@/components/DialogWidget.vue';
+
+export default {
+    name: 'ChildDetailsDialog',
+    components: {
+        DialogWidget
+    },
+    data() {
+        return {
+            child: null
+        };
+    },
+    methods: {
+        open(child) {
+            this.child = child;
+            this.$refs.dialog.open();
+        },
+        closeDialog() {
+            this.child = null;
+        },
+        goToBaptism() {
+            this.$refs.dialog.close();
+            this.$router.push({
+                name: 'ChurchView'
+            });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.child-details {
+    padding: 1rem;
+}
+
+.details-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 1rem;
+}
+
+.details-table td {
+    padding: 0.5rem;
+    border-bottom: 1px solid #ddd;
+}
+
+.details-table td:first-child {
+    font-weight: bold;
+    width: 40%;
+}
+
+.no-name {
+    color: #999;
+    font-style: italic;
+}
+
+.heir-badge {
+    display: inline-block;
+    padding: 4px 8px;
+    background-color: #4CAF50;
+    color: white;
+    border-radius: 4px;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+
+.baptism-notice {
+    margin-top: 1rem;
+    padding: 1rem;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    text-align: center;
+}
+
+.baptism-notice p {
+    margin-bottom: 0.5rem;
+}
+
+.baptism-button {
+    padding: 8px 16px;
+    background-color: #2196F3;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+}
+
+.baptism-button:hover {
+    background-color: #1976D2;
+}
+</style>
+