.elementor-25 .elementor-element.elementor-element-6a50fb8{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-25 .elementor-element.elementor-element-6a50fb8:not(.elementor-motion-effects-element-type-background), .elementor-25 .elementor-element.elementor-element-6a50fb8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-022242f );}body:not(.rtl) .elementor-25 .elementor-element.elementor-element-9102da2{right:15px;}body.rtl .elementor-25 .elementor-element.elementor-element-9102da2{left:15px;}.elementor-25 .elementor-element.elementor-element-9102da2{bottom:10px;z-index:999;--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-25 .elementor-element.elementor-element-9102da2 .elementor-icon-list-item:not(:last-child):after{content:"";border-color:var( --e-global-color-secondary );}.elementor-25 .elementor-element.elementor-element-9102da2 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child):after{border-block-start-style:solid;border-block-start-width:1px;}.elementor-25 .elementor-element.elementor-element-9102da2 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child):after{border-inline-start-style:solid;}.elementor-25 .elementor-element.elementor-element-9102da2 .elementor-inline-items .elementor-icon-list-item:not(:last-child):after{border-inline-start-width:1px;}.elementor-25 .elementor-element.elementor-element-9102da2 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-25 .elementor-element.elementor-element-9102da2 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-25 .elementor-element.elementor-element-9102da2 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-25 .elementor-element.elementor-element-9102da2 .elementor-icon-list-item > a{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-25 .elementor-element.elementor-element-9102da2 .elementor-icon-list-text{color:var( --e-global-color-secondary );transition:color 0.3s;}.elementor-25 .elementor-element.elementor-element-9102da2 .elementor-icon-list-item:hover .elementor-icon-list-text{color:var( --e-global-color-accent );}body:not(.rtl) .elementor-25 .elementor-element.elementor-element-c67a88d{left:0px;}body.rtl .elementor-25 .elementor-element.elementor-element-c67a88d{right:0px;}.elementor-25 .elementor-element.elementor-element-c67a88d{top:0px;z-index:9999;}.elementor-25 .elementor-element.elementor-element-9726b98{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--background-transition:0.3s;--overlay-opacity:1;--padding-top:35vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;--z-index:1;overflow:visible;}.elementor-25 .elementor-element.elementor-element-9726b98:hover{background-color:#00000000;--overlay-opacity:0;}.elementor-25 .elementor-element.elementor-element-9726b98::before, .elementor-25 .elementor-element.elementor-element-9726b98 > .elementor-background-video-container::before, .elementor-25 .elementor-element.elementor-element-9726b98 > .e-con-inner > .elementor-background-video-container::before, .elementor-25 .elementor-element.elementor-element-9726b98 > .elementor-background-slideshow::before, .elementor-25 .elementor-element.elementor-element-9726b98 > .e-con-inner > .elementor-background-slideshow::before, .elementor-25 .elementor-element.elementor-element-9726b98 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-primary );background-image:url("https://superhelden-werkstatt.de/wp-content/uploads/2026/03/8-Superheldenwerkstatt_142-gray-1.jpg");--background-overlay:'';background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-25 .elementor-element.elementor-element-9726b98:hover::before, .elementor-25 .elementor-element.elementor-element-9726b98:hover > .elementor-background-video-container::before, .elementor-25 .elementor-element.elementor-element-9726b98:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-25 .elementor-element.elementor-element-9726b98 > .elementor-background-slideshow:hover::before, .elementor-25 .elementor-element.elementor-element-9726b98 > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-25 .elementor-element.elementor-element-9726b98::before{filter:brightness( 50% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-25 .elementor-element.elementor-element-9726b98, .elementor-25 .elementor-element.elementor-element-9726b98::before{--overlay-transition:0.3s;}.elementor-25 .elementor-element.elementor-element-c254d43{padding:0% 0% 0% 0%;text-align:center;}.elementor-25 .elementor-element.elementor-element-c254d43 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:65px;font-weight:900;font-style:normal;mix-blend-mode:lighten;color:var( --e-global-color-secondary );}.elementor-25 .elementor-element.elementor-element-c254d43 .elementor-heading-title a:hover, .elementor-25 .elementor-element.elementor-element-c254d43 .elementor-heading-title a:focus{color:#ECDFCB;}.elementor-25 .elementor-element.elementor-element-c254d43 .elementor-heading-title a{transition-duration:0.3s;}.elementor-25 .elementor-element.elementor-element-07d0d55{padding:0% 0% 0% 0%;text-align:center;}.elementor-25 .elementor-element.elementor-element-07d0d55 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );mix-blend-mode:lighten;color:var( --e-global-color-secondary );}.elementor-25 .elementor-element.elementor-element-07d0d55 .elementor-heading-title a:hover, .elementor-25 .elementor-element.elementor-element-07d0d55 .elementor-heading-title a:focus{color:#ECDFCB;}.elementor-25 .elementor-element.elementor-element-07d0d55 .elementor-heading-title a{transition-duration:0.3s;}.elementor-25 .elementor-element.elementor-element-085e3d9{padding:2% 0% 0% 0%;text-align:center;}.elementor-25 .elementor-element.elementor-element-085e3d9 .elementor-heading-title{font-family:"Dancing Script", Sans-serif;font-size:25px;font-style:normal;mix-blend-mode:lighten;color:var( --e-global-color-secondary );}.elementor-25 .elementor-element.elementor-element-085e3d9 .elementor-heading-title a:hover, .elementor-25 .elementor-element.elementor-element-085e3d9 .elementor-heading-title a:focus{color:#ECDFCB;}.elementor-25 .elementor-element.elementor-element-085e3d9 .elementor-heading-title a{transition-duration:0.3s;}.elementor-25 .elementor-element.elementor-element-db58ce5{--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;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--background-transition:0.3s;--overlay-opacity:1;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:35vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;--z-index:0;overflow:visible;}.elementor-25 .elementor-element.elementor-element-db58ce5:not(.elementor-motion-effects-element-type-background), .elementor-25 .elementor-element.elementor-element-db58ce5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-74d08b1 );}.elementor-25 .elementor-element.elementor-element-db58ce5:hover{background-color:var( --e-global-color-022242f );--overlay-opacity:0;}.elementor-25 .elementor-element.elementor-element-db58ce5::before, .elementor-25 .elementor-element.elementor-element-db58ce5 > .elementor-background-video-container::before, .elementor-25 .elementor-element.elementor-element-db58ce5 > .e-con-inner > .elementor-background-video-container::before, .elementor-25 .elementor-element.elementor-element-db58ce5 > .elementor-background-slideshow::before, .elementor-25 .elementor-element.elementor-element-db58ce5 > .e-con-inner > .elementor-background-slideshow::before, .elementor-25 .elementor-element.elementor-element-db58ce5 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-022242f );background-image:url("https://superhelden-werkstatt.de/wp-content/uploads/2026/02/image3.webp");--background-overlay:'';background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-25 .elementor-element.elementor-element-db58ce5:hover::before, .elementor-25 .elementor-element.elementor-element-db58ce5:hover > .elementor-background-video-container::before, .elementor-25 .elementor-element.elementor-element-db58ce5:hover > .e-con-inner > .elementor-background-video-container::before, .elementor-25 .elementor-element.elementor-element-db58ce5 > .elementor-background-slideshow:hover::before, .elementor-25 .elementor-element.elementor-element-db58ce5 > .e-con-inner > .elementor-background-slideshow:hover::before{background-color:var( --e-global-color-022242f );--background-overlay:'';}.elementor-25 .elementor-element.elementor-element-db58ce5::before{filter:brightness( 50% ) contrast( 100% ) saturate( 0% ) blur( 0px ) hue-rotate( 0deg );}.elementor-25 .elementor-element.elementor-element-db58ce5, .elementor-25 .elementor-element.elementor-element-db58ce5::before{--overlay-transition:0.3s;}.elementor-25 .elementor-element.elementor-element-2852682{padding:0% 0% 0% 0%;text-align:center;}.elementor-25 .elementor-element.elementor-element-2852682 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:65px;font-weight:900;text-transform:uppercase;color:var( --e-global-color-secondary );}.elementor-25 .elementor-element.elementor-element-2852682 .elementor-heading-title a:hover, .elementor-25 .elementor-element.elementor-element-2852682 .elementor-heading-title a:focus{color:#C8D301;}.elementor-25 .elementor-element.elementor-element-ffd74ed{padding:0% 0% 0% 0%;text-align:center;}.elementor-25 .elementor-element.elementor-element-ffd74ed .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );color:var( --e-global-color-secondary );}.elementor-25 .elementor-element.elementor-element-ffd74ed .elementor-heading-title a:hover, .elementor-25 .elementor-element.elementor-element-ffd74ed .elementor-heading-title a:focus{color:#C8D301;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-25 .elementor-element.elementor-element-9726b98{--width:50%;}.elementor-25 .elementor-element.elementor-element-db58ce5{--width:50%;}}@media(min-width:2400px){.elementor-25 .elementor-element.elementor-element-9726b98{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-25 .elementor-element.elementor-element-c254d43{padding:0% 0% 0% 0%;}.elementor-25 .elementor-element.elementor-element-07d0d55 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-25 .elementor-element.elementor-element-085e3d9{padding:0% 0% 0% 0%;}.elementor-25 .elementor-element.elementor-element-db58ce5{--padding-top:20vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-25 .elementor-element.elementor-element-ffd74ed{padding:0% 0% 0% 0%;}.elementor-25 .elementor-element.elementor-element-ffd74ed .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}}@media(max-width:1366px){.elementor-25 .elementor-element.elementor-element-9726b98{--padding-top:40vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-25 .elementor-element.elementor-element-c254d43 .elementor-heading-title{font-size:50px;}.elementor-25 .elementor-element.elementor-element-07d0d55 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-25 .elementor-element.elementor-element-085e3d9 .elementor-heading-title{font-size:20px;}.elementor-25 .elementor-element.elementor-element-db58ce5{--padding-top:40vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-25 .elementor-element.elementor-element-2852682 .elementor-heading-title{font-size:50px;}.elementor-25 .elementor-element.elementor-element-ffd74ed .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}}@media(max-width:1200px){body:not(.rtl) .elementor-25 .elementor-element.elementor-element-c67a88d{left:8px;}body.rtl .elementor-25 .elementor-element.elementor-element-c67a88d{right:8px;}.elementor-25 .elementor-element.elementor-element-c67a88d{top:165px;}.elementor-25 .elementor-element.elementor-element-9726b98{--padding-top:50vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-25 .elementor-element.elementor-element-c254d43 .elementor-heading-title{font-size:50px;}.elementor-25 .elementor-element.elementor-element-085e3d9 .elementor-heading-title{font-size:20px;}.elementor-25 .elementor-element.elementor-element-db58ce5{--padding-top:50vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}}@media(max-width:1024px){.elementor-25 .elementor-element.elementor-element-9726b98:hover{--overlay-opacity:0;}.elementor-25 .elementor-element.elementor-element-9726b98{--padding-top:60vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-25 .elementor-element.elementor-element-c254d43 .elementor-heading-title{font-size:40px;}.elementor-25 .elementor-element.elementor-element-07d0d55 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-25 .elementor-element.elementor-element-085e3d9 .elementor-heading-title{font-size:15px;}.elementor-25 .elementor-element.elementor-element-db58ce5{--padding-top:60vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-25 .elementor-element.elementor-element-2852682 .elementor-heading-title{font-size:40px;}.elementor-25 .elementor-element.elementor-element-ffd74ed .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}}@media(max-width:880px){.elementor-25 .elementor-element.elementor-element-9726b98{--padding-top:70vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-25 .elementor-element.elementor-element-c254d43 .elementor-heading-title{font-size:40px;}.elementor-25 .elementor-element.elementor-element-085e3d9 .elementor-heading-title{font-size:20px;}.elementor-25 .elementor-element.elementor-element-db58ce5{--padding-top:70vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}}@media(max-width:767px){body:not(.rtl) .elementor-25 .elementor-element.elementor-element-9102da2{right:5%;}body.rtl .elementor-25 .elementor-element.elementor-element-9102da2{left:5%;}body:not(.rtl) .elementor-25 .elementor-element.elementor-element-c67a88d{left:50%;}body.rtl .elementor-25 .elementor-element.elementor-element-c67a88d{right:50%;}.elementor-25 .elementor-element.elementor-element-c67a88d{top:50vh;}.elementor-25 .elementor-element.elementor-element-9726b98{--justify-content:center;--padding-top:0vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-25 .elementor-element.elementor-element-c254d43 .elementor-heading-title{font-size:30px;}.elementor-25 .elementor-element.elementor-element-07d0d55{padding:0% 0% 0% 0%;}.elementor-25 .elementor-element.elementor-element-07d0d55 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-25 .elementor-element.elementor-element-085e3d9{padding:0% 0% 0% 0%;}.elementor-25 .elementor-element.elementor-element-085e3d9 .elementor-heading-title{font-size:15px;}.elementor-25 .elementor-element.elementor-element-db58ce5{--justify-content:center;--padding-top:0vw;--padding-bottom:0vw;--padding-left:0vw;--padding-right:0vw;}.elementor-25 .elementor-element.elementor-element-2852682 .elementor-heading-title{font-size:30px;}.elementor-25 .elementor-element.elementor-element-ffd74ed{padding:0% 0% 0% 0%;}.elementor-25 .elementor-element.elementor-element-ffd74ed .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}}/* Start custom CSS for html, class: .elementor-element-c67a88d *//* --- 1. DESKTOP DESIGN (Ab 1025px) --- */
body #hero-logo-final {
    position: fixed !important;
    top: 30% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 400px !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    display: block !important;
}

/* --- 2. MOBILE DESIGN (Handys bis 767px) --- */
@media (max-width: 767px) {
    body #hero-logo-final {
        position: absolute !important; 
        /* 50% von oben ist bei gestapelten Containern genau die Mitte/Trennlinie */
        top: 50% !important; 
        /* 50% von links für die horizontale Zentrierung */
        left: 50% !important;
        /* -50% auf X (links/rechts) und -50% auf Y (oben/unten) für die perfekte Mitte */
        transform: translate(-50%, -50%) !important;
        width: 250px !important; /* 80px ist sehr klein, 120px passt meist besser */
    }
}
    
    /* Falls es beim Scrollen stören sollte, 
       können wir es mobil auch ganz ausblenden:
       display: none !important; 
    */
}

/* --- 3. FARBEN & HOVER (Bleiben gleich) --- */
#s-bg, #s-text { transition: fill 0.6s ease !important; }
#s-bg { fill: #ffffff !important; }
#s-letter { fill: #3E3D3C !important; }
#s-text { fill: #dadada !important; }

#main-hero-section:has(#cnt-business:hover) #s-bg,
#main-hero-section:has(#cnt-business:hover) #s-text { fill: #ECDFCB !important; }

#main-hero-section:has(#cnt-superheld:hover) #s-bg,
#main-hero-section:has(#cnt-superheld:hover) #s-text { fill: #C8D301 !important; }/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-c254d43 *//* Den Standardzustand definieren */
.elementor-25 .elementor-element.elementor-element-c254d43 .elementor-heading-title {
    color: #ffffff; /* Deine initiale Farbe (Weiß) */
    transition: color 0.3s ease-in-out; /* Die Dauer der Animation */
}

/* Den Zustand beim Hovern definieren */
.elementor-25 .elementor-element.elementor-element-c254d43:hover .elementor-heading-title {
    color: #ECDFCB; /* Deine Wunschfarbe beim Hovern */
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-07d0d55 *//* Den Standardzustand definieren */
.elementor-25 .elementor-element.elementor-element-07d0d55 .elementor-heading-title {
    color: #ffffff; /* Deine initiale Farbe (Weiß) */
    transition: color 0.3s ease-in-out; /* Die Dauer der Animation */
}

/* Den Zustand beim Hovern definieren */
.elementor-25 .elementor-element.elementor-element-07d0d55:hover .elementor-heading-title {
    color: #ECDFCB; /* Deine Wunschfarbe beim Hovern */
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-085e3d9 *//* Den Standardzustand definieren */
.elementor-25 .elementor-element.elementor-element-085e3d9 .elementor-heading-title {
    color: #ffffff; /* Deine initiale Farbe (Weiß) */
    transition: color 0.3s ease-in-out; /* Die Dauer der Animation */
}

/* Den Zustand beim Hovern definieren */
.elementor-25 .elementor-element.elementor-element-085e3d9:hover .elementor-heading-title {
    color: #ECDFCB; /* Deine Wunschfarbe beim Hovern */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9726b98 *//* 1. INITIALZUSTAND (Normal) */

/* Das Logo grau machen */
.elementor-25 .elementor-element.elementor-element-9726b98 .elementor-widget-image img {
    filter: grayscale(100%) !important;
    transition: all 0.5s ease-in-out !important;
}

/* Die Überschrift vorbereiten (Weiß + Fülleffekt) */
.elementor-25 .elementor-element.elementor-element-9726b98 .elementor-heading-title {
    background: linear-gradient(to right, #ECDFCB 50%, #ffffff 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.4s ease-in-out !important;
}

/* 2. HOVER-ZUSTAND (Wenn der Container berührt wird) */

/* Logo wird farbig */
.elementor-25 .elementor-element.elementor-element-9726b98:hover .elementor-widget-image img {
    filter: grayscale(0%) !important;
    transform: scale(1.05);
}

/* Text füllt sich mit Farbe */
.elementor-25 .elementor-element.elementor-element-9726b98:hover .elementor-heading-title {
    background-position: 0 0 !important;
}

/* Der Container-Hintergrund zoomt (optional) */
.elementor-25 .elementor-element.elementor-element-9726b98:hover {
    transform: scale(1.02);
    transition: transform 0.6s ease-in-out;
    z-index: 10; /* Damit der Zoom nicht von anderen Containern abgeschnitten wird */
}

/* Wichtig, damit der Zoom nicht das Layout sprengt */
.elementor-25 .elementor-element.elementor-element-9726b98 {
    overflow: hidden;
}

/* 1. DAS VIDEO LINKS INITIAL VERSTECKEN */
#cnt-business .elementor-background-video-container {
    opacity: 0;
    transition: opacity 0.6s ease-in-out !important;
}

/* 2. VIDEO BEI HOVER EINBLENDEN */
#cnt-business:hover .elementor-background-video-container {
    opacity: 1;
}

/* 3. OPTIONAL: DAS FOTO BEIM HOVER AUSBLENDEN */
#cnt-business:hover .elementor-background-overlay {
    opacity: 0;
    transition: opacity 0.6s ease-in-out !important;
}

/* 1. DAS OVERLAY FÜR BEIDE VIDEO-CONTAINER VORBEREITEN */
#cnt-business .elementor-background-video-container::after,
#cnt-superheld .elementor-background-video-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Schwarz mit 50% Deckkraft */
    opacity: 0; /* Im Normalzustand unsichtbar */
    transition: opacity 0.5s ease; /* Sanftes Einblenden */
    z-index: 1; /* Liegt über dem Video, aber unter der Schrift */
}

/* 2. OVERLAY BEIM HOVER SICHTBAR MACHEN */
#cnt-business:hover .elementor-background-video-container::after,
#cnt-superheld:hover .elementor-background-video-container::after {
    opacity: 1;
}

/* 3. SICHERSTELLEN, DASS DIE SCHRIFT OBEN BLEIBT */
/* Deine Text-Widgets brauchen einen höheren Z-Index, um über dem Overlay zu liegen */
#cnt-business .elementor-widget-wrap,
#cnt-superheld .elementor-widget-wrap {
    position: relative;
    z-index: 10 !important;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-2852682 *//* Den Standardzustand definieren */
.elementor-25 .elementor-element.elementor-element-2852682 .elementor-heading-title {
    color: #ffffff; /* Deine initiale Farbe (Weiß) */
    transition: color 0.3s ease-in-out; /* Die Dauer der Animation */
}

/* Den Zustand beim Hovern definieren */
.elementor-25 .elementor-element.elementor-element-2852682:hover .elementor-heading-title {
    color: #C8D301; /* Deine Wunschfarbe beim Hovern */
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-ffd74ed *//* Den Standardzustand definieren */
.elementor-25 .elementor-element.elementor-element-ffd74ed .elementor-heading-title {
    color: #ffffff; /* Deine initiale Farbe (Weiß) */
    transition: color 0.3s ease-in-out; /* Die Dauer der Animation */
}

/* Den Zustand beim Hovern definieren */
.elementor-25 .elementor-element.elementor-element-ffd74ed:hover .elementor-heading-title {
    color: #C8D301; /* Deine Wunschfarbe beim Hovern */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-db58ce5 *//* 1. INITIALZUSTAND (Normal) */

/* Das Logo grau machen */
.elementor-25 .elementor-element.elementor-element-db58ce5 .elementor-widget-image img {
    filter: grayscale(100%) !important;
    transition: all 0.5s ease-in-out !important;
}

/* Die Überschrift vorbereiten (Weiß + Fülleffekt) */
.elementor-25 .elementor-element.elementor-element-db58ce5 .elementor-heading-title {
    background: linear-gradient(to right, #C8D301 50%, #ffffff 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.4s ease-in-out !important;
}

/* 2. HOVER-ZUSTAND (Wenn der Container berührt wird) */

/* Logo wird farbig */
.elementor-25 .elementor-element.elementor-element-db58ce5:hover .elementor-widget-image img {
    filter: grayscale(0%) !important;
    transform: scale(1.05);
}

/* Text füllt sich mit Farbe */
.elementor-25 .elementor-element.elementor-element-db58ce5:hover .elementor-heading-title {
    background-position: 0 0 !important;
}

/* Der Container-Hintergrund zoomt (optional) */
.elementor-25 .elementor-element.elementor-element-db58ce5:hover {
    transform: scale(1.02);
    transition: transform 0.6s ease-in-out;
    z-index: 10; /* Damit der Zoom nicht von anderen Containern abgeschnitten wird */
}

/* Wichtig, damit der Zoom nicht das Layout sprengt */
.elementor-25 .elementor-element.elementor-element-db58ce5 {
    overflow: hidden;
}

/* 1. INITIALER ZUSTAND: Bild ist da, Video ist weg */
.elementor-25 .elementor-element.elementor-element-db58ce5 .elementor-background-overlay {
    opacity: 1 !important;
    transition: opacity 0.3s ease-in-out !important;
    z-index: 1 !important;
}

.elementor-25 .elementor-element.elementor-element-db58ce5 .elementor-background-video-container {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease-in-out !important;
    z-index: 2 !important; /* Video liegt ÜBER dem Bild */
}

/* 2. HOVER ZUSTAND: Video kommt, Bild geht komplett weg */
.elementor-25 .elementor-element.elementor-element-db58ce5:hover .elementor-background-video-container {
    opacity: 1 !important;
    visibility: visible !important;
}

.elementor-25 .elementor-element.elementor-element-db58ce5:hover .elementor-background-overlay {
    opacity: 0 !important; /* Hier zwingen wir das Bild auf 0 */
    visibility: hidden !important;
}

/* 3. TEXT-SICHERUNG */
.elementor-25 .elementor-element.elementor-element-db58ce5 .elementor-widget-heading, 
.elementor-25 .elementor-element.elementor-element-db58ce5 .elementor-widget-text-editor {
    position: relative !important;
    z-index: 3 !important; /* Text immer ganz oben */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6a50fb8 *//* Den Container als Anker markieren, ohne das Layout zu verändern */
.elementor-25 .elementor-element.elementor-element-6a50fb8 {
    position: relative !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Dancing Script';
	font-display: auto;
	src: url('https://superhelden-werkstatt.de/wp-content/uploads/2026/04/DancingScript-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */