.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Gesamtbutton mit animiertem Farbverlauf */
.gradient-button .elementor-button {
  background: linear-gradient(90deg, #F7B500, #FFD400, #FFAA00, #F7B500);
  background-size: 400% 400%;
  animation: gradientShift 5s ease infinite;
  color: #161616;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: max-content; /* verhindert übermäßige Breite */
}

/* Inhalt bleibt in einer Zeile */
.gradient-button .button-content {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Text */
.gradient-button .text {
  display: inline-block;
  white-space: nowrap;
}

/* Weißer Kreis mit Abstand zum Rand */
.gradient-button .icon-wrapper {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 4px; /* Abstand vom Button-Rand */
}

/* Pfeil */
.gradient-button .arrow {
  font-size: 16px;
  color: #161616;
  transition: transform 0.3s ease;
}

/* Hovereffekt: nur Pfeil wächst */
.gradient-button .elementor-button:hover .arrow {
  transform: scale(1.2);
}

/* Hovereffekt für Button */
.gradient-button .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

/* Farbverlauf-Animation */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== Endless Carousel – flexibel pro Carousel (Richtung, Tempo, Bildgröße, Fade-Farbe) ===== */
/* Hinweis: Für nahtlosen Loop muss die Slide-Sequenz im DOM ZWEIMAL hintereinander stehen. */

/* Navigations-UI ausblenden */
.endless-carousel .elementor-swiper-button-prev,
.endless-carousel .elementor-swiper-button-next,
.endless-carousel .swiper-pagination{
  display: none !important;
}

/* Wrapper: Defaults per CSS-Variablen (je Carousel überschreibbar) */
.endless-carousel{
  /* Basis-Variablen */
  --loop-dur: 30s;            /* Geschwindigkeit: größer = langsamer */
  --gap: 20px;                /* Abstand zwischen Slides */
  --img-w: 80px;              /* Bildbreite (Höhe auto) */
  --edge-fade-width: 100px;   /* Breite der Seiten-Fades */
  --fade-rgb: 255,255,255;    /* Fade-Farbe (RGB), z.B. 255,255,255 oder 17,17,17 */
  --fade-a1: .95;             /* Fade-Deckkraft außen */
  --fade-a2: .70;             /* Fade-Deckkraft Mitte */

  position: relative;
  overflow: visible;          /* kein Clipping im Wrapper */
}

/* Viewport: horizontal clippen, vertikal frei (gegen Abschneiden unten) */
.endless-carousel .swiper{
  overflow-x: hidden;
  overflow-y: visible;
  position: relative;         /* für Fades */
}

/* Track: Endlosschleife */
.endless-carousel .swiper-wrapper{
  display: flex;
  width: max-content;
  gap: var(--gap);
  align-items: stretch;
  will-change: transform;
  animation: scroll-loop var(--loop-dur) linear infinite;
}

/* Richtung umschalten */
.endless-carousel.dir-left  .swiper-wrapper{ animation-direction: normal; }
.endless-carousel.dir-right .swiper-wrapper{ animation-direction: reverse; }

/* Slides & Bilder */
.endless-carousel .swiper-slide{
  flex: 0 0 auto;
  width: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.endless-carousel .swiper-slide img{
  width: var(--img-w);
  height: auto;
  object-fit: contain;
  display: block;
  max-width: none;
  transition: transform .3s ease;
}

/* Loop-Keyframes (Liste doppelt im DOM!) */
@keyframes scroll-loop{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* Seiten-Fades: Farbe & Breite per Variablen */
.endless-carousel .swiper::before,
.endless-carousel .swiper::after{
  content: "";
  position: absolute;
  top: 0; height: 100%;
  width: var(--edge-fade-width);
  z-index: 2;
  pointer-events: none;
}
.endless-carousel .swiper::before{
  left: 0;
  background: linear-gradient(
    to right,
    rgba(var(--fade-rgb), var(--fade-a1)) 0%,
    rgba(var(--fade-rgb), var(--fade-a2)) 35%,
    rgba(var(--fade-rgb), 0) 100%
  );
}
.endless-carousel .swiper::after{
  right: 0;
  background: linear-gradient(
    to left,
    rgba(var(--fade-rgb), var(--fade-a1)) 0%,
    rgba(var(--fade-rgb), var(--fade-a2)) 35%,
    rgba(var(--fade-rgb), 0) 100%
  );
}
/* Fades komplett ausblenden (optional) */
.endless-carousel.no-fade .swiper::before,
.endless-carousel.no-fade .swiper::after{ content: none; }

/* =========================
   Zwei Beispiel-Instanzen
   ========================= */

/* Carousel A – größere Bilder, etwas schneller, weißer Fade */
.endless-carousel.carousel-a{
  --img-w: 120px;
  --loop-dur: 36s;
  --gap: 20px;
  --edge-fade-width: 120px;
  --fade-rgb: 255,255,255; /* Weiß */
  --fade-a1: .95;
  --fade-a2: .70;
}

/* Carousel B – #274B6B Fade */
.endless-carousel.carousel-b{
  --img-w: 50px;
  --loop-dur: 80s;
  --gap: 20px;
  --edge-fade-width: 80px;
  --fade-rgb: 12, 19, 32;  /* #0C1320 */
  --fade-a1: .95;         /* außen */
  --fade-a2: .65;         /* Mitte */
}

@media (max-width: 767px) {
  .mein-imagebox-fix .elementor-image-box-wrapper {
    display: flex;
    flex-direction: row;      /* Bild & Text nebeneinander */
    align-items: flex-start;
  }

  .mein-imagebox-fix .elementor-image-box-img {
    margin-right: 12px;       /* Abstand zwischen Bild & Text */
    flex-shrink: 0;
  }

  .mein-imagebox-fix .elementor-image-box-content {
    text-align: left;         /* Text linksbündig */
  }
}/* End custom CSS */