#can_Demo {
    position: sticky;
    
    top: 200px;
   
}

.img_element {

    max-width: none !important; /* important ist leider notwendig, da sonst die Klasse "woocommerce-page img das img-element und deren attribute ueberschreibt. */   
    height: 100vh !important;
    
  }

.fixedScroll {
    position: fixed;
    top: 10px;
    left: 10px;
}


.section-performance {
    --overflow-offset: 197px;
    --section-offset: 197px;

    
}


.sticky-container {
    min-height: 350vh;
    text-align: center;
   
    /* overflow: hidden; */
    position: relative;
}

.element-sticky_inactive {
    position: absolute;
    /* position: -webkit-sticky;  */     /* Safari */ 
    top: 0;
    height: 100vh;
    padding-bottom: var(--overflow-offset);
    margin-bottom: calc(var(--overflow-offset)*-1);
    background-color: #272830;
    min-height: 100vh;
    

    /* transition: opacity 0.1s;     */

    
    min-width: 100%;
    /*
    left: 0px;
    right: 0px;
    */

    /*
    left: 50%;
    transform: translateX(-50%); */

    left: 50%;
    transform: translate(-50%, 0%);
}

.element-like-sticky_active {
    position: fixed;
    top: 0;
    height: 100vh;
    padding-bottom: var(--overflow-offset);
    margin-bottom: calc(var(--overflow-offset)*-1);
    background-color: blue;
    min-height: 100vh;
    /* min-width: 100%; */

    transition: opacity 0.5s;


}



@media screen and (max-width: 40em){
  /* CSS rules for smartphone screens */
  #K2_LineChart {
    height: 150px  !important;
    width: 100%  !important;
  }

  #K3_LineChart {
    height: 150px  !important;
    width: 100%  !important;
  }

  #K4_LineChart {
    height: 150px  !important;
    width: 100%  !important;
  }

  #K5_LineChart {
    height: 150px  !important;
    width: 100%  !important;
  }


  .scrollable-content {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    
    white-space: nowrap;

    height: 50px !important; /* Höhe von 50 Pixeln für mobile Geräte */
  }


} 



@media only screen and (min-width: 1441px){
  .section-content-container {
    margin-left: auto;
    margin-right: auto;
    width: 980px; 
  }
} 


@media only screen and (max-width: 767px){
  /* CSS rules for smartphone screens */
  .section-content-container {
    display: none;
    
  }
} 


.section-content-container {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    top: 260px;
    z-index: 3;

    margin-top: 53px;
/*
    margin-left: auto;
    margin-right: auto;
    width: 980px; 
*/

    /* background-color: blueviolet;  */
}


.sequence-Container_1_left {
    z-index: 1;
    margin-right: 120px;
    position: relative;
    
    text-align: center;

    --overflow-offset: 197px;
    --section-offset: 197px;
}

.animation_1 {
    height: 330px;
    width: 330px;

    z-index: 6;
    transition: opacity 2.5s ease-in-out;
}

.txt_Container_1 {
    margin-top: 34px;

}

.txt_color_1 {
    color: #60cafc;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    padding-bottom: 5px;
    margin-bottom: -5px;
    background-image: linear-gradient(90deg,#ccefff,#60cafc 40%,#3D71FF);
}

.txt_Setting {
    opacity: 0;

    font-size: 19px;
    line-height: 1.2105263158;
    font-weight: 600;
    letter-spacing: .012em;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}

.animation_2 {
    height: 330px;
    width: 330px;

    z-index: 6;
    transition: opacity 2.5s ease-in-out;
}

.txt_Container_2 {
    margin-top: 34px;

}

.txt_color_2 {
    color: #ad68ff;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    padding-bottom: 5px;
    margin-bottom: -5px;
    background-image: linear-gradient(90deg,#e1cdff,#ad68ff 40%,#9d4dff);
}

.sequence-Container_2_right {
    z-index: 1;
    
    position: relative;
    
    text-align: center;

    --overflow-offset: 197px;
    --section-offset: 197px;
}


.performance-div {
    overflow: hidden;
    width: 100%;
   /* position: relative; */
}

.height-performance-pad-top {
    padding-top: 153px;
}

.headline-Performance {
    margin: 0;
    padding: 0;

    font-size: 65px;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.015em;

    color: #f5f5f7;

    position: relative;
    z-index: 1;

    visibility: visible;
    opacity: 1;
}

.chip-container {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 260px;
    margin-top: 0px;
}

.section-content {
    margin-left: auto;
    margin-right: auto;
    /* width: 980px; */
}


.gradient-container {
    top: 30%;

    position: absolute;
    top: 221px; 
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    /* width: 100%; */
}



    
p.mega-klasse {
    color: red;
    display: block;
    background-color: gray;
}

.my-button2 {
    /* Copy the styles from .et_pb_button */
    
    display: inline-block;
    position: relative;
    font-size: 14px;
    line-height: 1.1em !important;
    padding: 1px 2px;
    border-radius: 10px;
    text-align: center;
    /* text-transform: uppercase; */
    /* letter-spacing: 1px; */
    font-weight: 400;
    -webkit-transition: all 1.3s;
    -moz-transition: all 1.3s;
    -ms-transition: all 1.3s;
    -o-transition: all 1.3s;
    transition: all 1.3s;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    transition-property: all !important;
    
    /* Set your own background and text colors */
    background-color: #00ff00 !important; /* replace with your own color */
    color: #ffffff !important; /* replace with your own color */
    /* border: none; */
    border: 1px solid; 

    /* z-index: 10; */
    -webkit-border-radius: 10px;
  }



  /* By default, most browsers will display the "hand" or "pointer" cursor when hovering over links, but you can use the cursor property to customize the cursor style for any element on your page.*/
  .my-button2:hover {
    cursor: pointer;
    text-decoration: none;
    background-color: #84f784 !important;
  }



  .my-button_Gratis {
    /* Copy the styles from .et_pb_button */
    
    display: inline-block;
    position: relative;
    font-size: 14px;
    line-height: 1.1em !important;
    padding: 1px 2px;
    border-radius: 10px;
    text-align: center;
    /* text-transform: uppercase; */
    /* letter-spacing: 1px; */
    font-weight: 400;
    -webkit-transition: all 1.3s;
    -moz-transition: all 1.3s;
    -ms-transition: all 1.3s;
    -o-transition: all 1.3s;
    transition: all 1.3s;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    transition-property: all !important;
    
    /* Set your own background and text colors */
    background-color: #518ccf !important; /* replace with your own color */
    color: #ffffff !important; /* replace with your own color */
    /* border: none; */
    border: 1px solid; 

    /* z-index: 10; */
    -webkit-border-radius: 10px;
  }

  .my-button_Gratis:hover {
    cursor: pointer;
    text-decoration: none;
    background-color: #80f3f7 !important;
  }

  .two-columns {
    display: flex;
  }
  
  .left-column_75Proz {
    flex: 0 0 70%;
    padding: 5px;
    overflow: hidden;

    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .right-column_25Proz {
    flex: 0 0 30%;
    padding: 5px;
    
    border-bottom: 1px solid #ccc;
  }


  .left-column_75Proz_bottom {
    flex: 0 0 70%;
    padding: 5px;
    overflow: hidden;
  }
  .right-column_25Proz_bottom {
    flex: 0 0 30%;
    padding: 5px;
  }



  .left-column_60Proz {
    flex: 0 0 60%;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }
  
  .right-column_40Proz {
    flex: 0 0 40%;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
 
  .outer-div {
    /* width: 200px; /* Set the width of the outer div */
    height: 25px; /* Set the height of the outer div */
    overflow: hidden; /* Hide any content that exceeds the dimensions of the outer div */
  }
/*
  #ID_word-slide {
    
    overflow: hidden;
    /* line-height: 1.1; /* adjust to your desired line-height */
    /* text-overflow: ellipsis; 
  }
*/
  .inner-span {
    white-space:nowrap; 
    display: inline-block;
    height: 25px; /* Set the height of the span */
    margin-right: -100%;
    /* animation: slide 15s linear infinite; */

    animation: slide linear infinite; /* Move the text in an infinite loop */
    /* animation-duration: calc(10s + 0.1s * var(--text-length)); /* Set the duration of the animation based on the length of the text */
    animation-duration: 15s;
    /* --text-length: calc(1ch * parseInt(var(--text-characters))); /* Set the number of characters in the text */
    /* --text-characters: length(var(--text)); */
  }

  :root {
    /* --text: "This is a very long text that will move through an animation without changing the size of the outer div"; */
  }

  @keyframes slide {
    0% { transform: translateX(+33%); }
    100% { transform: translateX(-100%); }
  }
  

  .setAll_Margin_0 {

    /* statt:
    margin-top: 0px;
    margin-bottom: 0;
    margin-right: 0px;
    margin-left: 0;      */

    margin: 0px 0 0px 0;
  }

  .setAll_Padding_0 {
    padding: 0px 0 0px 0;
  }

  .setColorHeadLine {
    color: #ffffff; /* main color */
  }

  .setColorText {
    color: #ffffff; /* main color */
  }


  /* ##############  CSS for Pop-Up    ###########################*/
  .modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 350ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 99999;
    background-color: white;
    width: 500px;
    max-width: 80%;
  }

  .modal.active {
    transform: translate(-50%, -50%) scale(1);
  }

  .modal-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid black;
  }

  .modal-header .title {
    font-size: 1.25rem;
    font-weight: bold;
  }

  .modal-header .close-button {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    font-size: 1.25rem;
    font-weight:bold;
  }

  .modal-body {
    padding: 10px 15px;
  }

  #overlay {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0, .5);
    pointer-events: none;
    z-index: 99;
  }

  #overlay.active {
    opacity: 1;
    pointer-events: all;
  }

  /* ##############  CSS for Pop-Up    ###########################*/

  .zIndex_Default {
    z-index: 0;
  }

  /*
  .et_pb_icon_wrap .et-pb-icon:hover ,
  .et_pb_icon_1 .et_pb_icon_wrap .et-pb-icon:hover {
*/

.popUp_icon .et_pb_icon_wrap .et-pb-icon {
  color: goldenrod !important;
}


.popUp_icon .et_pb_icon_wrap .et-pb-icon:hover {
    cursor: pointer;
    text-decoration: none;
    color: yellow !important;
    
  }

  .popTxt_underline {
    text-decoration:underline !important;
  }

  .popTxt_bold {
    font-weight:bold !important; 
  }

 
  div.heightFixed_70px {
    height: 70px; 
    overflow: hidden; /* Schneidet den Inhalt des Elements ab, wenn er die Höhe überschreitet */
  }

  h4.heightFixed {
    height: 40px; /* Legt die Höhe des div-Elements auf 100px fest */
    overflow: hidden; /* Schneidet den Inhalt des Elements ab, wenn er die Höhe überschreitet */
  }