/* ═══════════════════════════════════════════════════════════
   JP Header v2.4 – Jansen & Partner
   ═══════════════════════════════════════════════════════════ */

/* ── Reset nur für Header-Elemente ── */
#jp-header, #jp-header *, #jp-header *::before, #jp-header *::after {
  box-sizing: border-box !important;
  margin: 0 !important; padding: 0 !important;
  list-style: none !important;
  text-decoration: none !important;
}

/* ── Header ── */
#jp-header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 99999 !important;
  height: 130px !important;
  background: #ffffff !important;
  border-bottom: 2px solid rgba(184,144,60,0.2) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.07) !important;
  transition: box-shadow 0.3s !important;
}
#jp-header.jp-scrolled {
  box-shadow: 0 4px 32px rgba(0,0,0,0.13) !important;
}

#jp-header .jp-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 56px !important;
  gap: 40px !important;
}

/* ── Logo ── */
#jp-header .jp-logo-link {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}
#jp-header .jp-logo {
  height: 144px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* ── Desktop Nav ── */
#jp-header .jp-nav {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
}
#jp-header .jp-menu {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#jp-header .jp-menu li { position: relative !important; }

/* Nav Links */
#jp-header .jp-menu > li > a,
#jp-header .jp-menu > li > a:link,
#jp-header .jp-menu > li > a:visited {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 16px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #333333 !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  transition: color 0.2s, background 0.2s !important;
}
#jp-header .jp-menu > li > a:hover,
#jp-header .jp-menu > li.current-menu-item > a,
#jp-header .jp-menu > li.current-menu-ancestor > a {
  background: rgba(184,144,60,0.09) !important;
  background-color: rgba(184,144,60,0.09) !important;
  color: #b8903c !important;
  border-radius: 3px !important;
}

/* Pfeil */
#jp-header .jp-arrow { transition: transform 0.2s; flex-shrink: 0; opacity: 0.5; }
#jp-header .jp-menu > li.jp-open > a .jp-arrow { transform: rotate(180deg); }

/* ── Dropdown ── */
#jp-header .jp-menu ul {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 6px) !important; left: 0 !important;
  min-width: 220px !important;
  background: #ffffff !important;
  border-top: 3px solid #b8903c !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
  padding: 8px 0 !important;
  z-index: 99999 !important;
}
#jp-header .jp-menu > li.jp-open > ul { display: block !important; }
#jp-header .jp-menu ul li a,
#jp-header .jp-menu ul li a:link,
#jp-header .jp-menu ul li a:visited {
  display: block !important;
  padding: 12px 20px !important;
  color: #333333 !important;
  font-weight: 400 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 0 !important;
  transition: background 0.15s, color 0.15s, padding-left 0.15s !important;
}
#jp-header .jp-menu ul li:last-child a { border-bottom: none !important; }
#jp-header .jp-menu ul li a:hover {
  background: rgba(184,144,60,0.08) !important;
  color: #b8903c !important;
  padding-left: 26px !important;
}

/* ── Rechte Seite ── */
#jp-header .jp-header-right {
  display: flex !important; align-items: center !important;
  gap: 16px !important; flex-shrink: 0 !important;
}
#jp-header .jp-phone {
  display: flex !important; align-items: center !important;
  gap: 6px !important; color: #555 !important;
  font-size: 14px !important; white-space: nowrap !important;
  transition: color 0.2s !important;
}
#jp-header .jp-phone:hover { color: #b8903c !important; }

/* ── Hamburger ── */
#jp-header .jp-hamburger {
  display: none !important;
  flex-direction: column !important; justify-content: center !important;
  gap: 5px !important; width: 44px !important; height: 44px !important;
  padding: 10px !important; background: transparent !important;
  border: 1px solid rgba(0,0,0,0.15) !important; border-radius: 4px !important;
  cursor: pointer !important; flex-shrink: 0 !important;
}
#jp-header .jp-hamburger:hover { border-color: #b8903c !important; }
#jp-header .jp-hamburger span {
  display: block !important; width: 100% !important; height: 2px !important;
  background: #111 !important; border-radius: 2px !important;
  transition: transform 0.3s, opacity 0.3s !important;
}
#jp-header .jp-hamburger.jp-open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
#jp-header .jp-hamburger.jp-open span:nth-child(2) { opacity: 0 !important; }
#jp-header .jp-hamburger.jp-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* ── Spacer verstecken ── */
.jp-header-spacer { display: none !important; }



/* ── Mobile Overlay ── */
#jp-header .jp-mobile-overlay {
  position: fixed !important;
  top: 130px !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: rgba(17,17,17,0.97) !important;
  z-index: 99998 !important;
  overflow-y: auto !important;
  transform: translateX(100%) !important;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}
#jp-header .jp-mobile-overlay.jp-open { transform: translateX(0) !important; }
#jp-header .jp-mobile-inner {
  display: flex !important; flex-direction: column !important;
  padding: 32px 28px 48px !important;
}
#jp-header .jp-mobile-menu li { border-bottom: 1px solid rgba(255,255,255,0.07) !important; }
#jp-header .jp-mobile-menu li:last-child { border-bottom: none !important; }
#jp-header .jp-mobile-menu > li > a {
  display: block !important; padding: 18px 0 !important;
  color: rgba(255,255,255,0.85) !important; font-weight: 400 !important;
  background: transparent !important; border: none !important;
  transition: color 0.2s, padding-left 0.2s !important;
}
#jp-header .jp-mobile-menu > li > a:hover,
#jp-header .jp-mobile-menu > li.current-menu-item > a {
  color: #b8903c !important; padding-left: 8px !important;
}
#jp-header .jp-mobile-menu ul { padding: 0 0 8px 16px !important; }
#jp-header .jp-mobile-menu ul li a {
  display: block !important; padding: 10px 0 !important;
  color: rgba(255,255,255,0.5) !important; font-size: 14px !important;
  background: transparent !important; border: none !important;
  transition: color 0.2s !important;
}
#jp-header .jp-mobile-menu ul li a:hover { color: #b8903c !important; }
#jp-header .jp-mobile-phone {
  display: block !important; margin-top: 32px !important; padding: 14px 0 !important;
  color: rgba(255,255,255,0.5) !important; border-top: 1px solid rgba(255,255,255,0.1) !important;
  background: transparent !important;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  #jp-header .jp-header-inner { padding: 0 28px !important; gap: 20px !important; }
  #jp-header .jp-phone { display: none !important; }
}
@media (max-width: 900px) {
  #jp-header { height: 80px !important; }
  #jp-header .jp-mobile-overlay { top: 80px !important; }
  #jp-header .jp-nav { display: none !important; }
  #jp-header .jp-header-right { display: none !important; }
  #jp-header .jp-hamburger { display: flex !important; }
  #jp-header .jp-header-inner { padding: 0 20px !important; }
}

/* ═══════════════════════════════════════════════════════
   WORDPRESS ADMIN BAR – eingeloggte Nutzer
   WordPress setzt automatisch body.admin-bar wenn man
   eingeloggt ist. Admin-Leiste ist 32px (Desktop) /
   46px (Mobil) hoch.
   ═══════════════════════════════════════════════════════ */
body.admin-bar #jp-header {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar #jp-header {
    top: 46px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   THEME HEADER VERSTECKEN + STREIFEN FIX
   ═══════════════════════════════════════════════════════ */

/* Theme-eigenen Header verstecken */
/* GeneratePress */
#site-header,
.site-header,
.gen-header,
.main-navigation,
#main-nav,
/* Hello Elementor, Astra, sonstige */
#masthead,
.header-main,
header.elementor-location-header,
.ast-desktop-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* GeneratePress fügt padding-top auf #page hinzu wenn sticky header aktiv */
#page,
.site-content,
#content,
.generate-columns-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Hintergrund transparent damit kein weisser Streifen */
html, body {
  background-color: transparent !important;
  background: transparent !important;
}

/* Elementor Seiteninhalte direkt ohne Abstand */
.elementor-page .elementor,
.elementor-section-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}