/* beyond-bubbles Menü-Blasen – nur im geöffneten Navigations-Overlay.
   Die Blasen selbst erzeugt menu-blasen.js in einer eigenen Ebene hinter
   dem Menü; hier stehen Anordnung und Schrift. */

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--bb-mb-abstand, 3.4em) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
  /* --bb-mb-skala (0.4 bis 1) setzt menu-blasen.js, damit das Menue ohne Scrollen auf den Bildschirm passt */
  margin-top: calc(max(5rem, 14vh) * var(--bb-mb-skala, 1));
  margin-bottom: calc(5rem * var(--bb-mb-skala, 1));
}

/* Unterpunkte: unter dem Elternpunkt, etwas kleiner, mittig */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--bb-mb-abstand-unter, 2.6em) !important;
  padding: 0 !important;
  margin-top: var(--bb-mb-abstand-unter, 2.6em) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(> .wp-block-navigation__submenu-container) {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wp-block-navigation__responsive-container.is-menu-open .bb-mb-unter > .wp-block-navigation-item__content {
  font-size: 0.85em;
}

/* Zickzack */
.wp-block-navigation__responsive-container.is-menu-open .bb-mb-punkt {
  position: relative;
}
.wp-block-navigation__responsive-container.is-menu-open .bb-mb-punkt.bb-mb-links {
  left: calc(-1 * var(--bb-mb-versatz, 38px));
}
.wp-block-navigation__responsive-container.is-menu-open .bb-mb-punkt.bb-mb-rechts {
  left: var(--bb-mb-versatz, 38px);
}

.wp-block-navigation__responsive-container.is-menu-open .bb-mb-punkt > .wp-block-navigation-item__content {
  color: var(--bb-mb-farbe, #111) !important;
  font-weight: var(--bb-mb-gewicht, 700);
}

/* Ebene mit den Blasen: liegt im Overlay hinter dem Menü */
.bb-mb-ebene {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden; /* Blasen am Rand sollen das Menue nicht scrollbar machen */
}
.wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-close {
  position: relative;
  z-index: 1;
}
.bb-mb-grund {
  position: absolute;
  inset: 0;
  background: center top / cover no-repeat;
}
.bb-mb-blase {
  position: absolute;
  border-radius: 50%;
  background: center / contain no-repeat;
  mix-blend-mode: multiply;
  transition: scale 0.25s ease;
}
.bb-mb-blase.bb-mb-hover {
  scale: 1.06;
}

/* Fokus: statt Kasten nur unterstreichen (bleibt für Tastatur sichtbar) */
.wp-block-navigation__responsive-container.is-menu-open .bb-mb-punkt > .wp-block-navigation-item__content:focus,
.wp-block-navigation__responsive-container.is-menu-open .bb-mb-punkt > .wp-block-navigation-item__content:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .bb-mb-punkt > .wp-block-navigation-item__content:focus-visible {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 0.2em;
}

/* "Schließen" in einer kleinen gelben Blase (abschaltbar in der PHP-Datei) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  background: var(--bb-mb-schliessen, none) center / 100% 100% no-repeat;
  border-radius: 50%;
  width: 6.3em;
  height: 6.3em;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  translate: 1em -1em;
  mix-blend-mode: multiply;
  color: var(--bb-mb-farbe, #111) !important;
  font-weight: var(--bb-mb-gewicht, 700) !important;
}

/* Wandernde Hintergrundblasen im geöffneten Menü (über dem Grund, unter dem Menü) */
#bb-bubbles.bb-mb-im-menue {
  z-index: auto !important;
}