.elementor-1743 .elementor-element.elementor-element-388f2de2{--display:flex;--min-height:70vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--overflow:hidden;--padding-top:4rem;--padding-bottom:4rem;--padding-left:2rem;--padding-right:2rem;}.elementor-1743 .elementor-element.elementor-element-3bd1c4df{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;border-style:solid;--border-style:solid;border-width:2px 0px 2px 0px;--border-top-width:2px;--border-right-width:0px;--border-bottom-width:2px;--border-left-width:0px;border-color:var( --e-global-color-secondary );--border-color:var( --e-global-color-secondary );--padding-top:1rem;--padding-bottom:1rem;--padding-left:0rem;--padding-right:0rem;}.elementor-1743 .elementor-element.elementor-element-21b630c5{--display:flex;--position:relative;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--padding-top:4rem;--padding-bottom:4rem;--padding-left:2rem;--padding-right:2rem;top:0px;}body:not(.rtl) .elementor-1743 .elementor-element.elementor-element-21b630c5{left:0px;}body.rtl .elementor-1743 .elementor-element.elementor-element-21b630c5{right:0px;}.elementor-1743 .elementor-element.elementor-element-3dac37da{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0rem 0rem;--row-gap:0rem;--column-gap:0rem;--overlay-opacity:0.5;--padding-top:4rem;--padding-bottom:4rem;--padding-left:2rem;--padding-right:2rem;}.elementor-1743 .elementor-element.elementor-element-3dac37da::before, .elementor-1743 .elementor-element.elementor-element-3dac37da > .elementor-background-video-container::before, .elementor-1743 .elementor-element.elementor-element-3dac37da > .e-con-inner > .elementor-background-video-container::before, .elementor-1743 .elementor-element.elementor-element-3dac37da > .elementor-background-slideshow::before, .elementor-1743 .elementor-element.elementor-element-3dac37da > .e-con-inner > .elementor-background-slideshow::before, .elementor-1743 .elementor-element.elementor-element-3dac37da > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#020201;--background-overlay:'';}.elementor-1743 .elementor-element.elementor-element-770dd8ea{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--padding-top:5rem;--padding-bottom:4rem;--padding-left:2rem;--padding-right:2rem;}.elementor-1743 .elementor-element.elementor-element-770dd8ea:not(.elementor-motion-effects-element-type-background), .elementor-1743 .elementor-element.elementor-element-770dd8ea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0F0F2300;}.elementor-1743 .elementor-element.elementor-element-5ba1f622{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0rem 0rem;--row-gap:0rem;--column-gap:0rem;--padding-top:4rem;--padding-bottom:4rem;--padding-left:2rem;--padding-right:2rem;}.elementor-1743 .elementor-element.elementor-element-4fc2ba82{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--padding-top:4rem;--padding-bottom:4rem;--padding-left:1rem;--padding-right:1rem;}.elementor-1743 .elementor-element.elementor-element-25302f0f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--padding-top:4rem;--padding-bottom:4rem;--padding-left:2rem;--padding-right:2rem;}@media(min-width:801px){.elementor-1743 .elementor-element.elementor-element-21b630c5{--content-width:1440px;}.elementor-1743 .elementor-element.elementor-element-3dac37da{--content-width:1440px;}.elementor-1743 .elementor-element.elementor-element-770dd8ea{--content-width:1440px;}.elementor-1743 .elementor-element.elementor-element-5ba1f622{--content-width:1440px;}.elementor-1743 .elementor-element.elementor-element-4fc2ba82{--content-width:1440px;}}@media(max-width:800px){.elementor-1743 .elementor-element.elementor-element-388f2de2{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1743 .elementor-element.elementor-element-21b630c5{--padding-top:3rem;--padding-bottom:3rem;--padding-left:1rem;--padding-right:1rem;}.elementor-1743 .elementor-element.elementor-element-4fc2ba82{--padding-top:2rem;--padding-bottom:2rem;--padding-left:1rem;--padding-right:1rem;}.elementor-1743 .elementor-element.elementor-element-25302f0f{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for container, class: .elementor-element-388f2de2 *//* =========================================================
   1. KEYFRAMES / ANIMATIONEN
   ========================================================= */

@keyframes cw-pulse{
  0%,100%{opacity:1;transform:scale(0.5);}
  50%{opacity:1;transform:scale(0.3);}
}

@keyframes cw-float{
  from{transform:translateY(0);}
  to{transform:translateY(-10px);}
}


.elementor-1743 .elementor-element.elementor-element-388f2de2{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.elementor-1743 .elementor-element.elementor-element-388f2de2 .elementor-widget-html{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
}

.elementor-1743 .elementor-element.elementor-element-388f2de2 .cw-hero-inner{
  position:relative !important;
  z-index:1 !important;
}
/* =========================================================
   2. HAUPT-CONTAINER / HERO-HINTERGRUND
   ========================================================= */

.elementor-1743 .elementor-element.elementor-element-388f2de2{
  position:relative !important;
  overflow:hidden !important;

  background:
    radial-gradient(ellipse 55% 70% at 5% 88%,rgba(180,100,20,0.2) 0%,transparent 55%),
    radial-gradient(ellipse 65% 55% at 82% 8%,rgba(30,180,210,0.14) 0%,transparent 55%),
  
    linear-gradient(155deg,#0a0d1e 0%,#0d1128 35%,#111830 65%,#0a0a1a 100%) !important;
}





/* =========================================================
   4. HERO-INHALT / Z-INDEX
   ========================================================= */

.cw-hero-inner{
  position:relative;
  z-index:1;
}


/* =========================================================
   5. DOTS / PILLS
   ========================================================= */

.cw-dot-o{
  animation-duration:2.5s;
}

.cw-pill{
  position:relative;
}

.cw-pill::before{
  content:'✓';
  color:#4DD0E1;
  font-size:0.75rem;
  margin-right:0.5rem;
  font-weight:700;
}


/* =========================================================
   6. HERO-CARD
   ========================================================= */

.cw-hero-card{
  animation:cw-float 7s ease-in-out infinite alternate;

  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);

  box-shadow:
    0 32px 64px rgba(0,0,0,0.5),
    0 0 0 1px rgba(77,208,225,0.04);
}


/* =========================================================
   7. BUTTONS
   ========================================================= */

.cw-btn-primary,
.cw-btn-ghost{
  display:inline-block !important;
  flex-shrink:0;
}

.cw-btn-primary .elementor-button,
.cw-btn-primary a,
.cw-btn-primary button,
.cw-btn-ghost .elementor-button,
.cw-btn-ghost a,
.cw-btn-ghost button{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;

  font-family:Outfit,sans-serif !important;
  font-weight:700 !important;
  font-size:1rem !important;
  letter-spacing:0 !important;
  text-decoration:none !important;

  padding:1rem 1.5rem !important;
  border-radius:0.5rem !important;
  white-space:nowrap !important;

  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease !important;

  will-change:transform;
}

.cw-btn-primary .elementor-button,
.cw-btn-primary a,
.cw-btn-primary button{
  background:#4DD0E1 !important;
  color:#0F0F23 !important;
  border:none !important;
}

.cw-btn-ghost .elementor-button,
.cw-btn-ghost a,
.cw-btn-ghost button{
  background:transparent !important;
  color:#E2E8F0 !important;
  border:1px solid rgba(77,208,225,0.3) !important;
}

.cw-btn-primary .elementor-button:hover,
.cw-btn-primary a:hover,
.cw-btn-primary button:hover{
  background:#FF9800 !important;
  color:#FFFFFF !important;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(255,152,0,0.28);
}

.cw-btn-ghost .elementor-button:hover,
.cw-btn-ghost a:hover,
.cw-btn-ghost button:hover{
  border-color:#FF9800 !important;
  color:#FF9800 !important;
  background:rgba(255,152,0,0.08) !important;
  transform:translateY(-1px);
}

.cw-btns-row{
  align-items:flex-start !important;
}


/* =========================================================
   8. RESPONSIVE / TABLET
   ========================================================= */

@media (max-width:1024px){

  .cw-hero-row{
    flex-direction:column !important;
    gap:2rem !important;
  }

  .cw-hero-text,
  .cw-hero-card-col{
    width:100% !important;
    max-width:100% !important;
  }

  .cw-hero-card-col{
    display:none !important;
  }
}


/* =========================================================
   9. RESPONSIVE / MOBILE
   ========================================================= */

@media (max-width:768px){

  .cw-btns-row{
    flex-direction:column !important;
  }

  .cw-btns-row > *{
    width:100% !important;
  }

  .cw-trust-row{
    gap:0.5rem !important;
  }

.cw-hero-inner{
  position:relative;
  z-index:2;
}}

.elementor-1743 .elementor-element.elementor-element-388f2de2::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(77,208,225,0.22) 2px, transparent 2px),
    linear-gradient(90deg, rgba(77,208,225,0.22) 2px, transparent 2px);
  background-size: 96px 96px, 96px 96px;
  background-position: 0 -130px, 0 -80px;
  -webkit-mask-image: radial-gradient(
    ellipse 55% 65% at 0% 100%,
    black 0%, rgba(0,0,0,0.5) 40%, transparent 72%
  );
  mask-image: radial-gradient(
    ellipse 55% 65% at 0% 100%,
    black 0%, rgba(0,0,0,0.5) 40%, transparent 72%
  );
}
.cw-dot-o{
  display:inline-block;
  animation:cw-pulse 2.5s ease-in-out infinite;
  transform-origin:center;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3bd1c4df */@keyframes cw-mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.elementor-1743 .elementor-element.elementor-element-3bd1c4df{overflow:hidden !important;
  border-top:1px solid rgba(255,255,255,0.07);
  border-bottom:1px solid rgba(255,255,255,0.07);}

/* Track scrollt horizontal, nicht wrappen */
.cw-mq-track{
  width:max-content !important;
  flex-wrap:nowrap !important;
  animation:cw-mq 40s linear infinite;
}

/* Items nicht stauchen */
.cw-mq-track > *{flex-shrink:0 !important;}

/* Jedes Item: orange Diamond via ::before, kein extra Widget nötig */
.cw-mq-item{
  white-space:nowrap !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center;
}
.cw-mq-item::before{
  content:'◆';
  color:#FF9800;
  font-size:0.5rem;
  margin-right:0.75rem;
  display:inline-block;
}

/* Hover-Pause */
.elementor-1743 .elementor-element.elementor-element-3bd1c4df:hover .cw-mq-track{animation-play-state:paused;}
@media (max-width: 768px) {
  .elementor-1743 .elementor-element.elementor-element-3bd1c4df {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .elementor-1743 .elementor-element.elementor-element-3bd1c4df * {
    animation-duration: 30s !important;
    animation-play-state: running !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-21b630c5 *//* =========================================================
   RECHTE LEISTUNGSSEITE / PANEL-HINTERGRUND
   Klasse: .cw-ls-right
   Erzeugt Grid-Pattern + dezente Glow-Flächen im rechten Panel.
========================================================= */

.cw-ls-right {
  position: relative;

}

.cw-ls-right::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  

  background-size:
    auto,
    auto,
    44px 44px,
    44px 44px;

  -webkit-mask-image:
    radial-gradient(
      ellipse 100% 100% at 50% 50%,
      black 5%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse 100% 100% at 50% 50%,
      black 5%,
      transparent 100%
    );
}





/* =========================================================
   SUBLINE / KLEINE LINIE VOR TEXT
   Klasse: .cw-ls-sub
   Erzeugt den kleinen Gradient-Strich über/bei der Subline.
========================================================= */

.cw-ls-sub {
  position: relative;
}

.cw-ls-sub::before {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  border-radius: 2px;
  margin-bottom: 1.5rem;

  background:
    linear-gradient(
      90deg,
      #90A4AE,
      #00E5FF,
      #FF9800
    );
}


/* =========================================================
   LEISTUNGS-ITEMS / EINZELNE KARTEN-REIHEN
   Klasse: .cw-ls-item
   Erzeugt obere Linie, Hover-Fläche und Ghost-Nummern.
========================================================= */

.cw-ls-item {
  position: relative;
 
  transition: background 0.35s;
}

/* Obere Gradient-Linie pro Item */
.cw-ls-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      #90A4AE 0%,
      #00E5FF 18%,
      #FF9800 35%,
      rgba(255, 255, 255, 0.06) 65%,
      transparent 100%
    );
}

/* Große Ghost-Nummern im Hintergrund */
.cw-ls-item::after {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;

  font-family: Outfit, sans-serif;
  font-size: 7rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;

  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.04);

  pointer-events: none;
  user-select: none;
}

/* Inhalt über Ghost-Nummer halten */
.cw-ls-item > * {
  position: relative;
  z-index: 1;
}

/* Nummern-Zuweisung pro Item */
.cw-ls-i01::after {
  content: '01';
}

.cw-ls-i02::after {
  content: '02';
}

.cw-ls-i03::after {
  content: '03';
}

.cw-ls-i04::after {
  content: '04';
}

/* Dezenter Hover-Effekt */
.cw-ls-item:hover {
  background: rgba(77, 208, 225, 0.03);
}


/* =========================================================
   CTA-BEREICH UNTEN
   Klasse: .cw-ls-cta
   Erzeugt die feine obere Linie im CTA-Block.
========================================================= */

.cw-ls-cta {
  position: relative;
}

.cw-ls-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 3rem;
  right: 2.5rem;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(77, 208, 225, 0.4) 0%,
      rgba(77, 208, 225, 0.1) 50%,
      transparent 100%
    );
}


/* =========================================================
   MOBILE ANPASSUNGEN
   Reduziert Ghost-Nummern und CTA-Linie auf kleinen Screens.
========================================================= */

@media (max-width: 767px) {
  .cw-ls-item::after {
    font-size: 4rem;
    right: 1rem;
  }

  .cw-ls-cta::before {
    left: 1.5rem;
    right: 1.5rem;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3dac37da */.elementor-1743 .elementor-element.elementor-element-3dac37da::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(90deg, #4DD0E1 0%, #FF9800 100%);
  opacity: 0.6;

  pointer-events: none;
}



/* AI-Variante: leichter Orange-Tint */
.cw-st-ai{
  background: rgba(255,152,0,0.03) !important;
  border-color: rgba(255,152,0,0.2) !important;
}

/* === Strikeline (48x1px cyan opacity 0.3) === */
.cw-sl{
  background: #4DD0E1 !important;
  opacity: 0.3;
}

/* === AI-Hint Box (cyan-Tint mit Badge + Text) === */
.cw-ai-hint{
  border: 1px solid rgba(77,208,225,0.18);
  border-radius: 0.5rem;
  background: rgba(77,208,225,0.04);
}

/* === AI Badge (kleines Tool-Label im AI-Hint) === */
.cw-ai-badge{
  display: inline-block;
  background: rgba(77,208,225,0.1);
  border: 1px solid rgba(77,208,225,0.2);
  border-radius: 3px;
  white-space: nowrap;
}

/* === AI Htxt Inline-Links (Mehr erfahren →) === */
.cw-ai-htxt a{
  color: #1E7B88 !important;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.cw-ai-htxt a:hover{color: #FF9800 !important;}
.cw-ai-htxt strong{color: #0D1520; font-weight: 700;}

/* === Ghost-Dark Button (für helle Sektion) === */
.cw-btn-gd{transition: all 0.2s ease !important;}
.cw-btn-gd:hover{
  border-color: #FF9800 !important;
  color: #FF9800 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-770dd8ea */.elementor-1743 .elementor-element.elementor-element-770dd8ea::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(90deg, #4DD0E1 0%, #FF9800 100%);
  opacity: 0.6;

  pointer-events: none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5ba1f622 */.elementor-1743 .elementor-element.elementor-element-5ba1f622 {
  position: relative !important;
  border-top: 1px solid transparent !important;
  border-image: linear-gradient(
    90deg,
    rgba(77, 208, 225, 0.6) 0%,
    rgba(255, 152, 0, 0.6) 100%
  ) 1 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4fc2ba82 *//* === Karte === */
.cw-rc{
  display: grid !important;
  grid-template-columns: 3px 1fr !important;
  
}
.cw-rc:hover{

  transform: translateY(-4px) !important;
  border-color: rgba(77,208,225,0.3) !important;
}

/* === 3px Gradient-Strip links === */
.cw-rstr{
  background: linear-gradient(180deg, #90A4AE 0%, #00E5FF 50%, #FF9800 100%) !important;
  width: 3px !important;
  min-width: 3px !important;
}

/* === Karten-Inhalt === */
.cw-rcont{
  display: flex !important;
  flex-direction: column !important;
}



/* === Body-Bereich der Karte === */
.cw-rb{
  padding: 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  flex: 1 !important;
}

/* === Tag / Kategorie === */
.cw-rtag{
  font-family: Outfit, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #4DD0E1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}



/* === Link "Case Study ansehen →" === */
.cw-rl{
  font-family: Outfit, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #4DD0E1 !important;
  text-decoration: none !important;
  transition: color 0.2s, padding-left 0.2s !important;
  cursor: pointer !important;
  margin-top: auto !important;
}
.cw-rl:hover,
.cw-rc:hover .cw-rl{
  color: #FF9800 !important;
  padding-left: 0.25rem !important;
}
.elementor-1743 .elementor-element.elementor-element-4fc2ba82::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 1px;

  background: linear-gradient(90deg, #4DD0E1 0%, #FF9800 100%);
  opacity: 0.6;

  pointer-events: none;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-25302f0f */.elementor-1743 .elementor-element.elementor-element-25302f0f::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 2px;

  background: linear-gradient(90deg, #4DD0E1 0%, #FF9800 100%);
  opacity: 0.9;

  pointer-events: none;
}/* End custom CSS */