/**
 * Karlsberg navbar: full-viewport bar, 1440px inner row, primary links + optional CTA/cart + drawer.
 */

/* Volle Viewport-Breite aus einem ggf. schmaleren Bricks-Container:
 * Nur margin-inline (kein zusätzliches left:50%), sonst doppelter Versatz.
 * Symmetrisch, damit links und rechts bündig zum Viewport sind. */
.kb-navbar {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  left: auto;
  right: auto;
  box-sizing: border-box;
  /* Über typische Bricks-Sections; geöffneter Drawer hebt sich weiter an */
  z-index: 5000;
  /* Gleiche Grundfarbe wie .kb-footer, ohne Textur/Stern */
  background-color: var(--color-primary-200, #00417d);
  background-image: none;
  color: var(--color-neutral-0, #fefefe);
  font-family: var(--font-family-body, "Satoshi", system-ui, sans-serif);
}

.kb-navbar__bar {
  width: 100%;
  background: inherit;
}

.kb-navbar__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.kb-navbar__brand {
  flex: 0 0 auto;
}

.kb-navbar__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* Logo-Slot: nur Bild aus Bricks, kein Text-Fallback */
.kb-navbar__logo--slot {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  min-width: 120px;
}

.kb-navbar__logo--slot:empty {
  min-width: 160px;
}

.kb-navbar__logo--slot img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

/* Zweites Logo: Desktop vs. Mobil (Breakpoint wie Drawer) */
.kb-navbar__logo-asset {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.kb-navbar__logo-asset--mobile {
  display: none;
}

@media (max-width: 1023px) {
  .kb-navbar__logo-asset--desktop {
    display: none;
  }

  .kb-navbar__logo-asset--mobile {
    display: inline-flex;
  }
}

.kb-navbar__logo-asset--mobile-only {
  display: inline-flex;
}

.kb-navbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 20px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Primary strip: first level only */
.kb-navbar__primary .bricks-nav-menu {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kb-navbar__primary .bricks-nav-menu > .menu-item {
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.kb-navbar__primary .bricks-nav-menu > .menu-item > a,
.kb-navbar__primary .bricks-nav-menu > .menu-item > .brx-submenu-toggle > a {
  display: inline !important;
  width: auto !important;
  color: inherit !important;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.kb-navbar__primary .bricks-nav-menu > .menu-item > .brx-submenu-toggle .brx-submenu-toggle-icon {
  display: none !important;
}

.kb-navbar__primary .sub-menu {
  display: none !important;
}

/* Nur Mobil: Hauptmenü-Duplikat im Drawer (Desktop ausgeblendet) */
.kb-navbar__drawer-mobile-strip--primary {
  display: none;
}

/* Drawer + Utility (POS) — immer Flex-Spalte unter dem Kopf */
.kb-navbar__drawer-mobile-secondary {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* POS ghost button */
.kb-navbar__pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: var(--border-radius-sm, 4px);
  color: inherit;
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.kb-navbar__pos:hover,
.kb-navbar__pos:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

@media (max-width: 1023px) {
  .kb-navbar__primary {
    display: none;
  }

  /* POS nur im Burger-Menü (als Textlink), nicht in der Leiste */
  .kb-navbar__pos {
    display: none !important;
  }

  .kb-navbar__drawer-mobile-strip--primary {
    display: block;
    flex: 0 0 auto;
    margin-top: 28px;
    padding: 4px 24px 16px;
  }

  .kb-navbar__panel-body:not(:has(.kb-navbar__drawer-mobile-strip--primary)) .kb-navbar__drawer-mobile-secondary {
    margin-top: 0;
  }

  /* Erste Gruppe: Burger-Menü — fett, Trennlinien (früher Hauptmenü-Stil) */
  .kb-navbar__drawer-mobile-secondary {
    margin-top: 0;
    padding: 4px 24px 0;
  }

  .kb-navbar__drawer-mobile-secondary .kb-navbar__drawer-root > .menu-item {
    margin: 0 !important;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid rgba(0, 33, 63, 0.12);
  }

  .kb-navbar__drawer-mobile-secondary .kb-navbar__drawer-root > .menu-item > .kb-navbar__drawer-link--root,
  .kb-navbar__drawer-mobile-secondary .kb-navbar__drawer-root > .menu-item > .kb-navbar__drill-toggle {
    display: block !important;
    width: 100% !important;
    margin: 0;
    padding: 20px 0 16px;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--color-primary-200, #00417d) !important;
    font-family: var(--font-family-body, "Satoshi", system-ui, sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    line-height: 1.25;
    white-space: normal;
    box-sizing: border-box;
    text-align: left;
  }

  .kb-navbar__drawer-mobile-secondary .kb-navbar__drawer-root {
    padding: 0 0 8px !important;
  }

  .kb-navbar__drawer-mobile-secondary .kb-navbar__drawer-root > .menu-item > .kb-navbar__drawer-link--root:hover,
  .kb-navbar__drawer-mobile-secondary .kb-navbar__drawer-root > .menu-item > .kb-navbar__drill-toggle:hover,
  .kb-navbar__drawer-mobile-secondary .kb-navbar__drawer-root > .menu-item > .kb-navbar__drawer-link--root:focus-visible,
  .kb-navbar__drawer-mobile-secondary .kb-navbar__drawer-root > .menu-item > .kb-navbar__drill-toggle:focus-visible {
    background: none;
    opacity: 0.88;
    outline: none;
  }

  /* Zweite Gruppe: Leisten-Hauptmenü + Händler finden — unterstrichen (früher Burger-Stil) */
  .kb-navbar__drawer-mobile-primary .bricks-nav-menu {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
  }

  .kb-navbar__drawer-mobile-primary .bricks-nav-menu > .menu-item {
    margin: 0 !important;
    padding: 0;
    list-style: none;
    border-bottom: none;
  }

  .kb-navbar__drawer-mobile-primary .bricks-nav-menu > .menu-item > a,
  .kb-navbar__drawer-mobile-primary .bricks-nav-menu > .menu-item > .brx-submenu-toggle > a {
    display: block !important;
    width: 100% !important;
    margin: 0;
    padding: 14px 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--color-primary-200, #00417d) !important;
    font-family: var(--font-family-body, "Satoshi", system-ui, sans-serif);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    line-height: 1.35;
    white-space: normal;
    box-sizing: border-box;
  }

  .kb-navbar__drawer-mobile-primary .bricks-nav-menu > .menu-item > .brx-submenu-toggle .brx-submenu-toggle-icon {
    display: none !important;
  }

  .kb-navbar__drawer-mobile-primary .sub-menu {
    display: none !important;
  }

  .kb-navbar__drawer-mobile-primary .bricks-nav-menu > .menu-item > a:hover,
  .kb-navbar__drawer-mobile-primary .bricks-nav-menu > .menu-item > .brx-submenu-toggle > a:hover,
  .kb-navbar__drawer-mobile-primary .bricks-nav-menu > .menu-item > a:focus-visible,
  .kb-navbar__drawer-mobile-primary .bricks-nav-menu > .menu-item > .brx-submenu-toggle > a:focus-visible {
    background: none;
    opacity: 0.85;
    outline: none;
  }

  .kb-navbar__drawer-mobile-strip--primary .kb-navbar__drawer-mobile-utility {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    padding: 14px 0 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--color-primary-200, #00417d);
    font-family: var(--font-family-body, "Satoshi", system-ui, sans-serif);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    line-height: 1.35;
    white-space: normal;
  }

  .kb-navbar__drawer-mobile-strip--primary .kb-navbar__drawer-mobile-utility:hover,
  .kb-navbar__drawer-mobile-strip--primary .kb-navbar__drawer-mobile-utility:focus-visible {
    background: none;
    opacity: 0.85;
    outline: none;
  }

  /* Kopf: nur mobil abweichendes Padding / keine Trennlinie (Grid siehe Basis) */
  .kb-navbar__panel-head {
    box-sizing: content-box;
    padding: 32px 16px;
    border-bottom: none !important;
  }

  .kb-navbar__panel-head .kb-navbar__panel-title,
  .kb-navbar__panel-head .kb-navbar__panel-title--empty {
    grid-column: b-start / d-end;
    justify-self: center;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Cart */
.kb-navbar__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-md, 8px);
  background: var(--color-neutral-0, #fefefe);
  color: var(--color-primary-300, #00213f);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.kb-navbar__cart:hover,
.kb-navbar__cart:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  outline: none;
}

.kb-navbar__cart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb-navbar__cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-neutral-200, #909090);
  color: var(--color-neutral-0, #fefefe);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

/* Burger */
.kb-navbar__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.kb-navbar__burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.kb-navbar__burger:focus-visible {
  outline: 2px solid var(--color-neutral-0, #fefefe);
  outline-offset: 3px;
}

/* In-Header-Backdrop: nicht nutzen — fixed wird durch Bricks-Wrapper oft begrenzt.
 * Abdunklung: #kb-navbar-drawer-portal am body (siehe JS). */
.kb-navbar__backdrop {
  display: none !important;
}

#kb-navbar-drawer-portal {
  position: fixed;
  inset: 0;
  /* Unter dem angehobenen Header, über dem Haupt-Content (siehe body.kb-navbar-drawer-lock) */
  z-index: 100;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}

#kb-navbar-drawer-portal.kb-navbar__backdrop-portal--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Gesamter Bricks-Header inkl. Navbar-Element über Portal und über typisches #brx-content */
body:has(.kb-navbar.kb-navbar--drawer-open) #brx-header,
body:has(.kb-navbar.kb-navbar--drawer-open) header#brx-header {
  position: relative;
  z-index: 200;
}

/* JS setzt diese Klasse auf #brx-header, <header> oder .kb-navbar — zuverlässiger als nur :has() */
.kb-navbar-drawer-stack-raise {
  position: relative;
  z-index: 200;
}

/* Bricks / Child: #brx-content oder main oft mit eigenem z-index — sonst liegt der Block über dem Drawer */
body.kb-navbar-drawer-lock #brx-content,
body.kb-navbar-drawer-lock main#brx-content,
body.kb-navbar-drawer-lock main {
  position: relative;
  z-index: 0 !important;
}

.kb-navbar__panel {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  z-index: 100;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  background: var(--color-neutral-0, #fefefe);
  color: var(--color-primary-200, #00417d);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
}

@media (min-width: 1024px) {
  .kb-navbar__panel {
    width: min(420px, 100vw);
    max-width: 100%;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  }
}

/* Geschlossen: nichts von Bricks/display überschreiben — Panel bleibt aus dem Layout */
.kb-navbar__panel[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Panel kann am body hängen — dann kein Nachfahre von .kb-navbar--drawer-open; Klasse setzt JS */
.kb-navbar.kb-navbar--drawer-open .kb-navbar__panel,
.kb-navbar__panel.kb-navbar__panel--layout-open {
  transform: translateX(0);
}

/* Am body: über Backdrop (#kb-navbar-drawer-portal), unabhängig von Bricks-Stacking */
.kb-navbar__panel.kb-navbar__panel--body-portal {
  z-index: 220;
}

/* Kopfzeile: Grid a–d + Spalte e (Schließen permanent rechts) */
.kb-navbar__panel-head {
  position: relative;
  display: grid;
  grid-template-columns:
    [a-start] minmax(44px, auto) [a-end b-start]
    minmax(0, 1fr) [b-end c-start]
    minmax(0, 1fr) [c-end d-start]
    minmax(0, 1fr) [d-end e-start]
    minmax(48px, auto) [e-end];
  align-items: center;
  column-gap: 10px;
  flex: 0 0 auto;
}

@media (min-width: 1024px) {
  .kb-navbar__panel-head {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(0, 33, 63, 0.12);
  }
}

.kb-navbar__panel-title {
  margin: 0;
  width: 100%;
  max-width: 100%;
  grid-column: b-start / d-end;
  justify-self: center;
  text-align: center;
  font-family: var(--font-family-heading, "OPTIClearfaceGothicDemiAg", system-ui, sans-serif);
  font-size: 1.8rem;
  color: var(--color-primary-200, #00417d);
}

.kb-navbar__panel-title--empty {
  display: block;
  min-height: 1em;
  grid-column: b-start / d-end;
  justify-self: center;
}

.kb-navbar__drill-back {
  grid-column: a-start / a-end;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary-200, #00417d);
  cursor: pointer;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.kb-navbar__drill-back--inactive {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

.kb-navbar__drill-back-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb-navbar__drill-back:focus-visible {
  outline: 2px solid var(--color-primary-200, #00417d);
  outline-offset: 2px;
}

.kb-navbar__close {
  position: relative;
  grid-column: e-start / e-end;
  justify-self: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-primary-200, #00417d);
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary-200, #00417d);
  cursor: pointer;
}

.kb-navbar__close-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.kb-navbar__close-bar:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.kb-navbar__close-bar:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.kb-navbar__close:focus-visible {
  outline: 2px solid var(--color-primary-200, #00417d);
  outline-offset: 2px;
}

.kb-navbar__panel-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

/* Drill-Viewport: Wurzelmenü + überlagernde Untermenü-Ebenen */
.kb-navbar__drill-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.kb-navbar__drawer-nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Wurzelebene: fett, Trennlinien */
.kb-navbar__drawer-root {
  flex: 1 1 auto;
  overflow: auto;
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 24px 32px !important;
}

.kb-navbar__drawer-root > .menu-item {
  margin: 0 !important;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(0, 33, 63, 0.12);
}

.kb-navbar__drawer-root > .menu-item:last-child {
  border-bottom: none;
}

.kb-navbar__drawer-link--root,
.kb-navbar__drill-toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 16px 0;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font-family-body, "Satoshi", system-ui, sans-serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-primary-200, #00417d);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.kb-navbar__drill-toggle:hover,
.kb-navbar__drill-toggle:focus-visible,
.kb-navbar__drawer-link--root:hover,
.kb-navbar__drawer-link--root:focus-visible {
  opacity: 0.85;
  outline: none;
}

.kb-navbar__drill-toggle:focus-visible {
  outline: 2px solid var(--color-primary-200, #00417d);
  outline-offset: 2px;
}

/* Überlagerndes Untermenü */
.kb-navbar__sub-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: var(--color-neutral-0, #fefefe);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  will-change: transform;
}

.kb-navbar__sub-panel.is-open {
  transform: translateX(0);
}

.kb-navbar__sub-panel-inner {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
  padding: 8px 24px 32px;
}

.kb-navbar__sub-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.kb-navbar__sub-list > .menu-item {
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.kb-navbar__sub-list > .menu-item + .menu-item {
  margin-top: 4px;
}

.kb-navbar__drawer-link--nested {
  display: block;
  padding: 12px 0;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-primary-200, #00417d);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kb-navbar__sub-list .kb-navbar__drill-toggle {
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 33, 63, 0.12);
  margin-bottom: 4px;
  padding-bottom: 14px;
}

/* Bricks blendet .sub-menu per Default oft aus — Drill-Listen müssen sichtbar bleiben */
.kb-navbar__drill-viewport .kb-navbar__sub-panel ul.sub-menu.kb-navbar__sub-list,
.kb-navbar__drill-viewport .kb-navbar__sub-panel .kb-navbar__sub-list {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.kb-navbar-drawer-lock {
  overflow: hidden;
}