Enhance Home page with new sections and image presets

Added new event images and introduced HomeEntrieWithImagePreset component for consistent image-text layouts. Updated Home.vue to include new sections for club values and events (Nikolausturnier, Wettkämpfe, Kinoabende) with tab navigation. Refactored carousel and improved HomeEntrie for better mobile/desktop title handling. Renamed CarouseWithTitle.vue to CarouselItemWithTitle.vue for clarity.

GUI/src/components/HomeEntrie.vue

@@ -19,9 +19,7 @@ const props = defineProps({
 });
 
 const normalizedExtraWidth = computed(() => {
-  const width = Number.isFinite(props.extraWidthPercent)
-    ? props.extraWidthPercent
-    : 30;
+  const width = Number.isFinite(props.extraWidthPercent) ? props.extraWidthPercent : 30;
 
   return Math.min(100, Math.max(0, width));
 });
@@ -40,19 +38,25 @@ const textWidthStyle = computed(() => ({
 </script>
 
 <template>
-  <div :class="{ 'mt-5': !noMarginTop }">
+  <div :class="{ 'mt-6': !noMarginTop }">
     <template v-if="props.extraBesideText">
       <h3 v-if="!props.titleInSplitRight" class="text-h4 font-weight-bold">
         {{ props.title }}
       </h3>
       <div class="entry-content entry-content--split">
+        <h3
+          v-if="props.titleInSplitRight"
+          class="text-h4 font-weight-bold entry-content__title--mobile"
+        >
+          {{ props.title }}
+        </h3>
         <div class="entry-content__extra" :style="extraWidthStyle">
           <slot name="extra" />
         </div>
         <div class="entry-content__text" :style="textWidthStyle">
           <h3
             v-if="props.titleInSplitRight"
-            class="text-h4 font-weight-bold"
+            class="text-h4 font-weight-bold entry-content__title--desktop"
           >
             {{ props.title }}
           </h3>
@@ -96,6 +100,14 @@ const textWidthStyle = computed(() => ({
   flex: 1 1 auto;
 }
 
+/* Desktop/Mobile title visibility helpers */
+.entry-content__title--mobile {
+  display: none;
+}
+.entry-content__title--desktop {
+  display: block;
+}
+
 @media (max-width: 600px) {
   .entry-content--split {
     flex-direction: column;
@@ -108,5 +120,13 @@ const textWidthStyle = computed(() => ({
     max-width: 100% !important;
     width: 100%;
   }
+
+  .entry-content__title--mobile {
+    display: block;
+  }
+
+  .entry-content__title--desktop {
+    display: none;
+  }
 }
 </style>