optimized design

components/HomeTermine.vue

@@ -1,7 +1,7 @@
 <template>
-  <section class="py-12 sm:py-16 bg-gray-50">
+  <section class="py-8 sm:py-10 bg-gray-50">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="text-center mb-8 sm:mb-10">
+      <div class="text-center mb-6 sm:mb-8">
         <h2 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
           Kommende Termine
         </h2>
@@ -12,7 +12,7 @@
         <TermineVorschau />
       </div>
 
-      <div class="text-center mt-8">
+      <div class="text-center mt-5 sm:mt-6">
         <NuxtLink
           to="/termine"
           class="inline-flex items-center px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"

components/PublicNews.vue

@@ -1,12 +1,12 @@
 <template>
   <section
     class="bg-white"
-    :class="news.length === 0 && !isLoading ? 'py-10 sm:py-12' : 'py-16 sm:py-20 min-h-[32rem]'"
+    :class="news.length === 0 && !isLoading ? 'py-8 sm:py-10' : 'py-10 sm:py-12'"
   >
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div
         class="text-center"
-        :class="news.length === 0 && !isLoading ? 'mb-8 sm:mb-10' : 'mb-16'"
+        :class="news.length === 0 && !isLoading ? 'mb-6 sm:mb-8' : 'mb-8 sm:mb-10'"
       >
         <h2 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
           Aktuelles
@@ -71,7 +71,7 @@
 
       <div
         v-else
-        class="max-w-xl mx-auto text-center bg-gray-50 border border-gray-200 rounded-xl p-6"
+        class="max-w-xl mx-auto text-center bg-gray-50 border border-gray-200 rounded-xl p-5"
       >
         <p class="text-gray-700 font-semibold mb-2">
           Aktuell keine News

components/Spielplan.vue

@@ -1,7 +1,7 @@
 <template>
-  <section class="py-12 sm:py-16 bg-white">
+  <section class="py-8 sm:py-10 bg-white">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="text-center mb-8 sm:mb-10">
+      <div class="text-center mb-6 sm:mb-8">
         <h2 class="text-3xl font-bold text-gray-900 mb-4">
           Nächste Spiele
         </h2>
@@ -10,7 +10,7 @@
       <!-- Loading State -->
       <div
         v-if="isLoading"
-        class="text-center py-6"
+        class="text-center py-4"
       >
         <svg
           class="w-8 h-8 text-gray-400 mx-auto mb-4 animate-spin"
@@ -33,7 +33,7 @@
       <!-- Error State -->
       <div
         v-else-if="error"
-        class="text-center py-6"
+        class="text-center py-4"
       >
         <svg
           class="w-12 h-12 text-gray-400 mx-auto mb-4"
@@ -62,7 +62,7 @@
       <!-- Empty State -->
       <div
         v-else-if="!upcomingGames || upcomingGames.length === 0"
-        class="text-center py-6"
+        class="text-center py-4"
       >
         <svg
           class="w-12 h-12 text-gray-400 mx-auto mb-4"

components/TermineVorschau.vue

@@ -45,7 +45,7 @@
 
     <div
       v-else
-      class="text-center py-6 bg-gray-50 rounded-lg"
+      class="text-center py-4 bg-gray-50 rounded-lg"
     >
       <Calendar
         :size="32"

pages/index.vue

@@ -216,7 +216,7 @@
       class="relative z-30 px-4 sm:px-6 lg:px-8"
       :class="hasHeroSection ? '-mt-44 sm:-mt-48 lg:-mt-52' : 'mt-8'"
     >
-      <div class="featured-widget-shell max-w-6xl mx-auto rounded-2xl border border-gray-200 bg-white/25 backdrop-blur-md overflow-hidden min-h-[22rem] sm:min-h-[25rem]">
+      <div class="featured-widget-shell max-w-6xl mx-auto rounded-2xl border border-gray-200 bg-white/25 backdrop-blur-md overflow-hidden">
         <HomeSpielplanTeamWidget
           v-if="featuredWidgetSection.id === 'spielplan_team'"
           :season="featuredWidgetSection.config?.season"
@@ -627,9 +627,15 @@ async function saveEditor() {
   background-color: transparent !important;
 }
 
+.featured-widget-shell :deep(.py-8),
+.featured-widget-shell :deep(.py-10),
+.featured-widget-shell :deep(.py-12),
 .featured-widget-shell :deep(.py-16),
+.featured-widget-shell :deep(.sm\:py-10),
+.featured-widget-shell :deep(.sm\:py-12),
+.featured-widget-shell :deep(.sm\:py-16),
 .featured-widget-shell :deep(.sm\:py-20) {
   padding-top: 1.5rem !important;
-  padding-bottom: 2rem !important;
+  padding-bottom: 1.5rem !important;
 }
 </style>