:root {
--color-bg: #050505;
--color-bg-light: #111111;
--color-bg-lighter: #1a1a1a;
--color-bg-hover: #1c1c1c;
--color-bg-highlight-start: #161616;
--color-bg-highlight-end: #111111;
--color-bg-modal: #111111;
--color-bg-footer: #030303;
--color-gold: #D4AF37;
--color-gold-hover: #e8c658;
--color-pink: #E01A4F;
--color-pink-hover: #f03565;
--color-text: #fdfdfd;
--color-text-muted: #aaaaaa;
--color-heading: #ffffff;
--color-btn-text: #050505;
--color-btn-hover: #ffffff;
--color-border: rgba(255, 255, 255, 0.05);
--color-border-light: rgba(255, 255, 255, 0.1);
--color-border-strong: rgba(255, 255, 255, 0.2);
--color-nav-bg: rgba(5, 5, 5, 0.85);
--color-hero-overlay: rgba(5, 5, 5, 1);
--color-modal-overlay: rgba(0, 0, 0, 0.8);
--color-input-bg: rgba(255, 255, 255, 0.03);
--color-input-focus: rgba(255, 255, 255, 0.05);
--color-star: #fff;
--color-cloud: #ffffff;
--font-heading: Georgia, 'Times New Roman', Times, serif;
--font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
body.light-theme {
--color-bg: #f8f9fa;
--color-bg-light: #ffffff;
--color-bg-lighter: #ffffff;
--color-bg-hover: #f1f3f5;
--color-bg-highlight-start: #ffffff;
--color-bg-highlight-end: #f8f9fa;
--color-bg-modal: #ffffff;
--color-bg-footer: #eef0f2;
--color-text: #1a1a1a;
--color-text-muted: #555555;
--color-heading: #1a1a1a;
--color-btn-text: #ffffff;
--color-btn-hover: #ffffff;
--color-border: rgba(0, 0, 0, 0.06);
--color-border-light: rgba(0, 0, 0, 0.1);
--color-border-strong: rgba(0, 0, 0, 0.2);
--color-nav-bg: rgba(255, 255, 255, 0.9);
--color-hero-overlay: rgba(248, 249, 250, 1);
--color-modal-overlay: rgba(255, 255, 255, 0.85);
--color-input-bg: #f8f9fa;
--color-input-focus: #ffffff;
--color-star: #D4AF37;
--color-cloud: #000000;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
width: 100%;
}
body {
font-family: var(--font-body);
background-color: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
overflow-x: hidden;
width: 100%;
transition: background-color 0.4s ease, color 0.4s ease;
}
.fixed-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('images/bg.png') center/cover no-repeat;
z-index: -5;
opacity: 0.5;
/* Starts visible */
transition: opacity 0.1s linear;
}
.fixed-bg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.35);
/* very darkened overlay */
z-index: -4;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Typography */
h1,
h2,
h3,
h4 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
}
h2 {
font-size: 2.8rem;
margin-bottom: 1rem;
color: var(--color-gold);
}
/* Utilities */
.mt-2 {
margin-top: 1rem;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2.5rem;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 2px;
transition: var(--transition);
cursor: pointer;
border: none;
position: relative;
overflow: hidden;
z-index: 1;
border-radius: 2px;
}
.btn-primary {
background-color: var(--color-gold);
color: var(--color-btn-text);
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: var(--color-pink);
transition: var(--transition);
z-index: -1;
}
.btn-primary:hover::before {
left: 0;
}
.btn-primary:hover {
color: var(--color-btn-hover);
box-shadow: 0 10px 20px rgba(224, 26, 79, 0.3);
}
.btn-secondary {
background-color: transparent;
color: var(--color-text);
border: 1px solid var(--color-border-strong);
}
.btn-secondary:hover {
border-color: var(--color-gold);
color: var(--color-gold);
background-color: rgba(212, 175, 55, 0.05);
}
.btn-whatsapp {
background-color: #25D366;
color: #ffffff;
border: none;
display: inline-flex;
gap: 8px;
}
.btn-whatsapp:hover {
background-color: #128C7E;
color: #ffffff;
box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}
.btn-phone-small {
background-color: transparent;
color: var(--color-gold);
border: 1px solid var(--color-gold);
border-radius: 50px;
padding: 0.5rem 1rem;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
}
.btn-phone-small:hover {
background-color: var(--color-gold);
color: #000;
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}
.btn-block {
display: block;
width: 100%;
text-align: center;
}
/* Navbar */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1.5rem 0;
background: transparent;
z-index: 1000;
transition: var(--transition);
}
.navbar.scrolled {
padding: 0.8rem 0;
background: var(--color-nav-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-border);
}
.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-actions {
display: flex;
align-items: center;
gap: 1.5rem;
}
.theme-toggle {
background: transparent;
border: none;
color: var(--color-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
transition: var(--transition);
border: 1px solid var(--color-border-light);
}
.theme-toggle:hover {
color: var(--color-gold);
border-color: var(--color-gold);
background: rgba(212, 175, 55, 0.05);
}
.moon-icon {
display: none;
}
body.light-theme .sun-icon {
display: none;
}
body.light-theme .moon-icon {
display: block;
}
.logo {
transform: translateX(-145px);
}
.logo img {
height: 150px;
width: auto;
object-fit: contain;
transition: height 0.4s ease, filter 0.3s;
}
.navbar.scrolled .logo img {
height: 75px;
}
body.light-theme .logo img {
filter: invert(1) hue-rotate(180deg);
}
.nav-links {
display: flex;
gap: 2.5rem;
}
.nav-links a {
color: var(--color-text);
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
padding: 0.5rem 0;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-pink);
transition: var(--transition);
}
.nav-links a:hover {
color: var(--color-gold);
}
.nav-links a:hover::after {
width: 100%;
}
/* Custom Inputs */
.hidden-input {
position: absolute;
opacity: 0;
pointer-events: none;
height: 0;
width: 0;
}
.custom-select-container,
.custom-datepicker-container {
position: relative;
}
.custom-select-display,
.custom-datepicker-display {
width: 100%;
padding: 0.8rem 1rem;
background-color: var(--color-input-bg);
border: 1px solid var(--color-border-light);
border-radius: 4px;
color: var(--color-text);
font-size: 1rem;
cursor: pointer;
transition: var(--transition);
display: flex;
justify-content: space-between;
align-items: center;
}
.custom-select-display:hover,
.custom-datepicker-display:hover {
border-color: var(--color-gold);
}
.select-arrow {
transition: transform 0.3s;
}
.custom-select-container.open .select-arrow {
transform: rotate(180deg);
}
.custom-select-options {
position: absolute;
top: calc(100% + 5px);
left: 0;
width: 100%;
background-color: var(--color-bg) !important;
backdrop-filter: blur(20px);
border: 1px solid var(--color-gold);
border-radius: 8px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9);
z-index: 9999;
max-height: 200px;
overflow-y: auto;
display: none;
flex-direction: column;
}
.custom-select-container.open .custom-select-options {
display: flex;
animation: fadeIn 0.2s ease-out;
}
.custom-option {
padding: 0.8rem 1rem;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.custom-option:hover {
background-color: var(--color-gold);
color: var(--color-bg);
}
/* Calendar Popup */
.calendar-popup {
position: absolute;
top: calc(100% + 5px);
left: 0;
width: 300px;
background-color: var(--color-bg) !important;
backdrop-filter: blur(20px);
border: 1px solid var(--color-gold);
border-radius: 8px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9);
z-index: 9999;
display: none;
padding: 1rem;
flex-direction: column;
}
.custom-datepicker-container.open .calendar-popup {
display: flex;
animation: fadeIn 0.2s ease-out;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
font-weight: 600;
}
.calendar-prev,
.calendar-next {
background: none;
border: none;
color: var(--color-text);
font-size: 1.2rem;
cursor: pointer;
padding: 0.2rem 0.5rem;
border-radius: 4px;
transition: var(--transition);
}
.calendar-prev:hover,
.calendar-next:hover {
background-color: var(--color-gold);
color: var(--color-bg);
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-weight: bold;
font-size: 0.8rem;
color: var(--color-pink);
margin-bottom: 0.5rem;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.calendar-day {
padding: 0.5rem 0;
text-align: center;
cursor: pointer;
border-radius: 4px;
font-size: 0.9rem;
transition: var(--transition);
}
.calendar-day:hover:not(.empty):not(.disabled) {
background-color: var(--color-gold);
color: var(--color-bg);
}
.calendar-day.selected {
background-color: var(--color-pink);
color: white;
font-weight: bold;
}
.calendar-day.empty {
cursor: default;
}
.calendar-day.disabled {
color: var(--color-border-light);
cursor: not-allowed;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
padding-top: 80px;
overflow: visible;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* removed radial gradient to let fixed-bg show through */
background: transparent;
z-index: -2;
transition: background 0.4s ease;
}
.hero-bg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(100, 100, 100, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(100, 100, 100, 0.05) 1px, transparent 1px);
background-size: 50px 50px;
z-index: -1;
opacity: 0.8;
}
/* Stars */
.stars-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
pointer-events: none;
}
.star {
position: absolute;
background-color: var(--color-star);
border-radius: 50%;
opacity: 0;
box-shadow: 0 0 10px 2px rgba(212, 175, 55, 0.3);
animation: twinkle linear infinite;
transition: background-color 0.4s ease;
}
.star-1 {
width: 3px;
height: 3px;
top: 15%;
left: 20%;
animation-duration: 4s;
animation-delay: 0s;
}
.star-2 {
width: 2px;
height: 2px;
top: 25%;
left: 60%;
animation-duration: 3s;
animation-delay: 1s;
}
.star-3 {
width: 4px;
height: 4px;
top: 10%;
left: 80%;
animation-duration: 5s;
animation-delay: 2s;
}
.star-4 {
width: 2px;
height: 2px;
top: 40%;
left: 10%;
animation-duration: 3.5s;
animation-delay: 0.5s;
}
.star-5 {
width: 3px;
height: 3px;
top: 50%;
left: 75%;
animation-duration: 4.5s;
animation-delay: 1.5s;
}
.star-6 {
width: 2px;
height: 2px;
top: 65%;
left: 30%;
animation-duration: 3s;
animation-delay: 2.5s;
}
.star-7 {
width: 4px;
height: 4px;
top: 80%;
left: 85%;
animation-duration: 5s;
animation-delay: 0.2s;
}
.star-8 {
width: 3px;
height: 3px;
top: 70%;
left: 15%;
animation-duration: 4s;
animation-delay: 1.2s;
}
@keyframes twinkle {
0%,
100% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 0.8;
transform: scale(1.2);
box-shadow: 0 0 15px 3px rgba(212, 175, 55, 0.6);
}
}
/* Clouds Animation */
.clouds-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
pointer-events: none;
opacity: 0.12;
}
.cloud {
position: absolute;
background-color: var(--color-cloud);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
will-change: transform;
transition: background-color 0.4s ease;
}
.cloud-1 {
width: 250px;
height: 150px;
top: 10%;
left: -250px;
animation: moveClouds 50s linear infinite;
}
.cloud-2 {
width: 350px;
height: 200px;
top: 35%;
left: -350px;
animation: moveClouds 75s linear infinite 15s;
}
.cloud-3 {
width: 180px;
height: 100px;
top: 60%;
left: -180px;
animation: moveClouds 40s linear infinite 5s;
}
.cloud-4 {
width: 400px;
height: 220px;
top: 5%;
left: -400px;
animation: moveClouds 65s linear infinite 30s;
}
.cloud-5 {
width: 200px;
height: 120px;
top: 50%;
left: -200px;
animation: moveClouds 45s linear infinite 25s;
}
.cloud-6 {
width: 300px;
height: 180px;
top: 75%;
left: -300px;
animation: moveClouds 55s linear infinite 40s;
}
.cloud-7 {
width: 150px;
height: 80px;
top: 20%;
left: -150px;
animation: moveClouds 35s linear infinite 10s;
}
.cloud-8 {
width: 280px;
height: 160px;
top: 80%;
left: -280px;
animation: moveClouds 60s linear infinite 20s;
}
.cloud-9 {
width: 120px;
height: 60px;
top: 15%;
left: -120px;
animation: moveClouds 30s linear infinite 2s;
}
.cloud-10 {
width: 320px;
height: 170px;
top: 45%;
left: -320px;
animation: moveClouds 70s linear infinite 50s;
}
@keyframes moveClouds {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(100vw + 600px));
}
}
.cursor-follower {
position: absolute;
top: 0;
left: 0;
margin-top: -20px;
margin-left: -20px;
pointer-events: none;
z-index: -1;
color: var(--color-gold);
opacity: 0;
transition: opacity 0.3s ease;
filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}
.hero-content {
max-width: 1100px;
position: relative;
z-index: 10;
text-align: center;
margin: 0 auto;
}
.hero-badge {
display: inline-block;
padding: 0.4rem 1rem;
background: rgba(212, 175, 55, 0.1);
border: 1px solid rgba(212, 175, 55, 0.3);
color: var(--color-gold);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 50px;
margin-bottom: 2rem;
}
.hero-title {
/* Der SEO-H1 ist deutlich länger als der frühere Claim —
kleinere, responsive Größe, damit er nicht in die Navbar läuft. */
font-size: clamp(2.2rem, 3.4vw, 2.8rem);
margin-bottom: 1.5rem;
letter-spacing: -1px;
overflow: visible;
text-wrap: balance;
}
.hero-title .hero-highlight {
color: var(--color-gold);
font-style: italic;
position: relative;
display: inline-block;
padding-right: 0.15em;
}
.hero-title .hero-highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 3px;
background: var(--color-pink);
opacity: 0.5;
z-index: -1;
}
.hero-title .hero-business {
color: var(--color-pink);
font-style: normal;
}
.hero-title .hero-business::after {
display: none;
}
/* Success Message Styles */
.success-message {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem 1rem;
animation: scaleUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.success-message.active {
display: flex;
}
.checkmark-circle {
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
}
.checkmark {
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
stroke-width: 2;
stroke: var(--color-gold);
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px var(--color-gold);
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
.checkmark-circle-line {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: var(--color-gold);
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
stroke: var(--color-bg);
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 40px var(--color-gold);
}
}
@keyframes scaleUp {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.hero-subtitle {
font-size: 1.1rem;
color: var(--color-text-muted);
margin: 0 auto 1.5rem auto;
max-width: 600px;
font-weight: 300;
}
.hero-actions {
display: flex;
gap: 1.5rem;
}
.hero-actions-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-top: 1.5rem;
}
.hero-main-buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: min(100%, 720px);
gap: 1rem;
justify-content: center;
}
.hero-contact-buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0.6;
}
.scroll-indicator span {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.mouse {
width: 26px;
height: 40px;
border: 2px solid var(--color-text);
border-radius: 15px;
position: relative;
}
.wheel {
width: 4px;
height: 8px;
background: var(--color-gold);
border-radius: 2px;
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
animation: scroll 1.5s infinite;
}
@keyframes scroll {
0% {
top: 6px;
opacity: 1;
}
100% {
top: 20px;
opacity: 0;
}
}
/* Services */
.services {
padding: 8rem 0;
background-color: rgba(17, 17, 17, 0.85);
/* semi-transparent so bg shows through */
position: relative;
transition: background-color 0.4s ease;
backdrop-filter: blur(5px);
}
.section-header {
text-align: center;
margin-bottom: 5rem;
}
.section-header p {
color: var(--color-text-muted);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: 2.5rem;
}
.service-card {
background-color: var(--color-bg-lighter);
padding: 3.5rem 2.5rem;
border: 1px solid var(--color-border);
transition: var(--transition);
position: relative;
overflow: hidden;
z-index: 1;
}
.service-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(224, 26, 79, 0.05) 0%, transparent 70%);
z-index: -1;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--color-gold), var(--color-pink));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
background-color: var(--color-bg-hover);
}
.highlight-card {
background: linear-gradient(160deg, var(--color-bg-highlight-start) 0%, var(--color-bg-highlight-end) 100%);
border-color: rgba(212, 175, 55, 0.1);
}
.highlight-card::after {
background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
}
.service-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1.5rem;
border: 1px solid rgba(212, 175, 55, 0.2);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.service-card:hover .service-image {
transform: scale(1.03);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
.service-card h3 {
font-size: 1.6rem;
margin-bottom: 1.2rem;
color: var(--color-heading);
}
.service-card p {
color: var(--color-text-muted);
}
/* Why Us Section - Bento Box Style */
.why-us {
padding: 8rem 0;
position: relative;
background-color: transparent;
z-index: 1;
}
.why-us .section-header {
margin-bottom: 4rem;
text-align: left;
}
.why-us .section-header h2 {
color: var(--color-heading);
font-size: 3.5rem;
position: relative;
display: inline-block;
}
.why-us .section-header h2::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 80px;
height: 4px;
background: var(--color-pink);
border-radius: 2px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
/* Base Card Styling */
.feature-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 24px;
padding: 2.5rem;
text-align: left;
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Glassmorphism pink hover effect */
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at top right, rgba(224, 26, 79, 0.15), transparent 70%);
opacity: 0;
transition: opacity 0.5s ease;
z-index: 0;
pointer-events: none;
}
.feature-card:hover {
transform: translateY(-5px);
border-color: rgba(224, 26, 79, 0.4);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 25px rgba(224, 26, 79, 0.15);
background: rgba(255, 255, 255, 0.03);
}
.feature-card:hover::before {
opacity: 1;
}
.feature-card>* {
position: relative;
z-index: 1;
}
/* Icon styling */
.feature-icon {
width: 65px;
height: 65px;
background: linear-gradient(135deg, var(--color-gold), rgba(212, 175, 55, 0.6));
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
color: var(--color-bg);
box-shadow: 0 10px 20px rgba(212, 175, 55, 0.25);
transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.feature-card:hover .feature-icon {
transform: rotate(8deg) scale(1.1);
border-radius: 50%;
background: linear-gradient(135deg, var(--color-pink), rgba(224, 26, 79, 0.6));
box-shadow: 0 10px 20px rgba(224, 26, 79, 0.3);
color: #fff;
}
/* Highlight Card Style */
.feature-card.highlight-text h3 {
color: var(--color-pink);
}
.feature-card.highlight-text .feature-icon {
background: linear-gradient(135deg, var(--color-pink), rgba(224, 26, 79, 0.6));
box-shadow: 0 10px 20px rgba(224, 26, 79, 0.25);
color: #fff;
}
.feature-card.highlight-text:hover h3 {
color: var(--color-gold);
}
.feature-card.highlight-text:hover .feature-icon {
background: linear-gradient(135deg, var(--color-gold), rgba(212, 175, 55, 0.6));
box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
color: var(--color-bg);
}
/* Typography */
.feature-card h3 {
font-size: 1.4rem;
margin-bottom: 1rem;
color: var(--color-heading);
transition: color 0.3s ease;
font-weight: 700;
}
.feature-card:hover h3 {
color: var(--color-pink);
}
.feature-card p {
color: var(--color-text-muted);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 0;
}
/* Bento Box Layout Configuration */
@media (min-width: 1025px) {
.feature-card:nth-child(1),
.feature-card:nth-child(6) {
grid-column: span 2;
}
/* Wide cards layout (Icon left, Title/Text stacked right) */
.feature-card:nth-child(1),
.feature-card:nth-child(6) {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 2.5rem;
row-gap: 0.5rem;
align-items: center;
align-content: center;
}
.feature-card:nth-child(1) .feature-icon,
.feature-card:nth-child(6) .feature-icon {
grid-column: 1;
grid-row: 1 / span 2;
margin-bottom: 0;
width: 80px;
height: 80px;
}
.feature-card:nth-child(1) h3,
.feature-card:nth-child(6) h3 {
grid-column: 2;
grid-row: 1;
font-size: 1.8rem;
margin-bottom: 0;
align-self: end;
}
.feature-card:nth-child(1) p,
.feature-card:nth-child(6) p {
grid-column: 2;
grid-row: 2;
align-self: start;
}
}
/* Tablet */
@media (max-width: 1024px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.why-us .section-header {
text-align: center;
}
.why-us .section-header h2::after {
left: 50%;
transform: translateX(-50%);
}
}
/* Mobile */
@media (max-width: 600px) {
.features-grid {
grid-template-columns: 1fr;
}
.feature-card {
padding: 2rem;
}
}
/* CTA Section */
.cta-section {
padding: 6rem 0;
background: linear-gradient(var(--color-nav-bg), var(--color-nav-bg)), url('data:image/svg+xml;utf8,');
}
.cta-box {
background: var(--color-nav-bg);
border: 1px solid var(--color-border);
backdrop-filter: blur(10px);
padding: 4rem;
text-align: center;
border-radius: 4px;
}
.cta-box h2 {
font-size: 2.2rem;
color: var(--color-heading);
}
.cta-box p {
color: var(--color-text-muted);
margin-bottom: 2.5rem;
font-size: 1.1rem;
}
/* Modal Popup */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-modal-overlay);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: var(--transition);
/* Belt and braces next to visibility:hidden — buttons inside inherit
`transition: all`, which can leave them hit-testable after the modal
closes and makes them eat taps in the middle of the page. */
pointer-events: none;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.modal-container {
background: var(--color-bg-modal);
border: 1px solid var(--color-border-light);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(224, 26, 79, 0.1);
width: 100%;
max-width: 600px;
padding: 3rem;
position: relative;
transform: translateY(30px) scale(0.95);
transition: var(--transition);
border-top: 3px solid var(--color-gold);
}
.modal-overlay.active .modal-container {
transform: translateY(0) scale(1);
}
.close-modal {
position: absolute;
top: 1rem;
right: 1.5rem;
background: transparent;
border: none;
color: var(--color-text-muted);
font-size: 2rem;
cursor: pointer;
transition: color 0.2s;
}
.close-modal:hover {
color: var(--color-pink);
}
.modal-header {
text-align: center;
margin-bottom: 2.5rem;
}
.modal-header h2 {
font-size: 2rem;
margin-bottom: 0.5rem;
color: var(--color-heading);
}
.modal-header p {
color: var(--color-text-muted);
}
/* Form Steps */
.form-step {
display: none;
animation: fadeIn 0.4s ease forwards;
}
.form-step.active {
display: block;
}
.form-actions {
display: flex;
justify-content: space-between;
gap: 1rem;
}
/* Step Indicator */
.step-indicator {
display: flex;
align-items: center;
justify-content: center;
margin: 1.5rem 0;
gap: 0.5rem;
}
.step-dot {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--color-input-bg);
border: 1px solid var(--color-border-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: bold;
color: var(--color-text-muted);
transition: var(--transition);
}
.step-dot::after {
content: attr(data-step);
}
.step-dot.active {
background-color: var(--color-gold);
color: var(--color-bg);
border-color: var(--color-gold);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}
.step-line {
height: 2px;
width: 30px;
background-color: var(--color-border-light);
transition: var(--transition);
}
.step-line.active {
background-color: var(--color-gold);
}
/* Car Transition Overlay */
.car-transition {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 320px;
height: auto;
object-fit: contain;
z-index: 2500;
pointer-events: none;
filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
}
.car-transition.off-left {
left: -400px;
transition: none !important;
}
.car-transition.parked-left {
left: calc(50vw - 610px);
transition: left 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 1300px) {
.car-transition.parked-left {
left: calc(50vw - 480px);
}
}
@media (max-width: 900px) {
.car-transition.parked-left {
left: -400px;
}
}
@media (max-width: 600px) {
.car-transition.parked-left {
left: -400px;
}
}
.car-transition.driving-across {
left: 100vw;
transition: left 0.9s cubic-bezier(0.5, 0, 0.2, 1);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.booking-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 1px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem;
background-color: var(--color-input-bg);
border: 1px solid var(--color-border-light);
color: var(--color-text);
font-family: var(--font-body);
font-size: 1rem;
transition: var(--transition);
resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-gold);
background-color: var(--color-input-focus);
}
.spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s linear infinite;
margin-right: 8px;
vertical-align: middle;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Footer */
.footer {
background-color: var(--color-bg-footer);
padding: 5rem 0 2rem;
border-top: 1px solid var(--color-border);
transition: background-color 0.4s ease;
backdrop-filter: blur(5px);
}
.footer-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 3rem;
margin-bottom: 4rem;
}
.footer-logo {
height: 350px;
margin-bottom: 1.5rem;
transition: filter 0.3s;
}
body.light-theme .footer-logo {
filter: invert(1) hue-rotate(180deg);
}
.footer-brand p {
color: var(--color-text-muted);
max-width: 350px;
}
.footer-links h4 {
color: var(--color-heading);
margin-bottom: 1.5rem;
font-size: 1.1rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.footer-buttons {
display: flex;
gap: 1rem;
}
.btn-footer {
display: inline-block;
padding: 0.6rem 1.5rem;
background-color: transparent;
color: var(--color-text-muted);
border: 1px solid var(--color-border-light);
text-decoration: none;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--transition);
}
.btn-footer:hover {
border-color: var(--color-pink);
color: var(--color-pink);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid var(--color-border);
color: var(--color-text-muted);
font-size: 0.9rem;
}
/* ======================== */
/* Contact Popup */
/* ======================== */
.contact-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: background 0.5s ease, opacity 0.4s ease, visibility 0.4s ease;
/* Same guard as .modal-overlay: never catch taps while closed. */
pointer-events: none;
}
.contact-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Expanding rings animation */
.contact-ring {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
border: 2px solid var(--color-gold);
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
}
.contact-overlay.active .contact-ring-1 {
animation: ringExpand 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}
.contact-overlay.active .contact-ring-2 {
animation: ringExpand 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
border-color: var(--color-pink);
}
.contact-overlay.active .contact-ring-3 {
animation: ringExpand 1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
border-color: var(--color-gold);
border-width: 1px;
}
@keyframes ringExpand {
0% {
width: 0;
height: 0;
opacity: 0.8;
border-width: 3px;
}
70% {
opacity: 0.3;
}
100% {
width: 200vmax;
height: 200vmax;
opacity: 0;
border-width: 1px;
}
}
/* Popup card */
.contact-popup {
position: relative;
background: var(--color-bg-modal);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 16px;
padding: 2.5rem 2rem;
width: 90%;
max-width: 420px;
text-align: center;
transform: scale(0) rotate(-10deg);
opacity: 0;
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
opacity 0.4s ease 0.2s;
box-shadow:
0 0 60px rgba(212, 175, 55, 0.15),
0 0 120px rgba(224, 26, 79, 0.08),
0 25px 50px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.contact-popup::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 18px;
background: linear-gradient(135deg, var(--color-gold), var(--color-pink), var(--color-gold), var(--color-pink));
background-size: 300% 300%;
z-index: -1;
opacity: 0;
transition: opacity 0.5s ease 0.5s;
animation: borderGlow 3s ease infinite;
}
.contact-overlay.active .contact-popup::before {
opacity: 1;
}
.contact-popup::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
background: var(--color-bg-modal);
border-radius: 14px;
z-index: -1;
}
@keyframes borderGlow {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.contact-overlay.active .contact-popup {
transform: scale(1) rotate(0deg);
opacity: 1;
}
/* Closing animation */
.contact-overlay.closing .contact-popup {
transform: scale(0.8) rotate(5deg);
opacity: 0;
transition: transform 0.35s cubic-bezier(0.55, 0, 1, 0.45),
opacity 0.3s ease;
}
.contact-overlay.closing {
opacity: 0;
transition: opacity 0.4s ease 0.1s, visibility 0.4s ease 0.1s;
}
/* Close button */
.contact-close {
position: absolute;
top: 0.8rem;
right: 1rem;
background: transparent;
border: none;
color: var(--color-text-muted);
font-size: 2rem;
cursor: pointer;
transition: color 0.2s, transform 0.3s;
z-index: 2;
line-height: 1;
}
.contact-close:hover {
color: var(--color-pink);
transform: rotate(90deg);
}
/* Icon burst animation */
.contact-icon-burst {
width: 70px;
height: 70px;
margin: 0 auto 1.2rem;
border-radius: 50%;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(224, 26, 79, 0.1));
border: 1px solid rgba(212, 175, 55, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gold);
transform: scale(0);
opacity: 0;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s,
opacity 0.3s ease 0.4s;
}
.contact-overlay.active .contact-icon-burst {
transform: scale(1);
opacity: 1;
animation: iconPulse 2s ease-in-out 1s infinite;
}
@keyframes iconPulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.3);
}
50% {
box-shadow: 0 0 0 12px rgba(212, 175, 55, 0);
}
}
.contact-title {
font-family: var(--font-heading);
font-size: 1.6rem;
color: var(--color-gold);
margin-bottom: 1.8rem;
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;
}
.contact-overlay.active .contact-title {
opacity: 1;
transform: translateY(0);
}
/* Contact items - staggered entrance */
.contact-items {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.2rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--color-border-light);
border-radius: 10px;
opacity: 0;
transform: translateX(-30px);
transition: opacity 0.4s ease var(--delay, 0.15s),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0.15s),
background 0.3s ease,
border-color 0.3s ease;
}
.contact-overlay.active .contact-item {
opacity: 1;
transform: translateX(0);
}
.contact-item:hover {
background: rgba(212, 175, 55, 0.06);
border-color: rgba(212, 175, 55, 0.3);
}
.contact-item-icon {
width: 42px;
height: 42px;
min-width: 42px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(224, 26, 79, 0.08));
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gold);
}
.contact-item-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
}
.contact-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--color-text-muted);
font-weight: 600;
}
.contact-value {
color: var(--color-text);
font-size: 1.05rem;
font-weight: 500;
text-decoration: none;
transition: color 0.3s;
}
.contact-value:hover {
color: var(--color-gold);
}
/* CTA Button */
.contact-item-cta {
border: none;
background: none;
padding: 0;
margin-top: 0.5rem;
}
.contact-item-cta:hover {
background: none;
border-color: transparent;
}
.contact-msg-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, #25D366, #128C7E);
color: #ffffff;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1.5px;
border-radius: 10px;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
.contact-msg-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
transition: left 0.6s ease;
}
.contact-msg-btn:hover::before {
left: 100%;
}
.contact-msg-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}
/* Responsive */
@media (max-width: 768px) {
.container {
padding: 0 1.5rem;
}
.nav-links {
display: none;
}
.nav-actions .nav-btn {
display: none;
}
/* Logo: Remove offset, reduce size */
.logo {
transform: translateX(0);
}
.logo img {
height: 80px;
}
.navbar.scrolled .logo img {
height: 50px;
}
.navbar {
padding: 1rem 0;
}
.navbar.scrolled {
padding: 0.5rem 0;
}
/* Hero adjustments */
.hero {
padding-top: 60px;
}
.hero-title {
font-size: 3.2rem;
justify-content: center;
}
.hero-subtitle {
margin: 0 auto 2rem auto;
}
.hero-actions-container {
margin-top: 1.5rem;
gap: 1.2rem;
}
.hero-actions {
flex-direction: column;
width: 100%;
}
.hero-actions .btn {
width: 100%;
}
h2 {
font-size: 2.2rem;
}
.btn {
padding: 0.85rem 1.8rem;
font-size: 0.85rem;
letter-spacing: 1.5px;
}
/* Form */
.form-row {
grid-template-columns: 1fr;
}
/* Modal: Prevent overflow */
.modal-container {
padding: 1.5rem;
margin: 1rem;
width: auto;
max-height: 90vh;
max-height: 90dvh;
overflow-y: auto;
}
.modal-header {
margin-bottom: 1.5rem;
}
.modal-header h2 {
font-size: 1.6rem;
}
/* Services */
.services {
padding: 5rem 0;
}
.section-header {
margin-bottom: 3rem;
}
.services-grid {
grid-template-columns: 1fr;
}
.service-card {
padding: 2.5rem 1.8rem;
}
/* CTA */
.cta-section {
padding: 4rem 0;
}
.cta-box {
padding: 2.5rem 1.5rem;
}
.cta-box h2 {
font-size: 1.8rem;
}
/* Footer */
.footer {
padding: 3rem 0 1.5rem;
}
.footer-content {
flex-direction: column;
gap: 2rem;
margin-bottom: 2rem;
}
.footer-logo {
height: 180px;
}
.scroll-indicator {
display: none;
}
}
@media (max-width: 480px) {
.container {
padding: 0 1.2rem;
}
/* Contact popup mobile */
.contact-popup {
padding: 2rem 1.2rem;
}
.contact-icon-burst {
width: 56px;
height: 56px;
}
.contact-icon-burst svg {
width: 28px;
height: 28px;
}
.contact-title {
font-size: 1.3rem;
margin-bottom: 1.2rem;
}
.contact-item {
padding: 0.8rem 1rem;
gap: 0.8rem;
}
.contact-item-icon {
width: 36px;
height: 36px;
min-width: 36px;
}
.contact-msg-btn {
padding: 0.85rem 1rem;
font-size: 0.85rem;
letter-spacing: 1px;
}
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.05rem;
margin: 0 auto 1.5rem auto;
}
.hero-actions-container {
margin-top: 1.2rem;
gap: 1rem;
}
.hero-main-buttons {
flex-direction: column;
width: 100%;
}
.hero-main-buttons .btn {
width: 100%;
}
.btn-whatsapp {
font-size: 0.85rem;
padding: 0.8rem 1.5rem;
}
h2 {
font-size: 1.9rem;
}
.section-header h2 {
font-size: 1.9rem;
}
.service-card {
padding: 2rem 1.5rem;
}
.service-card h3 {
font-size: 1.35rem;
}
.cta-box {
padding: 2rem 1.2rem;
}
.cta-box h2 {
font-size: 1.6rem;
}
.cta-box p {
font-size: 1rem;
margin-bottom: 1.8rem;
}
/* Calendar popup: full width inside container */
.calendar-popup {
width: 100%;
min-width: 0;
}
/* Modal refinements */
.modal-container {
padding: 1.2rem;
margin: 0.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 0.8rem;
font-size: 0.95rem;
}
.form-group label {
font-size: 0.8rem;
}
.form-actions {
flex-direction: column;
gap: 0.8rem;
}
.form-actions .btn {
width: 100%;
}
.scroll-indicator {
display: none;
}
.footer-buttons {
flex-direction: column;
gap: 0.8rem;
}
.btn-footer {
text-align: center;
}
}
@media (max-width: 360px) {
.container {
padding: 0 1rem;
}
.logo img {
height: 60px;
}
.navbar.scrolled .logo img {
height: 40px;
}
.hero-title {
font-size: 2rem;
}
.hero-title .hero-highlight::after {
height: 2px;
bottom: 2px;
}
.hero-subtitle {
font-size: 0.95rem;
}
.btn {
padding: 0.75rem 1.2rem;
font-size: 0.8rem;
letter-spacing: 1px;
}
.btn-whatsapp {
font-size: 0.8rem;
padding: 0.7rem 1rem;
}
.btn-phone-small {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
h2 {
font-size: 1.6rem;
}
.section-header h2 {
font-size: 1.6rem;
}
.service-card {
padding: 1.5rem 1.2rem;
}
.service-card h3 {
font-size: 1.2rem;
}
.service-image {
height: 160px;
}
.cta-box {
padding: 1.5rem 1rem;
}
.cta-box h2 {
font-size: 1.4rem;
}
.cta-box p {
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.modal-container {
padding: 1rem;
margin: 0.4rem;
}
.modal-header h2 {
font-size: 1.3rem;
}
.step-dot {
width: 20px;
height: 20px;
font-size: 0.65rem;
}
.step-line {
width: 20px;
}
.booking-form {
gap: 1rem;
}
.form-step h3 {
font-size: 1.1rem;
}
.footer-logo {
height: 120px;
}
}
/* Simple Pages (Impressum / Datenschutz) */
.simple-page {
padding-top: 150px;
padding-bottom: 80px;
min-height: 80vh;
}
.simple-page h1 {
color: var(--color-gold);
margin-bottom: 2.5rem;
}
.simple-page h2 {
font-size: 1.5rem;
margin-top: 2.5rem;
margin-bottom: 1rem;
color: var(--color-heading);
}
/* Legal headings contain very long compound words
("Verbraucherstreitbeilegung/Universalschlichtungsstelle"), which run past
the viewport on phones and get clipped by body{overflow-x:hidden}. */
.simple-page h1,
.simple-page h2,
.simple-page h3 {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.simple-page p {
margin-bottom: 1.2rem;
color: var(--color-text-muted);
}
@media (max-width: 768px) {
.simple-page {
/* Muss über der 93px hohen, fixierten Navbar bleiben — sonst
schiebt sich die Seitenüberschrift unter die Leiste. */
padding-top: 130px;
padding-bottom: 50px;
}
.simple-page h1 {
font-size: 2rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 480px) {
.simple-page {
/* Navbar bleibt auch auf kleinen Phones 93px hoch. */
padding-top: 125px;
padding-bottom: 40px;
}
.simple-page h1 {
font-size: 1.7rem;
}
.simple-page h2 {
font-size: 1.2rem;
margin-top: 1.8rem;
}
.simple-page p {
font-size: 0.9rem;
}
}
/* =========================================
Über Uns / About Page
========================================= */
/* Active nav link */
.nav-link-active {
color: var(--color-gold) !important;
}
.nav-link-active::after {
width: 100% !important;
background-color: var(--color-gold) !important;
}
/* About Hero */
.about-hero {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding-top: 170px;
padding-bottom: 4rem;
overflow: hidden;
background: linear-gradient(160deg, var(--color-bg) 0%, rgba(212, 175, 55, 0.03) 50%, var(--color-bg) 100%);
}
.about-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(100, 100, 100, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(100, 100, 100, 0.04) 1px, transparent 1px);
background-size: 50px 50px;
z-index: 0;
}
.about-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at 30% 50%, rgba(224, 26, 79, 0.06), transparent 60%),
radial-gradient(ellipse at 70% 50%, rgba(212, 175, 55, 0.06), transparent 60%);
z-index: 0;
opacity: 0.3;
}
.about-hero-content {
position: relative;
z-index: 1;
text-align: center;
}
.about-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
background: rgba(212, 175, 55, 0.08);
border: 1px solid rgba(212, 175, 55, 0.25);
color: var(--color-gold);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 3px;
border-radius: 50px;
margin-bottom: 2rem;
font-weight: 600;
animation: aboutBadgeFadeIn 0.8s ease forwards;
}
@keyframes aboutBadgeFadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.about-hero h1 {
font-size: 4.5rem;
color: var(--color-heading);
margin-bottom: 1.5rem;
animation: aboutTitleSlide 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
opacity: 0;
transform: translateY(30px);
}
@keyframes aboutTitleSlide {
to {
opacity: 1;
transform: translateY(0);
}
}
.about-hero h1 span {
color: var(--color-gold);
font-style: italic;
position: relative;
}
.about-hero h1 span::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 3px;
background: var(--color-pink);
opacity: 0.5;
}
.about-hero-subtitle {
font-size: 1.25rem;
color: var(--color-text-muted);
max-width: 600px;
margin: 0 auto;
font-weight: 300;
animation: aboutTitleSlide 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
opacity: 0;
transform: translateY(30px);
}
/* About Content Section */
.about-section {
padding: 6rem 0;
position: relative;
background-color: rgba(17, 17, 17, 0.85);
backdrop-filter: blur(5px);
transition: background-color 0.4s ease;
}
body.light-theme .about-section {
background-color: rgba(255, 255, 255, 0.85);
}
.about-layout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 4rem;
align-items: center;
}
/* CEO Image */
.about-image-wrapper {
position: relative;
}
.about-image-frame {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 3/4;
}
.about-ceo-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-image-frame:hover .about-ceo-image {
transform: scale(1.05);
}
.about-image-accent {
position: absolute;
top: -10px;
right: -10px;
width: 100%;
height: 100%;
border: 2px solid var(--color-gold);
border-radius: 16px;
z-index: -1;
opacity: 0.4;
transition: all 0.5s ease;
}
.about-image-frame:hover .about-image-accent {
top: -15px;
right: -15px;
opacity: 0.7;
}
.about-image-label {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 1.5rem;
padding-left: 0.5rem;
}
.about-label-name {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 700;
color: var(--color-heading);
}
.about-label-role {
font-size: 0.85rem;
color: var(--color-gold);
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
}
/* About Text */
.about-text h2 {
font-size: 3rem;
margin-bottom: 2rem;
color: var(--color-heading);
position: relative;
display: inline-block;
}
.about-text h2::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--color-gold), var(--color-pink));
border-radius: 2px;
}
.about-text p {
color: var(--color-text-muted);
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: 1.5rem;
}
/* Stats */
.about-stats {
display: flex;
gap: 2.5rem;
margin-top: 3rem;
padding-top: 2.5rem;
border-top: 1px solid var(--color-border-light);
}
.about-stat {
display: flex;
flex-direction: column;
align-items: center;
}
.about-stat-number {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 700;
color: var(--color-gold);
line-height: 1;
}
.about-stat-plus {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 700;
color: var(--color-pink);
}
.about-stat-label {
font-size: 0.8rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-top: 0.5rem;
text-align: center;
}
/* =========================================
Fleet / Car Gallery Section
========================================= */
.fleet-section {
padding: 8rem 0;
position: relative;
background: transparent;
}
.fleet-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.fleet-card {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--color-border);
background: var(--color-bg-lighter);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.fleet-card:hover {
transform: translateY(-8px);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 0 30px rgba(212, 175, 55, 0.1);
border-color: rgba(212, 175, 55, 0.3);
}
.fleet-card-image-wrapper {
position: relative;
overflow: hidden;
aspect-ratio: 16/10;
}
.fleet-card-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fleet-card:hover .fleet-card-image {
transform: scale(1.08);
}
.fleet-card-shine {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
transition: left 0.7s ease;
pointer-events: none;
}
.fleet-card:hover .fleet-card-shine {
left: 100%;
}
/* =========================================
Scroll Reveal Animation
========================================= */
.reveal-on-scroll {
opacity: 0;
transform: translateY(60px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.revealed {
opacity: 1;
transform: translateY(0);
}
/* =========================================
About Page Responsive
========================================= */
@media (max-width: 1024px) {
.about-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
.about-image-wrapper {
max-width: 560px;
margin: 0 auto;
}
.about-hero h1 {
font-size: 3.5rem;
}
.fleet-gallery {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.about-hero {
min-height: 45vh;
padding-top: 135px;
padding-bottom: 3rem;
}
.about-hero h1 {
font-size: 2.8rem;
}
.about-hero-subtitle {
font-size: 1.05rem;
}
.about-section {
padding: 4rem 0;
}
.about-text h2 {
font-size: 2.4rem;
}
.about-stats {
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
}
.about-stat-number {
font-size: 2.4rem;
}
.fleet-section {
padding: 5rem 0;
}
}
@media (max-width: 480px) {
.about-hero h1 {
font-size: 2.2rem;
}
.about-hero-subtitle {
font-size: 0.95rem;
}
.about-text h2 {
font-size: 2rem;
}
.about-text p {
font-size: 0.95rem;
}
.about-stats {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.about-stat-number {
font-size: 2.8rem;
}
.fleet-gallery {
grid-template-columns: 1fr;
}
.fleet-section {
padding: 4rem 0;
}
}
@media (max-width: 360px) {
.about-hero h1 {
font-size: 1.8rem;
}
}
/* =========================================
LIGHT THEME — Component Refinements
Surfaces that previously stayed dark or
blended into the background in light mode.
========================================= */
/* The fixed background image is a dark photo — in light mode we
wash it out so the bright canvas (and dark text) stays readable. */
body.light-theme .fixed-bg::after {
background: rgba(248, 249, 250, 0.55);
}
/* Drifting clouds shouldn't look like smudges on a bright canvas */
body.light-theme .clouds-container {
opacity: 0.06;
}
body.light-theme .cloud {
background-color: #aab0b8;
}
/* Services section was hard-coded dark */
body.light-theme .services {
background-color: rgba(255, 255, 255, 0.72);
}
body.light-theme .service-card {
border-color: rgba(0, 0, 0, 0.07);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}
body.light-theme .service-card:hover {
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}
body.light-theme .service-image {
border-color: rgba(212, 175, 55, 0.35);
}
/* Feature ("Warum mit uns") cards were white-on-white = invisible */
body.light-theme .feature-card {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.07);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}
body.light-theme .feature-card:hover {
background: #ffffff;
border-color: rgba(224, 26, 79, 0.35);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1), 0 0 25px rgba(224, 26, 79, 0.1);
}
/* CTA box needs a little more definition on light surfaces */
body.light-theme .cta-box {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}
/* Booking modal: subtle shadow instead of the dark glow */
body.light-theme .modal-container {
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.18), 0 0 40px rgba(224, 26, 79, 0.06);
}
/* Contact popup items were white-on-white */
body.light-theme .contact-item {
background: #f4f5f7;
}
body.light-theme .contact-item:hover {
background: rgba(212, 175, 55, 0.08);
}
body.light-theme .contact-popup {
box-shadow:
0 0 60px rgba(212, 175, 55, 0.12),
0 25px 50px rgba(0, 0, 0, 0.15);
}
/* Step dots / select dropdowns sit better with a touch more contrast */
body.light-theme .custom-select-options,
body.light-theme .calendar-popup {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
/* Fleet cards (About page) need definition on a light canvas */
body.light-theme .fleet-card {
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}
body.light-theme .fleet-card:hover {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 0 30px rgba(212, 175, 55, 0.08);
}
/* =========================================
ENTRANCE & SCROLL ANIMATIONS
========================================= */
/* Hero content rises in on load */
.hero-title {
animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.hero-subtitle {
animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}
.hero-actions-container {
animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.46s both;
}
.scroll-indicator {
animation: heroFade 1s ease 1.3s both;
}
@keyframes heroRise {
from {
opacity: 0;
transform: translateY(42px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes heroFade {
from {
opacity: 0;
transform: translate(-50%, 12px);
}
to {
opacity: 0.6;
transform: translate(-50%, 0);
}
}
/* Animated gold/pink shimmer on the hero headline words.
Guarded so unsupported browsers keep the solid colour. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.hero-title .hero-location {
background: linear-gradient(100deg, var(--color-gold) 20%, #fff3c4 50%, var(--color-gold) 80%);
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: textShimmer 5s linear infinite;
}
.hero-title .hero-business {
background: linear-gradient(100deg, var(--color-pink) 20%, #ff7ea1 50%, var(--color-pink) 80%);
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: textShimmer 5s linear infinite 0.6s;
}
}
@keyframes textShimmer {
to {
background-position: 220% center;
}
}
/* Scroll reveal base (.reveal-on-scroll / .revealed) is defined further up.
Stagger is applied per-element via JS (reads --reveal-delay), matching the
About page, so the delay is never applied twice. */
/* Once revealed, restore each card's own snappy hover transition
(otherwise the generic reveal transition would clobber the hover feel). */
.service-card.reveal-on-scroll.revealed {
transition: var(--transition);
}
.feature-card.reveal-on-scroll.revealed {
transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Soft floating glow behind the booking taxi for extra flair */
.btn-primary:hover {
transform: translateY(-2px);
}
.btn-secondary:hover,
.btn-whatsapp:hover {
transform: translateY(-2px);
}
/* =========================================
BURGER MENU & MOBILE RESPONSIVE
========================================= */
/* Burger Toggle – hidden on desktop */
.burger-toggle {
display: none;
background: transparent;
border: none;
cursor: pointer;
width: 36px;
height: 28px;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 0;
z-index: 1100;
position: relative;
}
.burger-line {
display: block;
width: 100%;
height: 3px;
background-color: var(--color-text);
border-radius: 3px;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
/* Animate to X when open */
.burger-toggle.active .burger-line:nth-child(1) {
transform: translateY(12.5px) rotate(45deg);
}
.burger-toggle.active .burger-line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.burger-toggle.active .burger-line:nth-child(3) {
transform: translateY(-12.5px) rotate(-45deg);
}
/* Mobile overlay backdrop */
.mobile-nav-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 999;
opacity: 0;
transition: opacity 0.35s ease;
}
.mobile-nav-backdrop.active {
display: block;
opacity: 1;
}
/* ---- TABLET ---- */
@media (max-width: 1024px) {
.hero-title {
font-size: clamp(2.2rem, 3.4vw, 2.8rem);
}
.hero-subtitle {
font-size: 1.1rem;
}
.container {
padding: 0 1.5rem;
}
h2 {
font-size: 2.2rem;
}
.cta-box {
padding: 3rem 2rem;
}
.cta-box h2 {
font-size: 1.8rem;
}
.services {
padding: 5rem 0;
}
.why-us {
padding: 5rem 0;
}
.section-header {
margin-bottom: 3rem;
}
.footer-content {
flex-direction: column;
gap: 2rem;
text-align: center;
}
}
/* ---- MOBILE: Burger menu & layout ---- */
@media (max-width: 768px) {
/* Show the burger */
.burger-toggle {
display: flex;
position: relative;
z-index: 1100;
}
/* Navbar becomes the anchor for the dropdown */
.navbar {
padding: 0.8rem 0;
background: var(--color-nav-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.nav-content {
position: static;
}
/* Nav links: fixed slide-down menu */
.nav-links {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding-top: 100px;
padding-bottom: 2rem;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--color-bg);
border-bottom: 2px solid var(--color-gold);
z-index: 1050;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.4s ease, visibility 0.4s;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.nav-links.open {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.nav-links a {
display: block;
width: 100%;
text-align: center;
padding: 1.1rem 2rem;
font-size: 1.1rem;
letter-spacing: 2px;
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
text-decoration: none;
}
.nav-links a:last-child {
border-bottom: none;
}
.nav-links a:hover,
.nav-links a:active {
background: rgba(212, 175, 55, 0.08);
color: var(--color-gold);
}
/* Fix logo offset that breaks mobile layout */
.logo {
transform: none;
position: relative;
z-index: 1100;
}
.logo img {
height: 80px;
}
.navbar.scrolled .logo img {
height: 55px;
}
/* Hide the "Fahrt Buchen" button in the nav on mobile */
.nav-btn {
display: none;
}
.nav-actions {
gap: 0.8rem;
position: relative;
z-index: 1100;
}
.theme-toggle {
width: 34px;
height: 34px;
}
/* Hero responsive */
.hero {
/* Die Navbar ist mobil 93px hoch und liegt fixiert über dem Hero.
Weniger Padding als das lässt die Überschrift bei kurzen
Viewports (Safari mit eingeblendeter Suchleiste) unter die
Leiste rutschen. */
padding-top: 118px;
padding-bottom: 1.5rem;
min-height: 100svh;
overflow: visible;
}
/* „Sicheres" Zentrieren: Solange Platz da ist, verteilen die auto-Margins
ihn gleichmäßig (wie align-items:center). Wird der Hero zu kurz, fallen
sie auf 0 zurück, statt den Inhalt oben aus dem Padding zu schieben —
genau das passiert bei Safari mit sichtbarer Suchleiste. */
.hero-content {
margin: auto;
}
.hero-title {
font-size: 2.2rem;
letter-spacing: 0;
word-break: normal;
overflow-wrap: normal;
overflow: visible;
hyphens: none;
padding: 0 0.5rem;
}
.hero-title .hero-highlight {
display: inline;
overflow: visible;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 2rem;
padding: 0 0.5rem;
}
.hero-main-buttons {
flex-direction: column;
width: 100%;
padding: 0 1rem;
}
.hero-main-buttons .btn {
width: 100%;
padding: 0.9rem 1.5rem;
font-size: 0.85rem;
}
.hero-actions-container {
margin-top: 1.5rem;
gap: 1rem;
}
.btn-phone-small {
font-size: 0.82rem;
}
/* Services */
.services-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.service-card {
padding: 2rem 1.5rem;
}
.service-image {
height: 160px;
}
.service-card h3 {
font-size: 1.3rem;
}
/* CTA */
.cta-section {
padding: 3rem 0;
}
.cta-box {
padding: 2.5rem 1.5rem;
}
.cta-box h2 {
font-size: 1.5rem;
}
/* Modal */
.modal-container {
max-width: 95%;
padding: 2rem 1.5rem;
max-height: 90vh;
overflow-y: auto;
}
.modal-header h2 {
font-size: 1.5rem;
}
.form-row {
grid-template-columns: 1fr;
}
/* Footer */
.footer-content {
flex-direction: column;
gap: 1.5rem;
text-align: center;
}
.footer-links {
text-align: center;
}
.footer-bottom {
text-align: center;
}
/* Scroll indicator */
.scroll-indicator {
bottom: 1.2rem;
}
/* Contact popup */
.contact-popup {
width: 90vw;
max-width: 350px;
padding: 2rem 1.5rem;
}
}
/* ---- SMALL PHONES ---- */
@media (max-width: 400px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 0.9rem;
}
.container {
padding: 0 1rem;
}
.logo img {
height: 60px;
}
.navbar.scrolled .logo img {
height: 45px;
}
.btn {
padding: 0.8rem 1.2rem;
font-size: 0.8rem;
letter-spacing: 1px;
}
.feature-card {
padding: 1.5rem;
border-radius: 16px;
}
.feature-icon {
width: 50px;
height: 50px;
border-radius: 14px;
margin-bottom: 1.5rem;
}
h2 {
font-size: 1.8rem;
}
.why-us .section-header h2 {
font-size: 2.2rem;
}
}
/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.reveal-on-scroll {
opacity: 1 !important;
transform: none !important;
}
}
/* =========================================
FLOATING NAV — bottom-left "valet call" FAB
A round gold button pinned bottom-left. Tapping it fans the four
header entries upward as staggered glass pills. Mobile only; the
regular top nav is used from 769px up.
========================================= */
.fab-nav {
display: none;
position: fixed;
bottom: 22px;
right: 22px;
z-index: 1001;
flex-direction: column;
align-items: flex-end;
gap: 14px;
/* Layout box only. The closed pill list keeps its full size (it is
merely faded out), so without this the container would swallow every
tap over most of the mobile screen — the pills and the round button
re-enable pointer events for themselves below. */
pointer-events: none;
}
.fab-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
/* column-reverse: DOM order top→bottom, but the entry nearest the
button (index 0) sits closest and leads the stagger. */
flex-direction: column-reverse;
gap: 12px;
pointer-events: none;
}
.fab-item-wrap {
opacity: 0;
transform: translateY(14px) scale(0.85);
transform-origin: right bottom;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--i) * 0.03s);
}
.fab-nav.open .fab-item-wrap {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
transition-delay: calc(var(--i) * 0.06s);
}
.fab-item {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 20px 10px 11px;
border-radius: 999px;
background: var(--color-nav-bg);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--color-border-strong);
color: var(--color-text);
text-decoration: none;
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
white-space: nowrap;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.fab-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(212, 175, 55, 0.14);
color: var(--color-gold);
flex-shrink: 0;
transition: background 0.3s ease, color 0.3s ease;
}
.fab-item:hover,
.fab-item:focus-visible {
border-color: var(--color-gold);
color: var(--color-gold);
transform: translateX(-5px);
outline: none;
}
.fab-item:hover .fab-item-icon,
.fab-item:focus-visible .fab-item-icon {
background: var(--color-gold);
color: #1a1a1a;
}
/* The button itself */
.fab-toggle {
position: relative;
pointer-events: auto;
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-hover) 100%);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(212, 175, 55, 0.45);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
animation: fab-breathe 3.2s ease-in-out infinite;
}
@keyframes fab-breathe {
0%,
100% {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(212, 175, 55, 0.45);
}
50% {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 13px rgba(212, 175, 55, 0);
}
}
.fab-toggle:hover {
transform: scale(1.06);
}
.fab-toggle:active {
transform: scale(0.95);
}
.fab-toggle:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 3px;
}
.fab-nav.open .fab-toggle {
animation: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(212, 175, 55, 0.14);
}
/* Burger → X */
.fab-burger {
position: relative;
width: 24px;
height: 16px;
}
.fab-line {
position: absolute;
left: 0;
width: 100%;
height: 2.5px;
border-radius: 3px;
background: #1a1a1a;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.fab-line:nth-child(1) {
top: 0;
}
.fab-line:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.fab-line:nth-child(3) {
bottom: 0;
}
.fab-nav.open .fab-line:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.fab-nav.open .fab-line:nth-child(2) {
opacity: 0;
}
.fab-nav.open .fab-line:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
/* Scroll progress — thin gold line at the very top edge */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
z-index: 1002;
transform: scaleX(0);
transform-origin: left center;
background: linear-gradient(90deg, var(--color-gold), var(--color-gold-hover), var(--color-pink));
box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
transition: transform 0.1s linear;
pointer-events: none;
}
/* Mobile: reveal the FAB and move the cookie button out of its way */
@media (max-width: 768px) {
.fab-nav {
display: flex;
}
}
/* =========================================
TELEPHONE LINKS — gold, no underline
Overrides the browser / mobile OS default
blue+underline on auto-detected numbers.
========================================= */
a[href^="tel:"],
.tel-link {
color: var(--color-gold) !important;
text-decoration: none !important;
}
a[href^="tel:"]:hover,
.tel-link:hover {
color: var(--color-gold-hover) !important;
text-decoration: none !important;
}
/* =========================================
SEO-UPDATE — Navigation Dropdown "Leistungen"
Desktop: Hover/Fokus öffnet das Menü mit den
vier Unterseiten. Mobil baut script.js alle
Links ohnehin als flache Pill-Liste auf.
========================================= */
.nav-dropdown {
position: relative;
display: flex;
align-items: center;
}
.nav-caret {
display: inline-block;
margin-left: 0.45rem;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
vertical-align: middle;
transition: transform 0.3s ease;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
transform: rotate(180deg);
}
.nav-dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 12px);
min-width: 250px;
padding: 0.6rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
background: var(--color-nav-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--color-border-light);
border-radius: 14px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
z-index: 1200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translate(-50%, 4px);
}
.nav-links .nav-dropdown-menu a {
display: block;
padding: 0.65rem 0.9rem;
border-radius: 9px;
font-size: 0.8rem;
white-space: nowrap;
transition: background-color 0.25s ease, color 0.25s ease;
}
.nav-links .nav-dropdown-menu a::after {
display: none;
}
.nav-links .nav-dropdown-menu a:hover,
.nav-links .nav-dropdown-menu a.nav-link-active {
background: rgba(212, 175, 55, 0.12);
color: var(--color-gold);
}
/* =========================================
SEO-UPDATE — "Mehr erfahren"-Links auf den
Service-Karten der Startseite
========================================= */
.service-link {
display: inline-block;
margin-top: 1.1rem;
color: var(--color-gold);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.5px;
transition: var(--transition);
}
.service-link:hover {
color: var(--color-gold-hover);
transform: translateX(4px);
}
/* =========================================
SEO-UPDATE — Lokaler Ergänzungstext unter
"Warum mit Uns?"
========================================= */
.local-seo-text {
max-width: 820px;
margin: 3.5rem auto 0;
text-align: center;
color: var(--color-text-muted);
font-size: 1.05rem;
line-height: 1.9;
}
.local-seo-text strong {
color: var(--color-text);
font-weight: 600;
}
/* =========================================
SEO-UPDATE — Unterseiten (Flughafentransfer,
Taxi Service, Firmenfahrten)
========================================= */
.subpage-hero h1 {
font-size: 3.2rem;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.subpage-hero .about-hero-subtitle {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.subpage-hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.2rem;
margin-top: 2.5rem;
}
.subpage-content {
max-width: 860px;
margin: 0 auto;
}
.subpage-content h2 {
font-size: 2.4rem;
margin-bottom: 1.8rem;
color: var(--color-heading);
position: relative;
display: inline-block;
}
.subpage-content h2::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--color-gold), var(--color-pink));
border-radius: 2px;
}
.subpage-content h3 {
font-size: 1.35rem;
color: var(--color-heading);
margin: 2.2rem 0 1rem;
}
.subpage-content p {
color: var(--color-text-muted);
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: 1.5rem;
}
.subpage-content strong {
color: var(--color-text);
font-weight: 600;
}
.subpage-content ul {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
}
.subpage-content ul li {
position: relative;
padding-left: 2rem;
margin-bottom: 0.9rem;
color: var(--color-text-muted);
font-size: 1.02rem;
line-height: 1.7;
}
.subpage-content ul li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: var(--color-gold);
font-weight: 700;
}
.subpage-content .subpage-links a:not([href^="tel:"]) {
color: var(--color-gold);
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.subpage-content .subpage-links a:not([href^="tel:"]):hover {
color: var(--color-gold-hover);
}
@media (max-width: 768px) {
.subpage-hero h1 {
font-size: 2.2rem;
}
.subpage-content h2 {
font-size: 1.9rem;
}
}
@media (max-width: 480px) {
.subpage-hero h1 {
font-size: 1.8rem;
}
.subpage-content h2 {
font-size: 1.6rem;
}
}
/* Desktop: Hero-Inhalt unterhalb der hohen Initial-Navbar beginnen lassen
(der längere SEO-H1 ragte sonst in die Navigation). */
@media (min-width: 769px) {
.hero {
padding-top: 210px;
}
}
/* =========================================
SEHR KURZE VIEWPORTS (iPhone SE & Co., Safari mit sichtbarer Suchleiste)
Zwischen der 93px hohen Navbar und der unteren Ecke mit Menü-Button und
Cookie-Badge (zusammen ca. 82px) bleiben nur rund 380px. Ohne diese
Straffung landet der "Jetzt Buchen"-Button unter den beiden Badges.
Steht bewusst am Dateiende, damit es die späteren Breite-Breakpoints
(400px / 360px) überschreibt.
========================================= */
@media (max-width: 768px) and (max-height: 640px) {
.hero {
padding-top: 108px;
padding-bottom: 1rem;
}
.hero-title {
font-size: 1.75rem;
margin-bottom: 1rem;
}
.hero-subtitle {
font-size: 0.85rem;
margin-bottom: 1.2rem;
}
.hero-main-buttons {
gap: 0.6rem;
}
}
/* Regional headline on desktop; a compact introduction on phones. */
.btn-call {
gap: 0.6rem;
border-color: var(--color-gold);
color: var(--color-gold);
}
.btn-call svg {
flex-shrink: 0;
}
@media (min-width: 769px) and (max-height: 850px) {
.hero .scroll-indicator {
display: none;
}
}
@media (max-width: 768px) {
.hero-region {
display: none;
}
.hero-main-buttons {
grid-template-columns: minmax(0, 1fr);
}
}
/* Keep the four actions clear of the floating menu on very small phones. */
@media (max-width: 360px) and (max-height: 640px) {
.hero {
padding-bottom: 6rem;
}
.hero-title {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.hero-subtitle {
display: none;
}
.hero-actions-container {
margin-top: 0.75rem;
}
.hero-main-buttons {
gap: 0.5rem;
}
.hero-main-buttons .btn {
min-height: 44px;
padding: 0.65rem 1rem;
}
}