/* ========================================================================== rentyachtdubai.ae — gemeinsames Stylesheet Aus dem Inline-Block der Startseite extrahiert, damit Startseite und die sechs Unterseiten dieselbe Quelle nutzen. Der Dateiname ist versioniert (site-vN.css): Hostinger liefert CSS mit max-age 604800 hinter einem CDN aus, das vom Server nicht zu leeren ist. Jede Aenderung braucht daher einen neuen Dateinamen. ========================================================================== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ /* Deep ocean palette — richer than RAK */ --deep:#050d1a;--ocean:#0a1a2e;--marine:#0f2440;--wave:#153058; --gold:#d4af37;--gold-light:#e8cc6e;--gold-dark:#b8941e;--gold-muted:rgba(212,175,55,.12); --pearl:#faf9f6;--white:#ffffff;--sand:#f5f0e8;--ivory:#f8f5ef; --text-dark:#0c1a2e;--text-body:#4a5568;--text-muted:#8896a8;--text-light:#a0b3c8; /* Accent */ --azure:#1e6091;--wa:#25d366;--wa-dark:#1ebe5b;--teal:rgba(30,96,145,.12); } html{scroll-behavior:smooth} body{font-family:'Outfit',sans-serif;background:var(--deep);color:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased} /* ═══════════════════════════════════ BIRD'S EYE YACHT INTRO ANIMATION ═══════════════════════════════════ */ .intro{position:fixed;inset:0;z-index:10000;background:var(--deep);overflow:hidden;transition:opacity 1.2s cubic-bezier(.4,0,.2,1),visibility 1.2s} .intro.done{opacity:0;visibility:hidden;pointer-events:none} /* Animated ocean water surface — bird's eye */ .intro-ocean-surface{position:absolute;inset:0;background: radial-gradient(ellipse 120% 80% at 50% 50%, #0b2240 0%, #071428 40%, #040e1c 100%); } /* Animated water caustics */ .intro-caustics{position:absolute;inset:-50%;width:200%;height:200%;opacity:.08; background: radial-gradient(ellipse 15% 20% at 20% 30%, rgba(212,175,55,.5), transparent), radial-gradient(ellipse 20% 15% at 60% 20%, rgba(30,96,145,.6), transparent), radial-gradient(ellipse 12% 18% at 80% 60%, rgba(212,175,55,.4), transparent), radial-gradient(ellipse 18% 12% at 35% 70%, rgba(30,96,145,.5), transparent), radial-gradient(ellipse 10% 25% at 50% 50%, rgba(212,175,55,.3), transparent); animation:causticsDrift 8s ease-in-out infinite alternate; } @keyframes causticsDrift{0%{transform:translate(-2%,-1%) rotate(-1deg) scale(1)}100%{transform:translate(2%,1%) rotate(1deg) scale(1.03)}} /* Water ripple circles */ .intro-ripple{position:absolute;border-radius:50%;border:1px solid rgba(212,175,55,.06);animation:rippleExpand 4s ease-out infinite} @keyframes rippleExpand{0%{transform:scale(0);opacity:.4}100%{transform:scale(6);opacity:0}} /* The yacht — bird's eye SVG */ .intro-yacht-birdseye{position:absolute;left:50%;transform:translateX(-50%);bottom:-200px;z-index:10; animation:yachtGlideUp 4s 0.5s cubic-bezier(.25,.46,.45,.94) forwards} @keyframes yachtGlideUp{ 0%{bottom:-200px;opacity:0;transform:translateX(-50%) scale(.7)} 15%{opacity:1} 100%{bottom:110vh;transform:translateX(-50%) scale(1)} } /* Wake trail behind yacht */ .intro-wake-trail{position:absolute;left:50%;bottom:-300px;transform:translateX(-50%);width:4px;z-index:5; animation:wakeGlideUp 4s 0.5s cubic-bezier(.25,.46,.45,.94) forwards} @keyframes wakeGlideUp{ 0%{bottom:-300px;height:0;opacity:0} 15%{opacity:.6} 100%{bottom:110vh;height:800px;opacity:0} } .intro-wake-trail::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%); width:3px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.08),transparent);border-radius:4px} .intro-wake-trail::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%); width:60px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 60%);border-radius:50%;filter:blur(8px)} /* V-wake lines */ .intro-wake-v{position:absolute;left:50%;bottom:-300px;transform:translateX(-50%);z-index:4; animation:wakeGlideUp 4s 0.5s cubic-bezier(.25,.46,.45,.94) forwards} .intro-wake-v::before,.intro-wake-v::after{content:'';position:absolute;top:30px;width:200px;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent)} .intro-wake-v::before{right:8px;transform:rotate(12deg);transform-origin:right center} .intro-wake-v::after{left:8px;transform:rotate(-12deg);transform-origin:left center} /* Brand text reveal */ .intro-brand{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;text-align:center; opacity:0;animation:brandReveal .8s 2s cubic-bezier(.16,1,.3,1) forwards} @keyframes brandReveal{0%{opacity:0;transform:translate(-50%,-50%) scale(.9);filter:blur(8px)}100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}} .intro-brand h2{font-family:'Cormorant Garamond',serif;font-size:3.2rem;font-weight:600;letter-spacing:4px;color:var(--white)} .intro-brand h2 span{color:var(--gold)} .intro-brand p{font-size:.72rem;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-top:8px;font-weight:500} .intro-brand-line{width:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:16px auto 0;animation:brandLine 1.2s 2.4s cubic-bezier(.16,1,.3,1) forwards} @keyframes brandLine{to{width:140px}} /* ═══════════════════════════════════ SCROLL ANIMATIONS ═══════════════════════════════════ */ .reveal{opacity:0;transform:translateY(80px);transition:all 1s cubic-bezier(.16,1,.3,1)} .reveal-left{opacity:0;transform:translateX(-100px) rotate(-2deg);transition:all 1.1s cubic-bezier(.16,1,.3,1)} .reveal-right{opacity:0;transform:translateX(100px) rotate(2deg);transition:all 1.1s cubic-bezier(.16,1,.3,1)} .reveal-scale{opacity:0;transform:scale(.7);transition:all 1s cubic-bezier(.16,1,.3,1)} .reveal-blur{opacity:0;filter:blur(12px);transform:translateY(40px);transition:all 1s cubic-bezier(.16,1,.3,1)} .reveal.v,.reveal-left.v,.reveal-right.v,.reveal-scale.v,.reveal-blur.v{opacity:1;transform:none;filter:none} .d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s} .d4{transition-delay:.4s}.d5{transition-delay:.5s}.d6{transition-delay:.6s} /* ═══════════════════════════════════ UTILITY ═══════════════════════════════════ */ .container{max-width:1240px;margin:0 auto;padding:0 28px} .gold{color:var(--gold)} /* ═══════════════════════════════════ NAV ═══════════════════════════════════ */ nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:22px 0;transition:all .5s cubic-bezier(.4,0,.2,1)} /* Sprungziele lagen unter der fixierten Navigation — 96px Freiraum. */ section[id]{scroll-margin-top:96px} /* Ursache des seitlichen Scrollens: .reveal-left/-right starten bei translateX(±80px) und ragen bis zum Ausloesen des Observers aus dem Viewport. Geklammert wird am Abschnitt — das ist die natuerliche Grenze und erzeugt keinen Scrollcontainer. */ html,body{overflow-x:hidden;overflow-x:clip} section,.stats-bar{overflow-x:hidden;overflow-x:clip} /* Bewegungsreduzierung respektieren (WCAG 2.3.3). */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .reveal,.reveal-left,.reveal-right,.reveal-scale,.reveal-blur{opacity:1!important;transform:none!important;filter:none!important} .intro{display:none!important} } nav.scrolled{background:rgba(5,13,26,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:12px 0;border-bottom:1px solid rgba(212,175,55,.06)} nav .container{display:flex;justify-content:space-between;align-items:center} .logo{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;letter-spacing:1.5px;color:var(--white);text-decoration:none} .logo span{color:var(--gold)} .nav-links{display:flex;gap:28px;align-items:center;list-style:none} .nav-links a{color:var(--text-light);text-decoration:none;font-size:.78rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;transition:color .3s;position:relative} .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width .3s} .nav-links a:hover{color:var(--gold)} .nav-links a:hover::after{width:100%} .nav-cta{background:var(--gold)!important;color:var(--deep)!important;padding:11px 24px!important;border-radius:3px;font-weight:600!important;letter-spacing:1.2px;transition:all .3s!important} .nav-cta::after{display:none!important} .nav-cta:hover{background:var(--gold-light)!important;transform:translateY(-2px);box-shadow:0 8px 32px rgba(212,175,55,.25)} .ham{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none} .ham span{width:24px;height:2px;background:var(--white);border-radius:2px;transition:.3s} /* ═══════════════════════════════════ BUTTONS ═══════════════════════════════════ */ .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:3px;font-size:.8rem;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;text-decoration:none;cursor:pointer;border:none;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden} .btn-gold{background:var(--gold);color:var(--deep)} .btn-gold::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);transition:transform .7s} .btn-gold:hover::after{transform:translateX(100%)} .btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 12px 40px rgba(212,175,55,.3)} .btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.15)} .btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)} .btn-wa{background:rgba(212,175,55,.06);color:var(--gold);border:1px solid rgba(212,175,55,.2)} .btn-wa:hover{background:rgba(212,175,55,.12);border-color:var(--gold);transform:translateY(-2px)} .light-s .btn-wa{background:var(--white);color:var(--deep);border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 12px rgba(0,0,0,.04)} .light-s .btn-wa:hover{border-color:var(--gold);color:var(--gold-dark)} /* ═══════════════════════════════════ HERO ═══════════════════════════════════ */ .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--deep)} .hero-bg{position:absolute;inset:0} .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.3} .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(175deg,rgba(5,13,26,.9) 0%,rgba(10,26,46,.7) 35%,rgba(15,36,64,.55) 55%,rgba(5,13,26,.92) 100%)} .hero-grid{position:absolute;inset:0;opacity:.015;background-image: linear-gradient(rgba(212,175,55,.8) 1px,transparent 1px), linear-gradient(90deg,rgba(212,175,55,.8) 1px,transparent 1px); background-size:100px 100px;z-index:1} /* Floating gold particles */ .hero-particles{position:absolute;inset:0;overflow:hidden;z-index:1} .hp{position:absolute;width:2px;height:2px;background:var(--gold);border-radius:50%;opacity:0;animation:hpFloat linear infinite} @keyframes hpFloat{0%{opacity:0;transform:translateY(0) scale(0)}12%{opacity:.35}85%{opacity:.1}100%{opacity:0;transform:translateY(-100vh) scale(1)}} .hero-content{position:relative;z-index:2;text-align:center;max-width:880px;padding:0 28px; animation:heroIn .7s cubic-bezier(.16,1,.3,1) both} @keyframes heroIn{from{opacity:.001;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} .hero-badge{display:inline-flex;align-items:center;gap:12px;background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.15);padding:9px 24px;border-radius:100px;margin-bottom:32px;font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:500} .hero-badge .dot{width:6px;height:6px;background:var(--gold);border-radius:50%;animation:dotPulse 2s infinite} @keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}} .hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2.6rem,6vw,5rem);line-height:1.05;font-weight:600;margin-bottom:28px;letter-spacing:-1px} .hero h1 em{font-style:italic;background:linear-gradient(135deg,var(--gold),var(--gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent} .hero-sub{font-size:1.1rem;color:var(--text-light);line-height:1.8;max-width:600px;margin:0 auto 44px;font-weight:300} .hero-sub strong{color:var(--white);font-weight:500} .hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted);font-size:.65rem;letter-spacing:3.5px;text-transform:uppercase;opacity:0;animation:heroIn 1s 1.1s ease both;z-index:2} .hero-scroll-line{width:1px;height:40px;background:linear-gradient(180deg,var(--gold),transparent);animation:scrollPulse 2s infinite} @keyframes scrollPulse{0%,100%{opacity:1;height:40px}50%{opacity:.3;height:24px}} /* ═══════════════════════════════════ STATS BAR ═══════════════════════════════════ */ .stats-bar{background:var(--white);padding:56px 0;position:relative} .stats-bar::before{content:'';position:absolute;top:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.2),transparent)} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center} .stat-item h3{font-family:'Cormorant Garamond',serif;font-size:2.5rem;color:var(--deep);margin-bottom:6px;font-weight:600} .stat-item p{font-size:.72rem;color:var(--text-body);text-transform:uppercase;letter-spacing:2.5px;font-weight:500} /* ── At a Glance: zitierfaehiger Faktenblock fuer Suche und KI-Antworten ── */ .glance{background:var(--ivory);padding:64px 0 72px} .glance-card{max-width:1080px;margin:0 auto;background:var(--white);border:1px solid rgba(212,175,55,.22);border-radius:4px;padding:36px 40px 30px;box-shadow:0 18px 60px rgba(5,13,26,.06)} .glance-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px} .glance-head h2{font-family:'Cormorant Garamond',serif;font-size:1.75rem;font-weight:600;color:var(--text-dark);letter-spacing:-.2px} .glance-head span{font-size:.68rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold-dark);font-weight:600} .glance-lede{font-size:.95rem;line-height:1.7;color:var(--text-body);max-width:74ch;margin-bottom:26px;font-weight:300} .glance-lede strong{font-weight:600;color:var(--text-dark)} .glance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0 34px;border-top:1px solid rgba(12,26,46,.09)} .glance-grid>div{padding:16px 0 15px;border-bottom:1px solid rgba(12,26,46,.07)} .glance-grid dt{font-size:.64rem;letter-spacing:2.4px;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-bottom:5px} .glance-grid dd{margin:0;font-size:.9rem;line-height:1.55;color:var(--text-dark);font-weight:400} .glance-grid dd b{color:var(--gold-dark);font-weight:600} @media(max-width:480px){.glance{padding:44px 0 48px}.glance-card{padding:26px 22px 18px}.glance-head h2{font-size:1.5rem}} /* ═══════════════════════════════════ SECTION BASE ═══════════════════════════════════ */ section{padding:120px 0} .section-label{font-size:.7rem;letter-spacing:4px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:14px} .section-label::before{content:'';width:28px;height:1px;background:currentColor} .section-header.center .section-label{justify-content:center} .section-header.center .section-label::after{content:'';width:28px;height:1px;background:currentColor} .section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.2rem);line-height:1.12;margin-bottom:20px;font-weight:600} .section-subtitle{font-size:1rem;color:var(--text-light);line-height:1.8;max-width:540px;font-weight:300} .section-header{margin-bottom:64px} .section-header.center{text-align:center} .section-header.center .section-subtitle{margin:0 auto} /* Light & cream sections */ .light-s{background:var(--white);color:var(--text-dark)} .light-s .section-title{color:var(--deep)}.light-s .section-subtitle{color:var(--text-body)}.light-s .section-label{color:var(--gold-dark)}.light-s .gold{color:var(--gold-dark)} .cream-s{background:var(--ivory);color:var(--text-dark)} .cream-s .section-title{color:var(--deep)}.cream-s .section-subtitle{color:var(--text-body)}.cream-s .section-label{color:var(--gold-dark)}.cream-s .gold{color:var(--gold-dark)} /* ═══════════════════════════════════ FLEET — Horizontal scroll on mobile ═══════════════════════════════════ */ .fleet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .yacht-card{background:var(--ocean);border-radius:14px;overflow:hidden;border:1px solid rgba(212,175,55,.04);transition:all .6s cubic-bezier(.16,1,.3,1)} .yacht-card:hover{transform:translateY(-10px);border-color:rgba(212,175,55,.15);box-shadow:0 32px 60px rgba(0,0,0,.5)} .yacht-img{height:220px;position:relative;overflow:hidden;background:var(--marine)} .yacht-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)} .yacht-card:hover .yacht-img img{transform:scale(1.06)} .yacht-img .tag{position:absolute;top:14px;left:14px;background:var(--gold);color:var(--deep);padding:5px 14px;border-radius:3px;font-size:.62rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;z-index:2} .yacht-info{padding:24px} .yacht-info h3{font-family:'Cormorant Garamond',serif;font-size:1.25rem;margin-bottom:12px;font-weight:600} .yacht-specs{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap} .yacht-specs span{font-size:.74rem;color:var(--text-light);display:flex;align-items:center;gap:5px} .yacht-specs svg{width:13px;height:13px;stroke:var(--gold);fill:none;stroke-width:2} .yacht-price{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid rgba(212,175,55,.06)} .yacht-price .price{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--gold);font-weight:600} .yacht-price .price small{font-size:.7rem;color:var(--text-light);font-family:'Outfit',sans-serif;font-weight:400} .book-btn{background:rgba(212,175,55,.06);color:var(--gold);border:1px solid rgba(212,175,55,.15);padding:9px 18px;border-radius:3px;font-size:.7rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .3s;text-decoration:none} .book-btn:hover{background:var(--gold);color:var(--deep)} /* ═══════════════════════════════════ ROUTE SHOWCASE — Dubai unique ═══════════════════════════════════ */ .route-section{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--deep),var(--ocean) 50%,var(--deep))} .route-section::before{content:'';position:absolute;top:-300px;right:-200px;width:700px;height:700px;background:radial-gradient(circle,rgba(212,175,55,.03),transparent 60%)} .route-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .route-stops{list-style:none;counter-reset:stops} .route-stops li{counter-increment:stops;display:flex;gap:20px;align-items:flex-start;padding:20px 0;border-bottom:1px solid rgba(212,175,55,.06);transition:all .3s} .route-stops li:hover{padding-left:8px} /* Wahrzeichen statt Ziffer: die Reihenfolge ergibt sich aus der Liste. */ .route-stops li::before{content:counter(stops,decimal-leading-zero);font-family:'Cormorant Garamond',serif;font-size:.72rem;letter-spacing:1px;color:var(--gold);opacity:.5;font-weight:600;min-width:22px;padding-top:13px} .stop-ico{width:44px;height:44px;flex:0 0 44px;color:var(--gold);margin-top:2px} .route-stops li:hover .stop-ico{color:var(--gold-light)} @media(max-width:480px){.stop-ico{width:36px;height:36px;flex:0 0 36px}.route-stops li{gap:12px}} .route-stop-info h4{font-size:.95rem;margin-bottom:4px;font-weight:600} .route-stop-info p{font-size:.82rem;color:var(--text-light);line-height:1.6;font-weight:300} .route-visual{position:relative;height:560px;border-radius:18px;overflow:hidden;border:1px solid rgba(212,175,55,.06)} .route-visual img{width:100%;height:100%;object-fit:cover} .route-visual-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(5,13,26,.7))} /* ═══════════════════════════════════ EXPERIENCES ═══════════════════════════════════ */ .exp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .exp-card{border-radius:14px;overflow:hidden;background:var(--sand);border:1px solid rgba(0,0,0,.03);transition:all .6s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column} .exp-card:hover{transform:translateY(-8px);box-shadow:0 28px 56px rgba(0,0,0,.06);border-color:rgba(212,175,55,.12)} .exp-card-img{height:200px;overflow:hidden} .exp-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s} .exp-card:hover .exp-card-img img{transform:scale(1.06)} .exp-card-body{padding:32px;flex:1;display:flex;flex-direction:column} .exp-icon{width:52px;height:52px;margin-bottom:18px;background:var(--white);border:1px solid rgba(212,175,55,.1);border-radius:12px;display:flex;align-items:center;justify-content:center} .exp-icon svg{width:24px;height:24px;stroke:var(--gold-dark);fill:none;stroke-width:1.8} .exp-card h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;margin-bottom:12px;color:var(--deep);font-weight:600} .exp-card p{color:var(--text-body);line-height:1.75;font-size:.88rem;margin-bottom:20px;flex:1;font-weight:300} .exp-link{color:var(--gold-dark);font-size:.74rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:gap .3s} .exp-link:hover{gap:16px} .exp-link svg{width:16px;height:16px;stroke:var(--gold-dark);fill:none;stroke-width:2} /* ═══════════════════════════════════ WHY CHOOSE US ═══════════════════════════════════ */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .why-card{text-align:center;padding:44px 24px;border-radius:14px;background:var(--white);border:1px solid rgba(0,0,0,.03);transition:all .5s cubic-bezier(.16,1,.3,1)} .why-card:hover{transform:translateY(-8px);box-shadow:0 24px 56px rgba(0,0,0,.06);border-color:rgba(212,175,55,.1)} .why-icon{width:60px;height:60px;margin:0 auto 20px;background:var(--ivory);border-radius:14px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(212,175,55,.06)} .why-icon svg{width:26px;height:26px;stroke:var(--gold-dark);fill:none;stroke-width:1.8} .why-card h3{font-family:'Cormorant Garamond',serif;font-size:1.1rem;margin-bottom:10px;color:var(--deep);font-weight:600} .why-card p{font-size:.84rem;color:var(--text-body);line-height:1.7;font-weight:300} /* ═══════════════════════════════════ PRICING ═══════════════════════════════════ */ .pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .pricing-card{background:var(--ocean);border:1px solid rgba(212,175,55,.04);border-radius:14px;padding:36px 24px;text-align:center;transition:all .6s cubic-bezier(.16,1,.3,1);position:relative} .pricing-card.ft{border-color:var(--gold);background:linear-gradient(180deg,rgba(212,175,55,.06),var(--ocean));transform:scale(1.04)} .pricing-card.ft::before{content:'BESTSELLER';position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--deep);padding:5px 20px;border-radius:100px;font-size:.6rem;font-weight:700;letter-spacing:2.5px} .pricing-card:hover{transform:translateY(-8px);border-color:rgba(212,175,55,.15)} .pricing-card.ft:hover{transform:scale(1.04) translateY(-8px)} .pricing-card h3{font-family:'Cormorant Garamond',serif;font-size:1.15rem;margin-bottom:4px;font-weight:600} .pricing-card .dur{font-size:.78rem;color:var(--text-light);margin-bottom:24px;font-weight:300} .price-tag{font-family:'Cormorant Garamond',serif;font-size:2.4rem;color:var(--gold);margin-bottom:4px;font-weight:600} .price-tag small{font-size:.9rem;color:var(--text-light);font-family:'Outfit',sans-serif;font-weight:300} .price-note{font-size:.74rem;color:var(--text-muted);margin-bottom:24px} .pf{list-style:none;text-align:left;margin-bottom:28px} .pf li{padding:9px 0;border-bottom:1px solid rgba(212,175,55,.04);font-size:.82rem;color:var(--text-light);display:flex;align-items:center;gap:10px;font-weight:300} .pf li svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:2;flex-shrink:0} /* ═══════════════════════════════════ TESTIMONIALS ═══════════════════════════════════ */ .tg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .tc{background:var(--sand);border-radius:14px;padding:36px;border:1px solid rgba(0,0,0,.03);transition:all .5s cubic-bezier(.16,1,.3,1)} .tc:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.05)} .ts{margin-bottom:16px;display:flex;gap:3px} .ts svg{width:16px;height:16px;fill:var(--gold-dark)} .tc blockquote{font-size:.9rem;line-height:1.75;color:var(--text-body);margin-bottom:22px;font-style:italic;font-weight:300} .ta{display:flex;align-items:center;gap:12px} .tav{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--gold-dark),var(--gold));display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:700;color:var(--white)} .tai h4{font-size:.86rem;color:var(--deep)}.tai p{font-size:.72rem;color:var(--text-body)} /* ═══════════════════════════════════ FAQ ═══════════════════════════════════ */ .faq-grid{max-width:820px;margin:0 auto} .faq-item{border-bottom:1px solid rgba(212,175,55,.08);padding:24px 0} .faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:20px} .faq-q h3{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:500;line-height:1.4} .faq-q svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:2;flex-shrink:0;transition:transform .3s} .faq-item.open .faq-q svg{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s} .faq-item.open .faq-a{max-height:400px;padding-top:16px} .faq-a p{color:var(--text-light);font-size:.9rem;line-height:1.8;font-weight:300} /* ═══════════════════════════════════ CTA ═══════════════════════════════════ */ .cta-section{padding:130px 0;text-align:center;background:var(--deep);position:relative;overflow:hidden} .cta-section::before{content:'';position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(212,175,55,.04),transparent 60%)} .cta-section h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.1rem,4.2vw,3.4rem);margin-bottom:18px;font-weight:600} .cta-section>.container>p{color:var(--text-light);font-size:1rem;margin-bottom:44px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.8;font-weight:300} .cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .cta-ci{margin-top:56px;display:flex;gap:40px;justify-content:center;flex-wrap:wrap} .cci{display:flex;align-items:center;gap:10px;color:var(--text-light);font-size:.84rem;font-weight:300} .cci svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:2} /* ═══════════════════════════════════ FOOTER ═══════════════════════════════════ */ footer{background:var(--ocean);padding:64px 0 32px;border-top:1px solid rgba(212,175,55,.04)} .fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px} .fb .logo{font-size:1.3rem;display:inline-block;margin-bottom:16px} .fb p{color:var(--text-light);font-size:.82rem;line-height:1.8;max-width:300px;font-weight:300} .fc h4{font-size:.68rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:22px;font-weight:600} .fc ul{list-style:none}.fc li{margin-bottom:10px} .fc a{color:var(--text-light);text-decoration:none;font-size:.82rem;transition:color .3s;font-weight:300} .fc a:hover{color:var(--gold)} .fbot{text-align:center;padding-top:32px;border-top:1px solid rgba(212,175,55,.04);font-size:.74rem;color:var(--text-muted)} /* ═══════════════════════════════════ WHATSAPP FLOAT ═══════════════════════════════════ */ /* ---------- Sticky WhatsApp: runder Knopf in WhatsApp-Gruen mit Glow-Snake ---------- Der Lichtlauf entsteht aus einem Conic-Gradient, der per Maske auf einen Ring beschnitten und als Ganzes gedreht wird. Fuer einen Kreis ist die Drehung des Pseudoelements optisch identisch mit einer animierten Gradientenachse, braucht aber kein @property und laeuft damit in jedem Browser. pointer-events:none auf beiden Pseudoelementen ist zwingend, sonst schluckt das Overlay jeden Klick und der Knopf sieht dabei voellig normal aus. */ .waf{position:fixed;bottom:28px;right:28px;z-index:999;width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--wa);color:#fff;border:none;border-radius:50%;text-decoration:none;box-shadow:0 10px 30px rgba(37,211,102,.34),0 4px 12px rgba(0,0,0,.3);transition:background .35s ease,transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;isolation:isolate} .waf::before{content:"";position:absolute;inset:-5px;border-radius:50%;padding:4px;background:conic-gradient(from 0deg,transparent 0deg,transparent 210deg,rgba(94,247,154,.35) 250deg,rgba(140,255,190,.9) 292deg,#ffffff 322deg,#7dffb4 344deg,rgba(94,247,154,.4) 354deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;filter:drop-shadow(0 0 7px rgba(94,247,154,.95)) drop-shadow(0 0 16px rgba(37,211,102,.55));animation:waSnake 2.6s linear infinite;pointer-events:none} .waf::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.62);animation:waHalo 2.4s cubic-bezier(.16,1,.3,1) infinite;pointer-events:none;z-index:-1} .waf .wr{position:absolute;inset:-5px;border-radius:50%;padding:4px;background:conic-gradient(from 180deg,transparent 0deg,transparent 300deg,rgba(255,255,255,.75) 336deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;filter:drop-shadow(0 0 6px rgba(255,255,255,.8));animation:waSnake 2.6s linear infinite;pointer-events:none} .waf svg{width:29px;height:29px;fill:currentColor;position:relative;z-index:1} .waf .wd{position:absolute;top:3px;right:3px;width:11px;height:11px;background:#eaffef;border-radius:50%;border:2px solid var(--wa);animation:dotPulse 2s infinite;z-index:2} .waf:hover{background:var(--wa-dark);transform:translateY(-3px) scale(1.05);box-shadow:0 16px 42px rgba(37,211,102,.5),0 6px 16px rgba(0,0,0,.34)} .waf:hover::before{animation-duration:1.5s} .waf:focus-visible{outline:3px solid #eaffef;outline-offset:4px} @keyframes waSnake{to{transform:rotate(360deg)}} @keyframes waHalo{0%{box-shadow:0 0 0 0 rgba(37,211,102,.62)}70%{box-shadow:0 0 0 26px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} @media(max-width:480px){.waf{width:56px;height:56px;bottom:20px;right:20px}.waf svg{width:26px;height:26px}} /* ═══════════════════════════════════ RESPONSIVE ═══════════════════════════════════ */ @media(max-width:1024px){ .fleet-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:968px){ .nav-links{display:none} .nav-links.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(5,13,26,.98);padding:24px;gap:16px;backdrop-filter:blur(24px);border-bottom:1px solid rgba(212,175,55,.08)} .ham{display:flex} .fleet-grid,.pricing-grid,.tg,.why-grid{grid-template-columns:1fr} .exp-grid{grid-template-columns:1fr} .route-grid{grid-template-columns:1fr;gap:40px} .route-visual{height:280px} .stats-grid{grid-template-columns:repeat(2,1fr);gap:20px} .fg{grid-template-columns:1fr 1fr;gap:28px} section{padding:80px 0} .pricing-card.ft{transform:none}.pricing-card.ft:hover{transform:translateY(-8px)} .cta-ci{flex-direction:column;align-items:center;gap:16px} .intro-brand h2{font-size:2.2rem} } @media(max-width:480px){ .fleet-grid,.pricing-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:repeat(2,1fr)} } /* ========================================================================== Unterseiten: Seitenkopf, Brotkrumen, Fliesstext Noetig, weil der Reset alle Margins auf 0 setzt und saemtliche Ueberschriftenregeln auf Abschnitte gescoped sind. ========================================================================== */ .page-head{position:relative;padding:150px 0 68px;background:linear-gradient(165deg,var(--ocean) 0%,var(--deep) 100%);overflow:hidden} .page-head::after{content:"";position:absolute;right:-6%;top:-40%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.10) 0%,rgba(212,175,55,0) 70%);pointer-events:none} .page-head .container{position:relative;z-index:2} /* Die Basisregel stylt das Element `nav` (position:fixed). Die Brotkrumen sind semantisch ein