/* 🎨 ULTRA-MODERN DESIGN ENGINE: MORPH & GLASS */ :root { --liquid-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6); --smooth-zoom: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 💎 ELITE UPGRADE: Intelligent Border & Shadow für maximale Tiefe auf Weiß */ --glass-border: 1px solid rgba(255, 255, 255, 0.8); /* Wir nutzen einen doppelten Schatten für "Ambient Occlusion" Feeling */ /* 🎨 UPGRADED: Subtilere Ambient Shadows */ --glass-shadow: 0 2px 12px rgba(26, 32, 44, 0.04), /* Soft Ambient */ 0 6px 24px -2px rgba(26, 32, 44, 0.06), /* Mid Layer */ 0 0 0 1px rgba(26, 32, 44, 0.02); /* Fake Border */ --glass-bg: rgba(255, 255, 255, 0.65); /* Etwas milchiger für bessere Lesbarkeit */ --amina-blue: #48A0D6; --amina-pink: #D55A92; --amina-green: #7FB14E; --amina-yellow: #F59E0B; --amina-dark: #1E293B; /* 👈 ERGÄNZT – dunkler Farbton für Texte & Linsen */ /* 🎨 AWARD-LEVEL NOISE TEXTURES */ --noise-subtle: url('/images/noise-subtle.svg'); --noise-medium: url('/images/noise-medium.svg'); --noise-intense: url('/images/noise-intense.svg'); } * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; /* WICHTIG: Garantiert exakte 340px Kartenbreite für Zentrierung */ } .form-status { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; font-weight: 500; } .form-status--success { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.4); color: #16a34a; } .form-status--error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.4); color: #dc2626; } /* 🏷️ Eyebrow Badge - Glass Style (Fluid) */ .eyebrow-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.8); color: var(--amina-blue); padding: 0.5rem 1.4rem; border-radius: 9999px; font-weight: 800; font-size: clamp(0.65rem, 1.2vw, 0.75rem); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 1.5rem; box-shadow: 0 4px 15px rgba(72, 160, 214, 0.15); } @media (max-width: 767px) { .hero-eyebrow-hide { display: none !important; } } /* ❤️ Realistischer Herzschlag */ @keyframes realistic-heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1.1); } 45% { transform: scale(1.3); } } .animate-heartbeat { animation: realistic-heartbeat 1.4s infinite cubic-bezier(0.215, 0.61, 0.355, 1); display: inline-block; transform-origin: center; } /* ☀️ Sonnen Animation */ @keyframes sun-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-sun { animation: sun-spin 12s linear infinite; transform-origin: center; } /* 💎 EXTREME GLASS MORPH CARD - AWARD-LEVEL SHADOWS */ .glass-morph { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--glass-border); /* 🎨 LAYER 1: RESTING STATE - Subtle Ambient Shadow */ box-shadow: 0 2px 8px -2px rgba(26, 32, 44, 0.04), 0 4px 16px -4px rgba(26, 32, 44, 0.03), 0 0 0 1px rgba(26, 32, 44, 0.02); border-radius: 24px; /* Reduziert von 30px für moderneren Look */ transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; z-index: 1; /* 🎯 8PX GRID: Padding angepasst */ padding: 16px; /* 2×8px - Mobile Base */ } @media (min-width: 1024px) { .glass-morph { padding: 24px; /* 3×8px - Desktop */ } } /* 🎨 AWARD-LEVEL: SUBTLE NOISE OVERLAY */ .glass-morph::after { content: ""; position: absolute; inset: 0; background-image: var(--noise-subtle); background-size: 200px 200px; opacity: 0.015; pointer-events: none; z-index: 1; mix-blend-mode: overlay; } /* 🎨 AWARD-LEVEL HOVER - SUBTLE ELEGANCE */ .glass-morph:not(.no-hover):hover { border-radius: 32px 16px 32px 16px; /* Sanftere Morphing-Kurve */ /* 🎯 LAYER 2: HOVER STATE - Elevated Shadow */ transform: translateY(-6px) scale(1.015); /* 50% subtiler! */ background: rgba(255, 255, 255, 0.85); /* Stärkerer Kontrast */ border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 8px 24px -4px rgba(26, 32, 44, 0.08), 0 16px 48px -8px rgba(26, 32, 44, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.4) inset; /* Innerer Glow */ } /* Icons: Transition im Basis-Selektor für symmetrisches Hover-Leave */ .glass-morph .morph-icon { transition: transform 0.4s ease; } .glass-morph:hover .morph-icon { transform: scale(1.2) rotate(10deg); } /* 🏠 BOX 1: HAUS TÜR EFFEKT */ .house-door { transform-origin: left; transition: transform 0.5s ease-in-out; } .glass-morph:hover .house-door { transform: scaleX(0.1); /* Tür geht auf */ } /* 👶 BOX 2: SCHNULLER ZU GESICHT */ .icon-swap-wrapper { position: relative; width: 28px; height: 28px; } .icon-pacifier, .icon-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.4s ease-in-out; } .icon-face { opacity: 0; } .glass-morph:hover .icon-pacifier { opacity: 0; } .glass-morph:hover .icon-face { opacity: 1; } /* ⏰ BOX 3: UHR ZEIT EFFEKT */ .clock-hand-hour { transform-origin: 12px 12px; transition: transform 0.8s ease-in-out; /* Start: 7:30 (ca. 225 Grad) */ transform: rotate(225deg); } .clock-hand-min { transform-origin: 12px 12px; /* Start: 30 (180 Grad) */ transform: rotate(180deg); } .glass-morph:hover .clock-hand-hour { /* Ziel: 16:30 (4:30) -> ca. 135 Grad + 360 für Rotation im Uhrzeigersinn = 495 Grad */ transform: rotate(495deg); } /* 📸 IMAGE ZOOM ENGINE */ .hero-zoom-img { transition: transform 1.5s var(--smooth-zoom); transform-origin: center center; width: 100%; height: 100%; object-fit: cover; /* 🎨 PREMIUM COLOR UNIFIER – hauchzarter Farbhauch, der alle Bilder an die Brand anbindet */ filter: brightness(1.02) contrast(1.02); mix-blend-mode: normal; } /* 🎨 HERO IMAGE BRAND-COLOR WASH */ .hero-image-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; } .hero-image-wrapper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(72,160,214,0.06), rgba(213,90,146,0.04)); pointer-events: none; border-radius: inherit; opacity: 0.3; transition: opacity 0.6s ease; z-index: 2; } .glass-morph:hover .hero-image-wrapper::after { opacity: 0.5; } .glass-morph:hover .hero-zoom-img { transform: scale(1.35); } /* ✨ IMAGE SHINE EFFECT — nur on hover */ .image-shine { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-25deg); pointer-events: none; z-index: 10; } @keyframes shine-slide { 0% { left: -100%; } 100% { left: 200%; } } .glass-morph:hover .image-shine { animation: shine-slide 1.5s ease-in-out forwards; } /* 🪁 NEW: SUBTLE IMAGE FLOAT ANIMATION */ @keyframes subtle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .animate-subtle-float { animation: subtle-float 6s ease-in-out infinite; } .animate-float { --float-duration: 15s; animation-duration: var(--float-duration); } /* ⏸️ GPU-PAUSE: Float-Animationen stoppen wenn Hero off-screen */ .js-paused .animate-subtle-float, .js-paused .animate-float { animation-play-state: paused; } /* ⏸️ GPU-PAUSE: Snake-Animation stoppen wenn CTA off-screen */ .btn-super-cta.snake-paused::before, .btn-super-cta.snake-paused::after { animation-play-state: paused; } /* 🟢 RADAR PULSE ANIMATION (Für das Status Badge) */ .radar-pulse { position: relative; display: flex; align-items: center; justify-content: center; } .radar-pulse::before, .radar-pulse::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(127,177,78,0.8); background: transparent; opacity: 0; transform: scale(1); z-index: 2; } .radar-pulse::before { animation: sonar-pulse 2.8s cubic-bezier(0.2, 0.6, 0.4, 1) infinite 0s; } .radar-pulse::after { animation: sonar-pulse 2.8s cubic-bezier(0.2, 0.6, 0.4, 1) infinite 1.4s; } @keyframes sonar-pulse { 0% { transform: scale(1); opacity: 0; } 8% { opacity: 0.7; } 100% { transform: scale(3.5); opacity: 0; } } .radar-pulse-red { position: relative; display: flex; align-items: center; justify-content: center; } .radar-pulse-red::before, .radar-pulse-red::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(239,68,68,0.8); background: transparent; opacity: 0; transform: scale(1); z-index: 2; } .radar-pulse-red::before { animation: sonar-pulse 2.8s cubic-bezier(0.2, 0.6, 0.4, 1) infinite 0s; } .radar-pulse-red::after { animation: sonar-pulse 2.8s cubic-bezier(0.2, 0.6, 0.4, 1) infinite 1.4s; } /* 🧬 BUTTONS: LIQUID MORPH (Standard für andere Sektionen) */ .btn-liquid { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 1.2rem 2.8rem; border-radius: 20px; font-weight: 800; border: none; transition: transform 0.5s var(--liquid-bounce), border-radius 0.5s var(--liquid-bounce), box-shadow 0.5s var(--liquid-bounce); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); overflow: hidden; cursor: pointer; color: white; } /* 🎨 HAPTISCHER NOISE FÜR BUTTONS */ .btn-liquid::before { content: ""; position: absolute; inset: 0; background-image: var(--noise-medium); background-size: 150px 150px; opacity: 0.08; pointer-events: none; z-index: 1; mix-blend-mode: soft-light; } .btn-liquid:hover::before { opacity: 0.12; /* Intensiviert sich beim Hover */ } .btn-liquid:hover { border-radius: 30px 10px 30px 10px; transform: translateY(-4px) scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,0.1); } .btn-liquid .cta-text { display: inline-block; transition: transform 0.4s var(--liquid-bounce); } .btn-liquid:hover .cta-text { transform: translateY(-2px); } .btn-liquid .cta-icon { transition: transform 0.4s var(--liquid-bounce) 0.05s; } .btn-liquid:hover .cta-icon { transform: translateX(4px) translateY(-2px); } .btn-pink { background-color: var(--amina-pink); } .btn-blue { background-color: var(--amina-blue); } /* 🍡 PASTEL BLUE BUTTON - KONTRASTVERBESSERT (WCAG AA) */ .btn-pastel-blue { background-color: #B0D4F0; /* dunkleres Pastell */ color: #1E4A6B; /* dunkles, sattes Blau – Kontrast > 4.5:1 */ font-weight: 900; } .btn-pastel-blue:hover { background-color: #9AC0E0; color: #1E4A6B; box-shadow: 0 6px 20px rgba(72, 160, 214, 0.2); } .btn-pastel-blue:active { background-color: #86B2D0; transform: translateY(-2px) scale(0.98); } /* 🎨 NEW: LIQUID TEXT GRADIENT (Exklusiv Amina Blau & Lila/Pink) */ .text-gradient-flow { background: linear-gradient( to right, var(--amina-blue) 0%, var(--amina-pink) 50%, var(--amina-blue) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; background-size: 200% auto; /* Optimiert für weiche, große Farbflächen */ animation: textShine 6s ease-in-out infinite alternate; } @keyframes textShine { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* ⏸️ GPU-PAUSE: textShine stoppen wenn Element off-screen */ .text-gradient-flow.gradient-paused { animation-play-state: paused; } /* 🚀 SUPER CTA (GLASSMORPHISM & LIQUID SNAKE ENGINE) ── ⚠️ INTENTIONALER OVERRIDE: Dieser Block ersetzt vollständig die global.css-Definition für index.php. global.css verwendet Rainbow-Rotation (ueber-uns, fuer-eltern). index.php verwendet Liquid-Snake-Border. Änderungen an global.css wirken sich NICHT auf index.php aus. */ .btn-super-cta { position: relative; display: inline-flex; justify-content: center; align-items: center; border-radius: 26px; background: transparent; border: none; box-shadow: none; /* DOGMA: KEIN GLOW AUF BUTTONS */ cursor: pointer; z-index: 10; transition: transform 0.6s var(--liquid-bounce); text-decoration: none; -webkit-tap-highlight-color: transparent; overflow: hidden; /* Einkapselung für pures Glas-Gefühl */ } .btn-super-cta:hover { transform: translateY(-6px) scale(1.04); } /* 🟥 MODIFIER: BOX SHAPE FOR SECTIONS (Größe anpassen) */ .btn-super-cta.btn-super-cta-box .cta-content { padding: 1.2rem 2.8rem; /* Stellt sicher, dass die Proportionen exakt bleiben */ } /* 📱 HERO BUTTON MOBILE WIDTH FIX */ @media (max-width: 640px) and (orientation: portrait) { .hero-cta-mobile-center .magnetic-wrap { width: 95% !important; display: flex !important; } .hero-btn-mobile-full { width: 100% !important; } } @media (orientation: portrait) { .hero-cta-mobile-center { display: flex; justify-content: center; width: 100%; } } /* 🐍 LAYER 1: THE LIQUID SNAKE (Hardware Accelerated) */ .btn-super-cta::before { content: ""; position: absolute; width: 300%; aspect-ratio: 1; top: 50%; left: 50%; z-index: 0; background: conic-gradient( transparent 0deg, transparent 110deg, var(--amina-blue) 250deg, var(--amina-pink) 360deg ); transform: translate(-50%, -50%) rotate(0deg); animation: snake-spin 4s linear infinite; /* will-change bewusst entfernt: moderne Browser compositen transform-Animationen automatisch */ } .btn-super-cta:hover::before { animation: snake-spin 0.8s linear infinite; } @keyframes snake-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } /* 🥛 LAYER 2: INTERNAL GLASS MASK (Creates the border line) */ .btn-super-cta::after { content: ""; position: absolute; inset: 2px; background: rgba(255, 255, 255, 0.9); border-radius: 24px; z-index: 1; transition: background 0.5s var(--liquid-bounce); } @media (max-width: 768px) { .btn-super-cta::after { inset: 3px; /* Dickere Snake-Border auf Mobile */ } } .btn-super-cta:hover::after { background: rgba(255, 255, 255, 0.98); } /* 🔘 LAYER 3: INNER CONTENT */ .cta-content { display: flex; align-items: center; justify-content: center; padding: 1.4rem 3.5rem; font-size: 1rem; letter-spacing: 0.08em; font-weight: 900; color: var(--amina-pink); text-transform: uppercase; position: relative; z-index: 2; width: 100%; height: 100%; transition: color 0.5s var(--liquid-bounce); } @media (max-width: 768px) { .mobile-btn-container .cta-content { font-size: 0.9rem; letter-spacing: 0.06em; padding: 1.2rem 1.8rem; } } /* 🎨 HAPTIC NOISE LAYER */ .cta-content::after { content:''; position:absolute; inset:0; background-image:var(--noise-subtle); background-size:200px 200px; opacity:0.1; pointer-events:none; z-index:1; mix-blend-mode:overlay; border-radius: inherit; } /* ➡️ ARROW ANIMATION */ .btn-super-cta .icon-arrow { margin-left:10px; transition:transform 0.4s var(--liquid-bounce); color: var(--amina-pink); } .btn-super-cta:hover .icon-arrow { animation:arrow-loop 1s ease-in-out infinite; } @keyframes arrow-loop { 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} } /* 💧 MAP ZOOM: SOFT GLASS BUBBLES */ .map-zoom-btn { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 2px solid #ffffff; border-radius: 50%; color: var(--amina-blue); font-size: 24px; font-weight: 400; box-shadow: 0 8px 20px rgba(72, 160, 214, 0.15); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); cursor: pointer; z-index: 50; } .map-zoom-btn:hover { transform: scale(1.1); background: var(--amina-blue); color: #ffffff; border-color: var(--amina-blue); box-shadow: 0 12px 25px rgba(72, 160, 214, 0.3); } /* Reveal Staggering */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.active { opacity: 1; transform: translateY(0); } /* 🛡️ FOUC PREVENTION: Unterdrückt ALLE reveal-Transitions während des initialen Page-Renders. Wird via JS nach dem ersten vollständigen Paint entfernt. */ html.js-preload .reveal, html.js-preload .hero-image-entrance, html.js-preload .hero-sub-entrance, html.js-preload .hero-cta-entrance, html.js-preload .hero-boxes-entrance { transition: none !important; animation: none !important; } /* 🌀 FEATURE GRID STYLES — Gap-Override 8px Grid */ /* 🎯 CUSTOM GRID OVERRIDE (ersetzt Tailwind gap-5 md:gap-8) */ .focus-grid { gap: 16px !important; /* 2×8px - Mobile */ } @media (min-width: 768px) { .focus-grid { gap: 24px !important; /* 3×8px - Desktop */ } } .feature-row { display: flex; align-items: center; gap: 1.25rem; /* 20px = 2.5×8px */ text-align: left; } .feature-icon-left { flex-shrink: 0; /* 🎯 8PX GRID: Perfekte Icon-Größen */ width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); border-radius: 12px; /* 💎 JEWEL GLASS EFFEKT – aus dem Award-Block übernommen */ border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.6), inset 0 -1px 4px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @media (min-width: 1024px) { .feature-icon-left { width: 56px; height: 56px; } } /* 📱 MOBILE LANDSCAPE OPTIMIZATION (QUERFORMAT) */ /* Target most smartphones in landscape orientation (max-height restriction) */ /* 🚀 INCREASED MAX-HEIGHT TO 600PX TO CATCH ALL PHONES */ @media (max-height: 600px) and (orientation: landscape) { /* Force Grid to be one row */ .mobile-landscape-grid { flex-wrap: nowrap !important; gap: 0.5rem !important; margin-bottom: 1rem !important; } /* Compress Boxes */ .mobile-landscape-box { min-width: 0 !important; /* Allow shrinking below min-w-[100px] */ flex: 1 1 0% !important; /* Distribute space equally */ padding: 0.5rem !important; /* Reduced Padding */ border-radius: 12px !important; } /* Shrink Icons */ .mobile-landscape-box svg, .mobile-landscape-box .icon-swap-wrapper { width: 1.25rem !important; /* ~20px */ height: 1.25rem !important; } /* Shrink Text */ .mobile-landscape-box p { font-size: 0.65rem !important; /* Tiny Text */ line-height: 1.1 !important; margin-top: 0.25rem !important; white-space: nowrap !important; /* Prevent break if possible */ } /* Reduce Margins inside box */ .mobile-landscape-box .morph-icon { margin-bottom: 0.1rem !important; } /* 🔥 NEW FOR STEP CARDS IN LANDSCAPE */ /* Zwingt die 3 Step-Karten in eine Reihe und macht sie ultra-flach */ #stepsContainer { flex-direction: column !important; flex-wrap: wrap !important; gap: 0.4rem !important; } .step-card { padding: 0.75rem !important; flex: 1 1 auto !important; min-width: 0 !important; flex-direction: row !important; text-align: left !important; gap: 0.5rem !important; } .accordion-header { padding: 0.55rem 0.9rem !important; gap: 0.65rem !important; border-radius: 14px !important; } .accordion-step.is-open .accordion-header { border-radius: 14px 14px 0 0 !important; } .accordion-body { border-radius: 0 0 14px 14px !important; } .accordion-body-inner { padding: 0 0.9rem 0 calc(44px + 0.65rem + 0.9rem) !important; } .accordion-step.is-open .accordion-body-inner { padding-top: 0.5rem !important; padding-bottom: 0.7rem !important; } .accordion-body-text { font-size: 0.82rem !important; line-height: 1.5 !important; } .accordion-goal-wrap { display: none !important; } /* Linsen in Landscape kleiner */ .glass-lens { width: 40px !important; height: 40px !important; margin: 0 auto !important; justify-content: center; /* WICHTIG für Zahl-Zentrierung */ align-items: center; } /* Inner dots kleiner */ .glass-lens::after { width: 12px !important; height: 12px !important; } /* Riesige Zahlen ausblenden um Platz zu sparen */ .step-watermark { display: none !important; } /* 🚀 NEW: SHOW NUMBER INSIDE LENS (MOBILE LANDSCAPE ONLY) */ .lens-number { display: block !important; font-size: 1.2rem !important; } .step-card-content h3 { font-size: 0.85rem !important; margin-bottom: 0.1rem !important; } .step-card-content p { font-size: 0.65rem !important; line-height: 1.1 !important; } } /* 🎨 REFINED: Subtilere Icon-Motion */ .glass-morph:hover .feature-icon-left { transform: scale(1.08) rotate(-2deg); /* Weniger aggressiv */ filter: brightness(1.05); /* Leichtes Glow */ } /* 🎨 AWARD-LEVEL: Micro Text Motion */ /* 🎨 ENHANCED: Text Motion mit Opacity */ .feature-text-anim { transition: transform 0.5s var(--liquid-bounce), opacity 0.3s ease; opacity: 0.92; /* Leicht transparent im Ruhezustand */ } .glass-morph:hover .feature-text-anim { transform: translateX(4px); /* Subtiler Slide */ opacity: 1; /* Voll sichtbar beim Hover */ } /* Spotlight Overlay (wird via JS gesteuert) */ .glass-morph::before { content: ""; position: absolute; inset: 0; background: radial-gradient( 600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.3), transparent 40% ); opacity: 0; /* Standardmäßig unsichtbar */ transition: opacity 0.5s ease; pointer-events: none; z-index: 2; } .glass-morph:hover::before { opacity: 1; /* Sichtbar beim Hover */ } /* 🆕 FEATURE: Dynamic Hover Borders & Backgrounds (Full Immersion) */ /* UPDATED: Added '.is-active' selector for auto-loop */ .glass-morph.hover-blue:hover, .glass-morph.hover-blue.is-active { border-color: var(--amina-blue); background: rgba(72, 160, 214, 0.08); /* Zarter Tint */ box-shadow: 0 10px 40px rgba(72, 160, 214, 0.2); } .glass-morph.hover-pink:hover, .glass-morph.hover-pink.is-active { border-color: var(--amina-pink); background: rgba(213, 90, 146, 0.08); box-shadow: 0 10px 40px rgba(213, 90, 146, 0.2); } .glass-morph.hover-green:hover, .glass-morph.hover-green.is-active { border-color: var(--amina-green); background: rgba(127, 177, 78, 0.08); box-shadow: 0 10px 40px rgba(127, 177, 78, 0.2); } .glass-morph.hover-yellow:hover, .glass-morph.hover-yellow.is-active { border-color: var(--amina-yellow); background: rgba(245, 158, 11, 0.08); box-shadow: 0 10px 40px rgba(245, 158, 11, 0.2); } /* 🔥 HIGH-END SVG MOTION CLASSES */ /* 1. Group: Bouncing Heads */ @keyframes bounce-heads { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .glass-morph:hover .icon-group-head { animation: bounce-heads 0.6s ease-in-out infinite; } .glass-morph:hover .icon-group-head:nth-child(2) { animation-delay: 0.1s; } .glass-morph:hover .icon-group-head:nth-child(3) { animation-delay: 0.2s; } /* 2. Heart: Pulse Beat */ @keyframes heart-pulse { 0% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } 60% { transform: scale(1); } 100% { transform: scale(1); } } .glass-morph:hover .icon-heart-body { transform-origin: center; animation: heart-pulse 1.2s ease-in-out infinite; } /* 3. Speech: Typing Dots Wave */ @keyframes typing-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .glass-morph:hover .chat-dot { animation: typing-wave 1s ease-in-out infinite; } .glass-morph:hover .chat-dot:nth-child(1) { animation-delay: 0s; } .glass-morph:hover .chat-dot:nth-child(2) { animation-delay: 0.15s; } .glass-morph:hover .chat-dot:nth-child(3) { animation-delay: 0.3s; } /* 4. Brush: Painting Motion */ @keyframes brush-stroke { 0%, 100% { transform: rotate(0) translateX(0); } 50% { transform: rotate(-10deg) translateX(-3px); } } .glass-morph:hover .icon-brush { transform-origin: bottom left; animation: brush-stroke 0.8s ease-in-out infinite; } /* 5. Nature: Sun Rays Spin */ @keyframes spin-rays { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } .glass-morph:hover .sun-rays { transform-origin: center; animation: spin-rays 4s linear infinite; } /* 6. Parents: Family Nuzzle */ @keyframes nuzzle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } /* Heads lean in */ } .glass-morph:hover .icon-parent-1 { transform-origin: bottom right; animation: nuzzle 2s ease-in-out infinite; } .glass-morph:hover .icon-parent-2 { transform-origin: bottom left; animation: nuzzle 2s ease-in-out infinite 0.1s; } .svg-motion { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* 🗺️ MAP ENGINE: PIN COLOR HACK */ #mapFrame ~ .map-zoom-btn, #mapFrame ~ * .map-zoom-btn { display: none !important; } #mapFrame { width: 100% !important; height: 140% !important; position: absolute; top: -22%; left: 0; /* 🎨 MAGIC FILTER: Macht die Nadel Pink & die Karte weicher */ filter: saturate(0.85) contrast(1.1) brightness(1.05) hue-rotate(-50deg); /* Dreht Rot zu Amina-Pink */ transition: filter 0.5s ease; border: none; } /* Hover: Farbe wird lebendiger */ .map-container:hover #mapFrame { filter: saturate(0.95) contrast(1.0) brightness(1.02) hue-rotate(0deg); } /* 📍 MAP CARD SPECIFICS - 3D INSET GEHÄUSE */ .map-container { border-radius: 40px; overflow: hidden; border: none; box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.08), inset 0 0 0 6px rgba(255, 255, 255, 0.9), inset 0 0 20px rgba(255, 255, 255, 0.5); position: relative; isolation: isolate; background: #eef2f6; width: 100%; transform: translateZ(0); } /* (weiter unten bei map-floating-card) */ .map-floating-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: none; /* Harter Border gelöscht */ border-radius: 24px; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15), inset 0 1px 3px rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,0.5); /* Lichtbrechung an der Kante */ display: flex; align-items: center; /* Gap wird nun via HTML gesteuert */ transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* WICHTIG: Kein max-width mehr! Die Box wächst mit dem Text. */ z-index: 50; position: relative; overflow: hidden; } /* 🎨 FLOATING CARD PREMIUM TEXTURE */ .map-floating-card::after { content: ""; position: absolute; inset: 0; background-image: var(--noise-subtle); background-size: 200px 200px; opacity: 0.025; pointer-events: none; mix-blend-mode: overlay; border-radius: inherit; } .map-floating-card:hover { transform: translateY(-5px) scale(1.02); background: rgba(255, 255, 255, 0.95); } /* ===== TIMELINE ULTRA MODERN – INFINITE LOOP ===== */ .timeline-outer-container { position: relative; width: 100%; overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); padding: 20px 0 30px 0; margin-top: -10px; margin-bottom: -30px; } /* 🌟 FEINSCHLIFF: PROGRESS LINE */ /* Progress Bar ersetzt durch Dots — DOM-Element bleibt, kein PHP-Eingriff */ .timeline-progress-track { display: none; } /* ── TRAVELING SUN ARC TIMELINE ── */ .timeline-arc-container { display: flex; justify-content: center; padding: 2px 20px 0 20px; margin-top: -40px; position: relative; z-index: 5; } .timeline-arc-svg { width: 100%; max-width: 260px; height: 88px; overflow: visible; } /* Basis-Bogen: hauchfeiner Strich */ .arc-track { fill: none; stroke: rgba(0, 0, 0, 0.17); stroke-width: 1.2px; stroke-linecap: round; transition: stroke-dasharray 0.45s cubic-bezier(0.4, 0, 0.2, 1); } /* Aktives Segment: nur sichtbar während Swipe */ .arc-active { fill: none; stroke-width: 2.5px; stroke-linecap: round; opacity: 0; transition: stroke-dashoffset 0.45s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.25s ease, opacity 0.1s ease; } /* arc-active: dauerhaft unsichtbar — Sonne ist einziger aktiver Marker */ /* Segment-Punkte: sehr dezent, reine Orientierungshilfe */ .arc-seg-dot { fill: rgba(0, 0, 0, 0.15); transition: opacity 0.3s ease, fill 0.4s ease; opacity: 1; } /* Sonne: reine transform-Animation, kein Spring */ .arc-sun { transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .arc-sun-circle { transition: fill 0.4s ease; } .arc-sun-ray { stroke-width: 1.2px; stroke-linecap: round; opacity: 0.70; transition: stroke 0.4s ease; } /* Accent-Halo: nimmt Kartenfarbe sehr dezent auf */ .arc-sun-halo { fill: none; stroke-width: 1.2px; opacity: 0.30; transition: stroke 0.45s ease; } /* Zeitanker: klar lesbar, hochwertig */ .arc-time-label { font-size: 9px; font-weight: 700; fill: rgba(0, 0, 0, 0.46); font-family: inherit; letter-spacing: 0.08em; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .arc-sun, .arc-active, .arc-sun-circle, .arc-sun-ray, .arc-sun-halo { transition: none; } } .timeline-wrapper { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; display: flex; /* 🎯 DESKTOP ZENTRIERUNG & FIX GEGEN ABSCHNEIDEN */ /* Vertikal: 60px Padding oben/unten zwingt den Scroll-Bereich, groß genug zu sein */ padding: 60px calc(50% - 170px); cursor: grab; user-select: none; -webkit-user-select: none; } .timeline-wrapper.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto !important; } .timeline-wrapper.is-dragging .time-card { cursor: grabbing; pointer-events: none; } .timeline-wrapper::-webkit-scrollbar { display: none; } .timeline-track { display: flex; gap: 40px; width: max-content; } .time-card { scroll-snap-align: center; flex: 0 0 340px; min-height: 280px; padding: 32px; /* Modern Glass Effect */ background: var(--glass-bg); backdrop-filter: blur(8px); /* angepasst an Performance‑Update */ -webkit-backdrop-filter: blur(8px); border: var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 32px; opacity: 0.65; transform: scale(0.95) translateY(5px); transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.45s ease; cursor: grab; user-select: none; position: relative; overflow: hidden; } /* 🔥 NEU: Tastatur‑Focus für Timeline-Cards – WCAG 2.2 AA konform */ .time-card:focus-visible { outline: 3px solid var(--amina-blue); outline-offset: 4px; box-shadow: 0 0 0 6px rgba(72, 160, 214, 0.25); opacity: 1; transform: scale(1.02) translateY(-2px); z-index: 100; } /* 🔥 NUDGE: Transition-basiert – immun gegen animation-play-state:paused */ .time-card.is-nudging { transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.9s ease !important; transform: scale(0.95) translateY(5px) !important; opacity: 0.65 !important; } .time-card.is-nudging.nudge-peak { transform: scale(0.96) translateY(3px) !important; opacity: 0.72 !important; } /* 🕒 TIMELINE CLOCK (TASK IMPLEMENTATION) */ /* 🆕 UPDATE: Positioned tighter to the corner */ .timeline-clock-wrapper { position: absolute; top: clamp(8px, 3.3vw, 16px); right: clamp(8px, 3.3vw, 16px); width: clamp(28px, 10.2vw, 50px); height: clamp(28px, 10.2vw, 50px); z-index: 10; pointer-events: none; opacity: 0.8; } .timeline-clock-svg { width: 100%; height: 100%; fill: none; stroke: var(--amina-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.5s ease; } .time-card.active .timeline-clock-svg { stroke: var(--amina-blue); /* 🔥 FIX: ZEIGER BLEIBEN JETZT IMMER BLAU */ } /* HANDS - DYNAMIC CSS VARIABLES */ .t-hand-hour, .t-hand-min { transform-origin: 12px 12px; } /* Use CSS Variables for Start Position */ .t-hand-hour { transform: rotate(var(--h-start, 0deg)); } .t-hand-min { transform: rotate(var(--m-start, 0deg)); } /* Dynamic Animations based on CSS Variables */ @keyframes dynamic-time-pass-min { 0% { transform: rotate(var(--m-start)); } 100% { transform: rotate(var(--m-end)); } } @keyframes dynamic-time-pass-hour { 0% { transform: rotate(var(--h-start)); } 100% { transform: rotate(var(--h-end)); } } /* Apply animation on Active State */ .time-card.active .t-hand-min { animation: dynamic-time-pass-min 12s linear infinite; } .time-card.active .t-hand-hour { animation: dynamic-time-pass-hour 12s linear infinite; } .time-card:active { cursor: grabbing; } /* 💎 HIGH-END ACTIVE STATE OPTIMIZATION - COLOR PACING VERSION */ /* Standard Variables (Fallback) */ .time-card { --card-accent: var(--amina-blue); /* Default */ } /* Color Classes applied in HTML */ .time-card.accent-blue { --card-accent: var(--amina-blue); } .time-card.accent-pink { --card-accent: var(--amina-pink); } .time-card.accent-green { --card-accent: var(--amina-green); } .time-card.accent-yellow { --card-accent: var(--amina-yellow); } .time-card.active { opacity: 1; transform: scale(1.02) translateY(-3px); background: rgba(255, 255, 255, 0.98); /* Border nimmt die Akzentfarbe an */ border: 2px solid var(--card-accent); /* 🔥 DYNAMIC GLOW basierend auf der Akzentfarbe */ box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255,255,255,0.5) inset, 0 10px 30px -10px var(--card-accent); /* Farbiger Glow */ z-index: 100; } /* Färbt die Uhr passend zur Karte */ .time-card.active .timeline-clock-svg { stroke: var(--card-accent) !important; filter: drop-shadow(0 0 5px var(--card-accent)); } /* Färbt die Zeit-Typo passend zur Karte */ .time-card.active .time { color: var(--card-accent); background: none; /* Entfernt alten Gradient */ -webkit-text-fill-color: initial; text-shadow: 0 0 20px var(--card-accent); /* Leichter Glow Text */ } /* 🔥 NEXT CARD NUDGE ANIMATION – scale+opacity, kein translateX (overflow:hidden safe) */ @keyframes nudge-peek { 0%, 100% { transform: scale(0.9) translateY(10px); opacity: 0.5; } 40% { transform: scale(0.97) translateY(4px); opacity: 0.82; } 60% { transform: scale(0.97) translateY(4px); opacity: 0.82; } } /* Time Highlight */ .time-card .time { display: block; font-size: 14px; font-weight: 900; color: var(--amina-pink); /* Fallback */ letter-spacing: 0.05em; margin-bottom: 12px; text-transform: uppercase; transition: color 0.5s ease; } /* 🎨 AKTIVE BOX: GRADIENT TYPOGRAFIE */ .time-card.active .time { background: linear-gradient(90deg, var(--amina-blue), var(--amina-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* Für Browser Support */ } .time-card h3 { font-size: 20px; font-weight: 800; color: #2D3E50; margin-bottom: 12px; line-height: 1.2; } .time-card p { font-size: 15px; line-height: 1.6; color: #64748B; font-weight: 500; } .time-card:not(.active):hover { opacity: 0.8; } @media (max-width: 640px) { .timeline-wrapper { /* MOBILE: Links ausgerichtet — Padding reduziert für Kompaktheit */ padding: 32px 24px; scroll-padding-left: 24px; } .time-card { flex: 0 0 280px; min-height: 260px; padding: 24px; scroll-snap-align: start; } .timeline-track { gap: 20px; } .timeline-outer-container { /* 🧠 UX UPGRADE: Beidseitiger Fade-Out signalisiert "Hier geht's weiter" */ mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); padding-top: 20px; margin-top: -4px; } .timeline-progress-track { width: 80%; } } /* Desktop: Steps + Testimonials nebeneinander */ /* Mobile: Tagesablauf-Header — mb-14 (56px) auf kompaktere 20px reduzieren */ @media (max-width: 640px) { section:has(.timeline-outer-container) .text-center.reveal { margin-bottom: 1.25rem; } } @media (min-width: 1024px) { .steps-testi-grid { grid-template-columns: 1fr 1fr !important; gap: 5rem !important; } .steps-testi-grid > .lg\:hidden { display: none !important; } } /* 🎯 ACCORDION STEPS — HIGH END */ .accordion-steps { position: relative; display: flex; flex-direction: column; gap: 14px; } /* Verbindungslinie — hinter Karten, von Orbit-Mitte zu Orbit-Mitte */ .accordion-steps::before { content: ''; position: absolute; left: calc(1.1rem + 28px); top: calc(1.1rem + 28px); bottom: calc(1.1rem + 14px); width: 3px; background: linear-gradient( to bottom, rgba(72,160,214,0.5) 0%, rgba(213,90,146,0.45) 50%, rgba(127,177,78,0.4) 100% ); border-radius: 3px; pointer-events: none; z-index: -1; } .accordion-step { position: relative; z-index: 1; } /* Glow hinter aktiver Karte */ .accordion-step::before { content: ''; position: absolute; inset: -6px; border-radius: 24px; pointer-events: none; z-index: -1; opacity: 0; transition: opacity 0.45s ease; } .accordion-step.step-blue.is-open::before { background: radial-gradient(ellipse at 50% 25%, rgba(72,160,214,0.12) 0%, transparent 65%); opacity: 1; } .accordion-step.step-pink.is-open::before { background: radial-gradient(ellipse at 50% 25%, rgba(213,90,146,0.12) 0%, transparent 65%); opacity: 1; } .accordion-step.step-green.is-open::before { background: radial-gradient(ellipse at 50% 25%, rgba(127,177,78,0.12) 0%, transparent 65%); opacity: 1; } /* Aktiver Step: Glow via box-shadow auf Header — GPU composited */ .accordion-step.step-blue.is-open .accordion-header { box-shadow: 0 10px 28px rgba(72,160,214,0.2), inset 0 1px 0 rgba(255,255,255,1); } .accordion-step.step-pink.is-open .accordion-header { box-shadow: 0 10px 28px rgba(213,90,146,0.2), inset 0 1px 0 rgba(255,255,255,1); } .accordion-step.step-green.is-open .accordion-header { box-shadow: 0 10px 28px rgba(127,177,78,0.2), inset 0 1px 0 rgba(255,255,255,1); } /* ── HEADER ROW ── */ .accordion-header { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.1rem 1.1rem 1.1rem; background: rgba(255,255,255,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.95); border-radius: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,1); border-top: 1px solid rgba(255,255,255,0.85); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, border-color 0.35s ease, border-radius 0.35s ease, box-shadow 0.35s ease; } /* Lichtreflex oben */ .accordion-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.65) 0%, transparent 60%); pointer-events: none; opacity: 1; border-radius: inherit; z-index: 0; } /* Geschlossen: sanfter Hover */ .accordion-step:not(.is-open) .accordion-header:hover { transform: translateX(4px); background: rgba(255,255,255,0.9); box-shadow: 0 6px 20px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,1); } .accordion-step:not(.is-open) .accordion-header:hover::after { opacity: 0.6; } /* Offen: Header = oberster Teil der Karte */ .accordion-step.step-blue.is-open .accordion-header { background: rgba(248,252,255,0.96); border-color: rgba(72,160,214,0.3); border-radius: 18px 18px 0 0; box-shadow: inset 0 0 0 1px rgba(72,160,214,0.1), inset 0 1px 0 rgba(255,255,255,1), 0 2px 0 rgba(72,160,214,0.06); } .accordion-step.step-pink.is-open .accordion-header { background: rgba(255,250,253,0.96); border-color: rgba(213,90,146,0.3); border-radius: 18px 18px 0 0; box-shadow: inset 0 0 0 1px rgba(213,90,146,0.1), inset 0 1px 0 rgba(255,255,255,1), 0 2px 0 rgba(213,90,146,0.06); } .accordion-step.step-green.is-open .accordion-header { background: rgba(250,255,250,0.96); border-color: rgba(127,177,78,0.3); border-radius: 18px 18px 0 0; box-shadow: inset 0 0 0 1px rgba(127,177,78,0.1), inset 0 1px 0 rgba(255,255,255,1), 0 2px 0 rgba(127,177,78,0.06); } /* ── ORBIT NUMBER ── */ .orbit-wrap { position: relative; width: 56px; height: 56px; flex-shrink: 0; } /* Rotating arc ring */ .orbit-ring { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(currentColor 150deg, transparent 150deg); -webkit-mask: radial-gradient(farthest-side, transparent 80%, white 82%); mask: radial-gradient(farthest-side, transparent 80%, white 82%); animation: orbit-spin 1.4s linear infinite; animation-play-state: paused; opacity: 0; transition: opacity 0.4s ease; } @keyframes orbit-spin { to { transform: rotate(360deg); } } .accordion-step.step-blue .orbit-ring { color: var(--amina-blue); } .accordion-step.step-pink .orbit-ring { color: var(--amina-pink); } .accordion-step.step-green .orbit-ring { color: var(--amina-green); } .accordion-step.is-open .orbit-ring { opacity: 1; animation-play-state: running; animation-duration: 3.5s; } /* ⏸️ GPU-PAUSE: Orbit-Ring stoppen wenn Steps-Sektion off-screen */ #stepsContainer.js-paused .accordion-step.is-open .orbit-ring { animation-play-state: paused !important; } /* Nummer-Kreis — Premium */ .orbit-num { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 900; background: rgba(255,255,255,0.92); border: 1.5px solid rgba(203,213,225,0.5); box-shadow: inset 0 2px 8px rgba(255,255,255,1), inset 0 -1px 4px rgba(0,0,0,0.04), 0 3px 12px rgba(0,0,0,0.08); color: rgba(30,41,59,0.3); transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } /* Geschlossen: subtiler Farb-Hint */ .accordion-step.step-blue:not(.is-open) .orbit-num { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(72,160,214,0.06)); border-color: rgba(72,160,214,0.2); color: rgba(72,160,214,0.45); } .accordion-step.step-pink:not(.is-open) .orbit-num { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(213,90,146,0.06)); border-color: rgba(213,90,146,0.2); color: rgba(213,90,146,0.45); } .accordion-step.step-green:not(.is-open) .orbit-num { background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(127,177,78,0.06)); border-color: rgba(127,177,78,0.2); color: rgba(127,177,78,0.45); } /* Offen: volle Intensität */ .accordion-step.step-blue.is-open .orbit-num { background: linear-gradient(145deg, rgba(72,160,214,0.18) 0%, rgba(255,255,255,0.95) 100%); color: var(--amina-blue); border-color: rgba(72,160,214,0.25); transform: scale(1.08); box-shadow: 0 0 24px rgba(72,160,214,0.35), inset 0 2px 8px rgba(255,255,255,1), inset 0 -1px 4px rgba(72,160,214,0.08); } .accordion-step.step-pink.is-open .orbit-num { background: linear-gradient(145deg, rgba(213,90,146,0.18) 0%, rgba(255,255,255,0.95) 100%); color: var(--amina-pink); border-color: rgba(213,90,146,0.25); transform: scale(1.08); box-shadow: 0 0 24px rgba(213,90,146,0.35), inset 0 2px 8px rgba(255,255,255,1), inset 0 -1px 4px rgba(213,90,146,0.08); } .accordion-step.step-green.is-open .orbit-num { background: linear-gradient(145deg, rgba(127,177,78,0.18) 0%, rgba(255,255,255,0.95) 100%); color: var(--amina-green); border-color: rgba(127,177,78,0.25); transform: scale(1.08); box-shadow: 0 0 24px rgba(127,177,78,0.35), inset 0 2px 8px rgba(255,255,255,1), inset 0 -1px 4px rgba(127,177,78,0.08); } /* ── TITEL ── */ .accordion-title { flex: 1; font-size: 1.05rem; font-weight: 900; color: #1e293b; letter-spacing: -0.02em; transition: color 0.3s ease; position: relative; z-index: 1; } /* Geschlossen: dezente Farbandeutung */ .accordion-step.step-blue:not(.is-open) .accordion-title { color: rgba(30,41,59,0.75); } .accordion-step.step-pink:not(.is-open) .accordion-title { color: rgba(30,41,59,0.75); } .accordion-step.step-green:not(.is-open) .accordion-title { color: rgba(30,41,59,0.75); } .accordion-step.step-blue.is-open .accordion-title { color: var(--amina-blue); } .accordion-step.step-pink.is-open .accordion-title { color: var(--amina-pink); } .accordion-step.step-green.is-open .accordion-title { color: var(--amina-green); } /* ── CHEVRON ── */ .accordion-chevron { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.95); box-shadow: 0 1px 4px rgba(0,0,0,0.05); flex-shrink: 0; color: #cbd5e1; position: relative; z-index: 1; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .accordion-step.is-open .accordion-chevron { transform: rotate(180deg); background: rgba(255,255,255,1); box-shadow: 0 2px 8px rgba(0,0,0,0.07); } .accordion-step.step-blue.is-open .accordion-chevron { color: var(--amina-blue); } .accordion-step.step-pink.is-open .accordion-chevron { color: var(--amina-pink); } .accordion-step.step-green.is-open .accordion-chevron { color: var(--amina-green); } /* ── WATERMARK ── */ .accordion-watermark { position: absolute; right: clamp(-5px, -1.9vw, -9px); bottom: clamp(-9px, -3.3vw, -16px); font-size: 7rem; font-weight: 900; line-height: 1; letter-spacing: -0.05em; pointer-events: none; user-select: none; opacity: 0.025; color: #1e293b; z-index: 3; transition: opacity 0.4s ease, color 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .accordion-step.step-blue.is-open .accordion-watermark { color: var(--amina-blue); opacity: 0.08; transform: scale(1.06) translate(2px, 4px); } .accordion-step.step-pink.is-open .accordion-watermark { color: var(--amina-pink); opacity: 0.08; transform: scale(1.06) translate(2px, 4px); } .accordion-step.step-green.is-open .accordion-watermark { color: var(--amina-green); opacity: 0.08; transform: scale(1.06) translate(2px, 4px); } /* ── BODY ── */ .accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid transparent; border-top: none; border-radius: 0 0 18px 18px; overflow: hidden; position: relative; } .accordion-step.is-open .accordion-body { grid-template-rows: 1fr; } /* Body: Hintergrund mit minimalem Farb-Tint */ .accordion-step.step-blue.is-open .accordion-body { background: linear-gradient(to bottom, rgba(72,160,214,0.04), rgba(255,255,255,0.9)); border-color: rgba(72,160,214,0.22); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .accordion-step.step-pink.is-open .accordion-body { background: linear-gradient(to bottom, rgba(213,90,146,0.04), rgba(255,255,255,0.9)); border-color: rgba(213,90,146,0.22); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .accordion-step.step-green.is-open .accordion-body { background: linear-gradient(to bottom, rgba(127,177,78,0.04), rgba(255,255,255,0.9)); border-color: rgba(127,177,78,0.22); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .accordion-body-inner { overflow: hidden; padding: 0 1.1rem 0 calc(56px + 1rem + 1.1rem); min-height: 0; position: relative; } .accordion-step.is-open .accordion-body-inner { padding-top: 0.9rem; padding-bottom: 1.4rem; } .accordion-body-text { font-size: 0.92rem; font-weight: 500; color: #475569; line-height: 1.8; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease 0.2s, transform 0.35s ease 0.2s; } .accordion-step.is-open .accordion-body-text { opacity: 1; transform: translateY(0); } /* 🎯 GOAL SVG — nur bei Step 3 offen */ /* 🎯 GOAL WRAP — Sonar */ .accordion-goal-wrap { position: absolute; bottom: 1rem; left: calc(1.1rem + 2px); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6) rotate(-15deg); z-index: 2; transition: opacity 0.5s ease 0.35s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s; } .accordion-step.is-open .accordion-goal-wrap { opacity: 1; transform: scale(1) rotate(0deg); } /* Sonar Ringe via ::before und ::after */ .accordion-goal-wrap::before, .accordion-goal-wrap::after { content: ''; position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(127,177,78,0.6); opacity: 0; transform: scale(0.5); animation: none; } .accordion-step.is-open .accordion-goal-wrap::before { animation: sonar-ring 3.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite 1.0s; } .accordion-step.is-open .accordion-goal-wrap::after { animation: sonar-ring 3.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite 2.1s; } @keyframes sonar-ring { 0% { transform: scale(0.5); opacity: 0; } 8% { opacity: 0.5; } 100% { transform: scale(2.1); opacity: 0; } } .accordion-goal-svg { width: 44px; height: 44px; flex-shrink: 0; background: #f8fafc; border-radius: 50%; padding: 4px; } @media (prefers-reduced-motion: reduce) { .accordion-goal-wrap { transition: opacity 0.3s ease 0.2s; transform: none; } .accordion-goal-wrap::before, .accordion-goal-wrap::after { animation: none !important; } } /* Landscape: connector ausblenden */ @media (max-height: 600px) and (orientation: landscape) { .accordion-steps::before { display: none; } } /* Wolken pausieren wenn außerhalb des Viewports */ .parallax-cloud.js-paused { animation-play-state: paused !important; } /* Rosa Wolke Desktop-Position */ @media (min-width: 1024px) { .steps-pink-cloud { left: 35% !important; top: 10% !important; width: 350px !important; height: 350px !important; } .avail-blue-cloud { left: 5% !important; } .avail-green-cloud { right: 5% !important; } .saeulen-pink-cloud { left: 5% !important; } } /* 📱 Säulen-Wolken Mobile — Größe & Position angepasst */ @media (max-width: 1023px) { /* Rosa Wolke: etwas nach unten */ .saeulen-pink-cloud { top: 5% !important; } /* Blaue Wolke: etwas nach oben */ .saeulen-blue-cloud { bottom: 8% !important; } } /* 📱 Tagesablauf-Wolken Mobile — etwas höher */ @media (max-width: 1023px) { .tages-pink-cloud { bottom: 6% !important; } } /* 🏘️ STANDORTE — Cloud-Farben */ .standorte-blue-cloud { color: var(--amina-blue); } .standorte-pink-cloud { color: var(--amina-pink); } /* 📱 Hero — 2 untere Wolken auf Mobile ausblenden */ @media (max-width: 1023px) { .hero-cloud-hide-mobile { display: none !important; } /* Blaue Wolke oben links: 25% kleiner, etwas nach unten */ .hero-blue-top { width: clamp(135px,43vw,262px) !important; height: clamp(135px,43vw,262px) !important; top: 4% !important; } } /* ✉️ UMSCHLAG ANIMATION (FIXED) */ .envelope-flap { transform-origin: top; /* Drehpunkt oben an der Kante */ transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; } /* Nutzt den Hover auf dem Button (.group), um die Flap zu öffnen */ .btn-liquid.group:hover .envelope-flap { transform: rotateX(180deg); } /* 🚀 MOBILE BUTTON LOGIC & TRUNCATION - CLEAN VERSION */ .mobile-btn-container { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0.75rem; width: 100%; } @media (max-width: 480px) { .mobile-btn-container { gap: 0.5rem; } } .cta-text-full { display: inline; } .cta-text-short { display: none; } /* Trigger for small screens where text might break (approx < 480px for mobile portrait) */ @media (max-width: 480px) { .cta-text-full { display: none; } .cta-text-short { display: inline; } .btn-super-cta .icon-arrow { display: none; } /* Remove arrow to save space as requested */ /* Reduce padding to fit content */ .btn-super-cta.btn-super-cta-box .cta-content { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } /* 💬 TESTIMONIALS EXCELLENCE - STACK LAYOUT */ .testi-stack-wrapper { display: flex; flex-direction: column; gap: 1.25rem; /* Compact gap */ width: 100%; max-width: 650px; /* Limits width on Desktop for readable vertical list */ margin: 0 auto; } /* 📱 MOBILE LANDSCAPE: HORIZONTAL GRID (SIDE-BY-SIDE) */ @media (min-width: 500px) and (max-width: 1000px) and (orientation: landscape) { .testi-stack-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; /* Tight gap */ max-width: 100%; } } /* Color Variables */ .testi-card.blue { --glow-color: var(--amina-blue); --pastel-bg: rgba(72, 160, 214, 0.15); } .testi-card.pink { --glow-color: var(--amina-pink); --pastel-bg: rgba(213, 90, 146, 0.15); } .testi-card.green { --glow-color: var(--amina-green); --pastel-bg: rgba(127, 177, 78, 0.15); } .testi-card { position: relative; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid white; border-radius: 20px; padding: 20px 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.5s var(--liquid-bounce), border-radius 0.5s var(--liquid-bounce), box-shadow 0.5s var(--liquid-bounce); overflow: hidden; opacity: 0; transform: translateY(20px); } /* 🎬 STAGGER REVEAL ON SCROLL */ .testi-card.reveal-active { opacity: 1; transform: translateY(0); } .testi-card:nth-child(1).reveal-active { transition-delay: 0ms; } .testi-card:nth-child(2).reveal-active { transition-delay: 100ms; } .testi-card:nth-child(3).reveal-active { transition-delay: 200ms; } /* HOVER ELEVATION - STABLE VERSION (NO JITTER) */ .testi-card:hover { transform: translateY(-8px) scale(1.02); background: rgba(255, 255, 255, 0.95); border-color: white; z-index: 10; box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255,255,255,0.8) inset, 0 8px 30px -10px var(--glow-color); } /* 3. QUOTE WATERMARK (Perfekter Eck-Kontakt) */ .quote-watermark { position: absolute; /* Zieht die Ecke des Icons genau zum Textstart */ top: clamp(-2px, -0.5vw, -1px); left: clamp(-2px, -0.5vw, -1px); width: clamp(20px, 7.4vw, 37px); height: clamp(20px, 7.4vw, 37px); color: var(--glow-color); opacity: 0.15; pointer-events: none; z-index: 0; } /* 4. CORNER STAR (Pulsating, Clipped, Top Right) */ .corner-star { position: absolute; /* Positioned to be half cut off */ top: clamp(-22px, -8.1vw, -40px); right: clamp(-22px, -8.1vw, -40px); width: clamp(64px, 23.3vw, 116px); height: clamp(64px, 23.3vw, 116px); color: #FDE047; /* Amina Yellow Pastel */ opacity: 0.3; pointer-events: none; z-index: 0; animation: star-pulse 3s ease-in-out infinite; } @keyframes star-pulse { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; } 50% { transform: scale(1.1) rotate(10deg); opacity: 0.4; } } .testi-text { position: relative; z-index: 2; font-size: 0.95rem; line-height: 1.5; color: #475569; font-style: italic; margin-bottom: 0.75rem; margin-top: 10px; /* Space for watermark */ } .testi-footer { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.04); } .testi-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 14px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); flex-shrink: 0; position: relative; } .testi-avatar.blue { background: linear-gradient(135deg, var(--amina-blue), #8AC4E8); } .testi-avatar.pink { background: linear-gradient(135deg, var(--amina-pink), #E69ABF); } .testi-avatar.green { background: linear-gradient(135deg, var(--amina-green), #AFD38C); } /* 5. VERIFIED BADGE (Re-inserted) */ .verified-badge { position: absolute; bottom: clamp(-2px, -0.5vw, -1px); right: clamp(-2px, -0.5vw, -1px); width: clamp(10px, 3.7vw, 18px); height: clamp(10px, 3.7vw, 18px); background: white; color: var(--glow-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .testi-info h4 { font-size: 0.75rem; font-weight: 800; color: #1e293b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; } .testi-tag { display: inline-block; font-size: 0.65rem; font-weight: 800; padding: 4px 10px; border-radius: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: none; box-shadow: inset 0 1px 2px rgba(255,255,255,0.8); } .testi-tag.blue { background: rgba(72, 160, 214, 0.15); color: var(--amina-blue); } .testi-tag.pink { background: rgba(213, 90, 146, 0.15); color: var(--amina-pink); } .testi-tag.green { background: rgba(127, 177, 78, 0.15); color: var(--amina-green); } /* Responsive Compress Adjustments */ @media (max-width: 480px) { .testi-card { padding: 16px 20px; } /* Even tighter on mobile */ .testi-text { font-size: 0.9rem; margin-bottom: 0.75rem; } } /* ☁️ INTENSE PARALLAX CLOUD ENGINE (Strong Breeze) */ /* Layer 1: Weit weg (Basis) - Deutlicherer Drift */ @keyframes cloud-drift-slow { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(80px, -30px); } } /* Layer 2: Mitte (Gegenbewegung) - Aktiver */ @keyframes cloud-drift-medium { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-100px, 40px); } } /* Layer 3: Nah (Float & Atmen) - Lebendig */ @keyframes cloud-drift-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, 30px) scale(1.15); } } /* Schnellere Zeiten für mehr Dynamik */ .parallax-slow { animation: cloud-drift-slow 30s ease-in-out infinite; } .parallax-medium { animation: cloud-drift-medium 22s ease-in-out infinite; } .parallax-float { animation: cloud-drift-float 15s ease-in-out infinite; } /* Parallax clouds: browser composites @keyframes transform automatically. No will-change needed. */ /* 🔓 UNLOCK: Erlaubt Elementen (wie dem Badge) aus dem Glas auszubrechen */ .glass-morph.allow-overflow { overflow: visible !important; } /* 🎬 CINEMATIC HERO SCROLL ENGINE */ .hero-cinematic-layer { /* will-change wird via JS gesetzt/entfernt, nicht dauerhaft im CSS */ transition: transform 0.1s linear, opacity 0.2s ease; } .hero-depth-back { transform: translateY(0) scale(1); opacity: 1; } .hero-depth-mid { transform: translateY(0) scale(1); opacity: 1; } .hero-depth-front { transform: translateY(0) scale(1); opacity: 1; } /* Typografie Reveal vorbereitet */ .hero-title-cinematic { font-size: clamp(3.5rem, 5vw + 1rem, 5.5rem); line-height: 1.05; letter-spacing: -0.03em; opacity: 1 !important; transform: none !important; transition: none !important; } .hero-title-cinematic.is-visible { transform: translateY(0) scale(1); opacity: 1; } /* ── HERO LINE ENTRANCE ── */ .hero-line { display: block; opacity: 0; transform: translateY(22px); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .hero-line-1 { transition-delay: 0.08s; font-weight: 600; letter-spacing: -0.01em; } .hero-line-2 { transition-delay: 0.22s; } .hero-line-3 { transition-delay: 0.38s; opacity: 0; transform: translateY(14px); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.38s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.38s; } .hero-box-1 { transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.52s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.52s; } .hero-box-2 { transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.62s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.62s; } .hero-box-3 { transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.72s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.72s; } .hero-entrance-active .hero-line { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .hero-line { opacity: 1 !important; transform: none !important; transition: none !important; } } /* 💎 10/10 EDITORIAL HIGHLIGHT FÜR "LEBEN" */ .hero-leben-highlight { display: block; font-size: 1.85em; line-height: 1; padding-top: 0; margin-top: -0.12em; padding-bottom: 0.1em; background-size: 200% auto; letter-spacing: -0.05em; position: relative; } .hero-subline { font-size: 1.45rem !important; /* 24px - erzwungen */ line-height: 1.7 !important; color: #475569 !important; font-weight: 500 !important; max-width: 36rem !important; margin-bottom: 2rem !important; margin-top: 1.75rem !important; } /* 🎯 KEYWORD EMPHASIS */ .subline-emphasis { font-weight: 850; color: #0f172a; letter-spacing: -0.01em; } /* 📱 MOBILE OPTIMIZATION */ @media (max-width: 640px) { .hero-subline { font-size: 0.9375rem; line-height: 1.8; margin-top: 1.25rem; } } /* 📱 MOBILE PORTRAIT ESCALATION (CLEAN TYPOGRAPHY) */ /* 💎 10/10 PREMIUM INLINE PILL HIGHLIGHT */ .inline-pill-highlight { display: inline-block; padding: 0.05em 0.35em; /* Skaliert perfekt relativ zur gigantischen Schriftgröße mit */ margin-top: 0.15em; /* Zartes Milchglas passend zur Brand */ background: linear-gradient(135deg, rgba(72, 160, 214, 0.08), rgba(213, 90, 146, 0.08)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 0.4em; /* Perfekt rund passend zur Schrift */ /* Weicher, einladender Glow */ box-shadow: 0 15px 35px -5px rgba(213, 90, 146, 0.15), inset 0 4px 10px rgba(255, 255, 255, 0.6); transform: translateY(-4px); } /* 📱 MOBILE PORTRAIT ESCALATION (10/10 TYPOGRAPHY) */ @media (max-width: 640px) and (orientation: portrait) { .hero-title-cinematic { font-size: clamp(2.5rem, 15.5vw, 4.2rem) !important; line-height: 1.05 !important; letter-spacing: -0.05em !important; margin-bottom: 2rem !important; } } /* Reduced Motion bleibt respektiert */ @media (prefers-reduced-motion: reduce) { .hero-cinematic-layer, .hero-title-cinematic { transition: none !important; transform: none !important; opacity: 1 !important; } } /* 📝 FORMULAR NEXT-GEN STYLING */ /* 📝 FORMULAR NEXT-GEN COMPACT */ /* Container für Input+Label */ .input-group-modern { position: relative; margin-bottom: 1rem; } /* Basis Styling für alle Inputs (Text, Date, Select) - ULTRA COMPACT */ .input-glass { width: 100%; height: 50px; /* Fixierte, kompakte Höhe */ background: rgba(248, 250, 252, 0.7); border: 1px solid #CBD5E1; border-radius: 12px; /* 🔧 FIX: Padding oben reduziert (1.25rem), damit Text (z.B. Dropdown) nicht abgeschnitten wird */ padding: 1.25rem 1rem 0.25rem 2.8rem; font-size: 0.95rem; font-weight: 700; color: #1E293B; outline: none; transition: background 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); backdrop-filter: blur(10px); box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); -webkit-appearance: none; appearance: none; position: relative; } /* ::before on /