From ddc53783f18c495ec25be120767851a3477c5000 Mon Sep 17 00:00:00 2001
From: Julian Vollmer <julianvollmer@gmail.com>
Date: Sat, 7 Mar 2026 23:32:19 +0100
Subject: [PATCH] changes

---
 .../app/components/footer/footer.component.ts |  74 +++++----
 .../app/components/header/header.component.ts |  78 +++++----
 website/src/app/pages/home/home.component.ts  | 151 ++++++++----------
 website/src/styles.scss                       | 138 +++++++++++++---
 website/tailwind.config.js                    |  93 +++++++----
 5 files changed, 320 insertions(+), 214 deletions(-)

diff --git a/website/src/app/components/footer/footer.component.ts b/website/src/app/components/footer/footer.component.ts
index a991ddf..f73a6e7 100644
--- a/website/src/app/components/footer/footer.component.ts
+++ b/website/src/app/components/footer/footer.component.ts
@@ -7,36 +7,40 @@ import { RouterModule } from '@angular/router';
   standalone: true,
   imports: [CommonModule, RouterModule],
   template: `
-    <footer class="bg-gray-900 text-white">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+    <footer class="bg-primary-900 text-cream-200">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
+
           <!-- Company Info -->
           <div class="col-span-1 md:col-span-2">
-            <div class="flex items-center mb-4">
-              <img src="assets/logo.png" alt="Florale Emotion Logo" class="h-16 w-auto mr-4 filter brightness-0 invert opacity-80">
+            <div class="flex items-center mb-5">
+              <img src="assets/logo.png" alt="Florale Emotion Logo" class="h-16 w-auto mr-4 filter brightness-0 invert opacity-70">
               <div>
-                <div class="logo-script text-2xl text-white">Florale</div>
-                <div class="logo-caps text-sm text-gray-300 -mt-1">EMOTION</div>
+                <div class="logo-script text-2xl" style="color:#FAF8F4;">Florale</div>
+                <div class="logo-caps text-xs -mt-1" style="color:#D4C3A6;">EMOTION</div>
               </div>
             </div>
-            <p class="text-gray-300 mb-4">
-              Ihr Spezialist für einzigartige Blumenarrangements bei Hochzeiten, Beerdigungen und besonderen Events. 
-              Wir schaffen emotionale Momente mit der Schönheit der Natur.
+            <p class="text-sm text-primary-300 mb-5 leading-relaxed" style="font-family:'Cormorant Garamond',serif; font-size:1rem;">
+              Ihr Spezialist für einzigartige Blumenarrangements bei Hochzeiten,
+              Trauerfeiern und besonderen Events in der Region Göttingen.
             </p>
             <div class="flex space-x-4">
-              <a href="#" class="text-gray-400 hover:text-primary-400 transition-colors duration-200">
-                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+              <!-- Instagram -->
+              <a href="#" class="text-primary-500 hover:text-cream-300 transition-colors duration-200">
+                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                 </svg>
               </a>
-              <a href="#" class="text-gray-400 hover:text-primary-400 transition-colors duration-200">
-                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
+              <!-- Facebook -->
+              <a href="#" class="text-primary-500 hover:text-cream-300 transition-colors duration-200">
+                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                 </svg>
               </a>
-              <a href="#" class="text-gray-400 hover:text-primary-400 transition-colors duration-200">
-                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.097.118.112.221.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z.017-.001z"/>
+              <!-- TikTok -->
+              <a href="#" class="text-primary-500 hover:text-cream-300 transition-colors duration-200">
+                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
                 </svg>
               </a>
             </div>
@@ -44,38 +48,40 @@ import { RouterModule } from '@angular/router';
 
           <!-- Quick Links -->
           <div>
-            <h4 class="text-lg font-semibold mb-4">Schnellzugriff</h4>
-            <ul class="space-y-2">
-              <li><a routerLink="/portfolio" class="text-gray-300 hover:text-primary-400 transition-colors duration-200">Portfolio</a></li>
-              <li><a routerLink="/services" class="text-gray-300 hover:text-primary-400 transition-colors duration-200">Services</a></li>
-              <li><a routerLink="/about" class="text-gray-300 hover:text-primary-400 transition-colors duration-200">Über uns</a></li>
-              <li><a routerLink="/contact" class="text-gray-300 hover:text-primary-400 transition-colors duration-200">Kontakt</a></li>
+            <h4 class="logo-caps text-xs text-primary-400 mb-5">Navigation</h4>
+            <ul class="space-y-3">
+              <li><a routerLink="/portfolio" class="text-sm text-primary-300 hover:text-cream-200 transition-colors duration-200" style="font-family:'Cormorant Garamond',serif;">Portfolio</a></li>
+              <li><a routerLink="/services" class="text-sm text-primary-300 hover:text-cream-200 transition-colors duration-200" style="font-family:'Cormorant Garamond',serif;">Services</a></li>
+              <li><a routerLink="/about" class="text-sm text-primary-300 hover:text-cream-200 transition-colors duration-200" style="font-family:'Cormorant Garamond',serif;">Über uns</a></li>
+              <li><a routerLink="/contact" class="text-sm text-primary-300 hover:text-cream-200 transition-colors duration-200" style="font-family:'Cormorant Garamond',serif;">Kontakt</a></li>
             </ul>
           </div>
 
           <!-- Contact Info -->
           <div>
-            <h4 class="text-lg font-semibold mb-4">Kontakt</h4>
-            <ul class="space-y-2 text-gray-300">
-              <li class="flex items-center">
-                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+            <h4 class="logo-caps text-xs text-primary-400 mb-5">Kontakt</h4>
+            <ul class="space-y-3 text-primary-300 text-sm" style="font-family:'Cormorant Garamond',serif;">
+              <li class="flex items-center gap-2">
+                <svg class="w-4 h-4 text-primary-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                   <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
                   <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
                 </svg>
                 info&#64;florale-emotion.de
               </li>
-              <li class="flex items-start">
-                <svg class="w-5 h-5 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+              <li class="flex items-start gap-2">
+                <svg class="w-4 h-4 text-primary-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                   <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
                 </svg>
-                <span>Krebeck · Region Göttingen<br><span class="text-gray-500 text-xs">Werkstattbetrieb · kein Ladenlokal</span></span>
+                <span>Krebeck · Region Göttingen<br>
+                  <span class="text-xs text-primary-500">Werkstattbetrieb · kein Ladenlokal</span>
+                </span>
               </li>
             </ul>
           </div>
         </div>
 
-        <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
-          <p>&copy; 2024 Florale Emotion. Alle Rechte vorbehalten.</p>
+        <div class="border-t border-primary-800 mt-12 pt-8 text-center">
+          <p class="logo-caps text-xs text-primary-600">&copy; 2025 Florale Emotion · Alle Rechte vorbehalten</p>
         </div>
       </div>
     </footer>
diff --git a/website/src/app/components/header/header.component.ts b/website/src/app/components/header/header.component.ts
index 2de370f..65e429a 100644
--- a/website/src/app/components/header/header.component.ts
+++ b/website/src/app/components/header/header.component.ts
@@ -7,16 +7,16 @@ import { RouterModule } from '@angular/router';
   standalone: true,
   imports: [CommonModule, RouterModule],
   template: `
-    <header class="bg-white shadow-sm sticky top-0 z-50">
+    <header class="bg-cream-100 border-b border-primary-200 sticky top-0 z-50">
       <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex justify-between items-center h-16">
+        <div class="flex justify-between items-center h-20">
           <!-- Logo -->
           <div class="flex-shrink-0">
             <a routerLink="/" class="flex items-center space-x-3">
-              <img src="assets/logo.png" alt="Florale Emotion Logo" class="h-12 w-auto">
+              <img src="assets/logo.png" alt="Florale Emotion Logo" class="h-14 w-auto">
               <div class="hidden sm:block">
                 <div class="logo-script text-2xl">Florale</div>
-                <div class="logo-caps text-sm -mt-1">EMOTION</div>
+                <div class="logo-caps text-xs -mt-1">EMOTION</div>
               </div>
             </a>
           </div>
@@ -24,42 +24,41 @@ import { RouterModule } from '@angular/router';
           <!-- Desktop Navigation -->
           <div class="hidden md:block">
             <div class="ml-10 flex items-baseline space-x-8">
-              <a routerLink="/" 
-                 routerLinkActive="text-primary-600 border-b-2 border-primary-600"
+              <a routerLink="/"
+                 routerLinkActive="text-primary-900 border-b border-primary-700"
                  [routerLinkActiveOptions]="{exact: true}"
-                 class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
+                 class="logo-caps text-xs text-secondary-700 hover:text-primary-900 px-1 py-2 transition-colors duration-200">
                 Home
               </a>
-              <a routerLink="/portfolio" 
-                 routerLinkActive="text-primary-600 border-b-2 border-primary-600"
-                 class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
+              <a routerLink="/portfolio"
+                 routerLinkActive="text-primary-900 border-b border-primary-700"
+                 class="logo-caps text-xs text-secondary-700 hover:text-primary-900 px-1 py-2 transition-colors duration-200">
                 Portfolio
               </a>
-              <a routerLink="/services" 
-                 routerLinkActive="text-primary-600 border-b-2 border-primary-600"
-                 class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
+              <a routerLink="/services"
+                 routerLinkActive="text-primary-900 border-b border-primary-700"
+                 class="logo-caps text-xs text-secondary-700 hover:text-primary-900 px-1 py-2 transition-colors duration-200">
                 Services
               </a>
-              <a routerLink="/about" 
-                 routerLinkActive="text-primary-600 border-b-2 border-primary-600"
-                 class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
+              <a routerLink="/about"
+                 routerLinkActive="text-primary-900 border-b border-primary-700"
+                 class="logo-caps text-xs text-secondary-700 hover:text-primary-900 px-1 py-2 transition-colors duration-200">
                 Über uns
               </a>
-              <a routerLink="/contact" 
-                 routerLinkActive="text-primary-600 border-b-2 border-primary-600"
-                 class="text-gray-700 hover:text-primary-600 px-3 py-2 text-sm font-medium transition-colors duration-200">
-                Kontakt
+              <a routerLink="/contact"
+                 class="btn-primary text-xs py-2 px-5">
+                Anfrage
               </a>
             </div>
           </div>
 
           <!-- Mobile menu button -->
           <div class="md:hidden">
-            <button (click)="toggleMobileMenu()" 
-                    class="text-gray-700 hover:text-primary-600 focus:outline-none focus:text-primary-600">
+            <button (click)="toggleMobileMenu()"
+                    class="text-primary-700 hover:text-primary-900 focus:outline-none">
               <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path *ngIf="!isMobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                <path *ngIf="isMobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                <path *ngIf="!isMobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" />
+                <path *ngIf="isMobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
               </svg>
             </button>
           </div>
@@ -67,36 +66,35 @@ import { RouterModule } from '@angular/router';
 
         <!-- Mobile Navigation -->
         <div *ngIf="isMobileMenuOpen" class="md:hidden">
-          <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t border-gray-200">
-            <a routerLink="/" 
+          <div class="px-2 pt-2 pb-4 space-y-1 border-t border-primary-200 bg-cream-100">
+            <a routerLink="/"
                (click)="closeMobileMenu()"
-               routerLinkActive="text-primary-600 bg-primary-50"
+               routerLinkActive="text-primary-900"
                [routerLinkActiveOptions]="{exact: true}"
-               class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
+               class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
               Home
             </a>
-            <a routerLink="/portfolio" 
+            <a routerLink="/portfolio"
                (click)="closeMobileMenu()"
-               routerLinkActive="text-primary-600 bg-primary-50"
-               class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
+               routerLinkActive="text-primary-900"
+               class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
               Portfolio
             </a>
-            <a routerLink="/services" 
+            <a routerLink="/services"
                (click)="closeMobileMenu()"
-               routerLinkActive="text-primary-600 bg-primary-50"
-               class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
+               routerLinkActive="text-primary-900"
+               class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
               Services
             </a>
-            <a routerLink="/about" 
+            <a routerLink="/about"
                (click)="closeMobileMenu()"
-               routerLinkActive="text-primary-600 bg-primary-50"
-               class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
+               routerLinkActive="text-primary-900"
+               class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
               Über uns
             </a>
-            <a routerLink="/contact" 
+            <a routerLink="/contact"
                (click)="closeMobileMenu()"
-               routerLinkActive="text-primary-600 bg-primary-50"
-               class="text-gray-700 hover:text-primary-600 hover:bg-primary-50 block px-3 py-2 text-base font-medium transition-colors duration-200">
+               class="logo-caps text-xs text-secondary-700 hover:text-primary-900 block px-3 py-3 transition-colors duration-200">
               Kontakt
             </a>
           </div>
diff --git a/website/src/app/pages/home/home.component.ts b/website/src/app/pages/home/home.component.ts
index 7c197f4..57f8539 100644
--- a/website/src/app/pages/home/home.component.ts
+++ b/website/src/app/pages/home/home.component.ts
@@ -9,153 +9,130 @@ import { SEOService } from '../../services/seo.service';
   imports: [CommonModule, RouterModule],
   template: `
     <!-- Hero Section -->
-    <section class="relative bg-gradient-to-br from-primary-50 to-accent-50 py-20">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="text-center">
-          <div class="mb-8 fade-in">
-            <img src="assets/logo.png" alt="Florale Emotion Logo" class="h-32 md:h-40 mx-auto mb-6">
-            <div class="logo-script text-5xl md:text-7xl mb-2">Florale</div>
-            <div class="logo-caps text-xl md:text-2xl mb-3">EMOTION</div>
-            <div class="logo-subtitle text-sm md:text-base mb-1">BLUMENWERKSTATT</div>
-            <div class="font-serif text-sm md:text-base text-primary-600 italic">Event- und Trauerfloristik</div>
-          </div>
-          <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto slide-up">
-            Einzigartige Blumenarrangements für Ihre besonderen Momente - 
-            Hochzeiten, Beerdigungen und unvergessliche Events
+    <section class="bg-cream-100 py-24 border-b border-primary-200">
+      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="text-center fade-in">
+          <img src="assets/logo.png" alt="Florale Emotion Logo" class="h-48 md:h-60 mx-auto mb-8">
+          <div class="divider-botanical mb-8"><span>✦</span></div>
+          <p class="font-caps text-lg md:text-xl text-secondary-700 mb-10 max-w-2xl mx-auto leading-relaxed" style="font-family:'Cormorant Garamond',serif; letter-spacing:0.05em;">
+            Einzigartige Blumenarrangements für Ihre besonderen Momente —
+            Hochzeiten, Trauerfeiern und unvergessliche Events in der Region Göttingen.
           </p>
           <div class="flex flex-col sm:flex-row gap-4 justify-center slide-up">
-            <a routerLink="/portfolio" class="btn-primary">
-              Portfolio ansehen
-            </a>
-            <a routerLink="/contact" class="btn-secondary">
-              Beratung anfragen
-            </a>
+            <a routerLink="/portfolio" class="btn-primary">Portfolio ansehen</a>
+            <a routerLink="/contact" class="btn-secondary">Beratung anfragen</a>
           </div>
         </div>
       </div>
     </section>
 
     <!-- Services Overview -->
-    <section class="py-16 bg-white">
+    <section class="py-20 bg-cream-200">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="text-center mb-12">
-          <h2 class="text-3xl md:text-4xl font-serif font-bold text-gray-900 mb-4">
+        <div class="text-center mb-14 section-title-ornament">
+          <h2 class="text-3xl md:text-4xl font-serif font-bold text-primary-900 mb-3">
             Unsere Services
           </h2>
-          <p class="text-lg text-gray-600 max-w-2xl mx-auto">
-            Von romantischen Hochzeiten bis zu würdevollen Abschieden - 
-            wir gestalten jeden Anlass mit der passenden floralen Note.
+          <p class="font-caps text-base text-secondary-600 max-w-xl mx-auto" style="font-family:'Cormorant Garamond',serif;">
+            Von romantischen Hochzeiten bis zu würdevollen Abschieden
           </p>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
           <!-- Hochzeiten -->
-          <div class="card text-center group hover:shadow-xl transition-shadow duration-300">
-            <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-200 transition-colors duration-300">
-              <svg class="w-8 h-8 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
-              </svg>
-            </div>
-            <h3 class="text-xl font-serif font-semibold text-gray-900 mb-3">Hochzeiten</h3>
-            <p class="text-gray-600 mb-4">
-              Romantische Brautsträuße, elegante Tischdekorationen und traumhafte Kirchenschmuck 
-              für Ihren schönsten Tag.
+          <div class="card card-hover text-center group">
+            <div class="w-12 h-px bg-primary-300 mx-auto mb-6"></div>
+            <h3 class="text-xl font-serif font-semibold text-primary-900 mb-4">Hochzeiten</h3>
+            <p class="text-secondary-700 mb-6 leading-relaxed text-sm">
+              Romantische Brautsträuße, elegante Tischdekorationen und traumhafter
+              Kirchenschmuck für Ihren schönsten Tag.
             </p>
-            <a routerLink="/services" class="text-primary-600 hover:text-primary-700 font-medium">
+            <a routerLink="/services" class="logo-caps text-xs text-primary-700 hover:text-primary-900 transition-colors duration-200">
               Mehr erfahren →
             </a>
+            <div class="w-12 h-px bg-primary-300 mx-auto mt-6"></div>
           </div>
 
-          <!-- Beerdigungen -->
-          <div class="card text-center group hover:shadow-xl transition-shadow duration-300">
-            <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-gray-200 transition-colors duration-300">
-              <svg class="w-8 h-8 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
-                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-              </svg>
-            </div>
-            <h3 class="text-xl font-serif font-semibold text-gray-900 mb-3">Trauerfloristik</h3>
-            <p class="text-gray-600 mb-4">
-              Würdevolle Kränze, Gestecke und Sargschmuck für einen respektvollen Abschied 
-              von Ihren Liebsten.
+          <!-- Trauerfloristik -->
+          <div class="card card-hover text-center group">
+            <div class="w-12 h-px bg-primary-300 mx-auto mb-6"></div>
+            <h3 class="text-xl font-serif font-semibold text-primary-900 mb-4">Trauerfloristik</h3>
+            <p class="text-secondary-700 mb-6 leading-relaxed text-sm">
+              Würdevolle Kränze, Gestecke und Sargschmuck für einen respektvollen
+              Abschied von Ihren Liebsten.
             </p>
-            <a routerLink="/services" class="text-primary-600 hover:text-primary-700 font-medium">
+            <a routerLink="/services" class="logo-caps text-xs text-primary-700 hover:text-primary-900 transition-colors duration-200">
               Mehr erfahren →
             </a>
+            <div class="w-12 h-px bg-primary-300 mx-auto mt-6"></div>
           </div>
 
           <!-- Events -->
-          <div class="card text-center group hover:shadow-xl transition-shadow duration-300">
-            <div class="w-16 h-16 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-secondary-200 transition-colors duration-300">
-              <svg class="w-8 h-8 text-secondary-600" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M10 2L3 7v11a2 2 0 002 2h10a2 2 0 002-2V7l-7-5zM10 18a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
-              </svg>
-            </div>
-            <h3 class="text-xl font-serif font-semibold text-gray-900 mb-3">Events & Feiern</h3>
-            <p class="text-gray-600 mb-4">
-              Festliche Dekorationen für Geburtstage, Jubiläen, Firmenfeiern 
+          <div class="card card-hover text-center group">
+            <div class="w-12 h-px bg-primary-300 mx-auto mb-6"></div>
+            <h3 class="text-xl font-serif font-semibold text-primary-900 mb-4">Events & Feiern</h3>
+            <p class="text-secondary-700 mb-6 leading-relaxed text-sm">
+              Festliche Dekorationen für Geburtstage, Jubiläen, Firmenfeiern
               und alle besonderen Anlässe.
             </p>
-            <a routerLink="/services" class="text-primary-600 hover:text-primary-700 font-medium">
+            <a routerLink="/services" class="logo-caps text-xs text-primary-700 hover:text-primary-900 transition-colors duration-200">
               Mehr erfahren →
             </a>
+            <div class="w-12 h-px bg-primary-300 mx-auto mt-6"></div>
           </div>
         </div>
       </div>
     </section>
 
     <!-- Portfolio Preview -->
-    <section class="py-16 bg-gray-50">
+    <section class="py-20 bg-cream-100">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="text-center mb-12">
-          <h2 class="text-3xl md:text-4xl font-serif font-bold text-gray-900 mb-4">
+        <div class="text-center mb-14 section-title-ornament">
+          <h2 class="text-3xl md:text-4xl font-serif font-bold text-primary-900 mb-3">
             Unsere Arbeiten
           </h2>
-          <p class="text-lg text-gray-600 max-w-2xl mx-auto">
-            Lassen Sie sich von unseren bisherigen Projekten inspirieren und 
-            entdecken Sie die Vielfalt unserer floralen Kunstwerke.
+          <p class="font-caps text-base text-secondary-600 max-w-xl mx-auto" style="font-family:'Cormorant Garamond',serif;">
+            Lassen Sie sich von unseren bisherigen Projekten inspirieren
           </p>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
           <div *ngFor="let item of portfolioPreview" class="group cursor-pointer">
-            <div class="relative overflow-hidden rounded-lg shadow-md group-hover:shadow-xl transition-shadow duration-300">
-              <div class="aspect-w-4 aspect-h-3 bg-gray-200">
-                <div class="w-full h-64 bg-gradient-to-br from-primary-200 to-secondary-200 flex items-center justify-center">
-                  <span class="text-gray-600 font-medium">{{ item.title }}</span>
-                </div>
+            <div class="relative overflow-hidden border border-primary-200">
+              <div class="w-full h-64 bg-gradient-to-br from-cream-300 to-primary-100 flex items-center justify-center">
+                <span class="font-serif text-secondary-600 text-sm italic">{{ item.title }}</span>
               </div>
-              <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
-                <span class="text-white font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+              <div class="absolute inset-0 bg-primary-900 bg-opacity-0 group-hover:bg-opacity-40 transition-all duration-400 flex items-center justify-center">
+                <span class="logo-caps text-xs text-cream-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300 tracking-widest">
                   Ansehen
                 </span>
               </div>
             </div>
-            <h3 class="mt-3 text-lg font-medium text-gray-900">{{ item.title }}</h3>
-            <p class="text-gray-600">{{ item.category }}</p>
+            <div class="pt-3 pb-1 border-b border-primary-200">
+              <h3 class="font-serif text-base text-primary-900">{{ item.title }}</h3>
+              <p class="logo-caps text-xs text-secondary-600 mt-1">{{ item.category }}</p>
+            </div>
           </div>
         </div>
 
         <div class="text-center">
-          <a routerLink="/portfolio" class="btn-primary">
-            Komplettes Portfolio ansehen
-          </a>
+          <a routerLink="/portfolio" class="btn-primary">Komplettes Portfolio ansehen</a>
         </div>
       </div>
     </section>
 
     <!-- CTA Section -->
-    <section class="py-16 bg-primary-600">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-        <h2 class="text-3xl md:text-4xl font-serif font-bold text-white mb-4">
+    <section class="py-20 bg-primary-900">
+      <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+        <div class="w-12 h-px bg-primary-600 mx-auto mb-8"></div>
+        <h2 class="text-3xl md:text-4xl font-serif font-light text-cream-100 mb-4">
           Bereit für Ihr nächstes Event?
         </h2>
-        <p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto">
-          Kontaktieren Sie uns für eine persönliche Beratung und lassen Sie uns 
-          gemeinsam Ihre floralen Träume verwirklichen.
+        <p class="text-base text-primary-300 mb-10 max-w-xl mx-auto leading-relaxed" style="font-family:'Cormorant Garamond',serif; font-size:1.1rem;">
+          Kontaktieren Sie uns für eine persönliche Beratung — wir kommen zu Ihnen.
         </p>
-        <a routerLink="/contact" class="bg-white text-primary-600 hover:bg-gray-100 font-medium py-3 px-8 rounded-lg transition-colors duration-200 inline-block">
-          Jetzt Kontakt aufnehmen
-        </a>
+        <a routerLink="/contact" class="btn-ghost">Jetzt Kontakt aufnehmen</a>
+        <div class="w-12 h-px bg-primary-600 mx-auto mt-8"></div>
       </div>
     </section>
   `
diff --git a/website/src/styles.scss b/website/src/styles.scss
index c3509d2..3574de1 100644
--- a/website/src/styles.scss
+++ b/website/src/styles.scss
@@ -2,76 +2,174 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-/* Global Styles */
+/* ============================================
+   GLOBAL – Warmcreme-Basis passend zum Logo
+   ============================================ */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
+html {
+  background-color: #FAF8F4;
+}
+
 body {
   font-family: 'Inter', sans-serif;
-  line-height: 1.6;
-  color: #1f2937;
+  line-height: 1.7;
+  color: #2C2420;
+  background-color: #FAF8F4;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Playfair Display', serif;
   font-weight: 600;
+  color: #2C2420;
 }
 
+/* ============================================
+   LOGO-TYPOGRAFIE
+   ============================================ */
 .logo-script {
   font-family: 'Dancing Script', cursive;
   font-weight: 600;
-  color: #4f4135;
+  color: #2C2420;
+  line-height: 1;
 }
 
 .logo-caps {
   font-family: 'Cormorant Garamond', serif;
   font-weight: 500;
-  letter-spacing: 0.2em;
+  letter-spacing: 0.25em;
   text-transform: uppercase;
-  color: #61544a;
+  color: #4e3226;
 }
 
 .logo-subtitle {
   font-family: 'Cormorant Garamond', serif;
   font-weight: 400;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: #8d7968;
+  color: #7a5440;
 }
 
-/* Custom Components */
+/* ============================================
+   BUTTONS – schlicht, elegant, tinte-basiert
+   ============================================ */
 .btn-primary {
-  @apply bg-primary-700 hover:bg-primary-800 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 shadow-md hover:shadow-lg;
+  @apply inline-block font-caps text-sm tracking-widest uppercase
+         bg-primary-900 hover:bg-ink-900 text-cream-100
+         py-3 px-8 border border-primary-900
+         transition-all duration-300
+         focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-2;
+  font-family: 'Cormorant Garamond', serif;
+  letter-spacing: 0.18em;
 }
 
 .btn-secondary {
-  @apply bg-white hover:bg-primary-50 text-primary-700 font-medium py-3 px-6 rounded-lg border border-primary-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 shadow-md hover:shadow-lg;
+  @apply inline-block font-caps text-sm tracking-widest uppercase
+         bg-transparent hover:bg-primary-900 text-primary-900 hover:text-cream-100
+         py-3 px-8 border border-primary-900
+         transition-all duration-300
+         focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-2;
+  font-family: 'Cormorant Garamond', serif;
+  letter-spacing: 0.18em;
 }
 
+.btn-ghost {
+  @apply inline-block font-caps text-sm tracking-widest uppercase
+         bg-transparent hover:bg-cream-200 text-cream-100 hover:text-primary-900
+         py-3 px-8 border border-cream-300
+         transition-all duration-300;
+  font-family: 'Cormorant Garamond', serif;
+  letter-spacing: 0.18em;
+}
+
+/* ============================================
+   CARDS – kein schwerer Schatten, dezente Linie
+   ============================================ */
 .card {
-  @apply bg-white rounded-xl shadow-lg p-6 border border-gray-100;
+  @apply bg-cream-50 rounded-none p-8 border border-primary-200;
+  box-shadow: 0 2px 16px 0 rgba(44, 36, 32, 0.06);
 }
 
+.card-hover {
+  @apply card transition-all duration-300 hover:border-primary-400;
+  &:hover {
+    box-shadow: 0 4px 28px 0 rgba(44, 36, 32, 0.10);
+  }
+}
+
+/* ============================================
+   FORMULARE
+   ============================================ */
 .input-field {
-  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200;
+  @apply w-full px-4 py-3 border border-primary-300 bg-cream-50
+         focus:ring-1 focus:ring-primary-700 focus:border-primary-700
+         transition-colors duration-200 rounded-none;
+  color: #2C2420;
 }
 
 .textarea-field {
-  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors duration-200 resize-y min-h-[120px];
+  @apply w-full px-4 py-3 border border-primary-300 bg-cream-50
+         focus:ring-1 focus:ring-primary-700 focus:border-primary-700
+         transition-colors duration-200 resize-y min-h-[120px] rounded-none;
+  color: #2C2420;
 }
 
-/* Animations */
+/* ============================================
+   ORNAMENTE & TRENNER
+   ============================================ */
+.divider-botanical {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 1.5rem 0;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background-color: #D4C3A6;
+  }
+
+  span {
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 1.25rem;
+    color: #8A7355;
+    letter-spacing: 0.1em;
+  }
+}
+
+.section-title-ornament {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+
+  &::after {
+    content: '— ✦ —';
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 0.875rem;
+    color: #A68D64;
+    letter-spacing: 0.3em;
+  }
+}
+
+/* ============================================
+   ANIMATIONEN
+   ============================================ */
 .fade-in {
-  animation: fadeIn 0.6s ease-in-out;
+  animation: fadeIn 0.8s ease-in-out;
 }
 
 @keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateY(20px);
+    transform: translateY(16px);
   }
   to {
     opacity: 1;
@@ -80,16 +178,16 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .slide-up {
-  animation: slideUp 0.8s ease-out;
+  animation: slideUp 1s ease-out;
 }
 
 @keyframes slideUp {
   from {
     opacity: 0;
-    transform: translateY(40px);
+    transform: translateY(32px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
-}
\ No newline at end of file
+}
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index 6bddbd5..a166faa 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -6,52 +6,79 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        // Warmcreme – der Hintergrundton des Logos
+        cream: {
+          50:  '#FDFCF9',
+          100: '#FAF8F4',
+          200: '#F5F1EA',
+          300: '#EDE5D8',
+          400: '#E2D8C8',
+          500: '#D4C9B5',
+        },
+        // Tinte – der Zeichenton des Logos (warmes Dunkelbraun/Charcoal)
+        ink: {
+          50:  '#f5f1ee',
+          100: '#e8ddd6',
+          200: '#d0bcb0',
+          300: '#b39380',
+          400: '#956d58',
+          500: '#7a5440',
+          600: '#624030',
+          700: '#4e3226',
+          800: '#3a251c',
+          900: '#2C1E16',
+        },
         primary: {
-          50: '#f8f7f4',
-          100: '#f0ede6',
-          200: '#e1dcc9',
-          300: '#cfc5a3',
-          400: '#b8a67d',
-          500: '#a08862',
-          600: '#8a7355',
-          700: '#725e47',
-          800: '#5e4e3d',
-          900: '#4f4135',
+          50:  '#FAF8F4',
+          100: '#F2EDE3',
+          200: '#E5DAC8',
+          300: '#D4C3A6',
+          400: '#BEA880',
+          500: '#A68D64',
+          600: '#8A7355',
+          700: '#6E5740',
+          800: '#503D2E',
+          900: '#2C2420',
         },
         secondary: {
-          50: '#f7f6f4',
-          100: '#efede8',
-          200: '#ddd8d0',
-          300: '#c7beb0',
-          400: '#aea08c',
-          500: '#9a8674',
-          600: '#8d7968',
+          50:  '#F7F5F2',
+          100: '#EFEDE8',
+          200: '#DDD8D0',
+          300: '#C7BEB0',
+          400: '#AEA08C',
+          500: '#9A8674',
+          600: '#8D7968',
           700: '#756457',
-          800: '#61544a',
-          900: '#50463e',
+          800: '#61544A',
+          900: '#50463E',
         },
         accent: {
-          50: '#fdf8f6',
-          100: '#f2e8e5',
-          200: '#eaddd7',
-          300: '#e0cec7',
-          400: '#d2bab0',
-          500: '#bfa094',
-          600: '#a18072',
-          700: '#977669',
-          800: '#846358',
-          900: '#43302b',
+          50:  '#FDF8F6',
+          100: '#F2E8E5',
+          200: '#EAD7D0',
+          300: '#D8BEB4',
+          400: '#C0998E',
+          500: '#A87B6E',
+          600: '#8C6054',
+          700: '#724A40',
+          800: '#5A3830',
+          900: '#3D2520',
         },
       },
       fontFamily: {
-        sans: ['Inter', 'system-ui', 'sans-serif'],
-        serif: ['Playfair Display', 'serif'],
+        sans:   ['Inter', 'system-ui', 'sans-serif'],
+        serif:  ['Playfair Display', 'serif'],
         script: ['Dancing Script', 'cursive'],
-        caps: ['Cormorant Garamond', 'serif'],
+        caps:   ['Cormorant Garamond', 'serif'],
+      },
+      boxShadow: {
+        'botanical': '0 2px 12px 0 rgba(44, 36, 32, 0.08)',
+        'botanical-md': '0 4px 24px 0 rgba(44, 36, 32, 0.10)',
+        'botanical-lg': '0 8px 40px 0 rgba(44, 36, 32, 0.12)',
       },
     },
   },
   plugins: [
     require('@tailwindcss/typography'),
   ],
-}
\ No newline at end of file
+}