.elementor-1953 .elementor-element.elementor-element-f071884{--display:flex;--position:absolute;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;top:0px;--z-index:9999;}body:not(.rtl) .elementor-1953 .elementor-element.elementor-element-f071884{left:0px;}body.rtl .elementor-1953 .elementor-element.elementor-element-f071884{right:0px;}.elementor-1953 .elementor-element.elementor-element-278360e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;}.elementor-widget-lottie{--caption-color:var( --e-global-color-text );}.elementor-widget-lottie .e-lottie__caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-1953 .elementor-element.elementor-element-caddb47{--lottie-container-width:200px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-1953 .elementor-element.elementor-element-2888378{text-align:left;}.elementor-1953 .elementor-element.elementor-element-2888378 img{width:120px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-1953 .elementor-element.elementor-element-2cee525{padding:20px 20px 20px 20px;}.elementor-1953 .elementor-element.elementor-element-2cee525.elementor-element{--align-self:flex-end;}.elementor-1953 .elementor-element.elementor-element-2cee525 .elementor-icon-wrapper{text-align:right;}.elementor-1953 .elementor-element.elementor-element-2cee525 .elementor-icon{font-size:21px;}.elementor-1953 .elementor-element.elementor-element-2cee525 .elementor-icon svg{height:21px;}.elementor-1953 .elementor-element.elementor-element-2cee525 .elementor-icon-wrapper svg{width:auto;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-widget-lottie .e-lottie__caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-1953 .elementor-element.elementor-element-2cee525 .elementor-icon{font-size:21px;}.elementor-1953 .elementor-element.elementor-element-2cee525 .elementor-icon svg{height:21px;}}@media(max-width:767px){.elementor-1953 .elementor-element.elementor-element-f071884{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;}.elementor-widget-lottie .e-lottie__caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-1953 .elementor-element.elementor-element-2888378 img{width:110px;}.elementor-1953 .elementor-element.elementor-element-2cee525{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 5px) 0px;}.elementor-1953 .elementor-element.elementor-element-2cee525 .elementor-icon{font-size:16px;}.elementor-1953 .elementor-element.elementor-element-2cee525 .elementor-icon svg{height:16px;}}/* Start custom CSS for container, class: .elementor-element-f071884 *//* Basis */
#header-bar{
  background: transparent;           /* bleibt transparent */
  transition: box-shadow .3s ease;   /* optional */
}

/* Verlaufs-Layer */
#header-bar::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(60deg, #FF003D 35%, #30A180 60%);
  opacity: 0;                        /* Start: unsichtbar */
  transform: translateY(-66px);       /* kleiner Slide-in (optional) */
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;              /* klicks gehen durch */
  will-change: opacity, transform;
}

/* Sticky aktiv → weich einblenden */
#header-bar.elementor-sticky--effects::before{
  opacity: 1;
  transform: translateY(0);
}

/* (optional) kleiner Schatten im Sticky-State */
#header-bar.elementor-sticky--effects{
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* Respektiert „reduzierte Bewegung“ */
@media (prefers-reduced-motion: reduce){
  #header-bar::before{ transition: none; transform:none; }
  #header-bar{ transition: none; }
}

/* Der Header-Inhalt muss über deinem ::before-Verlauf liegen */
#header-bar > .elementor-container,
#header-bar .elementor-container,
#header-bar .e-con-inner { 
  position: relative; 
  z-index: 1; 
}

/* Gemeinsamer Platz für beide Logos (Größe anpassen!) */
.logo-stack{
  position: relative;
  width: 200px;   /* <- auf deine Logo-Breite anpassen */
  height: 90px;   /* <- auf deine Logo-Höhe anpassen  */
}

/* Beide Widgets im Stack überlagern */
.logo-stack .elementor-widget.pic-logo,
.logo-stack .elementor-widget.lotti-logo{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: opacity .35s ease, transform .35s ease;
  will-change: opacity, transform;
}

/* Bild-Logo: Standard sichtbar */
.logo-stack .pic-logo{ 
  opacity: 1; 
  transform: translateY(0);
  pointer-events: auto;
}

/* Lottie-Logo: Standard unsichtbar */
.logo-stack .lotti-logo{ 
  opacity: 0; 
  transform: translateY(6px);
  pointer-events: none;
}

/* Sticky an -> Lottie rein, Bild raus */
#header-bar.elementor-sticky--effects .logo-stack .pic-logo{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
#header-bar.elementor-sticky--effects .logo-stack .lotti-logo{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Optional: Logo leicht verkleinern, wenn sticky */
#header-bar.elementor-sticky--effects .logo-stack{
  transform: scale(.95);
  transition: transform .35s ease;
}

/* Medien sauber skalieren */
.logo-stack img{ 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
}
.logo-stack .e-lottie__container,
.logo-stack .e-lottie__animation{ 
  width: 100%; 
  height: 100%; 
}
.logo-stack .e-lottie__container__link{ 
  display:block; 
  width:100%; 
  height:100%; 
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce){
  .logo-stack .elementor-widget.pic-logo,
  .logo-stack .elementor-widget.lotti-logo,
  #header-bar.elementor-sticky--effects .logo-stack{
    transition: none !important;
    transform: none !important;
  }
}


/* Höhe steuerbar per Variablen */
#header-bar{
  --header-h: 90px;         /* normale Höhe (anpassen) */
  --header-h-sticky: 60px;  /* Sticky-Höhe (anpassen) */
}

/* Min-Höhe für deine Header-Container; wähle die Selektoren, die im Template existieren */
#header-bar > .e-con,
#header-bar > .elementor-container,
#header-bar .e-con-inner{
  min-height: var(--header-h);
  transition: min-height .35s ease;
}

/* Sticky: kleiner */
#header-bar.elementor-sticky--effects > .e-con,
#header-bar.elementor-sticky--effects > .elementor-container,
#header-bar.elementor-sticky--effects .e-con-inner{
  min-height: var(--header-h-sticky);
}

/* Optional: vertikale Innenabstände mitschrumpfen (falls du Padding nutzt) */
#header-bar .e-con,
#header-bar .elementor-container{
  padding-top: clamp(8px, 1.8vh, 16px);
  padding-bottom: clamp(8px, 1.8vh, 16px);
  transition: padding .35s ease;
}
#header-bar.elementor-sticky--effects .e-con,
#header-bar.elementor-sticky--effects .elementor-container{
  padding-top: clamp(4px, 1.2vh, 10px);
  padding-bottom: clamp(4px, 1.2vh, 10px);
}

/* Dein Logo-Stack schrumpft bereits leicht via scale(.95). 
   Wenn du statt scale echte Größe willst, kannst du sticky die Box verkleinern: */
#header-bar.elementor-sticky--effects .logo-stack{
  width: 180px;   /* z.B. von 200 -> 180 */
  height: 60px;   /* z.B. von 90  -> 80  */
  transition: width .35s ease, height .35s ease, transform .35s ease;
}

/* Mobile: weniger Schrumpfen oder gar nicht */
@media (max-width: 767px){
  #header-bar{
    --header-h: 70px;
    --header-h-sticky: 60px;
  }
  #header-bar.elementor-sticky--effects .logo-stack{
    width: 180px;  /* oder gleiche Werte wie normal lassen */
    height: 70px;
  }
}/* End custom CSS */