.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 */.gradient-button .elementor-button {
  background: linear-gradient(
    to right,
    #cc4400,
    #e55b2e,
    #ff7e65,
    #ff937c,
    #ff7e65,
    #e55b2e,
    #cc4400
  );
  background-size: 400% 400%;
  -webkit-animation: farbverlauf 5s ease infinite;
  -moz-animation: farbverlauf 5s ease infinite;
  animation: farbverlauf 5s ease infinite;
  border: none;
  color: white;
  border-radius: 50px; /* Optional: runde Form wie beim Text */
}

@-webkit-keyframes farbverlauf {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes farbverlauf {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes farbverlauf {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-button .elementor-button-link {
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gradient-button .elementor-button-link:hover {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  transform: translateY(2px);
}

/* === Grundsetup: Endless Loop === */
.endless-carousel .elementor-swiper-button-prev,
.endless-carousel .elementor-swiper-button-next,
.endless-carousel .swiper-pagination {
  display: none !important;
}

.endless-carousel .swiper {
  overflow: hidden;
  position: relative; /* für die Overlays */
}

.endless-carousel .swiper-wrapper {
  display: flex;
  width: max-content;
  animation: scroll-loop 30s linear infinite;
  will-change: transform;
  gap: 50px; /* Abstand zwischen Slides; alternativ margin-right am Slide */
}

.endless-carousel .swiper-slide {
  flex: 0 0 auto;
  width: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Bildgröße nach Bedarf */
.endless-carousel .swiper-slide img {
  width: 80px;     /* oder height: 80px; */
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

/* Animation: bei doppelter Slide-Reihe perfekt nahtlos */
@keyframes scroll-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* === Sanfter #111111 Overlay-Fade links & rechts === */
.endless-carousel .swiper::before,
.endless-carousel .swiper::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--edge-fade-width, 100px);   /* Breite des Fades */
  height: 100%;
  z-index: 2;                             /* über den Bildern */
  pointer-events: none;                   /* klickt nicht blockieren */
}

/* Links: #111111 → Transparent nach innen */
.endless-carousel .swiper::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(17,17,17,0.95) 0%,
    rgba(17,17,17,0.70) 35%,
    rgba(17,17,17,0.0) 100%
  );
}

/* Rechts: #111111 → Transparent nach innen gespiegelt */
.endless-carousel .swiper::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(17,17,17,0.95) 0%,
    rgba(17,17,17,0.70) 35%,
    rgba(17,17,17,0.0) 100%
  );
}

/* === Globale Steuerung === */
.icon-glow-static{
  --icon-color: currentColor;  /* übernimmt die im Widget gesetzte Iconfarbe */
  --lift: -6px;                /* maximale Hubhöhe des Bounces (negativ = nach oben) */
  --glow-1: 3px;               /* innerer Glow */
  --glow-2: 8px;               /* äußerer Glow */
  --glow-3: 14px;              /* weite Aura */
}

/* ========== 1) Inline-SVG (Elementor Icon-Widget nutzt häufig <svg>) ========== */
.icon-glow-static .elementor-icon svg{
  transition: filter .25s ease;     /* Transform läuft über Animation */
  color: inherit;
  fill: currentColor;
  will-change: transform, filter;
  /* Glow immer an */
  filter:
    drop-shadow(0 0 var(--glow-1) var(--icon-color))
    drop-shadow(0 0 var(--glow-2) var(--icon-color))
    drop-shadow(0 0 var(--glow-3) var(--icon-color));
}
/* Hover: Bounce-Animation triggern */
.icon-glow-static:hover .elementor-icon svg{
  animation: icon-bounce 700ms cubic-bezier(.22,1,.36,1);
}

/* ========== 2) Font Awesome / Icon als <i> ========== */
.icon-glow-static .elementor-icon i{
  transition: filter .25s ease;
  will-change: transform, filter;
  filter:
    drop-shadow(0 0 var(--glow-1) var(--icon-color))
    drop-shadow(0 0 var(--glow-2) var(--icon-color))
    drop-shadow(0 0 var(--glow-3) var(--icon-color));
}
.icon-glow-static:hover .elementor-icon i{
  animation: icon-bounce 700ms cubic-bezier(.22,1,.36,1);
}

/* ========== 3) Externes Bild-Icon (<img> oder externes <svg>) ========== */
.icon-glow-static .elementor-icon img,
.icon-glow-static .elementor-icon svg[xmlns^="http://www.w3.org/2000/svg"]:not(:root){
  transition: filter .25s ease;
  will-change: transform, filter;
  filter:
    drop-shadow(0 0 var(--glow-1) var(--icon-color))
    drop-shadow(0 0 var(--glow-2) var(--icon-color))
    drop-shadow(0 0 var(--glow-3) var(--icon-color));
}
.icon-glow-static:hover .elementor-icon img,
.icon-glow-static:hover .elementor-icon svg[xmlns^="http://www.w3.org/2000/svg"]:not(:root){
  animation: icon-bounce 700ms cubic-bezier(.22,1,.36,1);
}

/* === Bounce-Keyframes: kurzer Hub nach oben, leichte Gegenbewegung,
   dann gedämpftes Zurückwackeln in die Nullposition === */
@keyframes icon-bounce{
  0%   { transform: translateY(0); }
  24%  { transform: translateY(calc(var(--lift) * 1)); }      /* Peak */
  45%  { transform: translateY(calc(var(--lift) * -0.35)); }  /* Gegenimpuls nach unten */
  65%  { transform: translateY(calc(var(--lift) * 0.5)); }    /* kleinerer Rückhub nach oben */
  82%  { transform: translateY(calc(var(--lift) * -0.15)); }  /* feines Nachfedern */
  100% { transform: translateY(0); }                          /* Ruheposition */
}

/* Optional: sanftes „Atmen“ des Glows – dauerhaft */
@media (prefers-reduced-motion: no-preference){
  .icon-glow-static .elementor-icon svg,
  .icon-glow-static .elementor-icon i,
  .icon-glow-static .elementor-icon img{
    animation: icon-breathe 1.6s ease-in-out infinite;
  }
  /* Wenn du nur den Bounce willst, kommentiere die nächste Regel aus: */
  .icon-glow-static:hover .elementor-icon svg,
  .icon-glow-static:hover .elementor-icon i,
  .icon-glow-static:hover .elementor-icon img{
    animation: icon-bounce 700ms cubic-bezier(.22,1,.36,1), icon-breathe 1.6s ease-in-out infinite 700ms;
  }

  @keyframes icon-breathe{
    0%,100%{
      filter:
        drop-shadow(0 0 var(--glow-1) var(--icon-color))
        drop-shadow(0 0 var(--glow-2) var(--icon-color))
        drop-shadow(0 0 calc(var(--glow-3) - 2px) var(--icon-color));
    }
    50%{
      filter:
        drop-shadow(0 0 calc(var(--glow-1) + 1px) var(--icon-color))
        drop-shadow(0 0 calc(var(--glow-2) + 4px) var(--icon-color))
        drop-shadow(0 0 calc(var(--glow-3) + 6px) var(--icon-color));
    }
  }
}

.text-verlauf {
  display: inline-block;

  /* Farbverlauf für Text und Rahmen */
  background: linear-gradient(
    to right,
    #cc4400 0%,
    #e55b2e 20%,
    #ff7e65 35%,
    #ff937c 50%,
    #ff7e65 65%,
    #e55b2e 80%,
    #cc4400 100%
  );

  /* Text-Farbverlauf */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
          background-clip: text;
          color: transparent;
}


.mein-container {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(60px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: 5px;

  /* Deutlichere Rahmen-Kombination */
  border: 1px solid rgba(255, 255, 255, 0.08); /* heller Innenrand */
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),       /* feiner dunkler Innenrahmen */
    0 0 0 2px rgba(255, 255, 255, 0.05),      /* heller äußerer Glow */
    0 8px 24px rgba(0, 0, 0, 0.25);           /* Tiefenschatten */
  overflow: hidden;
  z-index: 1;
}

.mein-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    ellipse at 20% 10%,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    rgba(0, 0, 0, 0.07) 85%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

.mein-parallax-container {
  background-attachment: scroll;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-position 3s ease-out;
}

@media (min-width: 600px) {
  .mein-parallax-container {
    will-change: background-position;
  }
}

.mein-parallax-container { background-attachment: scroll; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: background-position 3s ease-out; } @media (min-width: 600px) { .mein-parallax-container { will-change: background-position; } }/* End custom CSS */