From 76d700073557548469ead1ca292e63436b03e272 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 12 Aug 2026 13:15:14 +0200
Subject: [PATCH] optimized design

---
 components/HomeTermine.vue     |  6 +++---
 components/PublicNews.vue      |  6 +++---
 components/Spielplan.vue       | 10 +++++-----
 components/TermineVorschau.vue |  2 +-
 pages/index.vue                | 10 ++++++++--
 5 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/components/HomeTermine.vue b/components/HomeTermine.vue
index a6164de..826fbf8 100755
--- a/components/HomeTermine.vue
+++ b/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"
diff --git a/components/PublicNews.vue b/components/PublicNews.vue
index d903697..b2b9c82 100755
--- a/components/PublicNews.vue
+++ b/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
diff --git a/components/Spielplan.vue b/components/Spielplan.vue
index f248c8f..53c98ad 100755
--- a/components/Spielplan.vue
+++ b/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"
diff --git a/components/TermineVorschau.vue b/components/TermineVorschau.vue
index 4bb9a98..ff28ea3 100755
--- a/components/TermineVorschau.vue
+++ b/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"
diff --git a/pages/index.vue b/pages/index.vue
index e9f08e3..c5cc7e5 100755
--- a/pages/index.vue
+++ b/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>