.elementor-267 .elementor-element.elementor-element-2149fe92{--display:flex;}.elementor-267 .elementor-element.elementor-element-44a632f{--display:flex;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-3b1b579e *//* HEADER */
.site-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999999 !important;
}
body{
  padding-top: 110px; /* an Headerhöhe anpassen */
}


.header-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* LOGO: verhindert Vollbreite sicher */
.header-left img.logo{
  height: 105px;        /* Startgröße */
  width: auto !important;
  max-width: 230px !important;
  display: block;
  object-fit: contain;
  transition: height 0.25s ease;
}

.site-header.scrolled .header-left img.logo{
  height: 60px;         /* Scrollgröße */
}

/* NAV (falls du es drin hast) */
.nav-links a{
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  opacity: 0.95;
  transition: opacity 0.2s ease;
}
.nav-links a:hover{ opacity: 0.75; }

/* CTA Button */
.header-right .cta-button{
  background-color: white;
  color: #2E5339;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s ease;
  display: inline-block;
}

.header-right .cta-button:hover{
  background-color: #f4f4f4;
}

/* ===== Mobile Header: Tabs horizontal scrollbar + CTA ausblenden + Hinweis-Fade ===== */
@media (max-width: 768px) {

  /* Praxis-Tools Button im Header ausblenden (du nutzt unten die mobile CTA-Bar) */
  .wr-header .wr-cta {
    display: none !important;
  }

  /* Header-Innenlayout bleibt in einer Zeile */
  .wr-header__inner{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;

    /* nötig für Fade (Pseudo-Element) */
    position: relative;
  }

  /* Logo kompakter (optional) */
  .wr-header .logo{
    height: 48px !important;
    width: auto !important;
    max-width: 150px !important;
    display: block !important;
    flex: 0 0 auto !important;
  }

  /* Reiter: horizontal scrollbar (Wischen), nicht umbrechen */
  .wr-nav{
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;

    margin: 0 !important;
    padding: 2px 0 !important;

    /* etwas Abstand rechts, damit Fade nicht Text verdeckt */
    padding-right: 32px !important;

    /* Scrollbar verstecken (clean) */
    scrollbar-width: none;
  }
  .wr-nav::-webkit-scrollbar { display: none; }

  .wr-nav a{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* Schritt 3: Fade rechts als Hinweis, dass man wischen kann */
  .wr-header__inner::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:28px;
    pointer-events:none;

    /* Farbverlauf passend zu deinem Header-Grün */
    background: linear-gradient(to right, rgba(46,83,57,0), rgba(46,83,57,1));
  }
}/* End custom CSS */