Add 2 files

index.html

@@ -6,22 +6,52 @@
     <title>Pferdeausbildung - Individuelles Training für Jungpferde & Reiter</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6C63FF',
+                        secondary: '#FF6584',
+                        accent: '#42E2B8',
+                        dark: '#2F2E41',
+                        light: '#F8F9FA'
+                    },
+                    fontFamily: {
+                        sans: ['Poppins', 'sans-serif'],
+                    },
+                }
+            }
+        }
+    </script>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        
         .hero-gradient {
-            background: linear-gradient(135deg, rgba(139, 168, 129, 0.9) 0%, rgba(87, 117, 86, 0.9) 100%);
+            background: linear-gradient(135deg, #6C63FF 0%, #42E2B8 100%);
         }
+        
         .card-hover:hover {
-            transform: translateY(-5px);
+            transform: translateY(-10px);
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
+        
         .transition-all {
             transition: all 0.3s ease;
         }
+        
         .before-after-container {
             position: relative;
-            height: 300px;
+            height: 400px;
             overflow: hidden;
+            border-radius: 20px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
         }
+        
         .before-after-slider {
             position: absolute;
             width: 100%;
@@ -29,14 +59,17 @@
             background-size: cover;
             background-position: center;
         }
+        
         .before-image {
             width: 50%;
             background-image: url('https://images.unsplash.com/photo-1553284965-83fd3e82ab5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80');
         }
+        
         .after-image {
             width: 100%;
             background-image: url('https://images.unsplash.com/photo-1553284965-5dd8352ff1bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
         }
+        
         .slider-handle {
             position: absolute;
             left: 50%;
@@ -47,57 +80,204 @@
             cursor: ew-resize;
             transform: translateX(-50%);
         }
+        
         .slider-handle::before {
             content: "";
             position: absolute;
-            width: 30px;
-            height: 30px;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
-            background-color: white;
+            background: linear-gradient(135deg, #6C63FF 0%, #FF6584 100%);
             left: 50%;
             top: 50%;
             transform: translate(-50%, -50%);
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            content: "↔";
+            font-size: 18px;
         }
+        
         .gallery-item {
             transition: all 0.3s ease;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
         }
+        
         .gallery-item:hover {
-            transform: scale(1.03);
+            transform: scale(1.05);
             z-index: 10;
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        
+        .service-card {
+            background: white;
+            border-radius: 20px;
+            overflow: hidden;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .service-card::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 8px;
+            background: linear-gradient(90deg, #6C63FF, #FF6584, #42E2B8);
+        }
+        
+        .icon-container {
+            width: 70px;
+            height: 70px;
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 20px;
+            background: linear-gradient(135deg, #6C63FF 0%, #42E2B8 100%);
+            color: white;
+            box-shadow: 0 10px 15px -3px rgba(108, 99, 255, 0.3);
+        }
+        
+        .shape-1 {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            border-radius: 30px;
+            background: rgba(108, 99, 255, 0.1);
+            transform: rotate(45deg);
+            z-index: -1;
+        }
+        
+        .shape-2 {
+            position: absolute;
+            width: 150px;
+            height: 150px;
+            border-radius: 50%;
+            background: rgba(255, 101, 132, 0.1);
+            z-index: -1;
+        }
+        
+        .contact-card {
+            background: white;
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .contact-card::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 8px;
+            background: linear-gradient(90deg, #6C63FF, #FF6584, #42E2B8);
+        }
+        
+        .footer-wave {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            overflow: hidden;
+            line-height: 0;
+        }
+        
+        .footer-wave svg {
+            position: relative;
+            display: block;
+            width: calc(100% + 1.3px);
+            height: 100px;
+        }
+        
+        .footer-wave .shape-fill {
+            fill: #FFFFFF;
+        }
+        
+        .nav-link {
+            position: relative;
+        }
+        
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 3px;
+            bottom: -5px;
+            left: 0;
+            background: linear-gradient(90deg, #6C63FF, #FF6584);
+            transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        
+        .btn-primary {
+            background: linear-gradient(135deg, #6C63FF 0%, #42E2B8 100%);
+            box-shadow: 0 10px 15px -3px rgba(108, 99, 255, 0.3);
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 20px -5px rgba(108, 99, 255, 0.4);
+        }
+        
+        .btn-secondary {
+            background: white;
+            color: #6C63FF;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+        
+        .btn-secondary:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.2);
         }
     </style>
 </head>
-<body class="font-sans bg-gray-50">
+<body class="bg-light text-dark">
     <!-- Header/Navigation -->
     <header class="bg-white shadow-sm sticky top-0 z-50">
         <div class="container mx-auto px-4 py-4 flex justify-between items-center">
             <div class="flex items-center">
-                <i class="fas fa-horse-head text-2xl text-green-700 mr-2"></i>
-                <span class="text-xl font-semibold text-green-800">Pferdeausbildung</span>
+                <div class="icon-container mr-3">
+                    <i class="fas fa-horse-head text-2xl"></i>
+                </div>
+                <span class="text-2xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Pferdeausbildung</span>
             </div>
             <nav class="hidden md:flex space-x-8">
-                <a href="#services" class="text-green-700 hover:text-green-900 transition-all">Leistungen</a>
-                <a href="#philosophy" class="text-green-700 hover:text-green-900 transition-all">Philosophie</a>
-                <a href="#gallery" class="text-green-700 hover:text-green-900 transition-all">Galerie</a>
-                <a href="#contact" class="text-green-700 hover:text-green-900 transition-all">Kontakt</a>
+                <a href="#services" class="nav-link text-dark font-medium transition-all">Leistungen</a>
+                <a href="#philosophy" class="nav-link text-dark font-medium transition-all">Philosophie</a>
+                <a href="#gallery" class="nav-link text-dark font-medium transition-all">Galerie</a>
+                <a href="#contact" class="nav-link text-dark font-medium transition-all">Kontakt</a>
             </nav>
-            <button class="md:hidden text-green-700">
+            <button class="md:hidden text-primary">
                 <i class="fas fa-bars text-2xl"></i>
             </button>
         </div>
     </header>
 
     <!-- Hero Section -->
-    <section class="hero-gradient text-white py-20 md:py-32">
-        <div class="container mx-auto px-4 text-center">
-            <h1 class="text-4xl md:text-5xl font-bold mb-6">Individuelle Pferdeausbildung</h1>
+    <section class="hero-gradient text-white py-20 md:py-32 relative overflow-hidden">
+        <div class="shape-1 -top-20 -left-20"></div>
+        <div class="shape-2 -bottom-10 -right-10"></div>
+        <div class="container mx-auto px-4 text-center relative z-10">
+            <h1 class="text-5xl md:text-6xl font-bold mb-6">Individuelle Pferdeausbildung</h1>
             <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Systematisch, strukturiert und pferdegerecht – für ein ausbalanciertes Pferd mit Freude an der Arbeit</p>
             <div class="flex flex-col sm:flex-row justify-center gap-4">
-                <a href="#contact" class="bg-white text-green-800 font-semibold px-8 py-3 rounded-full hover:bg-gray-100 transition-all shadow-lg">
+                <a href="#contact" class="btn-primary font-semibold px-8 py-4 rounded-full transition-all">
                     Jetzt unverbindlich anfragen
                 </a>
-                <a href="#services" class="border-2 border-white text-white font-semibold px-8 py-3 rounded-full hover:bg-white hover:text-green-800 transition-all">
+                <a href="#services" class="btn-secondary font-semibold px-8 py-4 rounded-full transition-all">
                     Mehr erfahren
                 </a>
             </div>
@@ -105,67 +285,71 @@
     </section>
 
     <!-- Services Section -->
-    <section id="services" class="py-16 bg-white">
+    <section id="services" class="py-20 bg-white relative overflow-hidden">
+        <div class="shape-1 -top-20 right-0 opacity-30"></div>
         <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center text-green-800 mb-12">Meine Leistungen</h2>
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Meine Leistungen</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Individuell abgestimmte Trainingskonzepte für jedes Pferd und jeden Reiter</p>
+            </div>
             
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <!-- Service Card 1 -->
-                <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-all">
-                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
-                        <i class="fas fa-horse text-2xl text-green-700"></i>
+                <div class="service-card p-8 card-hover transition-all">
+                    <div class="icon-container">
+                        <i class="fas fa-horse text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-semibold text-green-800 mb-3">Jungpferdeausbildung</h3>
+                    <h3 class="text-2xl font-semibold text-dark mb-3">Jungpferdeausbildung</h3>
                     <p class="text-gray-600 mb-4">Systematische und pferdegerechte Grundausbildung für junge Pferde, die eine solide Basis für ihre weitere Entwicklung legt.</p>
                     <p class="text-gray-600">Strukturiertes Training mit Geduld und klaren Prozessen für ein vertrauensvolles, sicheres Pferd.</p>
                 </div>
                 
                 <!-- Service Card 2 -->
-                <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-all">
-                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
-                        <i class="fas fa-user-tie text-2xl text-green-700"></i>
+                <div class="service-card p-8 card-hover transition-all">
+                    <div class="icon-container">
+                        <i class="fas fa-user-tie text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-semibold text-green-800 mb-3">Beritt & Reitunterricht</h3>
+                    <h3 class="text-2xl font-semibold text-dark mb-3">Beritt & Reitunterricht</h3>
                     <p class="text-gray-600 mb-4">Individueller Beritt für Ihr Pferd sowie stationärer und mobiler Reitunterricht für eine harmonische Partnerschaft.</p>
                     <p class="text-gray-600">Anpassung an die Bedürfnisse von Pferd und Reiter für optimale Fortschritte.</p>
                 </div>
                 
                 <!-- Service Card 3 -->
-                <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-all">
-                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
-                        <i class="fas fa-hands-helping text-2xl text-green-700"></i>
+                <div class="service-card p-8 card-hover transition-all">
+                    <div class="icon-container">
+                        <i class="fas fa-hands-helping text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-semibold text-green-800 mb-3">Handarbeit & Doppellonge</h3>
+                    <h3 class="text-2xl font-semibold text-dark mb-3">Handarbeit & Doppellonge</h3>
                     <p class="text-gray-600 mb-4">Förderung von Balance und Selbsthaltung durch gezielte Bodenarbeit ohne Reitergewicht.</p>
                     <p class="text-gray-600">Ideal für Jungpferde und zur Korrektur von älteren Pferden.</p>
                 </div>
                 
                 <!-- Service Card 4 -->
-                <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-all">
-                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
-                        <i class="fas fa-chair text-2xl text-green-700"></i>
+                <div class="service-card p-8 card-hover transition-all">
+                    <div class="icon-container">
+                        <i class="fas fa-chair text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-semibold text-green-800 mb-3">Sitzschulung</h3>
+                    <h3 class="text-2xl font-semibold text-dark mb-3">Sitzschulung</h3>
                     <p class="text-gray-600 mb-4">Feine Hilfengebung und korrekte Einwirkung durch optimierten Reitersitz.</p>
                     <p class="text-gray-600">Individuelle Korrekturen für eine bessere Kommunikation mit dem Pferd.</p>
                 </div>
                 
                 <!-- Service Card 5 -->
-                <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-all">
-                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
-                        <i class="fas fa-tree text-2xl text-green-700"></i>
+                <div class="service-card p-8 card-hover transition-all">
+                    <div class="icon-container">
+                        <i class="fas fa-tree text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-semibold text-green-800 mb-3">Geländetraining</h3>
+                    <h3 class="text-2xl font-semibold text-dark mb-3">Geländetraining</h3>
                     <p class="text-gray-600 mb-4">Steigerung von Trittsicherheit, Mut und Alltagsroutine durch gezieltes Geländetraining.</p>
                     <p class="text-gray-600">Vorbereitung auf Ausritte und Turniere in natürlicher Umgebung.</p>
                 </div>
                 
                 <!-- Service Card 6 -->
-                <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-all">
-                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
-                        <i class="fas fa-star text-2xl text-green-700"></i>
+                <div class="service-card p-8 card-hover transition-all">
+                    <div class="icon-container">
+                        <i class="fas fa-star text-2xl"></i>
                     </div>
-                    <h3 class="text-xl font-semibold text-green-800 mb-3">Individuelle Pakete</h3>
+                    <h3 class="text-2xl font-semibold text-dark mb-3">Individuelle Pakete</h3>
                     <p class="text-gray-600 mb-4">Kombination verschiedener Leistungen für maßgeschneidertes Training.</p>
                     <p class="text-gray-600">Gerne erstelle ich ein auf Ihr Pferd abgestimmtes Konzept.</p>
                 </div>
@@ -174,40 +358,53 @@
     </section>
 
     <!-- Philosophy Section -->
-    <section id="philosophy" class="py-16 bg-green-50">
+    <section id="philosophy" class="py-20 bg-gradient-to-br from-primary/10 to-accent/10 relative overflow-hidden">
+        <div class="shape-2 top-20 left-0 opacity-20"></div>
         <div class="container mx-auto px-4">
             <div class="flex flex-col lg:flex-row items-center gap-12">
-                <div class="lg:w-1/2">
+                <div class="lg:w-1/2 relative">
                     <img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                          alt="Pferd und Trainer" 
-                         class="rounded-xl shadow-lg w-full h-auto">
+                         class="rounded-3xl shadow-2xl w-full h-auto">
+                    <div class="absolute -bottom-6 -right-6 bg-secondary text-white px-6 py-3 rounded-full shadow-lg">
+                        <i class="fas fa-heart mr-2"></i> Seit 2010 für Pferde im Einsatz
+                    </div>
                 </div>
                 <div class="lg:w-1/2">
-                    <h2 class="text-3xl font-bold text-green-800 mb-6">Meine Philosophie</h2>
-                    <p class="text-gray-700 mb-4 text-lg">
+                    <h2 class="text-4xl font-bold mb-6 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Meine Philosophie</h2>
+                    <p class="text-lg text-gray-700 mb-6">
                         Mein ganzheitlicher Trainingsansatz zielt darauf ab, ein tragfähiges, ausbalanciertes Pferd zu entwickeln, das Freude an der Arbeit hat.
                     </p>
-                    <p class="text-gray-700 mb-6">
+                    <p class="text-gray-700 mb-8">
                         Besonders bei Jungpferden lege ich Wert auf feine Kommunikation, klare Strukturen und geduldiges Vorgehen. Jeder Lernschritt wird sorgfältig aufgebaut, um das Pferd nicht zu überfordern und Vertrauen aufzubauen.
                     </p>
                     <div class="space-y-4">
-                        <div class="flex items-start">
-                            <div class="bg-green-100 p-2 rounded-full mr-4">
-                                <i class="fas fa-check text-green-700"></i>
+                        <div class="flex items-start bg-white p-4 rounded-xl shadow-sm">
+                            <div class="bg-primary text-white p-2 rounded-full mr-4">
+                                <i class="fas fa-check"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-semibold text-lg text-dark mb-1">Individuell</h4>
+                                <p class="text-gray-600">Jedes Pferd erhält ein auf seine Bedürfnisse abgestimmtes Training.</p>
                             </div>
-                            <p class="text-gray-700"><strong>Individuell</strong> - Jedes Pferd erhält ein auf seine Bedürfnisse abgestimmtes Training.</p>
                         </div>
-                        <div class="flex items-start">
-                            <div class="bg-green-100 p-2 rounded-full mr-4">
-                                <i class="fas fa-check text-green-700"></i>
+                        <div class="flex items-start bg-white p-4 rounded-xl shadow-sm">
+                            <div class="bg-accent text-white p-2 rounded-full mr-4">
+                                <i class="fas fa-check"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-semibold text-lg text-dark mb-1">Pferdegerecht</h4>
+                                <p class="text-gray-600">Respektvolle Ausbildung ohne Druck oder Gewalt.</p>
                             </div>
-                            <p class="text-gray-700"><strong>Pferdegerecht</strong> - Respektvolle Ausbildung ohne Druck oder Gewalt.</p>
                         </div>
-                        <div class="flex items-start">
-                            <div class="bg-green-100 p-2 rounded-full mr-4">
-                                <i class="fas fa-check text-green-700"></i>
+                        <div class="flex items-start bg-white p-4 rounded-xl shadow-sm">
+                            <div class="bg-secondary text-white p-2 rounded-full mr-4">
+                                <i class="fas fa-check"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-semibold text-lg text-dark mb-1">Nachhaltig</h4>
+                                <p class="text-gray-600">Solide Grundlagen für eine langfristige Entwicklung.</p>
                             </div>
-                            <p class="text-gray-700"><strong>Nachhaltig</strong> - Solide Grundlagen für eine langfristige Entwicklung.</p>
                         </div>
                     </div>
                 </div>
@@ -216,162 +413,213 @@
     </section>
 
     <!-- Before/After Section -->
-    <section class="py-16 bg-white">
+    <section class="py-20 bg-white">
         <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center text-green-800 mb-12">Trainingserfolge</h2>
-            <div class="before-after-container rounded-xl shadow-xl">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Trainingserfolge</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Sehen Sie selbst den Unterschied vor und nach dem Training</p>
+            </div>
+            <div class="before-after-container">
                 <div class="before-after-slider before-image"></div>
                 <div class="before-after-slider after-image"></div>
                 <div class="slider-handle"></div>
             </div>
-            <div class="mt-8 text-center">
-                <p class="text-gray-600 italic">"Aus einem unsicheren Jungpferd wird ein selbstbewusster Partner"</p>
+            <div class="mt-12 text-center">
+                <p class="text-xl font-medium text-dark mb-2">"Aus einem unsicheren Jungpferd wird ein selbstbewusster Partner"</p>
+                <div class="flex justify-center items-center">
+                    <div class="w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center mr-3">
+                        <i class="fas fa-quote-left"></i>
+                    </div>
+                    <p class="text-gray-600 italic">- Zufriedener Kunde</p>
+                </div>
             </div>
         </div>
     </section>
 
     <!-- Gallery Section -->
-    <section id="gallery" class="py-16 bg-gray-50">
+    <section id="gallery" class="py-20 bg-gradient-to-br from-primary/10 to-accent/10">
         <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center text-green-800 mb-12">Galerie & Impressionen</h2>
-            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Galerie & Impressionen</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Einblicke in meine Arbeit mit Pferden und Reitern</p>
+            </div>
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                <div class="gallery-item rounded-lg overflow-hidden">
                     <img src="https://images.unsplash.com/photo-1553284965-83fd3e82ab5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" 
                          alt="Jungpferd Training" 
-                         class="w-full h-48 object-cover">
+                         class="w-full h-64 object-cover">
                 </div>
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                <div class="gallery-item rounded-lg overflow-hidden">
                     <img src="https://images.unsplash.com/photo-1553284965-5dd8352ff1bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                          alt="Beritt" 
-                         class="w-full h-48 object-cover">
+                         class="w-full h-64 object-cover">
                 </div>
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                <div class="gallery-item rounded-lg overflow-hidden">
                     <img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                          alt="Handarbeit" 
-                         class="w-full h-48 object-cover">
+                         class="w-full h-64 object-cover">
                 </div>
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                <div class="gallery-item rounded-lg overflow-hidden">
                     <img src="https://images.unsplash.com/photo-1605559421013-9a5dcde8b6d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                          alt="Doppellonge" 
-                         class="w-full h-48 object-cover">
+                         class="w-full h-64 object-cover">
                 </div>
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                <div class="gallery-item rounded-lg overflow-hidden">
                     <img src="https://images.unsplash.com/photo-1605559420909-d37c5bb1ee50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                          alt="Sitzschulung" 
-                         class="w-full h-48 object-cover">
+                         class="w-full h-64 object-cover">
                 </div>
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                <div class="gallery-item rounded-lg overflow-hidden">
                     <img src="https://images.unsplash.com/photo-1605559421013-9a5dcde8b6d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                          alt="Geländetraining" 
-                         class="w-full h-48 object-cover">
+                         class="w-full h-64 object-cover">
                 </div>
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                <div class="gallery-item rounded-lg overflow-hidden">
                     <img src="https://images.unsplash.com/photo-1553284966-3e6ae56d0e41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                          alt="Jungpferd" 
-                         class="w-full h-48 object-cover">
+                         class="w-full h-64 object-cover">
                 </div>
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                <div class="gallery-item rounded-lg overflow-hidden">
                     <img src="https://images.unsplash.com/photo-1553284966-3e6ae56d0e41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                          alt="Training" 
-                         class="w-full h-48 object-cover">
+                         class="w-full h-64 object-cover">
                 </div>
             </div>
+            <div class="text-center mt-12">
+                <button class="btn-primary font-semibold px-8 py-3 rounded-full transition-all">
+                    <i class="fas fa-images mr-2"></i> Alle Bilder ansehen
+                </button>
+            </div>
         </div>
     </section>
 
     <!-- Contact Section -->
-    <section id="contact" class="py-16 bg-green-800 text-white">
+    <section id="contact" class="py-20 bg-dark text-white relative overflow-hidden">
+        <div class="shape-1 top-0 left-0 opacity-10"></div>
         <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12">Kontakt</h2>
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Kontakt</h2>
+                <p class="text-lg text-gray-300 max-w-2xl mx-auto">Vereinbaren Sie noch heute einen Termin für ein unverbindliches Beratungsgespräch</p>
+            </div>
             <div class="flex flex-col lg:flex-row gap-12">
                 <div class="lg:w-1/2">
-                    <h3 class="text-xl font-semibold mb-4">Kontaktinformationen</h3>
-                    <div class="space-y-4">
-                        <div class="flex items-start">
-                            <i class="fas fa-map-marker-alt mt-1 mr-4"></i>
-                            <div>
-                                <p class="font-medium">Standort</p>
-                                <p>Musterstraße 123, 12345 Musterstadt</p>
-                                <p class="text-green-200 mt-1">Einzugsgebiet: 50 km Umkreis</p>
+                    <div class="contact-card text-dark">
+                        <h3 class="text-2xl font-semibold mb-6">Kontaktinformationen</h3>
+                        <div class="space-y-6">
+                            <div class="flex items-start">
+                                <div class="bg-primary/10 text-primary p-3 rounded-lg mr-4">
+                                    <i class="fas fa-map-marker-alt text-xl"></i>
+                                </div>
+                                <div>
+                                    <p class="font-medium text-lg">Standort</p>
+                                    <p>Musterstraße 123, 12345 Musterstadt</p>
+                                    <p class="text-primary mt-1 font-medium">Einzugsgebiet: 50 km Umkreis</p>
+                                </div>
                             </div>
-                        </div>
-                        <div class="flex items-start">
-                            <i class="fas fa-mobile-alt mt-1 mr-4"></i>
-                            <div>
-                                <p class="font-medium">Telefon</p>
-                                <p>+49 123 456789</p>
+                            <div class="flex items-start">
+                                <div class="bg-primary/10 text-primary p-3 rounded-lg mr-4">
+                                    <i class="fas fa-mobile-alt text-xl"></i>
+                                </div>
+                                <div>
+                                    <p class="font-medium text-lg">Telefon</p>
+                                    <p>+49 123 456789</p>
+                                </div>
                             </div>
-                        </div>
-                        <div class="flex items-start">
-                            <i class="fas fa-envelope mt-1 mr-4"></i>
-                            <div>
-                                <p class="font-medium">E-Mail</p>
-                                <p>[email protected]</p>
+                            <div class="flex items-start">
+                                <div class="bg-primary/10 text-primary p-3 rounded-lg mr-4">
+                                    <i class="fas fa-envelope text-xl"></i>
+                                </div>
+                                <div>
+                                    <p class="font-medium text-lg">E-Mail</p>
+                                    <p>[email protected]</p>
+                                </div>
                             </div>
-                        </div>
-                        <div class="flex items-start">
-                            <i class="fab fa-whatsapp mt-1 mr-4"></i>
-                            <div>
-                                <p class="font-medium">WhatsApp</p>
-                                <p>+49 123 456789</p>
-                                <a href="https://wa.me/49123456789" class="inline-block mt-2 bg-green-700 hover:bg-green-600 text-white px-4 py-2 rounded-full transition-all">
-                                    <i class="fab fa-whatsapp mr-2"></i> Nachricht senden
-                                </a>
+                            <div class="flex items-start">
+                                <div class="bg-primary/10 text-primary p-3 rounded-lg mr-4">
+                                    <i class="fab fa-whatsapp text-xl"></i>
+                                </div>
+                                <div>
+                                    <p class="font-medium text-lg">WhatsApp</p>
+                                    <p>+49 123 456789</p>
+                                    <a href="https://wa.me/49123456789" class="inline-block mt-3 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-full transition-all">
+                                        <i class="fab fa-whatsapp mr-2"></i> Nachricht senden
+                                    </a>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="mt-8">
-                        <h3 class="text-xl font-semibold mb-4">Öffnungszeiten</h3>
-                        <div class="space-y-2">
-                            <p>Montag - Freitag: 8:00 - 18:00 Uhr</p>
-                            <p>Samstag: 9:00 - 14:00 Uhr</p>
-                            <p>Sonntag: nach Vereinbarung</p>
+                        <div class="mt-10">
+                            <h3 class="text-2xl font-semibold mb-4">Öffnungszeiten</h3>
+                            <div class="space-y-3">
+                                <div class="flex justify-between border-b border-gray-200 pb-2">
+                                    <span>Montag - Freitag</span>
+                                    <span class="font-medium">8:00 - 18:00 Uhr</span>
+                                </div>
+                                <div class="flex justify-between border-b border-gray-200 pb-2">
+                                    <span>Samstag</span>
+                                    <span class="font-medium">9:00 - 14:00 Uhr</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span>Sonntag</span>
+                                    <span class="font-medium">nach Vereinbarung</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="lg:w-1/2">
-                    <h3 class="text-xl font-semibold mb-4">Kontaktformular</h3>
-                    <form class="space-y-4">
-                        <div>
-                            <label for="name" class="block mb-1">Name</label>
-                            <input type="text" id="name" class="w-full px-4 py-2 rounded-lg bg-green-900 border border-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 text-white">
-                        </div>
-                        <div>
-                            <label for="email" class="block mb-1">E-Mail</label>
-                            <input type="email" id="email" class="w-full px-4 py-2 rounded-lg bg-green-900 border border-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 text-white">
-                        </div>
-                        <div>
-                            <label for="phone" class="block mb-1">Telefon</label>
-                            <input type="tel" id="phone" class="w-full px-4 py-2 rounded-lg bg-green-900 border border-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 text-white">
-                        </div>
-                        <div>
-                            <label for="service" class="block mb-1">Interesse an</label>
-                            <select id="service" class="w-full px-4 py-2 rounded-lg bg-green-900 border border-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 text-white">
-                                <option value="">Bitte auswählen</option>
-                                <option value="jungpferde">Jungpferdeausbildung</option>
-                                <option value="beritt">Beritt</option>
-                                <option value="unterricht">Reitunterricht</option>
-                                <option value="handarbeit">Handarbeit & Doppellonge</option>
-                                <option value="sitzschulung">Sitzschulung</option>
-                                <option value="gelände">Geländetraining</option>
-                                <option value="sonstiges">Sonstiges</option>
-                            </select>
-                        </div>
-                        <div>
-                            <label for="message" class="block mb-1">Nachricht</label>
-                            <textarea id="message" rows="4" class="w-full px-4 py-2 rounded-lg bg-green-900 border border-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 text-white"></textarea>
-                        </div>
-                        <button type="submit" class="w-full bg-green-600 hover:bg-green-500 text-white font-semibold px-6 py-3 rounded-lg transition-all shadow-lg">
-                            Nachricht senden
-                        </button>
-                    </form>
+                    <div class="contact-card h-full">
+                        <h3 class="text-2xl font-semibold mb-6">Kontaktformular</h3>
+                        <form class="space-y-5">
+                            <div>
+                                <label for="name" class="block mb-2 font-medium">Name</label>
+                                <input type="text" id="name" class="w-full px-5 py-3 rounded-lg bg-gray-100 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-dark">
+                            </div>
+                            <div>
+                                <label for="email" class="block mb-2 font-medium">E-Mail</label>
+                                <input type="email" id="email" class="w-full px-5 py-3 rounded-lg bg-gray-100 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-dark">
+                            </div>
+                            <div>
+                                <label for="phone" class="block mb-2 font-medium">Telefon</label>
+                                <input type="tel" id="phone" class="w-full px-5 py-3 rounded-lg bg-gray-100 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-dark">
+                            </div>
+                            <div>
+                                <label for="service" class="block mb-2 font-medium">Interesse an</label>
+                                <select id="service" class="w-full px-5 py-3 rounded-lg bg-gray-100 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-dark">
+                                    <option value="">Bitte auswählen</option>
+                                    <option value="jungpferde">Jungpferdeausbildung</option>
+                                    <option value="beritt">Beritt</option>
+                                    <option value="unterricht">Reitunterricht</option>
+                                    <option value="handarbeit">Handarbeit & Doppellonge</option>
+                                    <option value="sitzschulung">Sitzschulung</option>
+                                    <option value="gelände">Geländetraining</option>
+                                    <option value="sonstiges">Sonstiges</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label for="message" class="block mb-2 font-medium">Nachricht</label>
+                                <textarea id="message" rows="5" class="w-full px-5 py-3 rounded-lg bg-gray-100 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-dark"></textarea>
+                            </div>
+                            <button type="submit" class="w-full btn-primary font-semibold px-6 py-4 rounded-lg transition-all mt-6">
+                                <i class="fas fa-paper-plane mr-2"></i> Nachricht senden
+                            </button>
+                        </form>
+                    </div>
                 </div>
             </div>
         </div>
     </section>
 
     <!-- Map Section -->
-    <div class="h-96 bg-gray-200">
+    <div class="h-96 bg-gray-200 relative">
+        <div class="absolute inset-0 bg-primary/10 flex items-center justify-center">
+            <div class="text-center p-8 bg-white rounded-xl shadow-xl max-w-md mx-4">
+                <h3 class="text-2xl font-bold text-dark mb-3">Besuchen Sie uns</h3>
+                <p class="text-gray-600 mb-4">Vereinbaren Sie einen Termin für ein persönliches Gespräch und eine Stallbesichtigung.</p>
+                <a href="#contact" class="btn-primary font-semibold px-6 py-3 rounded-full inline-block transition-all">
+                    Termin vereinbaren
+                </a>
+            </div>
+        </div>
         <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2427.123456789012!2d13.123456789012345!3d52.12345678901234!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTLCsDA3JzI0LjQiTiAxM8KwMDcnMjQuNCJF!5e0!3m2!1sde!2sde!4v1234567890123!5m2!1sde!2sde" 
                 width="100%" 
                 height="100%" 
@@ -382,41 +630,72 @@
     </div>
 
     <!-- Footer -->
-    <footer class="bg-green-900 text-white py-8">
-        <div class="container mx-auto px-4">
+    <footer class="bg-dark text-white pt-20 relative">
+        <div class="footer-wave">
+            <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
+            </svg>
+        </div>
+        <div class="container mx-auto px-4 pb-12">
             <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="mb-4 md:mb-0">
-                    <div class="flex items-center">
-                        <i class="fas fa-horse-head text-2xl mr-2"></i>
-                        <span class="text-xl font-semibold">Pferdeausbildung</span>
+                <div class="mb-8 md:mb-0 text-center md:text-left">
+                    <div class="flex items-center justify-center md:justify-start">
+                        <div class="icon-container mr-3">
+                            <i class="fas fa-horse-head text-2xl"></i>
+                        </div>
+                        <span class="text-2xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Pferdeausbildung</span>
                     </div>
-                    <p class="mt-2 text-green-300">Systematisch, strukturiert, pferdegerecht</p>
+                    <p class="mt-4 text-gray-300 max-w-md">Systematisch, strukturiert, pferdegerecht – für ein ausbalanciertes Pferd mit Freude an der Arbeit</p>
                 </div>
-                <div class="flex space-x-6">
-                    <a href="#" class="text-white hover:text-green-300 transition-all">
-                        <i class="fab fa-facebook-f text-xl"></i>
-                    </a>
-                    <a href="#" class="text-white hover:text-green-300 transition-all">
-                        <i class="fab fa-instagram text-xl"></i>
-                    </a>
-                    <a href="#" class="text-white hover:text-green-300 transition-all">
-                        <i class="fab fa-whatsapp text-xl"></i>
-                    </a>
+                <div class="flex flex-col sm:flex-row gap-8">
+                    <div>
+                        <h4 class="text-lg font-semibold mb-4 text-white">Navigation</h4>
+                        <ul class="space-y-2">
+                            <li><a href="#services" class="text-gray-300 hover:text-primary transition-all">Leistungen</a></li>
+                            <li><a href="#philosophy" class="text-gray-300 hover:text-primary transition-all">Philosophie</a></li>
+                            <li><a href="#gallery" class="text-gray-300 hover:text-primary transition-all">Galerie</a></li>
+                            <li><a href="#contact" class="text-gray-300 hover:text-primary transition-all">Kontakt</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 class="text-lg font-semibold mb-4 text-white">Rechtliches</h4>
+                        <ul class="space-y-2">
+                            <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Impressum</a></li>
+                            <li><a href="#" class="text-gray-300 hover:text-primary transition-all">Datenschutz</a></li>
+                            <li><a href="#" class="text-gray-300 hover:text-primary transition-all">AGB</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 class="text-lg font-semibold mb-4 text-white">Social Media</h4>
+                        <div class="flex space-x-4">
+                            <a href="#" class="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-primary/90 transition-all">
+                                <i class="fab fa-facebook-f"></i>
+                            </a>
+                            <a href="#" class="bg-secondary text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-secondary/90 transition-all">
+                                <i class="fab fa-instagram"></i>
+                            </a>
+                            <a href="#" class="bg-accent text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-accent/90 transition-all">
+                                <i class="fab fa-whatsapp"></i>
+                            </a>
+                        </div>
+                        <div class="mt-4">
+                            <a href="#contact" class="inline-flex items-center text-primary font-medium">
+                                <i class="fas fa-envelope mr-2"></i> Newsletter abonnieren
+                            </a>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="border-t border-green-800 mt-8 pt-8 text-center text-green-300">
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
                 <p>&copy; 2023 Pferdeausbildung. Alle Rechte vorbehalten.</p>
-                <div class="mt-2 flex justify-center space-x-4">
-                    <a href="#" class="hover:text-white transition-all">Impressum</a>
-                    <a href="#" class="hover:text-white transition-all">Datenschutz</a>
-                </div>
+                <p class="mt-2">Made with <i class="fas fa-heart text-secondary"></i> for horses</p>
             </div>
         </div>
     </footer>
 
     <!-- Back to Top Button -->
-    <button id="backToTop" class="fixed bottom-8 right-8 bg-green-700 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
-        <i class="fas fa-arrow-up"></i>
+    <button id="backToTop" class="fixed bottom-8 right-8 bg-gradient-to-br from-primary to-secondary text-white w-14 h-14 rounded-full shadow-2xl flex items-center justify-center opacity-0 invisible transition-all hover:shadow-lg hover:scale-105">
+        <i class="fas fa-arrow-up text-xl"></i>
     </button>
 
     <script>
@@ -474,7 +753,6 @@
         });
 
         document.addEventListener('touchend', () => {
-$0
             isDragging = false;
         });
 
@@ -492,6 +770,17 @@ $0
             beforeImage.style.width = `${percent}%`;
             sliderHandle.style.left = `${percent}%`;
         });
+
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Frajosgro/homepage-melina" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt

@@ -0,0 +1 @@
+ändere bitte das Farbdesign, es können auch individuelle formen und mehrfabrige Elemente geben, es muss mehr vibrant werden - anschaulich und ein einzgartiges Endergebnis erzielen.