.elementor-kit-5{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#94A3B8;--e-global-color-text:#FFFFFF;--e-global-color-accent:#38BDF8;--e-global-color-f7d8830:#040406;--e-global-color-c1acacd:#0F172A;--e-global-color-cf6741f:#4361EE;--e-global-color-3c8a586:#10B981;--e-global-color-3f88779:#EF4444;--e-global-color-96d6603:#FFFFFF00;--e-global-typography-primary-font-family:"eurostile-extended";--e-global-typography-primary-font-weight:600;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-letter-spacing:-0.5px;--e-global-typography-secondary-font-family:"eurostile-extended";--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-letter-spacing:-0.5px;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-f7d8830 );--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-exit-animation:e-page-transition-fade-in;--e-page-transition-animation-duration:1500ms;--e-preloader-animation:pulse;--e-preloader-animation-duration:1500ms;--e-preloader-delay:0ms;--e-preloader-width:25%;--e-preloader-max-width:35%;}.elementor-kit-5 e-page-transition{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-f7d8830 ) 0%, var( --e-global-color-c1acacd ) 100%);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:1rem;--container-default-padding-right:2rem;--container-default-padding-bottom:1rem;--container-default-padding-left:2rem;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:1.25rem;--container-default-padding-right:1.25rem;--container-default-padding-bottom:1.25rem;--container-default-padding-left:1.25rem;}} /* Start custom CSS */h1, h2, h3, h4, h5, h6 { -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } /* FUTURELEMENTS TEXT GRADIENT UTILITY ---------------------------------------- Anleitung für Elementor Titel-Feld: Schreibe: Das ist ein Verlauf */ .text-gradient { /* Der Verlauf: Electric Sky -> Hyper Indigo */ /* Nutzt globale Variablen mit Fallback */ background: linear-gradient(135deg, var(--accent-sky, #38BDF8) 0%, var(--accent-indigo, #4361EE) 100%); /* Magie: Hintergrund auf den Text beschneiden */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* Fallback für alte Browser */ color: var(--accent-sky, #38BDF8); /* Wichtig: Inline lassen, damit der Satz nicht umbricht */ display: inline; } /* Optional: Leichter Glow-Effekt beim Hover über das Wort */ /* .text-gradient:hover { text-shadow: 0 0 20px rgba(67, 97, 238, 0.4); transition: text-shadow 0.3s ease; } */ /* FUTURELEMENTS H4 SLASHES (//) ---------------------------------------- Fügt technische Slashes vor H4-Überschriften ein. Nutzt globale CSS-Variablen für Konsistenz. */ .elementor-kit-5 h4::before { content: "//"; display: inline-block; margin-right: 12px; /* Abstand zum Text */ /* Nutzung der Variable --accent-indigo (Hyper Indigo) */ color: var(--accent-indigo, #4361EE); font-weight: 300; /* Dünner Schnitt für Eleganz */ opacity: 0.8; /* Optional: Leichter Versatz für perfekte Ausrichtung */ transform: translateY(-1px); transition: all 0.3s ease; } /* Hover-Effekt: Wechselt zur Highlight-Farbe */ .elementor-kit-5 h4:hover::before { /* Nutzung der Variable --accent-sky (Electric Sky) */ color: var(--accent-sky, #38BDF8); /* Leichter Glow-Effekt */ text-shadow: 0 0 10px var(--accent-sky, #38BDF8); opacity: 1; } /* FUTURELEMENTS "PULSE & SWEEP" BUTTON FX - SIMPLIFIED ---------------------------------------------------- Anleitung: 1. Füge Code unter "Website-Einstellungen > Eigenes CSS" ein. 2. Gib deinem Button-Widget unter "Erweitert > CSS-Klassen" die Klasse: future-btn 3. Stelle Hintergrundfarbe & Typografie ganz normal im Elementor-Editor ein. */ /* --- 1. CONTAINER FIX --- */ /* Verhindert, dass der Pulse-Effekt vom Widget-Rahmen abgeschnitten wird */ .future-btn .elementor-widget-container { overflow: visible !important; } /* --- 2. GRUNDEINSTELLUNGEN --- */ .future-btn .elementor-button { position: relative; z-index: 1; /* Erzeugt Stapelkontext */ overflow: visible !important; /* WICHTIG für Pulse nach außen */ /* Animationen für Elementor-Eigenschaften smoothen */ transition: all 0.4s ease !important; /* Fallback Shape (wird von Elementor überschrieben, wenn dort gesetzt) */ border-radius: 12px 0 12px 0; } /* Text-Layer sicher nach oben holen, damit er über dem Gradient liegt */ .future-btn .elementor-button .elementor-button-content-wrapper, .future-btn .elementor-button span { position: relative; z-index: 10; transition: color 0.3s ease !important; } /* --- 3. BACKGROUND FILL (DER GRADIENT BEIM HOVER) --- */ .future-btn .elementor-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gradient: Nutzt deine globalen Variablen */ background: linear-gradient(135deg, var(--accent-sky, #38BDF8) 0%, var(--accent-indigo, #4361EE) 100%); /* Z-Index 2 legt es ÜBER die Elementor-Hintergrundfarbe, aber UNTER den Text (z-index 10) */ z-index: 2; border-radius: inherit; /* Erbt Form aus Elementor */ /* Start: Unsichtbar (0% Kreis) */ clip-path: circle(0% at 0% 100%); transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1) !important; } /* --- 4. PULSE EFFEKT (OUTLINE) --- */ .future-btn .elementor-button::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Weiße Outline für den Pulse */ border: 1px solid var(--text-white, #FFFFFF); border-radius: inherit; z-index: -1; opacity: 0; transform: scale(1); pointer-events: none; } /* --- 5. HOVER ANIMATIONEN --- */ /* Bewegung & Glow */ .future-btn .elementor-button:hover { transform: translateY(-3px); /* Glow Effekt */ box-shadow: 0 10px 30px rgba(67, 97, 238, 0.4) !important; } /* Fill: Gradient erscheint und überdeckt die Elementor-Farbe */ .future-btn .elementor-button:hover::before { clip-path: circle(150% at 0% 100%); } /* Pulse: Outline explodiert nach außen */ .future-btn .elementor-button:hover::after { animation: rippleEffect 0.8s ease-out forwards; } /* Textfarbe: Immer Weiß beim Hover für Kontrast */ .future-btn .elementor-button:hover .elementor-button-content-wrapper, .future-btn .elementor-button:hover .elementor-button-text, .future-btn .elementor-button:hover svg { color: #FFFFFF !important; fill: #FFFFFF !important; } /* --- 6. KEYFRAMES --- */ @keyframes rippleEffect { 0% { transform: scale(1); opacity: 0.8; border-width: 1px; } 100% { transform: scale(1.4); opacity: 0; border-width: 0px; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Montserrat'; font-display: auto; src: url('https://futurelements.eu/wp-content/uploads/2026/01/Montserrat-VariableFont_wght.ttf') format('truetype'); } /* End Custom Fonts CSS */