/**
* Theme Name:     Christoph Schulz
* Author:         Elementor Team
* Template:       hello-elementor
* Text Domain:	   christoph-schulz
* Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
*/

/* horizontales Scrollen verhindern */ 

html, body {
  overflow-x: hidden!important;
  width: 100%;
  position: relative; /* verhindert seltene iOS-Bugs */
}


/* Hero Formular */ 

.submit-form-btn {
	width:100%!important;
}

.start-form {
	margin-top:0px!important;
	margin-bottom:0px!important;
}

.start-form .wpforms-field {
  padding-top: 0!important;
}

/* Hero Liste */ 

#hero-list .elementor-icon-list-item {
  margin-bottom: 10px;
}

#hero-list .elementor-icon-list-item.elementor-inline-item {
  background:#fff;
  border-radius:99px;
padding:5px 10px 5px 5px;
}

#hero-list .elementor-icon-list-icon {
  background:#FFC900;
  padding: 6px 3px 6px 6px;
  border-radius: 999px;
}

/* Square Boxes */ 

.square {
  aspect-ratio: 1 / 1;
  width: 100%;
  /* optional: height wird automatisch berechnet */
}

/* Slider Cards auf Startseite */ 
@media (max-width: 1024px) {

  /* --- Der eigentliche Slider-Container --- */
  .my-card-slider {
    display: block !important;
    overflow: hidden;
    padding-left: 14px; /* optional schöner Startpunkt */
  }

  /* --- WICHTIG: Elementor Flexbox & Grid deaktivieren --- */
  .my-card-slider,
  .my-card-slider .e-con,
  .my-card-slider .elementor-element {
    display: block !important;
    flex: none !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* --- DIE SWIPER SLIDES selbst (Elementor Container!) --- */
  .my-card-slider .swiper-slide {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 16px !important;
  }

  /* verhindert, dass Elementor seine 33%-Breite reinschiebt */
  .my-card-slider .swiper-slide[elementor-type="container"],
  .my-card-slider .swiper-slide[data-element_type="container"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- Textüberlappung fixen --- */
  .my-card-slider .swiper-slide * {
    white-space: normal !important;
    overflow: visible !important;
  }	
}

@media (max-width: 768px) {

  .my-card-slider .swiper-pagination {
    position: relative !important;
    margin-top: 20px;
    text-align: center;
  }

  .my-card-slider .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.4;
    width: 8px;
    height: 8px;
  }

  .my-card-slider .swiper-pagination-bullet-active {
    background: #ffcc00;
    opacity: 1;
  }
}