.elementor-kit-51{--e-global-color-primary:#1C144E;--e-global-color-secondary:#572CD8;--e-global-color-text:#575757;--e-global-color-accent:#FF7D3B;--e-global-typography-primary-font-family:"Inter";--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:normal;--e-global-typography-text-font-family:"Inter";--e-global-typography-accent-font-family:"Inter";background-color:#FAFAFA;color:#000000;font-family:"Inter", Sans-serif;font-weight:400;line-height:1.7em;}.elementor-kit-51 button,.elementor-kit-51 input[type="button"],.elementor-kit-51 input[type="submit"],.elementor-kit-51 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Poppins", Sans-serif;font-size:18px;font-weight:600;color:#FFFFFF;border-radius:20px 20px 20px 20px;padding:20px 30px 20px 30px;}.elementor-kit-51 button:hover,.elementor-kit-51 button:focus,.elementor-kit-51 input[type="button"]:hover,.elementor-kit-51 input[type="button"]:focus,.elementor-kit-51 input[type="submit"]:hover,.elementor-kit-51 input[type="submit"]:focus,.elementor-kit-51 .elementor-button:hover,.elementor-kit-51 .elementor-button:focus{background-color:#FF7D3BD1;color:#FFFFFF;}.elementor-kit-51 e-page-transition{background-color:#FFBC7D;}.elementor-kit-51 a{color:#009B50;font-family:"Montserrat", Sans-serif;font-weight:400;}.elementor-kit-51 a:hover{color:#333333;}.elementor-kit-51 h1{color:#059669;font-family:"Montserrat", Sans-serif;font-size:67px;font-weight:600;line-height:1.5em;}.elementor-kit-51 h2{color:#059669;font-family:"Montserrat", Sans-serif;font-size:48px;font-weight:700;line-height:1.3em;}.elementor-kit-51 h3{color:#059669;font-family:"Montserrat", Sans-serif;font-size:36px;font-weight:600;line-height:1.3em;}.elementor-kit-51 h4{color:#059669;font-family:"Montserrat", Sans-serif;font-size:24px;font-weight:600;line-height:1.3em;}.elementor-kit-51 h5{color:#059669;font-family:"Montserrat", Sans-serif;font-size:22px;}.elementor-kit-51 h6{color:#059669;font-family:"Montserrat", Sans-serif;font-size:20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end: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:1023px){.elementor-kit-51{font-size:16px;line-height:1.7em;}.elementor-kit-51 a{font-size:16px;line-height:1.7em;}.elementor-kit-51 h1{font-size:48px;line-height:1.5em;}.elementor-kit-51 h2{font-size:36px;line-height:1.3em;}.elementor-kit-51 h3{font-size:28px;line-height:1.3em;}.elementor-kit-51 h4{font-size:22px;line-height:1.3em;}.elementor-kit-51 button,.elementor-kit-51 input[type="button"],.elementor-kit-51 input[type="submit"],.elementor-kit-51 .elementor-button{font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-51{font-size:15px;line-height:1.7em;}.elementor-kit-51 a{font-size:15px;line-height:1.7em;}.elementor-kit-51 h1{font-size:34px;line-height:1.5em;}.elementor-kit-51 h2{font-size:28px;line-height:1.3em;}.elementor-kit-51 h3{font-size:23px;line-height:1.3em;}.elementor-kit-51 h4{font-size:19px;line-height:1.3em;}.elementor-kit-51 button,.elementor-kit-51 input[type="button"],.elementor-kit-51 input[type="submit"],.elementor-kit-51 .elementor-button{font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Hintergrund mit Gradient und Animation (optional) */
.background {
  background: linear-gradient(135deg, #800080, #4b0082);
  animation: gradientShift 10s infinite alternate;
  position: relative;
  overflow: hidden;
  padding: 50px 0; /* Abstand oben und unten */
}

/* Subtiles Gittermuster (optional) */
.background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1" d="M0,0H20M0,0V20"/></svg>');
  background-size: 20px 20px;
  pointer-events: none;
}

/* Animation für den Gradienten (optional) */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Mobile-Mockup Styling */
.mobile-mockup {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Fortschrittsbalken */
.progress-bar {
  width: 0%;
  height: 10px;
  background-color: #ff6f61;
  transition: width 1.5s ease;
}

/* Karten Styling */
.left-card, .right-card {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.left-card {
  transform: translateX(-100px); /* Startposition für linke Karten */
}

.right-card {
  transform: translateX(100px); /* Startposition für rechte Karten */
}

/* Hover-Effekte für Icons */
.card-icon {
  transition: transform 0.3s ease, color 0.3s ease;
}

.card-icon:hover {
  transform: scale(1.3);
  color: #ff6f61;
}

/* Text-Fade-In */
.card-title, .card-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}



/* ANDERE JAVASCRIPT EFFEKTE DIE MAN AUCH ANWENDEN KANN */

/* Fade-In mit Scale-Effekt */
.fade-in-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-scale.animate {
  opacity: 1;
  transform: scale(1);
}

/* Slide-In-Effekt von links und rechts */
.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide-in-left.animate, .slide-in-right.animate {
  opacity: 1;
  transform: translateX(0);
}

/* Bounce-Effekt */
.bounce {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.bounce.animate {
  opacity: 1;
  transform: translateY(0);
  animation: bounce 0.6s ease;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-15px); }
  60% { transform: translateY(-5px); }
}

/* Rotations-Effekt */
.rotate-in {
  opacity: 0;
  transform: rotate(-15deg) scale(0.8);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rotate-in.animate {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Text-Highlight-Effekt */
.text-highlight {
  color: #ccc; /* Startfarbe */
  transition: color 0.5s ease;
}

.text-highlight.animate {
  color: #000; /* Endfarbe */
}

/* Parallax-Effekt */
.parallax {
  transition: transform 0.1s ease; /* Für sanfte Bewegung */
}

/* Hover-Scale-Effekt */
.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.1);
}/* End custom CSS */