.elementor-322 .elementor-element.elementor-element-e8df4c9{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:10px;--padding-bottom:0px;--padding-left:90px;--padding-right:90px;}.elementor-322 .elementor-element.elementor-element-c959c3c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-322 .elementor-element.elementor-element-2bcc7e2 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:1.4rem;font-weight:700;text-transform:uppercase;letter-spacing:-1px;color:var( --e-global-color-secondary );}.elementor-322 .elementor-element.elementor-element-49791bd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-322 .elementor-element.elementor-element-977e180 img{width:30px;}.elementor-322 .elementor-element.elementor-element-7858e44{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-322 .elementor-element.elementor-element-deb94e5 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:1.4rem;font-weight:700;text-transform:uppercase;letter-spacing:-1px;color:var( --e-global-color-secondary );}.elementor-322 .elementor-element.elementor-element-853ff2d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-322 .elementor-element.elementor-element-d2d27b5 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:1.4rem;font-weight:700;text-transform:uppercase;letter-spacing:-1px;color:var( --e-global-color-secondary );}.elementor-322 .elementor-element.elementor-element-9c00537{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-322 .elementor-element.elementor-element-f8a56b3{--display:flex;--min-height:85vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:30px;--padding-bottom:50px;--padding-left:100px;--padding-right:100px;}.elementor-322 .elementor-element.elementor-element-7f545d9 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:1.8rem;font-weight:700;text-transform:uppercase;letter-spacing:-1px;color:var( --e-global-color-secondary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-322 .elementor-element.elementor-element-eea282f{column-gap:0px;font-family:"Inter", Sans-serif;font-size:1rem;font-weight:400;}.elementor-322 .elementor-element.elementor-element-eea282f p{margin-block-end:9px;}@media(max-width:1024px){.elementor-322 .elementor-element.elementor-element-e8df4c9{--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-322 .elementor-element.elementor-element-49791bd{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-322 .elementor-element.elementor-element-977e180 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-322 .elementor-element.elementor-element-f8a56b3{--padding-top:20px;--padding-bottom:30px;--padding-left:10px;--padding-right:10px;}}@media(max-width:767px){.elementor-322 .elementor-element.elementor-element-e8df4c9{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-322 .elementor-element.elementor-element-c959c3c{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-322 .elementor-element.elementor-element-2bcc7e2 .elementor-heading-title{font-size:1.2rem;}.elementor-322 .elementor-element.elementor-element-49791bd{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-322 .elementor-element.elementor-element-49791bd.e-con{--order:-99999 /* order start hack */;}.elementor-322 .elementor-element.elementor-element-977e180{text-align:start;}.elementor-322 .elementor-element.elementor-element-7858e44{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-322 .elementor-element.elementor-element-deb94e5 .elementor-heading-title{font-size:1.2rem;}.elementor-322 .elementor-element.elementor-element-853ff2d{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-322 .elementor-element.elementor-element-d2d27b5 .elementor-heading-title{font-size:1.2rem;}.elementor-322 .elementor-element.elementor-element-f8a56b3{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-322 .elementor-element.elementor-element-7f545d9 .elementor-heading-title{font-size:1.2rem;}}@media(min-width:768px){.elementor-322 .elementor-element.elementor-element-c959c3c{--width:25%;}.elementor-322 .elementor-element.elementor-element-49791bd{--width:25%;}.elementor-322 .elementor-element.elementor-element-7858e44{--width:30%;}.elementor-322 .elementor-element.elementor-element-853ff2d{--width:20%;}.elementor-322 .elementor-element.elementor-element-9c00537{--width:1%;}}@media(max-width:1024px) and (min-width:768px){.elementor-322 .elementor-element.elementor-element-9c00537{--width:1px;}}/* Start custom CSS for heading, class: .elementor-element-2bcc7e2 *//* ===== Strobe + Draw Underline (0.6s) | Endfarbe via Klasse ===== */ .strobe-white, .strobe-black { position: relative; display: inline-block; cursor: pointer; } /* Ziel: Text selbst */ .strobe-white :is(.elementor-heading-title, a, span), .strobe-black :is(.elementor-heading-title, a, span) { position: relative; display: inline-block; transition: none; } /* Unterstreichung als Pseudo-Element */ .strobe-white :is(.elementor-heading-title, a, span)::after, .strobe-black :is(.elementor-heading-title, a, span)::after { content: ""; position: absolute; left: 0; bottom: -0.12em; /* Abstand unter Text */ height: 0.12em; /* Dicke der Linie */ width: 100%; background: currentColor; /* folgt Textfarbe */ transform: scaleX(0); transform-origin: left center; pointer-events: none; } /* Hover: Animation starten */ .strobe-white:hover :is(.elementor-heading-title, a, span), .strobe-black:hover :is(.elementor-heading-title, a, span) { animation: strobe06 0.6s steps(1, end) forwards; } /* Hover: Unterstreichung von links nach rechts */ .strobe-white:hover :is(.elementor-heading-title, a, span)::after, .strobe-black:hover :is(.elementor-heading-title, a, span)::after { animation: underlineDraw06 0.6s cubic-bezier(.2,.7,.2,1) forwards; } /* === 4x Strobo in 0.6s (ON/OFF), Endfarbe wird per Klasse gesetzt === */ @keyframes strobe06 { 0% { color: inherit; text-shadow: none; mix-blend-mode: normal; } 10% { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.85); } 20% { color: inherit; text-shadow: none; } 30% { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.85); } 40% { color: inherit; text-shadow: none; } 50% { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.85); } 60% { color: inherit; text-shadow: none; } 70% { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.85); } 100% { text-shadow: 0 0 6px rgba(255,255,255,.35); } } /* === Unterstreichung: links -> rechts in 0.6s === */ @keyframes underlineDraw06 { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } /* ===== Endfarbe festlegen ===== */ /* Endet WEISS */ .strobe-white:hover :is(.elementor-heading-title, a, span) { color: #fff !important; } /* Endet SCHWARZ */ .strobe-black:hover :is(.elementor-heading-title, a, span) { color: #000 !important; text-shadow: none; /* kein Glow am Ende */ } /* ===== Kompatibilität mit deinem Video-Code (bgvid-on / Blend-Modes) ===== Während des Effekts und am Ende: sicherstellen, dass nichts "weggeblendet" wird */ body.bgvid-on .strobe-white:hover :is(.elementor-heading-title, a, span), body.bgvid-on .strobe-black:hover :is(.elementor-heading-title, a, span) { mix-blend-mode: normal !important; }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-977e180 *//* Stelle sicher, dass der Container selbst keinen Hintergrund "reinmischt" */ .neg-logo, .neg-logo .elementor-widget-container { background: transparent !important; } /* Wenn Video läuft: PNG wird dynamisch "negativ" beeinflusst */ body.bgvid-on .neg-logo img { filter: invert(1); /* schwarz -> weiß */ mix-blend-mode: exclusion; /* subtiler Negativ-Look wie dein Text */ /* stärker/knackiger: */ /* mix-blend-mode: difference; */ } /* Wenn Video aus: wieder normal schwarz */ body:not(.bgvid-on) .neg-logo img { filter: none; mix-blend-mode: normal; }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-7f545d9 *//* ===== Strobe + Draw Underline (0.6s) | Endfarbe via Klasse ===== */ .strobe-white, .strobe-black { position: relative; display: inline-block; cursor: pointer; } /* Ziel: Text selbst */ .strobe-white :is(.elementor-heading-title, a, span), .strobe-black :is(.elementor-heading-title, a, span) { position: relative; display: inline-block; transition: none; } /* Unterstreichung als Pseudo-Element */ .strobe-white :is(.elementor-heading-title, a, span)::after, .strobe-black :is(.elementor-heading-title, a, span)::after { content: ""; position: absolute; left: 0; bottom: -0.12em; /* Abstand unter Text */ height: 0.12em; /* Dicke der Linie */ width: 100%; background: currentColor; /* folgt Textfarbe */ transform: scaleX(0); transform-origin: left center; pointer-events: none; } /* Hover: Animation starten */ .strobe-white:hover :is(.elementor-heading-title, a, span), .strobe-black:hover :is(.elementor-heading-title, a, span) { animation: strobe06 0.6s steps(1, end) forwards; } /* Hover: Unterstreichung von links nach rechts */ .strobe-white:hover :is(.elementor-heading-title, a, span)::after, .strobe-black:hover :is(.elementor-heading-title, a, span)::after { animation: underlineDraw06 0.6s cubic-bezier(.2,.7,.2,1) forwards; } /* === 4x Strobo in 0.6s (ON/OFF), Endfarbe wird per Klasse gesetzt === */ @keyframes strobe06 { 0% { color: inherit; text-shadow: none; mix-blend-mode: normal; } 10% { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.85); } 20% { color: inherit; text-shadow: none; } 30% { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.85); } 40% { color: inherit; text-shadow: none; } 50% { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.85); } 60% { color: inherit; text-shadow: none; } 70% { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.85); } 100% { text-shadow: 0 0 6px rgba(255,255,255,.35); } } /* === Unterstreichung: links -> rechts in 0.6s === */ @keyframes underlineDraw06 { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } /* ===== Endfarbe festlegen ===== */ /* Endet WEISS */ .strobe-white:hover :is(.elementor-heading-title, a, span) { color: #fff !important; } /* Endet SCHWARZ */ .strobe-black:hover :is(.elementor-heading-title, a, span) { color: #000 !important; text-shadow: none; /* kein Glow am Ende */ } /* ===== Kompatibilität mit deinem Video-Code (bgvid-on / Blend-Modes) ===== Während des Effekts und am Ende: sicherstellen, dass nichts "weggeblendet" wird */ body.bgvid-on .strobe-white:hover :is(.elementor-heading-title, a, span), body.bgvid-on .strobe-black:hover :is(.elementor-heading-title, a, span) { mix-blend-mode: normal !important; }/* End custom CSS */