/* Navigation refresh. Scoped to the header and existing mobile controls. */
#g-navigation {
  background: #faf9f6;
  color: #102c40;
  height: 80px;
  border-bottom: 1px solid #e8e3d8;
  box-shadow: 0 2px 12px rgba(5,36,61,.06);
}
#g-navigation > .g-container { width: calc(100% - 64px); max-width: 1280px; }
#g-navigation .g-content { padding: 0; margin: 0; }
#g-navigation .g-main-nav { float: none; margin: 0; }
#g-navigation .g-main-nav > .g-toplevel { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; height: 79px; }
#g-navigation .g-main-nav .g-toplevel > li { margin: 0; border: 0; }
#g-navigation .g-main-nav .g-toplevel > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module),
#g-navigation .g-main-nav .g-toplevel > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module).active { background: transparent; }
#g-navigation .g-main-nav .g-toplevel > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module).active a { color: #102c40 !important; }
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
  display: flex; align-items: center; gap: 8px; min-height: 48px; height: auto;
  padding: 12px 10px; font: 600 16px/1.3 SourceSansPro, sans-serif;
  color: #102c40 !important; border-radius: 5px; text-shadow: none;
}
#g-navigation .g-main-nav .g-toplevel > li .g-menu-item-content { margin: 0; padding: 0; }
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container:hover,
#g-navigation .g-main-nav .g-toplevel > li.g-selected > .g-menu-item-container { background: #eeeae1; }
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container { box-shadow: inset 0 -2px #9f854c; }
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container .g-menu-item-title::before { content: none; }
#g-navigation .g-main-nav .g-toplevel > .g-menu-item-1410 { margin-right: auto; }
#g-navigation .g-main-nav .g-toplevel > .g-menu-item-1410 > .home-link {
  width: auto; margin: 0; padding: 8px 4px; gap: 12px; box-shadow: none !important;
}
#g-navigation .home-link img { width: 62px; height: 40px; object-fit: contain; filter: brightness(0) saturate(100%) invert(13%) sepia(23%) saturate(1392%) hue-rotate(161deg); }
#g-navigation .wk-brand-name { font-size: 19px; font-weight: 600; letter-spacing: -.4px; }
#g-navigation .g-main-nav .g-toplevel .g-menu-parent-indicator,
#g-navigation .g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator {
  background: transparent; border: 0; margin: 0 !important; padding: 0;
  flex: 0 0 18px; width: 18px; height: 22px; position: relative; color: #806a38;
}
#g-navigation .g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator::after {
  content: ''; display: block; position: absolute; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  right: 5px; top: 50%; margin-top: -5px;
}
#g-navigation .g-main-nav .g-dropdown {
  background: #faf9f6; color: #102c40; border: 1px solid #e3ded2;
  border-radius: 6px; box-shadow: 0 12px 26px rgba(5,36,61,.12);
}
#g-navigation .g-main-nav .g-sublevel { padding: 8px; }
#g-navigation .g-main-nav .g-sublevel > li { border: 0; }
#g-navigation .g-main-nav .g-toplevel .g-sublevel > li > .g-menu-item-container {
  color: #102c40 !important; min-height: 44px; height: auto; padding: 11px 12px;
  font: 400 16px/1.4 SourceSansPro, sans-serif; border-radius: 4px;
}
#g-navigation .g-main-nav .g-sublevel > li:hover,
#g-navigation .g-main-nav .g-sublevel > li.active { background: #eeeae1; }
#g-navigation .g-main-nav .g-toplevel > .wk-nav-contact { margin-left: 12px; }
#g-navigation .g-main-nav .g-toplevel > .wk-nav-contact > a {
  background: #102c40; color: #fff !important; padding: 12px 18px; border: 1px solid #102c40;
}
#g-navigation .g-main-nav .g-toplevel > .wk-nav-contact > a:hover { background: #28475d; }
#g-navigation .wk-contact-short { display: none; }
#g-navigation a:focus-visible,
#g-navigation [tabindex]:focus-visible { outline: 2px solid #806a38; outline-offset: 3px; }
#g-navigation .g-parent:focus-within > .g-dropdown { opacity: 1; visibility: visible; transform: none; }
#g-header.sticky { margin-top: 80px; }
@media (min-width: 769px) and (max-width: 1150px) {
  #g-navigation > .g-container { width: calc(100% - 32px); }
  #g-navigation .wk-brand-name { display: none; }
  #g-navigation .g-main-nav > .g-toplevel { gap: 4px; }
  #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container { font-size: 14px; padding: 12px 8px; gap: 4px; }
  #g-navigation .g-main-nav .g-toplevel > .wk-nav-contact { margin-left: 4px; }
  #g-navigation .g-main-nav .g-toplevel > .wk-nav-contact > a { padding: 12px; }
}
@media (min-width: 769px) and (max-width: 950px) {
  #g-navigation .wk-contact-full { display: none; }
  #g-navigation .wk-contact-short { display: inline; }
  #g-navigation .home-link img { width: 44px; }
}
@media (max-width: 768px) {
  #g-navigation { height: 64px; }
  #g-header.sticky { margin-top: 64px; }
  .mobile-site-brand { max-width: calc(100% - 116px); gap: 7px; }
  .mobile-site-brand img { width: 42px; height: 32px; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(13%) sepia(23%) saturate(1392%) hue-rotate(161deg); }
  .mobile-site-brand::after { content: 'webkonzept-webdesign.de'; color: #102c40; font: 600 15px/1.2 SourceSansPro, sans-serif; letter-spacing: -.4px; }
  .g-offcanvas-toggle { width: 90px; right: 14px; gap: 8px; }
  .g-offcanvas-toggle::before {
    background: linear-gradient(#102c40,#102c40) center 10px/24px 2px no-repeat,
                linear-gradient(#102c40,#102c40) center 19px/24px 2px no-repeat,
                linear-gradient(#102c40,#102c40) center 28px/24px 2px no-repeat;
    filter: none; flex-basis: 32px; width: 32px;
  }
  .g-offcanvas-toggle::after { color: #102c40; text-shadow: none; margin: 0; font-size: 14px; }
  .g-offcanvas-toggle.sticky { right: 14px; }
  .g-offcanvas-toggle[aria-expanded='true']::after { color: #fff; }
  .g-offcanvas-toggle:focus-visible { outline-color: #806a38; }
  #g-mobilemenu-container .wk-nav-contact,
  #g-mobilemenu-container .wk-brand-name { display: none; }
  #g-offcanvas { background: #102c40; }
}
@media (max-width: 350px) { .mobile-site-brand::after { font-size: 13px; } .mobile-site-brand { gap: 6px; left: 12px; } }
@media (prefers-reduced-motion: reduce) { #g-navigation, #g-navigation * { transition: none !important; animation: none !important; } }

@media (max-width: 350px) { .mobile-site-brand img { width: 34px; } }

/* Override legacy Gantry state selectors on their actual painted elements. */
#g-navigation #hauptmenu .g-main-nav .g-toplevel > li:hover,
#g-navigation #hauptmenu .g-main-nav .g-toplevel > li.active.g-selected,
#g-navigation #hauptmenu .g-main-nav .g-toplevel > li:focus-within {
  background: transparent;
}
#g-navigation #hauptmenu .g-main-nav .g-toplevel > li:not(.wk-nav-contact):hover > .g-menu-item-container,
#g-navigation #hauptmenu .g-main-nav .g-toplevel > li:not(.wk-nav-contact):focus-within > .g-menu-item-container {
  background: #eeeae1;
  color: #102c40;
}
#g-navigation #hauptmenu .g-main-nav .g-sublevel > li:hover,
#g-navigation #hauptmenu .g-main-nav .g-sublevel > li.active,
#g-navigation #hauptmenu .g-main-nav .g-sublevel > li.g-selected,
#g-navigation #hauptmenu .g-main-nav .g-sublevel > li:focus-within {
  background: #eeeae1;
  border-radius: 4px;
}
#g-navigation #hauptmenu .g-main-nav .g-sublevel > li > .g-menu-item-container {
  background: transparent;
  color: #102c40 !important;
}
#g-navigation #hauptmenu .g-main-nav .g-menu-parent-indicator,
#g-navigation #hauptmenu .g-main-nav .g-menu-parent-indicator:hover {
  background: transparent;
  border-color: transparent;
}