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);