.elementor-4370 .elementor-element.elementor-element-2b68e287{--display:flex;}.elementor-4370 .elementor-element.elementor-element-6d14f0f0 .e-contact-buttons{--e-contact-button-chat-button-animation-delay:3000ms;--e-contact-buttons-button-icon:#FBFFFD;--e-contact-buttons-button-bg:var( --e-global-color-5293ad4 );--e-contact-buttons-button-icon-hover:var( --e-global-color-5293ad4 );--e-contact-buttons-button-bg-hover:var( --e-global-color-dee66dc );--e-contact-buttons-active-button-color:var( --e-global-color-5293ad4 );--e-contact-buttons-active-button-bg:var( --e-global-color-dee66dc );--e-contact-buttons-top-bar-title:#FBFFFD;--e-contact-buttons-top-bar-subtitle:#FBFFFD;--e-contact-buttons-top-bar-bg:var( --e-global-color-5293ad4 );--e-contact-buttons-contact-button-icon:var( --e-global-color-dee66dc );--e-contact-buttons-contact-title-text-color:#FFFFFF;--e-contact-buttons-contact-description-text-color:#FFFFFF;--e-contact-buttons-contact-button-bg:var( --e-global-color-5293ad4 );--e-contact-buttons-chat-box-bg:#FFFFFF;}.elementor-4370 .elementor-element.elementor-element-6d14f0f0 .e-contact-buttons__top-bar-title{font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:600;}.elementor-4370 .elementor-element.elementor-element-6d14f0f0 .e-contact-buttons__top-bar-subtitle{font-family:"Inter", Sans-serif;font-size:12px;font-weight:400;}.elementor-4370 .elementor-element.elementor-element-6d14f0f0 .e-contact-buttons__contact-title{font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:500;}.elementor-4370 .elementor-element.elementor-element-6d14f0f0 .e-contact-buttons__contact-description{font-family:"Inter", Sans-serif;font-size:12px;font-weight:300;}/* Start custom CSS for contact-buttons-var-8, class: .elementor-element-6d14f0f0 *//* ========================================= FIX: KOMPLETTER DARK-GLASS-LOOK ========================================= */ /* 1. Haupt-Hintergrund des Widgets dunkel machen */ .e-contact-buttons__content-wrapper { background-color: #112239 !important; /* Dein dunkles Navy-Blau */ border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 15px !important; /* Runde Ecken für das ganze Fenster */ overflow: hidden !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; } /* 2. Den Elementor-Standard-Weißen Hintergrund entfernen */ .e-contact-buttons__links-container, .e-contact-buttons__contact-links { background-color: transparent !important; } /* 3. Die einzelnen Kontakt-Boxen (WhatsApp etc.) */ .e-contact-buttons__contact-icon-link { background: rgba(255, 255, 255, 0.08) !important; /* Dezentes Glas */ border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 10px !important; /* Dein gewünschter 10er Radius */ margin: 5px 15px px 15px !important; /* Abstand zum Rand */ transition: all 0.3s ease !important; } /* Hover-Effekt für die Boxen */ .e-contact-buttons__contact-icon-link:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.3) !important; transform: translateY(-2px) !important; /* Hebt sich leicht an */ } /* 4. Der Glass-Kreis hinter den Icons */ .e-contact-buttons__contact-icon-container { background: rgba(255, 255, 255, 0.15) !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; /* Perfekter Kreis */ display: flex !important; align-items: center !important; justify-content: center !important; margin-right: 15px !important; } /* 5. Texte und Icons auf Weiß zwingen (damit sie lesbar sind) */ .e-contact-buttons__contact-icon-container svg, .e-contact-buttons__contact-icon-container i { fill: #ffffff !important; color: #ffffff !important; width: 20px !important; height: 20px !important; } .e-contact-buttons__contact-title { color: #ffffff !important; font-weight: 700 !important; font-size: 15px !important; } .e-contact-buttons__contact-description { color: rgba(255, 255, 255, 0.6) !important; font-size: 12px !important; } /* ========================================= G-SCHLOSS BUTTON: WAVE-EFFEKT & TOGGLE-FIX ========================================= */ /* 1. Der Haupt-Button (Dein Branding-Blau #0A2240) */ .e-contact-buttons__chat-button { position: relative !important; z-index: 9999 !important; background: rgba(10, 34, 64, 0.85) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; width: 60px !important; height: 60px !important; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease-in-out !important; overflow: visible !important; } /* 2. Wave-Effekt (Minimal sichtbarer gemacht) */ .e-contact-buttons__chat-button::before, .e-contact-buttons__chat-button::after { content: "" !important; position: absolute !important; inset: 0 !important; /* Etwas kräftigeres Hellblau für die Sichtbarkeit */ border: 2px solid rgba(162, 185, 255, 0.6) !important; border-radius: 50% !important; z-index: -1 !important; pointer-events: none !important; animation: soft-wave 3.5s infinite linear !important; opacity: 0 !important; } .e-contact-buttons__chat-button::after { animation-delay: 1.75s !important; } /* Animation: Von 1.0 auf 1.8 (leicht vergrößert für Sichtbarkeit) */ @keyframes soft-wave { 0% { transform: scale(1); opacity: 0.7; /* Start-Sichtbarkeit erhöht */ } 100% { transform: scale(1.8); opacity: 0; } } /* 3. Verschwinden-Logik: Sobald das Menü offen ist */ /* Wir nutzen opacity und scale für einen sauberen Übergang */ .e-contact-buttons__chat-button[aria-expanded="true"] { opacity: 0 !important; visibility: hidden !important; transform: scale(0) !important; /* Schrumpft beim Verschwinden */ transition: all 0.2s ease !important; } /* Wellen ebenfalls sofort hart abschalten bei Klick */ .e-contact-buttons__chat-button[aria-expanded="true"]::before, .e-contact-buttons__chat-button[aria-expanded="true"]::after { display: none !important; animation: none !important; } /* 4. Das Icon selbst */ .e-contact-buttons__chat-button svg { width: 25px !important; height: auto !important; fill: #ffffff !important; z-index: 10 !important; }/* End custom CSS */