/* =========================================================
   OWK HEADER
   Header, Navigation, Mobile Header
   ========================================================= */

/* =========================================================
   07 HEADER
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--owk-header-bg);
  border-bottom: 0 solid var(--owk-header-border);
  box-shadow: none;
  transition: background 0.28s ease, box-shadow 0.28s ease;
  box-sizing: border-box;
}

.admin-bar .site-header {
  top: 32px;
}

.site-header,
.inside-header,
.site-branding,
.main-navigation,
.main-navigation .inside-navigation,
.main-navigation .main-nav,
.main-navigation .main-nav > ul,
.main-navigation .main-nav > ul > li,
.main-navigation .menu,
.main-navigation .menu > li {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.inside-header {
  min-height: var(--owk-header-height);
  height: var(--owk-header-height);
  display: flex;
  align-items: stretch;
  transition: min-height 0.28s ease, height 0.28s ease;
  padding-left: 18px;
  padding-right: 18px;
}

.site-branding {
  display: flex;
  align-items: center;
  height: 100%;
}

.site-logo,
.site-logo a {
  display: flex;
  align-items: center;
  height: 100%;
}

.site-logo img,
.custom-logo {
  max-height: 52px;
  width: auto;
  display: block;
  transition: max-height 0.28s ease;
}

.main-navigation {
  background: transparent;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  height: 100%;
  margin-left: auto;
}

.main-navigation .inside-navigation,
.main-navigation .main-nav,
.main-navigation .main-nav > ul {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  height: 100%;
}

.main-navigation .main-nav > ul > li {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  height: 100%;
  min-height: 100%;
  background: transparent;
}

.main-navigation .main-nav > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  height: 100%;
  min-height: 100%;
  line-height: 1;
  color: var(--owk-header-text);
  background: transparent;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  padding: 0 16px;
  border: 0;
  margin: 0;
  box-sizing: border-box;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    font-size 0.28s ease,
    padding 0.28s ease;
}

.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li.sfHover > a {
  background: var(--owk-header-hover-bg);
  color: var(--owk-header-hover-text);
}

.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a,
.main-navigation .main-nav > ul > li.current_page_item > a {
  background: var(--owk-header-active-bg);
  color: var(--owk-header-active-text);
}

.main-navigation ul ul {
  background: var(--owk-header-bg);
  border: 1px solid rgba(34, 108, 53, 0.10);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  padding: 6px 0;
}

.main-navigation ul ul li a {
  color: var(--owk-header-text);
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  padding: 10px 16px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.main-navigation ul ul li a:hover,
.main-navigation ul ul li.current-menu-item > a {
  background: var(--owk-header-hover-bg);
  color: var(--owk-header-hover-text);
}

body.owk-scrolled .site-header {
  background: var(--owk-header-bg-sticky);
  box-shadow: var(--owk-header-shadow);
}

body.owk-scrolled .inside-header {
  min-height: var(--owk-header-height-sticky);
  height: var(--owk-header-height-sticky);
}

body.owk-scrolled .main-navigation .main-nav > ul > li,
body.owk-scrolled .main-navigation .main-nav > ul > li > a {
  height: 100%;
  min-height: 100%;
}

body.owk-scrolled .main-navigation .main-nav > ul > li > a {
  font-size: 15px;
  padding-left: 14px;
  padding-right: 14px;
}

body.owk-scrolled .site-logo img,
body.owk-scrolled .custom-logo {
  max-height: 28px;
}

.site-title,
.main-title a,
.site-description {
  color: var(--owk-header-text);
}

/* =========================================================
   TOGGLE BASIS
   ========================================================= */

.owk-theme-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.owk-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--owk-toggle-text);
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: none;
  transition:
    transform 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.owk-theme-toggle:hover {
  background: transparent;
  color: var(--owk-toggle-hover);
  transform: scale(1.04);
}

.owk-theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.owk-theme-toggle .owk-icon-sun {
  display: none;
}

body.owk-darkmode .owk-theme-toggle .owk-icon-sun {
  display: block;
}

body.owk-darkmode .owk-theme-toggle .owk-icon-moon {
  display: none;
}

/* Im Overlay-Menü niemals Toggle anzeigen */
.main-navigation .main-nav .owk-theme-toggle-wrap,
.main-navigation .main-nav .owk-theme-toggle {
  display: none !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {
  :root {
    --owk-header-height: 72px;
    --owk-header-height-sticky: 58px;
  }

  .inside-header {
    padding-left: 14px;
    padding-right: 14px;
  }

  .site-logo img,
  .custom-logo {
    max-height: 42px;
  }

  body.owk-scrolled .site-logo img,
  body.owk-scrolled .custom-logo {
    max-height: 34px;
  }

  .main-navigation .main-nav > ul > li > a {
    font-size: 15px;
    padding: 0 10px;
  }
}

/* =========================================================
   DESKTOP
   Nur rechter Toggle in echter Navigation
   ========================================================= */

@media (min-width: 769px) {
  #mobile-menu-control-wrapper .owk-theme-toggle-wrap {
    display: none !important;
  }

  #site-navigation .menu-bar-items {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    margin-left: auto;
  }

  #site-navigation .menu-bar-items .owk-theme-toggle-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #site-navigation .menu-bar-items .owk-theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   MOBILE
   Toggle und Hamburger in einer Zeile, Overlay getrennt
   ========================================================= */

@media (max-width: 768px) {
  :root {
    --owk-header-height: 68px;
    --owk-header-height-sticky: 58px;
  }

  .inside-header {
    min-height: var(--owk-header-height);
    height: var(--owk-header-height);
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
  }

  .site-branding {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 0 0 auto;
  }

  .site-logo img,
  .custom-logo {
    max-height: 38px;
  }

  body.owk-scrolled .site-logo img,
  body.owk-scrolled .custom-logo {
    max-height: 32px;
  }

  /* Echten Desktop-Toggle auf Mobil ausblenden */
  #site-navigation .owk-theme-toggle-wrap {
    display: none !important;
  }

  /* Mobile Control Wrapper in den Header-Flow zwingen */
  #mobile-menu-control-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: static !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 10021 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #mobile-menu-control-wrapper .inside-navigation,
  #mobile-menu-control-wrapper .menu-bar-items {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
  }

  #mobile-menu-control-wrapper .owk-theme-toggle-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #mobile-menu-control-wrapper .owk-theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    position: static !important;
    transform: none !important;
  }

  #mobile-menu-control-wrapper .menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--owk-header-text) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    z-index: 10031 !important;
  }

  #mobile-menu-control-wrapper .menu-toggle::before,
  #mobile-menu-control-wrapper .menu-toggle::after,
  #mobile-menu-control-wrapper .menu-toggle .owk-burger-middle {
    content: "";
    position: absolute;
    left: 50%;
    width: 24px;
    height: 2.5px;
    background: currentColor;
    border-radius: 999px;
    transform: translateX(-50%);
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.25s ease,
      top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #mobile-menu-control-wrapper .menu-toggle::before {
    top: 14px;
  }

  #mobile-menu-control-wrapper .menu-toggle .owk-burger-middle {
    top: 21px;
  }

  #mobile-menu-control-wrapper .menu-toggle::after {
    top: 28px;
  }

  body.owk-mobile-menu-open #mobile-menu-control-wrapper .menu-toggle {
    position: fixed !important;
    top: 11px !important;
    right: 10px !important;
    background: rgba(34, 108, 53, 0.10) !important;
  }

  body.owk-darkmode.owk-mobile-menu-open #mobile-menu-control-wrapper .menu-toggle {
    background: rgba(255,255,255,0.08) !important;
  }

  body.owk-mobile-menu-open #mobile-menu-control-wrapper .menu-toggle::before {
    top: 21px;
    transform: translateX(-50%) rotate(45deg);
  }

  body.owk-mobile-menu-open #mobile-menu-control-wrapper .menu-toggle .owk-burger-middle {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.15);
  }

  body.owk-mobile-menu-open #mobile-menu-control-wrapper .menu-toggle::after {
    top: 21px;
    transform: translateX(-50%) rotate(-45deg);
  }

  /* geöffnet: Toggle weg, X frei */
  body.owk-mobile-menu-open #mobile-menu-control-wrapper .owk-theme-toggle-wrap,
  body.owk-mobile-menu-open #mobile-menu-control-wrapper .owk-theme-toggle {
    display: none !important;
  }

  /* echtes Overlay-Menü */
  #site-navigation {
    position: static !important;
    margin-left: 0 !important;
    height: auto !important;
  }

  #site-navigation .main-nav {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: block !important;
    width: 100vw;
    height: 100dvh;
    padding: calc(var(--owk-header-height) + 0px) 28px 32px;
    background: rgba(243, 244, 241, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.38s ease, visibility 0.38s ease;
    overflow-y: auto;
  }

  body.owk-darkmode #site-navigation .main-nav {
    background: rgba(16, 18, 17, 0.78);
  }

  #site-navigation .main-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at top right, rgba(255,255,255,0.22), transparent 32%),
      linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
    pointer-events: none;
  }

  body.owk-darkmode #site-navigation .main-nav::before {
    background:
      radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 30%),
      linear-gradient(to bottom, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
  }

  #site-navigation.toggled .main-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #site-navigation .main-nav > ul {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    height: auto;
  }

  #site-navigation .main-nav > ul > li {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    opacity: 0;
    transform: translateX(110px);
    transition:
      transform 1.05s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.68s ease;
  }

  #site-navigation.toggled .main-nav > ul > li {
    opacity: 1;
    transform: translateX(0);
  }

  #site-navigation.toggled .main-nav > ul > li:nth-child(1) { transition-delay: 0.08s; }
  #site-navigation.toggled .main-nav > ul > li:nth-child(2) { transition-delay: 0.18s; }
  #site-navigation.toggled .main-nav > ul > li:nth-child(3) { transition-delay: 0.28s; }
  #site-navigation.toggled .main-nav > ul > li:nth-child(4) { transition-delay: 0.38s; }
  #site-navigation.toggled .main-nav > ul > li:nth-child(5) { transition-delay: 0.48s; }
  #site-navigation.toggled .main-nav > ul > li:nth-child(6) { transition-delay: 0.58s; }
  #site-navigation.toggled .main-nav > ul > li:nth-child(7) { transition-delay: 0.68s; }
  #site-navigation.toggled .main-nav > ul > li:nth-child(8) { transition-delay: 0.78s; }
  #site-navigation.toggled .main-nav > ul > li:nth-child(9) { transition-delay: 0.88s; }
  #site-navigation.toggled .main-nav > ul > li:nth-child(10) { transition-delay: 0.98s; }

  #site-navigation .main-nav > ul > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    height: auto;
    padding: 0;
    border-radius: 0;
    font-size: 1.7rem !important;
    font-weight: 700;
    line-height: 1.15;
    color: var(--owk-header-text);
    background: transparent !important;
    box-shadow: none !important;
    transition: transform 0.32s ease, color 0.2s ease, opacity 0.2s ease;
  }

  body.owk-darkmode #site-navigation .main-nav > ul > li > a {
    background: transparent !important;
    box-shadow: none !important;
  }

  #site-navigation .main-nav > ul > li > a:hover,
  #site-navigation .main-nav > ul > li.current-menu-item > a,
  #site-navigation .main-nav > ul > li.current-menu-ancestor > a,
  #site-navigation .main-nav > ul > li.current_page_item > a {
    transform: translateX(10px);
    background: transparent !important;
    color: var(--owk-accent);
  }

  body.owk-darkmode #site-navigation .main-nav > ul > li > a:hover,
  body.owk-darkmode #site-navigation .main-nav > ul > li.current-menu-item > a,
  body.owk-darkmode #site-navigation .main-nav > ul > li.current-menu-ancestor > a,
  body.owk-darkmode #site-navigation .main-nav > ul > li.current_page_item > a {
    color: var(--owk-link);
  }

  #site-navigation .main-nav ul ul {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100%;
    margin: 8px 0 0 0;
    padding: 0;    border: 0;
    box-shadow: none;
    background: transparent !important;
  }

  #site-navigation .main-nav ul ul li {
    width: 100%;
    margin-top: 8px;
  }

	#site-navigation .main-nav ul ul li a {
	  display: flex !important;
	  align-items: center;
	  justify-content: center;
	  text-align: center;
	  min-height: 40px;
	  padding: 6px 0;
	  border-radius: 0;
	  font-size: 1.05rem !important;
	  font-weight: 600;
	  background: transparent !important;
	}

  body.owk-darkmode #site-navigation .main-nav ul ul li a {
    background: transparent !important;
  }

  #site-navigation .main-nav .sub-menu-toggle {
    display: none !important;
  }

  .owk-mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10005;
    background: rgba(0, 0, 0, 0.30);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }

  body.owk-mobile-menu-open .owk-mobile-menu-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.owk-mobile-menu-open {
    overflow: hidden;
  }
}