/* ======================================================== CUSTOM CSS - Apple Design System Modern, Clean, Light Theme ======================================================== *//* ======================================================== 1. APPLE-SPECIFIC CSS VARIABLES ======================================================== */:root{ --apple-blue:#0051D5; --apple-orange:#FF9500; --apple-gray-50:#F5F5F7; --apple-gray-100:#E8E8ED; --apple-gray-200:#D2D2D7; --apple-dark:#1D1D1F; --apple-gray-text:#6E6E73; /* FIX:Sichtbare Glass-Borders auf hellem Hintergrund */ --glass-bg:rgba(255,255,255,1.0); --glass-border:rgba(0,0,0,0.06); --glass-shadow:0 2px 20px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04); --glass-shadow-hover:0 8px 32px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06); /* Sektion-Hintergründe:wechseln sich ab für visuellen Rhythmus */ --section-bg-light:#FFFFFF; --section-bg-canvas:#F5F5F7;}/* ======================================================== 2. BASE STYLES - HTML & BODY ======================================================== */html, body{ overflow-x:hidden; width:100%; max-width:100vw; position:relative; scrollbar-gutter:stable; background:linear-gradient(135deg, #F5F5F7 0%, #ffffff 50%, #E8E8ED 100%); color:var(--apple-dark); font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin:0; min-height:100vh;}input, textarea, select{ -webkit-user-select:auto !important; user-select:auto !important; touch-action:manipulation;}/* ======================================================== 3. SCROLLBAR - Light & Subtle ======================================================== */.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.custom-scrollbar::-webkit-scrollbar{width:8px;height:8px}.custom-scrollbar::-webkit-scrollbar-track{background:rgba(245, 245, 247, 0.5)}.custom-scrollbar::-webkit-scrollbar-thumb{ background:rgba(139, 139, 147, 0.4); border-radius:4px; transition:background 0.3s ease;}.custom-scrollbar::-webkit-scrollbar-thumb:hover{ background:rgba(139, 139, 147, 0.6);}/* ======================================================== 4. SECTION HINTERGRÜNDE – Abwechselnd für visuellen Rhythmus ======================================================== *//* Weiße Sektionen (hero, vorteile, preise) */#hero, #vorteile, #preise, #demos, #testimonials{ background:var(--section-bg-light);}/* Leicht graue Sektionen (pain, referenzen, trust, cta) */#pain, #referenzen, #ueber-mich, #trust{ background:var(--section-bg-canvas);}/* Globaler Parallax-Hintergrund für graue Sections entfernen */.section-glass-1{ background:var(--section-bg-light); border:none; box-shadow:none; transition:all 0.3s ease;}.section-glass-2{ background:var(--section-bg-canvas); border:none; box-shadow:none; transition:all 0.3s ease;}/* ======================================================== 4b. INLINE-DARK-CARDS (Trust-Section) – Auf Light umstellen ======================================================== *//* Trust-Section hat noch alte dark cards via inline-style. Diese globale Überschreibung stellt sie auf das Light-System um. */#trust [style*="rgba(15, 15, 15"]{ background:#ffffff !important; border-color:rgba(0,0,0,0.08) !important; box-shadow:0 2px 20px rgba(0,0,0,0.06) !important;}#trust [style*="rgba(15, 15, 15"] h3,#trust [style*="rgba(15, 15, 15"] h4{ color:var(--apple-dark) !important;}#trust [style*="rgba(15, 15, 15"] p{ color:var(--apple-gray-text) !important;}/* Beide geerbt vom Body-Gradient *//* ======================================================== 5. NAVIGATION - Apple Glass Style ======================================================== */.glass-nav{ background:rgba(255, 255, 255, 0.85); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-bottom:1px solid rgba(0, 0, 0, 0.08); box-shadow:none; transition:all 0.4s ease; will-change:background-color;}.glass-nav.scrolled{ background:rgba(255, 255, 255, 0.95); border-bottom:1px solid rgba(0, 0, 0, 0.12); box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);}/* ======================================================== 6. HERO & SLOGAN ======================================================== */.premium-fieldset{ border:2px solid var(--apple-blue); background:rgba(255, 255, 255, 0.4); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); animation:apple-fieldset-glow 3.5s ease-in-out infinite alternate;}@keyframes apple-fieldset-glow{ 0%{ border-color:rgba(0, 81, 213, 0.4); box-shadow:0 0 10px rgba(0, 81, 213, 0.2);} 100%{ border-color:var(--apple-blue); box-shadow:0 0 25px rgba(0, 81, 213, 0.35);}}/* ======================================================== 7. SCROLL REVEAL - Kompatibilität mit bestehenden Klassen ======================================================== */.reveal{ transition:opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); will-change:opacity, transform;}.js-ready .reveal:not(.active){ opacity:0; transform:translate3d(0, 30px, 0);}.js-ready .reveal.active{ opacity:1; transform:translate3d(0, 0, 0);}/* ======================================================== 8. KONFIGURATOR - LOGIK ERHALT (optische Anpassung) ======================================================== */@keyframes popIcon{ 0%{transform:scale(1)} 50%{transform:scale(1.3)} 100%{transform:scale(1)}}.config-radio:checked + div{ border-color:var(--apple-orange); background-color:rgba(255, 149, 0, 0.12); transform:scale(1.02);}.config-radio:checked + div .config-check{ opacity:1; transform:scale(1);}.config-radio:checked + div .config-icon{ animation:popIcon 0.4s ease-out forwards; color:var(--apple-orange);}.config-checkbox:checked + div{ border-color:var(--apple-blue); background-color:rgba(0, 81, 213, 0.12); transform:scale(1.02);}.config-checkbox:checked + div .config-check{ opacity:1; transform:scale(1);}.step-panel{ display:none; animation:fadeIn 0.3s ease forwards;}.step-panel.active{ display:block;}@keyframes fadeIn{ from{ opacity:0; transform:translateX(10px);} to{ opacity:1; transform:translateX(0);}}.pulse-price{ animation:popPrice 0.4s ease-out;}@keyframes popPrice{ 0%{transform:scale(1)} 50%{transform:scale(1.1);color:var(--apple-orange)} 100%{transform:scale(1)}}/* ======================================================== 9. MOCKUP THEMES - Apple Modern Style ======================================================== */.mockup-container{ transition:border-color 0.5s ease, box-shadow 0.5s ease; background-color:#1a1a1a; background-size:cover; background-position:top center; transform-style:preserve-3d; border-radius:inherit; /* Retina-Schärfe:Browser-Interpolation auf Kontrast-Optimierung setzen */ image-rendering:auto;}.mockup-overlay{ background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%); pointer-events:none;}.theme-modern{ font-family:'Inter', system-ui, -apple-system, sans-serif; border:none; background:transparent;}.mockup-container.theme-klassisch{ font-family:'Playfair Display', serif; border:2px solid rgba(139, 110, 99, 0.3); background:transparent;}.mockup-container.theme-premium{ font-family:'Cinzel', serif; border:2px solid rgba(212, 175, 55, 0.3); background:transparent; box-shadow:inset 0 0 20px rgba(212, 175, 55, 0.05);}.mockup-feature{ opacity:0; transform:translateY(10px) scale(0.8); transition:all 0.4s ease; filter:blur(4px); pointer-events:none;}.mockup-feature.active{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); pointer-events:auto;}/* ======================================================== 10. STORY ANIMATIONS ======================================================== */.story-phase{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem; text-align:center; transition:all 0.5s ease; opacity:0; transform:translate3d(0, 20px, 0); pointer-events:none;}.story-phase.phase-active{ opacity:1; transform:translate3d(0, 0, 0); pointer-events:auto; z-index:20;}.story-phase.phase-exit{ opacity:0; transform:translate3d(0, -20px, 0); pointer-events:none; z-index:10;}/* ======================================================== 11. CARDS & HOVER EFFEKTE - Apple Glass ======================================================== */.float-card{ transition:transform 0.5s ease-out, box-shadow 0.5s ease-out, border-color 0.5s ease;}.float-card:hover{ transform:translateY(-8px); box-shadow:var(--glass-shadow-hover), 0 0 20px rgba(255, 149, 0, 0.12); border-color:rgba(255, 149, 0, 0.3);}/* Pain Cards */.pain-card:hover{ border-color:rgba(239, 68, 68, 0.3) !important; box-shadow:0 12px 32px rgba(0, 0, 0, 0.1), 0 0 20px rgba(239, 68, 68, 0.1) !important; transform:translateY(-6px) !important;}/* Demo Cards */.demo-card:hover{ transform:translateY(-6px); box-shadow:0 12px 32px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 149, 0, 0.1); border-color:rgba(255, 149, 0, 0.3) !important;}/* ======================================================== 12. GLASS-GLOW HOVER - Unified Premium Effect ======================================================== *//* Proof Section:Founder-Advantage Cards */#proof .reveal-element.group:hover,#proof a.group:hover{ transform:translateY(-6px) !important; box-shadow:0 12px 32px rgba(0, 0, 0, 0.1), 0 0 25px rgba(255, 149, 0, 0.12) !important; border-color:rgba(255, 149, 0, 0.35) !important;}/* Proof Section:Cyan/Green Cards */#proof .group[style*="border:1px solid rgba(6,182,212"]:hover{ box-shadow:0 12px 32px rgba(0, 0, 0, 0.1), 0 0 25px rgba(6, 182, 212, 0.12) !important; border-color:rgba(6, 182, 212, 0.35) !important; transform:translateY(-6px) !important;}#proof .group[style*="border:1px solid rgba(16,185,129"]:hover{ box-shadow:0 12px 32px rgba(0, 0, 0, 0.1), 0 0 25px rgba(16, 185, 129, 0.12) !important; border-color:rgba(16, 185, 129, 0.35) !important; transform:translateY(-6px) !important;}/* Trust Section:Guarantee Cards */#trust .reveal-element.group:hover{ transform:translateY(-6px) !important; box-shadow:0 12px 32px rgba(0, 0, 0, 0.1), 0 0 25px rgba(16, 185, 129, 0.12) !important; border-color:rgba(16, 185, 129, 0.35) !important;}/* Trust Section:Process & Stat Cards */#trust .reveal-element.relative:hover,#trust .reveal-element.text-center[style*="border:1px solid rgba(255,255,255"]:hover{ transform:translateY(-5px) !important; box-shadow:0 12px 32px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 149, 0, 0.1) !important; border-color:rgba(255, 149, 0, 0.25) !important;}/* Trust Section:Personal Quote */#trust .reveal-element.max-w-3xl:hover{ transform:translateY(-4px) !important; box-shadow:0 12px 32px rgba(0, 0, 0, 0.1), 0 0 25px rgba(255, 149, 0, 0.15) !important; border-color:rgba(255, 149, 0, 0.4) !important;}/* ======================================================== 13. RECHNER & AUDIT LOGIK ======================================================== */.circular-chart{ display:block; margin:0 auto; max-width:80%; max-height:250px;}.circle-bg{ fill:none; stroke:rgba(210, 210, 215, 0.3); stroke-width:3.8;}.circle{ fill:none; stroke-width:2.8; stroke-linecap:round; transition:stroke-dasharray 1.5s ease-out;}.percentage{ fill:var(--apple-dark); font-family:'Inter', system-ui, -apple-system, sans-serif; font-weight:900; font-size:0.5em; text-anchor:middle;}/* Rechner Tab Logic */.calc-tab-content{ display:none; animation:fadeIn 0.3s ease;}.calc-tab-content.active{ display:block;}.calc-tab.active{ background-color:rgba(255, 149, 0, 0.15); border-color:var(--apple-orange); color:var(--apple-dark);}/* ======================================================== 14. TILT & MAGNETIC EFFEKTE ======================================================== */.perspective-container{ perspective:1000px;}.tilt-card{ transition:transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease; transform-style:preserve-3d; will-change:transform;}.magnetic-btn{ will-change:transform;}/* ======================================================== 15. WHATSAPP FLOAT ======================================================== */#whatsapp-float{ transition:opacity 0.4s ease, transform 0.4s ease;}/* ======================================================== 16. Z-INDEX DOKUMENTATION ======================================================== *//* Hierarchie definiert in phase4-utilities.css: --z-background(1) → --z-section-decor(5) → --z-section-content(10) → --z-sticky(40) → --z-nav(50) → --z-whatsapp(60) → --z-cookie-banner(100) → --z-modal-backdrop(150) → --z-modal(200) → --z-toast(300)*//* Cookie Banner */#glass-cookie-banner{ position:fixed; bottom:0; left:0; right:0; z-index:var(--z-cookie-banner, 100); transition:all 0.8s cubic-bezier(0.4, 0, 0.2, 1);}@media (min-width:640px){ #glass-cookie-banner{ bottom:1.5rem; left:1.5rem; right:auto; max-width:24rem;}}.banner-hidden{ opacity:0 !important; transform:translateY(120%) !important; pointer-events:none;}.banner-visible{ opacity:1 !important; transform:translateY(0) !important; pointer-events:auto;}/* ======================================================== 17. HERO ANIMATIONS ======================================================== */.wow-handwerker{ display:inline-block; transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease; cursor:default;}.wow-handwerker:hover{ transform:scale(1.05) translateY(-3px); filter:drop-shadow(0 10px 20px rgba(255, 149, 0, 0.5)) brightness(1.1);}/* ======================================================== 18. REVEAL CLASSES - Enhanced Animations ======================================================== */.reveal, .reveal-element{ opacity:0; transform:perspective(1200px) rotateX(-12deg) translateY(60px) scale(0.95); transition:opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); will-change:transform, opacity; transform-origin:center bottom;}.reveal.active, .reveal-element.is-visible{ opacity:1; transform:perspective(1200px) rotateX(0deg) translateY(0) scale(1);}.delay-100{transition-delay:100ms}.delay-200{transition-delay:200ms}.delay-300{transition-delay:300ms}/* ======================================================== 19. RESPONSIVE OPTIMIERUNGEN ======================================================== *//* Fluid Typography */#hero h1{ font-size:clamp(3.2rem, 8vw, 8rem); line-height:1.05; color:var(--apple-dark);}#main-content > section h2{ font-size:clamp(2rem, 4.5vw, 4rem); line-height:1.1; color:var(--apple-dark);}/* Mobile Optimierung (bis 768px) */@media (max-width:768px){ .glass-card-dark{ padding:1.25rem !important;} #hero img{ object-position:60% 45% !important;} /* Konfigurator Mobile Fixes */ .config-icon{ font-size:1.75rem !important;} #config-form .p-4{ padding:0.75rem !important;} #config-form h3.text-xl{ font-size:1.25rem !important; margin-bottom:0.75rem !important;} /* Schritt 2 Seiten-Grid */ #step-panel-2 .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:0.5rem !important;} #step-panel-2 .font-bold{ font-size:0.75rem !important;} #step-panel-2 .p-4{ padding:0.6rem !important;} /* Schritt 6 Paket-Karussell */ #step-panel-6 .grid{ display:flex !important; overflow-x:auto !important; scroll-snap-type:x mandatory !important; gap:1rem !important; padding-bottom:1.5rem !important; margin-left:-1.25rem; margin-right:-1.25rem; padding-left:1.25rem; padding-right:1.25rem; scrollbar-width:none;} #step-panel-6 .grid::-webkit-scrollbar{ display:none;} #step-panel-6 label{ flex:0 0 85% !important; scroll-snap-align:center !important;} /* Mockup Preview */ .mb-6.relative.pt-\[60\%\]{ padding-top:45% !important; margin-bottom:1rem !important;} #mockup-content{ min-height:180px !important;} /* Modal Mobile Fixes — width:100% respektiert das Overlay-Padding (p-4) */ .modal-content{ width:100% !important; max-width:calc(100vw - 2rem) !important; max-height:96vh !important; border-radius:1rem !important; overflow-x:hidden !important;} /* Calculator Tabs */ #modal-rechner .flex-wrap{ flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; justify-content:flex-start !important; scrollbar-width:none;} #modal-rechner .flex-wrap::-webkit-scrollbar{ display:none;} .calc-tab{ min-width:85px !important; padding:0.5rem !important; flex-shrink:0 !important;} .calc-tab span{ font-size:1.25rem !important;} #modal-rechner .p-8{ padding:1rem !important;} #modal-rechner .gap-8{ gap:1.5rem !important;} #modal-rechner input, #modal-rechner select{ padding:0.5rem !important; font-size:0.875rem !important;} #calc-result-placeholder{ min-height:120px !important; padding:1rem !important;} #calc-result-box .mb-6{ margin-bottom:0.75rem !important;} /* Price Tables Mobile */ #preise .grid{ gap:2.5rem !important;} #preise article.glass-card-highlight{ margin-top:1.5rem !important;} #preise .rounded-b-\[1\.5rem\]{ margin-left:-1.25rem !important; margin-right:-1.25rem !important; margin-bottom:-1.25rem !important; padding:1.25rem !important;}}/* Tablet Optimierung (768px - 1024px) */@media (min-width:768px) and (max-width:1024px){ .gap-8, .lg\:gap-12{ gap:1.5rem !important;} #konfigurator .grid-cols-12{ display:flex; flex-direction:column; gap:2rem;} #mockup-container-outer{ max-width:600px; margin:0 auto;}}/* Large Desktop (1536px+) */@media (min-width:1536px){ .max-w-7xl{ max-width:100rem !important;} .max-w-6xl{ max-width:90rem !important;} .max-w-5xl{ max-width:80rem !important;} .glass-card-dark{ padding:3rem !important;} .section-glass-1, .section-glass-2{ padding-top:10rem; padding-bottom:10rem;} #modal-rechner .max-w-5xl{ max-width:80rem !important;} .mockup-container{ /* aspect-ratio steuert Größe */ }}/* Landscape Fix */@media (max-height:500px) and (orientation:landscape){ #hero{ min-height:120vh; padding-top:8rem;} .modal-content{ max-height:95vh !important; overflow-y:auto;}}/* ======================================================== 20. SCROLL-ANKER & SECTION-ABSTÄNDE ======================================================== */#pain, #vorteile, #proof, #preise, #trust, #demos, #website-check, #testimonials{ scroll-margin-top:5rem;}#pain, #proof, #trust, #demos{ padding-top:4rem; padding-bottom:4rem;}@media (min-width:768px){ #pain, #proof, #trust, #demos{ padding-top:7rem; padding-bottom:7rem;}}/* ======================================================== 21. UTILITY KLASSEN FÜR MOCKUP ======================================================== */[class*="mockup"] .-rotate-12, .-rotate-12{transform:rotate(-12deg)}[class*="mockup"] .rotate-6, .rotate-6{transform:rotate(6deg)}[class*="mockup"] .-rotate-6, .-rotate-6{transform:rotate(-6deg)}[class*="mockup"] .border-stone-900, .border-stone-900{border-color:#1c1917}[class*="mockup"] .border-red-200, .border-red-200{border-color:#fecaca}/* P3-27:Reduce backdrop-filter for low-end devices WICHTIG:Hintergrund muss zum Apple-Light-Design passen, nicht dunkel! Die Sektionen haben helle Hintergründe (#F5F5F7). */@media (max-width:768px){ .glass-card, .glass-panel, .glass-tray{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255, 255, 255, 0.95);}}/* ======================================================== P2-18:Respect user motion preferences ======================================================== */@media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;} .animate-pulse, .animate-spin, .animate-bounce{ animation:none !important;}}