.elementor-394 .elementor-element.elementor-element-d04e8d1{--display:flex;}.elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-mega-menu{--n-menu-divider-color:var( --e-global-color-text );}.elementor-394 .elementor-element.elementor-element-50cc2fc{--display:flex;}.elementor-394 .elementor-element.elementor-element-16e76f6{--display:flex;}.elementor-394 .elementor-element.elementor-element-9f61b31{--display:flex;}.elementor-394 .elementor-element.elementor-element-6dba836{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-justify-content:initial;--n-menu-title-flex-grow:initial;--n-menu-title-justify-content:initial;--n-menu-title-justify-content-mobile:initial;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:0px;--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-space-between:0px;--n-menu-title-transition:300ms;--n-menu-icon-size:16px;--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:0px;}.elementor-394 .elementor-element.elementor-element-fb7e8df{--display:flex;}.elementor-394 .elementor-element.elementor-element-969d62a{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-justify-content:flex-end;--n-menu-title-flex-grow:initial;--n-menu-title-justify-content:initial;--n-menu-title-justify-content-mobile:flex-end;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:0px;--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-space-between:0px;--n-menu-title-transition:300ms;--n-menu-icon-size:16px;--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:0px;}.elementor-394 .elementor-element.elementor-element-969d62a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:not( .e-current ):not( :hover ){background-color:var( --e-global-color-primary );border-style:solid;border-width:0px 0px 0px 0px;border-color:var( --e-global-color-primary );box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-394 .elementor-element.elementor-element-969d62a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title{border-radius:12px 12px 12px 12px;}.elementor-394 .elementor-element.elementor-element-54e1a54{--display:flex;}.elementor-394 .elementor-element.elementor-element-9699822{--spacer-size:45px;}.elementor-394 .elementor-element.elementor-element-c03d43c{--display:flex;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-394 .elementor-element.elementor-element-53c40f5 .elementor-menu-toggle{margin:0 auto;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* =========================================================
   Johannes Glaser Website – Header CSS für Elementor
   Ergänzung zum bestehenden Design-System
   ========================================================= */

/* ---------- Header-Grundlayout ---------- */
.elementor-location-header,
header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(247, 248, 251, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.78);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
}

/* Falls dein Header als Elementor Container gebaut ist */
.elementor-location-header .e-con,
.elementor-location-header .elementor-container {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* Innenabstand im Header */
.elementor-location-header .e-con-inner,
.elementor-location-header .elementor-container {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ---------- Logo / Website-Name ---------- */
.elementor-location-header .elementor-widget-theme-site-logo img,
.elementor-location-header .elementor-widget-image img {
  max-height: 44px;
  width: auto;
  border-radius: 0;
  box-shadow: none;
}

.elementor-location-header .elementor-widget-theme-site-title a,
.elementor-location-header .elementor-heading-title a {
  color: #111827;
  font-weight: 850;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.elementor-location-header .elementor-widget-theme-site-title a:hover,
.elementor-location-header .elementor-heading-title a:hover {
  color: #2563eb;
}

/* ---------- Navigation ---------- */
.elementor-location-header .elementor-nav-menu {
  gap: 4px;
}

.elementor-location-header .elementor-nav-menu--main .elementor-item {
  color: #111827 !important;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  padding: 10px 14px !important;
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

/* Hover */
.elementor-location-header .elementor-nav-menu--main .elementor-item:hover {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.08);
}

/* Aktiver Menüpunkt */
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu--main .current-menu-item > .elementor-item {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.10);
}

/* Entfernt Elementor-Unterstreichungen bei Menü-Animationen */
.elementor-location-header .elementor-nav-menu--main .elementor-item::after,
.elementor-location-header .elementor-nav-menu--main .elementor-item::before {
  display: none !important;
}

/* ---------- Header CTA Button ---------- */
/* Gib deinem Button im Header optional die CSS-Klasse: jg-header-cta */
.jg-header-cta .elementor-button,
.elementor-location-header .elementor-button {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 11px 20px !important;
  font-size: 0.94rem;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  border: none !important;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.24);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.jg-header-cta .elementor-button:hover,
.elementor-location-header .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.32);
}

/* ---------- Dropdown-Menü ---------- */
.elementor-location-header .elementor-nav-menu--dropdown {
  background: #ffffff;
  border: 1px solid rgba(229, 231, 235, 0.95);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  padding: 10px;
  overflow: hidden;
}

.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
  color: #111827 !important;
  font-weight: 650;
  border-radius: 12px;
  padding: 12px 14px !important;
}

.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  color: #2563eb !important;
  background: rgba(37, 99, 235, 0.08);
}

/* ---------- Mobile Toggle / Burger ---------- */
.elementor-location-header .elementor-menu-toggle {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(229, 231, 235, 0.95);
  border-radius: 999px;
  padding: 10px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.elementor-location-header .elementor-menu-toggle:hover {
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.elementor-location-header .elementor-menu-toggle.elementor-active {
  color: #2563eb !important;
}

/* ---------- Mobile Menü ---------- */
@media (max-width: 1024px) {
  .elementor-location-header,
  header.elementor-location-header {
    background: rgba(247, 248, 251, 0.94);
  }

  .elementor-location-header .elementor-nav-menu--dropdown {
    margin-top: 12px;
    width: 100%;
  }

  .elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
    font-size: 1rem;
  }

  .elementor-location-header .elementor-button {
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-top: 10px;
  }
}

/* ---------- Sehr kleine Screens ---------- */
@media (max-width: 767px) {
  .elementor-location-header .e-con,
  .elementor-location-header .elementor-container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .elementor-location-header .e-con-inner,
  .elementor-location-header .elementor-container {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .elementor-location-header .elementor-widget-theme-site-logo img,
  .elementor-location-header .elementor-widget-image img {
    max-height: 38px;
  }

  .elementor-location-header .elementor-widget-theme-site-title a,
  .elementor-location-header .elementor-heading-title a {
    font-size: 1.05rem;
  }
}

/* ---------- Optional: Header als Floating Pill ---------- */
/* 
   Wenn du willst, dass der Header wie eine schwebende Leiste aussieht,
   gib dem äußersten Header-Container in Elementor die Klasse: jg-floating-header
*/

.jg-floating-header {
  max-width: 1180px;
  margin: 14px auto 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(229, 231, 235, 0.85);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: visible;
}

/* Floating Header auf Mobile wieder normaler */
@media (max-width: 767px) {
  .jg-floating-header {
    margin: 8px 12px 0 12px;
    border-radius: 24px;
  }
}/* End custom CSS */