From d9a8317014c65aaa7121e649daf78e80abaddb3e Mon Sep 17 00:00:00 2001
From: Emirhan3 <emirsahin159@gmail.com>
Date: Tue, 29 Sep 2026 14:06:27 +0000
Subject: [PATCH] fix: Darstellung von Logo, Schrift und Farben

---
 index.html                                    | 60 +++++++++----------
 src/features/booking/booking-confirmation.css | 32 +++++-----
 src/features/booking/booking.css              | 12 ++--
 src/styles/navigation.css                     | 22 ++++---
 src/styles/packages.css                       | 36 +++++------
 src/styles/styles.css                         | 42 ++++++-------
 6 files changed, 104 insertions(+), 100 deletions(-)

diff --git a/index.html b/index.html
index 1e74bb1..d6bda2a 100644
--- a/index.html
+++ b/index.html
@@ -22,8 +22,8 @@
             :root {
                 --page-bg: #0d0d1a;
                 --page-bg-2: #1a1a2e;
-                --green: #10b981;
-                --green-dark: #059669;
+                --brand: #53d5cd;
+                --brand-hover: #36b8b1;
                 --white: #ffffff;
                 --light: #f8fafc;
                 --muted: #94a3b8;
@@ -48,12 +48,12 @@
                 background:
                     radial-gradient(
                         circle at 12% 0%,
-                        rgba(16, 185, 129, 0.09),
+                        rgba(83, 213, 205, 0.09),
                         transparent 30%
                     ),
                     radial-gradient(
                         circle at 88% 26%,
-                        rgba(16, 185, 129, 0.055),
+                        rgba(83, 213, 205, 0.055),
                         transparent 27%
                     ),
                     linear-gradient(145deg, var(--page-bg), var(--page-bg-2));
@@ -115,7 +115,7 @@
             }
 
             .brand span {
-                color: var(--green);
+                color: var(--brand);
             }
 
             .nav-links {
@@ -138,14 +138,14 @@
 
             .nav-cta {
                 padding: 11px 16px;
-                border: 1px solid rgba(16, 185, 129, 0.42);
+                border: 1px solid rgba(83, 213, 205, 0.42);
                 border-radius: 999px;
                 color: var(--white) !important;
-                background: rgba(16, 185, 129, 0.07);
+                background: rgba(83, 213, 205, 0.07);
             }
 
             .nav-cta:hover {
-                background: rgba(16, 185, 129, 0.14);
+                background: rgba(83, 213, 205, 0.14);
             }
 
             .container {
@@ -155,7 +155,7 @@
 
             .eyebrow {
                 margin-bottom: 18px;
-                color: var(--green);
+                color: var(--brand);
                 font-size: 0.72rem;
                 font-weight: 700;
                 letter-spacing: 0.18em;
@@ -180,7 +180,7 @@
             }
 
             .hero h1 .accent {
-                color: var(--green);
+                color: var(--brand);
             }
 
             .hero-lead {
@@ -220,12 +220,12 @@
 
             .button-primary {
                 color: #06130f;
-                background: var(--green);
-                box-shadow: 0 14px 32px rgba(16, 185, 129, 0.18);
+                background: var(--brand);
+                box-shadow: 0 14px 32px rgba(83, 213, 205, 0.18);
             }
 
             .button-primary:hover {
-                background: #34d399;
+                background: #75e2dc;
             }
 
             .button-secondary {
@@ -235,7 +235,7 @@
             }
 
             .button-secondary:hover {
-                border-color: rgba(16, 185, 129, 0.55);
+                border-color: rgba(83, 213, 205, 0.55);
             }
 
             .hero-card {
@@ -251,7 +251,7 @@
                 background:
                     radial-gradient(
                         circle at 72% 18%,
-                        rgba(16, 185, 129, 0.2),
+                        rgba(83, 213, 205, 0.2),
                         transparent 32%
                     ),
                     linear-gradient(
@@ -269,18 +269,18 @@
                 height: 230px;
                 right: -75px;
                 top: -75px;
-                border: 1px solid rgba(16, 185, 129, 0.24);
+                border: 1px solid rgba(83, 213, 205, 0.24);
                 border-radius: 50%;
                 box-shadow:
-                    0 0 0 34px rgba(16, 185, 129, 0.035),
-                    0 0 0 68px rgba(16, 185, 129, 0.02);
+                    0 0 0 34px rgba(83, 213, 205, 0.035),
+                    0 0 0 68px rgba(83, 213, 205, 0.02);
             }
 
             .hero-card-mark {
                 position: absolute;
                 top: 42px;
                 left: 38px;
-                color: rgba(16, 185, 129, 0.88);
+                color: rgba(83, 213, 205, 0.88);
                 font-size: 4.5rem;
                 line-height: 1;
             }
@@ -342,13 +342,13 @@
 
             .topic:hover {
                 transform: translateY(-4px);
-                border-color: rgba(16, 185, 129, 0.34);
+                border-color: rgba(83, 213, 205, 0.34);
                 background: var(--panel-strong);
             }
 
             .topic-number {
                 margin-bottom: 70px;
-                color: var(--green);
+                color: var(--brand);
                 font-size: 0.75rem;
                 font-weight: 700;
                 letter-spacing: 0.14em;
@@ -407,8 +407,8 @@
                 height: 10px;
                 margin-top: 7px;
                 border-radius: 50%;
-                background: var(--green);
-                box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.08);
+                background: var(--brand);
+                box-shadow: 0 0 0 5px rgba(83, 213, 205, 0.08);
             }
 
             .review-section {
@@ -504,8 +504,8 @@
             input:focus,
             textarea:focus,
             select:focus {
-                border-color: rgba(16, 185, 129, 0.75);
-                box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+                border-color: rgba(83, 213, 205, 0.75);
+                box-shadow: 0 0 0 3px rgba(83, 213, 205, 0.1);
             }
 
             .rating-input {
@@ -533,7 +533,7 @@
             .rating-input label:hover,
             .rating-input label:hover ~ label,
             .rating-input input:checked ~ label {
-                color: var(--green);
+                color: var(--brand);
             }
 
             .consent {
@@ -547,7 +547,7 @@
 
             .consent input {
                 margin-top: 4px;
-                accent-color: var(--green);
+                accent-color: var(--brand);
             }
 
             .review-form .button {
@@ -560,7 +560,7 @@
             .form-status {
                 min-height: 20px;
                 margin-top: 12px;
-                color: var(--green);
+                color: var(--brand);
                 font-size: 0.8rem;
             }
 
@@ -594,7 +594,7 @@
                 flex: 0 0 auto;
                 border-radius: 50%;
                 color: #06130f;
-                background: var(--green);
+                background: var(--brand);
                 font-size: 0.72rem;
                 font-weight: 800;
             }
@@ -613,7 +613,7 @@
             }
 
             .stars {
-                color: var(--green);
+                color: var(--brand);
                 letter-spacing: 0.08em;
                 white-space: nowrap;
             }
diff --git a/src/features/booking/booking-confirmation.css b/src/features/booking/booking-confirmation.css
index 58d7eeb..0f20f8c 100644
--- a/src/features/booking/booking-confirmation.css
+++ b/src/features/booking/booking-confirmation.css
@@ -1,9 +1,10 @@
 .confirmation {
+    --confirmation-accent: #53d5cd;
     margin: 0;
     min-height: 100vh;
     color: #f8fafc;
     background:
-        radial-gradient(ellipse at 5% 20%, #10b98114, transparent 45%),
+        radial-gradient(ellipse at 5% 20%, #53d5cd14, transparent 45%),
         radial-gradient(ellipse at 95% 45%, #1a1a2e, transparent 55%), #0d0d1a;
     font-family: Inter, system-ui, sans-serif;
     line-height: 1.65;
@@ -21,7 +22,7 @@
     text-decoration: none;
 }
 .confirmation a:focus-visible {
-    outline: 3px solid #10b981;
+    outline: 3px solid var(--confirmation-accent);
     outline-offset: 6px;
 }
 .confirmation__header {
@@ -53,10 +54,9 @@
     width: 3rem;
     height: 3rem;
     background: #f8fafc;
-    color: #087452;
+    color: var(--confirmation-accent);
     border-radius: 0.9rem;
     letter-spacing: -0.08em;
-    font-family: Georgia, serif;
     font-size: 1.3rem;
 }
 .confirmation__main {
@@ -81,25 +81,25 @@
     width: 1.6rem;
     height: 1.6rem;
     margin-right: 0.5rem;
-    border: 1px solid #10b98170;
+    border: 1px solid #53d5cd70;
     border-radius: 50%;
-    color: #10b981;
+    color: var(--confirmation-accent);
 }
 .confirmation h1 {
     margin: 1rem 0 1.5rem;
-    font-family: "Playfair Display", Georgia, serif;
+    font-family: inherit;
     font-weight: 500;
     font-size: clamp(2.5rem, 5vw, 4.5rem);
     line-height: 1.12;
     letter-spacing: -0.035em;
 }
 .confirmation h1 em {
-    color: #10b981;
+    color: var(--confirmation-accent);
     font-weight: inherit;
 }
 .confirmation h2 {
     margin: 0.5rem 0 1rem;
-    font-family: "Playfair Display", Georgia, serif;
+    font-family: inherit;
     font-weight: 500;
     font-size: 1.75rem;
     line-height: 1.3;
@@ -114,7 +114,7 @@
 .confirmation__simulation {
     color: #cbd5e1;
     padding-left: 1rem;
-    border-left: 2px solid #10b981;
+    border-left: 2px solid var(--confirmation-accent);
     font-size: 0.85rem;
 }
 .confirmation__grid {
@@ -167,8 +167,8 @@
     margin: 0.2rem 0 1rem;
 }
 .confirmation__mail {
-    border-color: #10b98140;
-    background: #10b98108;
+    border-color: #53d5cd40;
+    background: #53d5cd08;
 }
 .confirmation__mail h2 {
     font-family: inherit;
@@ -193,7 +193,7 @@
     content: "✓";
     position: absolute;
     left: 0;
-    color: #10b981;
+    color: var(--confirmation-accent);
 }
 .confirmation__next {
     margin-top: 1.5rem;
@@ -213,7 +213,7 @@
 }
 .confirmation__steps li::before {
     content: "0" counter(steps);
-    color: #10b981;
+    color: var(--confirmation-accent);
     font-size: 0.8rem;
 }
 .confirmation__steps h3 {
@@ -242,14 +242,14 @@
     font-weight: 600;
 }
 .confirmation__button {
-    background: #10b981;
+    background: var(--confirmation-accent);
     color: #071a14 !important;
 }
 .confirmation__link {
     border: 1px solid #ffffff20;
 }
 .confirmation__button:hover {
-    background: #34d399;
+    background: #6de0d9;
 }
 .confirmation__link:hover {
     background: #ffffff08;
diff --git a/src/features/booking/booking.css b/src/features/booking/booking.css
index 2416eb9..c8f1ca9 100644
--- a/src/features/booking/booking.css
+++ b/src/features/booking/booking.css
@@ -53,8 +53,8 @@
     border-style: dashed;
 }
 .booking__button {
-    color: #f7faf7;
-    background: #176448;
+    color: #061619;
+    background: #53d5cd;
     cursor: pointer;
     max-width: 100%;
 }
@@ -69,7 +69,7 @@
     outline-offset: 4px;
 }
 .booking__button:focus-visible {
-    outline-color: #18352b;
+    outline-color: #53d5cd;
 }
 .booking__errors,
 .booking__field-error {
@@ -160,8 +160,8 @@
     border-radius: 0.75rem;
 }
 .booking__dialog .booking__button {
-    background: #00b6c7;
-    border-color: #00b6c7;
+    background: #53d5cd;
+    border-color: #53d5cd;
     color: #061619;
     border-radius: 0.75rem;
 }
@@ -188,5 +188,5 @@
 .booking__dialog :focus-visible,
 .booking__dialog .booking__errors:focus,
 .booking__dialog .booking__result:focus {
-    outline-color: #00d6e8;
+    outline-color: #53d5cd;
 }
diff --git a/src/styles/navigation.css b/src/styles/navigation.css
index a67d028..e22d54c 100644
--- a/src/styles/navigation.css
+++ b/src/styles/navigation.css
@@ -5,7 +5,7 @@
 :root {
     --nav-bg: #0d0d1a;
     --nav-border: rgba(248, 250, 252, 0.08);
-    --nav-green: #10b981;
+    --nav-accent: #53d5cd;
     --nav-white: #ffffff;
     --nav-light: #f8fafc;
     --nav-muted: #94a3b8;
@@ -33,7 +33,7 @@
 
 .navbar__inner {
     width: 100%;
-    min-height: 76px;
+    min-height: 96px;
     padding: 0 20px;
     display: flex;
     align-items: center;
@@ -52,9 +52,13 @@
 }
 
 .navbar__logo-img {
-    height: 40px;
-    width: auto;
+    width: 72px;
+    height: 72px;
+    padding: 5px;
     display: block;
+    object-fit: contain;
+    background: #fff;
+    border-radius: 16px;
 }
 
 .navbar__brand-text {
@@ -119,7 +123,7 @@
 }
 
 .navbar__link--home:hover {
-    border-color: rgba(16, 185, 129, 0.55);
+    border-color: rgba(83, 213, 205, 0.55);
     color: var(--nav-white);
 }
 
@@ -127,7 +131,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: #22d3ee;
+    color: var(--nav-accent);
 }
 
 .navbar__home-icon svg {
@@ -142,7 +146,7 @@
 
 .navbar a:focus-visible,
 .navbar button:focus-visible {
-    outline: 3px solid var(--nav-green);
+    outline: 3px solid var(--nav-accent);
     outline-offset: 2px;
     border-radius: 4px;
 }
@@ -184,7 +188,7 @@
 
     .navbar__nav {
         position: absolute;
-        top: 76px;
+        top: 96px;
         left: 0;
         right: 0;
         background: var(--nav-bg);
@@ -217,5 +221,5 @@
 
 /* Platz für die fixierte Navbar */
 body {
-    padding-top: 76px;
+    padding-top: 96px;
 }
diff --git a/src/styles/packages.css b/src/styles/packages.css
index dd8c95b..c058b4b 100644
--- a/src/styles/packages.css
+++ b/src/styles/packages.css
@@ -3,8 +3,8 @@
     min-height: 100vh;
     color: #f8fafc;
     background:
-        radial-gradient(circle at 12% 0%, #10b98117, transparent 30%),
-        radial-gradient(circle at 88% 26%, #10b9810e, transparent 27%),
+        radial-gradient(circle at 12% 0%, #53d5cd17, transparent 30%),
+        radial-gradient(circle at 88% 26%, #53d5cd0e, transparent 27%),
         linear-gradient(145deg, #0d0d1a, #1a1a2e);
     font-family: Inter, system-ui, sans-serif;
     line-height: 1.6;
@@ -29,7 +29,7 @@
 }
 .packages-eyebrow,
 .package-type {
-    color: #10b981;
+    color: #53d5cd;
     font-size: 0.75rem;
     font-weight: 600;
     letter-spacing: 0.14em;
@@ -82,9 +82,9 @@
 .package-highlight {
     border-radius: 999px;
     padding: 0.25rem 0.65rem;
-    background: #10b98114;
-    color: #34d399;
-    border: 1px solid #10b98133;
+    background: #53d5cd14;
+    color: #75e2dc;
+    border: 1px solid #53d5cd33;
     font-size: 0.65rem;
     font-weight: 600;
     letter-spacing: 0.05em;
@@ -137,30 +137,30 @@
     cursor: pointer;
 }
 .package-btn:hover {
-    border-color: #10b981;
-    background: #10b98114;
+    border-color: #53d5cd;
+    background: #53d5cd14;
 }
 .package-btn.primary-cta {
-    background: #10b981;
-    border-color: #10b981;
+    background: #53d5cd;
+    border-color: #53d5cd;
     color: #06130f;
 }
 .package-btn.primary-cta:hover {
-    background: #34d399;
+    background: #75e2dc;
 }
 .package-btn:disabled {
     opacity: 0.65;
     cursor: wait;
 }
 .packages-section :focus-visible {
-    outline: 3px solid #10b981;
+    outline: 3px solid #53d5cd;
     outline-offset: 4px;
 }
 .packages-back {
     display: inline-block;
     margin-bottom: 2rem;
     padding-block: 0.5rem;
-    color: #34d399;
+    color: #75e2dc;
     text-decoration: none;
 }
 .detail-heading {
@@ -188,7 +188,7 @@
     margin-block: 0.65rem;
 }
 .detail-list li::marker {
-    color: #10b981;
+    color: #53d5cd;
 }
 .process-step {
     margin-top: 1rem;
@@ -212,7 +212,7 @@
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 600;
     letter-spacing: -0.04em;
-    color: #34d399;
+    color: #75e2dc;
 }
 .price-note,
 .booking-notice {
@@ -250,12 +250,12 @@
     border-color: #94a3b840;
 }
 .packages-section .booking__dialog .booking__button:not(.booking__cancel) {
-    background: #10b981;
-    border-color: #10b981;
+    background: #53d5cd;
+    border-color: #53d5cd;
     color: #06130f;
 }
 .packages-section .booking__dialog :focus-visible {
-    outline-color: #10b981;
+    outline-color: #53d5cd;
 }
 @media (max-width: 60rem) {
     .packages-container {
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 697e903..f4ae5cf 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -333,16 +333,16 @@
         --color-yellow-300: oklch(90.5% 0.182 98.111);
         --color-yellow-500: oklch(79.5% 0.184 86.047);
         --color-yellow-700: oklch(55.4% 0.135 66.442);
-        --color-green-100: oklch(96.2% 0.044 156.743);
-        --color-green-200: oklch(92.5% 0.084 155.995);
-        --color-green-300: oklch(87.1% 0.15 154.449);
-        --color-green-400: oklch(79.2% 0.209 151.711);
-        --color-green-500: oklch(72.3% 0.219 149.579);
-        --color-green-600: oklch(62.7% 0.194 149.214);
-        --color-green-700: oklch(52.7% 0.154 150.069);
-        --color-green-800: oklch(44.8% 0.119 151.328);
-        --color-emerald-100: oklch(95% 0.052 163.051);
-        --color-emerald-400: oklch(76.5% 0.177 163.223);
+        --color-green-100: #e6fbf9;
+        --color-green-200: #cef7f4;
+        --color-green-300: #a5eee9;
+        --color-green-400: #78e2dc;
+        --color-green-500: #53d5cd;
+        --color-green-600: #36b8b1;
+        --color-green-700: #298f8b;
+        --color-green-800: #1e706d;
+        --color-emerald-100: #e6fbf9;
+        --color-emerald-400: #53d5cd;
         --color-teal-500: oklch(70.4% 0.14 182.503);
         --color-teal-600: oklch(60% 0.118 184.704);
         --color-cyan-100: oklch(95.6% 0.045 203.388);
@@ -2483,7 +2483,7 @@
         }
     }
     .border-emerald-400\/20 {
-        border-color: #00d29433;
+        border-color: #53d5cd33;
     }
     @supports (color: color-mix(in lab, red, red)) {
         .border-emerald-400\/20 {
@@ -2495,7 +2495,7 @@
         }
     }
     .border-emerald-400\/30 {
-        border-color: #00d2944d;
+        border-color: #53d5cd4d;
     }
     @supports (color: color-mix(in lab, red, red)) {
         .border-emerald-400\/30 {
@@ -2540,7 +2540,7 @@
         border-color: var(--color-green-500);
     }
     .border-green-500\/20 {
-        border-color: #00c75833;
+        border-color: #53d5cd33;
     }
     @supports (color: color-mix(in lab, red, red)) {
         .border-green-500\/20 {
@@ -2552,7 +2552,7 @@
         }
     }
     .border-green-500\/30 {
-        border-color: #00c7584d;
+        border-color: #53d5cd4d;
     }
     @supports (color: color-mix(in lab, red, red)) {
         .border-green-500\/30 {
@@ -3109,7 +3109,7 @@
         }
     }
     .bg-emerald-400\/10 {
-        background-color: #00d2941a;
+        background-color: #53d5cd1a;
     }
     @supports (color: color-mix(in lab, red, red)) {
         .bg-emerald-400\/10 {
@@ -3164,7 +3164,7 @@
         background-color: var(--color-green-100);
     }
     .bg-green-500\/10 {
-        background-color: #00c7581a;
+        background-color: #53d5cd1a;
     }
     @supports (color: color-mix(in lab, red, red)) {
         .bg-green-500\/10 {
@@ -3176,7 +3176,7 @@
         }
     }
     .bg-green-500\/20 {
-        background-color: #00c75833;
+        background-color: #53d5cd33;
     }
     @supports (color: color-mix(in lab, red, red)) {
         .bg-green-500\/20 {
@@ -8681,8 +8681,8 @@
     --ink-strong: oklch(20% 0.03 220);
     --surface-elevated: oklch(18% 0.026 221);
     --surface-soft: oklch(23% 0.028 219);
-    --accent-strong: oklch(70% 0.12 205);
-    --accent-muted: oklch(58% 0.09 205);
+    --accent-strong: #53d5cd;
+    --accent-muted: #36b8b1;
     --accent-warm: oklch(84% 0.16 87);
     --background: oklch(13% 0.022 223);
     --foreground: oklch(96% 0.008 210);
@@ -8690,7 +8690,7 @@
     --card-foreground: oklch(95% 0.008 210);
     --popover: oklch(17% 0.024 221);
     --popover-foreground: oklch(95% 0.008 210);
-    --primary: oklch(70% 0.12 205);
+    --primary: #53d5cd;
     --primary-foreground: oklch(18% 0.02 220);
     --secondary: oklch(24% 0.026 220);
     --secondary-foreground: oklch(90% 0.01 210);
@@ -8710,7 +8710,7 @@
     --chart-5: oklch(63% 0.09 177);
     --sidebar: oklch(15% 0.02 221);
     --sidebar-foreground: oklch(95% 0.008 210);
-    --sidebar-primary: oklch(70% 0.12 205);
+    --sidebar-primary: #53d5cd;
     --sidebar-primary-foreground: oklch(18% 0.02 220);
     --sidebar-accent: oklch(23% 0.026 219);
     --sidebar-accent-foreground: oklch(95% 0.008 210);