/*
 Theme Name:     Senzavi Child Theme
 Theme URI:      https://example.com/
 Description:    Child Theme fuer Hello Elementor
 Author:         Vincent Ulmer
 Template:       hello-elementor
 Version:        1.0.0
 Text Domain:    hello-elementor-child
*/

/* Start custom CSS */


:root {

    --sen_padding-tablet: 32px;
    --sen_padding-mobil: 16px;

    --sen_box-shadow: rgba(145, 158, 171, 0.16) 0px 8px 16px 0px;


}

/*Helper*/
.sen_hypens--auto * {
    hyphens: auto;
}

/* Farbe von Icons*/

svg {
    color: var(--e-global-color-accent);
}

.sen_dynamic-card__icon svg {
    width: 48px !important;
    height: 48px !important;

}


/*Fuegt Seiten-Padding (Abstand zum Rand) bei Boxed-Containern hinzu.*/
.sen_boxed-container {
    @media Screen and (max-width: 1190px) {
        padding: 0 var(--sen_padding-tablet) !important;
    }
}


.sen_boxed-container {
    @media Screen and (max-width: 768px) {
        padding: 0 var(--sen_padding-mobil) !important;
    }
}
.sen_faq details {
    border-radius: 16px !important;
    overflow: hidden;
    border: 1px solid var(--e-global-color-b2b0c80) !important;
    box-shadow: var(--sen_box-shadow);

    &:hover,
    &:active {
        border: 1px solid var(--e-global-color-b2638d9) !important;


    }
}


/*Allle Formulare Dynamics CI*/
.sen-kf--main, .sen-wn--main, .sen-wp--main {
    display: grid;
    gap: 32px;
    background: var(--e-global-color-secondary);
    padding: 24px;
    border-radius: 16px;
    color: var(--e-global-color-e80687e);
    
    button {
        border: 1px solid white !important
    }

        /*KF_consent*/
    div.consentBlock {
        padding: 0px !important;

        div {
            display: flex;
            align-items: flex-start;
            flex-direction: row;
            font-size: 0.8rem;
            gap: 8px;  
            font-family: inter !important;
        }

    }
}

/*Kontakt-Formulare Dynamics CI*/
.sen-kf--main {
        grid-template-columns: repeat(6, 1fr);

    grid-template-areas:
        "vorname vorname nachname nachname telefon telefon"
        "email email job job . ."
        "firma firma groese groese branche branche "
        "nachricht nachricht nachricht nachricht nachricht nachricht"
        "legals1 legals1 legals1 legals1 . ."
        "senden . . . . .";

    @media screen and (max-width:768px) {
        grid-template-columns: repeat(1, 1fr);



        div {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        grid-template-areas: "vorname"
        "nachname"
        "job"
        "firma"
        "groese"
        "branche"
        "email"
        "telefon"
        "nachricht"
        "legals1"
        "senden";
    }



    div[data-targetproperty="firstname"] {
        grid-area: vorname;
    }

    div[data-targetproperty="lastname"] {
        grid-area: nachname;
    }

    div[data-targetproperty="sz_position"] {
        grid-area: job;
    }

    div[data-targetproperty="companyname"] {
        grid-area: firma;
    }

    div[data-targetproperty="emailaddress1"] {
        grid-area: email;
    }

    div[data-targetproperty="mobilephone"] {
        grid-area: telefon;
    }

    div[data-targetproperty="sz_numberofemployees"] {
        grid-area: groese;
    }

    div[data-targetproperty="description"] {
        grid-area: nachricht;
    }

    div[data-targetproperty="industrycode"] {
        grid-area: branche;
    }

    div.ConsentWrapper {
        grid-area: legals1;

    }




    div[data-editorblocktype="SubmitButton"] {
        grid-area: senden;
    }





}


/*Whitepaper und Webcast-Formulare*/

.sen-wp--main, .sen-wn--main {
    gap: 16px;
}


/*Navi*/
 @media screen and (max-width:768px) {
    
 
.elementor-nav-menu--dropdown[aria-hidden="true"] {
     transition: 1s all;
      position: fixed;
        left: 0px;
        width: 100vw;
    opacity: 0;

}

.elementor-nav-menu--dropdown[aria-hidden="false"] {
  position: fixed;
         transition: 1s all;

    top: 60px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    padding: 32px;
        opacity: 1;

}
}


/* =============================================
   Elementor Entrance Animation “ Fade + Slide Up
   Praefix: sen_
 
   Anweisung: Füge die Klasse "sen_animate-in" im
   Elementor Editor ’ Erweitert ’ CSS-Klassen ein.
   ============================================= */
 
/* ------ Grundzustand: unsichtbar + verschoben ------ */
.sen_animate-in {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}


 
/* ------ Aktiv: sichtbar + an Originalposition ------ */
.sen_animate-in.sen_visible {
  opacity: 1;
  transform: translateY(0);
}
 
/* ------ Verzoegerungs-Varianten fuer versetztes Erscheinen ------ */
.sen_animate-in.sen_delay-1 { transition-delay: 0.1s; }
.sen_animate-in.sen_delay-2 { transition-delay: 0.2s; }
.sen_animate-in.sen_delay-3 { transition-delay: 0.3s; }
.sen_animate-in.sen_delay-4 { transition-delay: 0.4s; }
.sen_animate-in.sen_delay-5 { transition-delay: 0.5s; }
 
/* ------ Geschwindigkeits-Varianten ------ */
.sen_animate-in.sen_fast { transition-duration: 0.4s; }
.sen_animate-in.sen_slow { transition-duration: 1.1s; }
 
/* ------ Richtungs-Varianten ------ */
.sen_animate-in.sen_from-left  { transform: translateX(-50px); }
.sen_animate-in.sen_from-right { transform: translateX(50px); }
.sen_animate-in.sen_from-left.sen_visible,
.sen_animate-in.sen_from-right.sen_visible { transform: translateX(0); }
 
/* ------ Zoom-Variante ------ */
.sen_animate-in.sen_zoom {
  transform: scale(0.88) translateY(20px);
}
.sen_animate-in.sen_zoom.sen_visible {
  transform: scale(1) translateY(0);
}
 
/* ------ Kein Effekt bei reduced-motion ------ */
@media (prefers-reduced-motion: reduce) {
  .sen_animate-in,
  .sen_animate-in.sen_visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
 

/*deaktiviere in Editor*/
.elementor-editor-active .sen_animate-in, .elementor-editor-active .sen_animate-in.sen_from-right, .elementor-editor-active .sen_animate-in.sen_from-left   {
      opacity: 1;
      transform: translateY(0px) !important;
    transform: translateX(0px) !important;

}



/*Complianz Button*/

button.cmplz-btn.cmplz-show {
    position: fixed; 
    right: -45px !important;
    bottom: 30px !important;
    border-radius: 999px !important;
    border-bottom-left-radius: 999px !important;
    border-bottom-right-radius: 999px !important;
    border-top-left-radius: 999px !important;
    border-top-right-radius: 999px !important;
    color: transparent !important;
    width: 0px !important;
    ;

    &:before {
         content: "";
         display: inline-block;
         width: 100%;
         height: 1.3em;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 2a10 10 0 1 0 10 10a4 4 0 0 1-5-5a4 4 0 0 1-5-5M8.5 8.5v.01M16 15.5v.01M12 12v.01M11 17v.01M7 14v.01'/%3E%3C/svg%3E");
         background-size: contain;
         background-repeat: no-repeat;
        
    }
}