/*
====================================================================
VB-FANCY-MENUE – CSS ÜBERSICHT
====================================================================
Wichtige Klassen / IDs:

# Optional über den Shortcode:
- #deine-id
  Eigene optionale ID am äußeren Wrapper über container_id="...".

# Grundstruktur:
- .vbfm
  Haupt-Wrapper des Menüs.
- .vbfm--panel-right
  Legacy-Klasse aus älteren Versionen.
- .vbfm--panel-left
  Legacy-Klasse aus älteren Versionen.
- .vbfm__toggle
  Burger-Button zum Öffnen und Schließen des Menüs.
- .vbfm__toggle-icon
  Animiertes Burger-/X-Symbol.
- .vbfm__toggle-label
  Optionaler Text neben dem Burger-Symbol.
- .vbfm__panel
  Angedocktes Menüpanel oben links.
- .vbfm__viewport
  Sichtbereich für die Menüspalten.
- .vbfm__columns
  Flex-Container für alle aktuell sichtbaren Menüebenen.
- .vbfm__source
  Versteckter Container mit dem originalen WordPress-Menü-Markup.

# Spalten:
- .vbfm__close-column
  Optische linke Spalte für den Schließen-Button.
- .vbfm__column
  Eine einzelne Menüebene als Spalte.
- .vbfm__column--root
  Die erste Menüebene.
- .vbfm__column-header
  Kopfbereich einer Unterspalte.
- .vbfm__column.is-visible
  Sichtbarer Zustand einer Spalte mit weicher Einblendung.
- .vbfm__column.is-leaving
  Ausblendzustand einer Spalte vor dem Entfernen.

# Menüeinträge:
- .vbfm__items
  Wrapper für alle Einträge einer Spalte.
- .vbfm__item
  Zeilenwrapper eines Menüpunktes.
- .vbfm__link
  Normaler Link ohne Untermenü.
- .vbfm__trigger-row
  Zeile für Einträge mit Untermenü.
- .vbfm__trigger-label
  Beschriftung bzw. Hauptlink des Eintrags mit Untermenü.
- .vbfm__trigger-toggle
  Separater Button zum Öffnen der nächsten Spalte.
- .vbfm__trigger-icon
  Pfeilsymbol des Toggle-Buttons.
- .vbfm__back
  Zurück-Button in Unterspalten.
- .vbfm__back-icon
  Symbol des Zurück-Buttons.
- .vbfm__title
  Überschrift der aktuellen Unterspalte.

# Zustände:
- .vbfm.is-open
  Wrapper-Zustand, wenn das Panel geöffnet ist.
- .is-current
  Aktuelle WordPress-Seite.
- .is-active
  Aktiver Trigger mit geöffneter Unterebene.
- .is-muted
  Optisch abgeschwächte Root-Einträge.

# Hinweisbox:
- .vbfm-notice
  Ausgabe für Fehlermeldungen oder fehlende Menüangaben.
====================================================================
*/

.vbfm,
.vbfm *,
.vbfm *::before,
.vbfm *::after {
  box-sizing: border-box;
}

.vbfm {
  --vbfm-gap-to-button: 12px;
  --vbfm-close-column-width: 86px;
  --vbfm-column-width: 320px;
  --vbfm-column-bg: linear-gradient(to right, #ffffff, #fdfdfd 50%, #ededee 100%);
  --vbfm-border-color: rgba(0, 0, 0, 0.08);
  --vbfm-divider-color: rgba(0, 0, 0, 0.12);
  --vbfm-color-primary: #2F0C39;
  --vbfm-color-secondary: #7A7A7A;
  --vbfm-color-icon: #2F0C39;
  --vbfm-root-gap: 24px;
  --vbfm-item-gap: 18px;
  --vbfm-root-padding-top: 24px;
  --vbfm-column-padding-y: 22px;
  --vbfm-column-padding-x: 26px;
  --vbfm-header-min-height: 62px;
  --vbfm-transition-speed: 0.2s;
  --vbfm-panel-transition-speed: 0.78s;
  --vbfm-panel-easing: ease;
  --vbfm-column-transition-speed: 0.72s;
  --vbfm-column-easing: ease;
  --vbfm-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  --vbfm-max-height: min(100vh, 900px);
  --vbfm-toggle-size: 44px;

  position: relative;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
  background: transparent;
}

.vbfm__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--vbfm-toggle-size);
  min-width: var(--vbfm-toggle-size);
  margin: 0;
  padding: 8px 12px;
  border: none !important;
  outline: none;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--vbfm-color-primary);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.vbfm.is-open .vbfm__toggle {
  position: fixed;
  top: 18px;
  left: 21px;
  right: auto;
  z-index: 1001;
}

button.vbfm__toggle,
button.vbfm__toggle:hover,
button.vbfm__toggle:focus,
button.vbfm__toggle:active {
  border: none !important;
  outline: none;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--vbfm-color-primary) !important;
}

.vbfm__toggle:focus-visible,
.vbfm__trigger-toggle:focus-visible,
.vbfm__back:focus-visible,
.vbfm__trigger-label:focus-visible,
.vbfm__link:focus-visible {
  outline: 2px solid var(--vbfm-color-primary);
  outline-offset: 2px;
}

.vbfm__toggle-icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 18px;
  flex: 0 0 24px;
  font-size: 0;
  line-height: 0;
}

.vbfm__toggle-icon::before,
.vbfm__toggle-icon::after,
.vbfm__toggle-icon span,
.vbfm__toggle-icon-line {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--vbfm-color-primary);
  border-radius: 999px;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    top 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.vbfm__toggle-icon::before {
  top: 0;
}

.vbfm__toggle-icon span,
.vbfm__toggle-icon-line {
  top: 50%;
  transform: translateY(-50%);
}

.vbfm__toggle-icon::after {
  bottom: 0;
}

.vbfm.is-open .vbfm__toggle-icon::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.vbfm.is-open .vbfm__toggle-icon span,
.vbfm.is-open .vbfm__toggle-icon-line {
  opacity: 0;
  transform: translateY(-50%) scaleX(0.2);
}

.vbfm.is-open .vbfm__toggle-icon::after {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.vbfm__toggle-label {
  display: inline-block;
  color: var(--vbfm-color-primary);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
}

.vbfm__panel {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 999;
  min-width: calc(var(--vbfm-close-column-width) + var(--vbfm-column-width));
  background: transparent;
  display: block;
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-8px) scale(0.985);
  transform-origin: top left;
  transition:
    opacity var(--vbfm-panel-transition-speed) var(--vbfm-panel-easing),
    transform var(--vbfm-panel-transition-speed) var(--vbfm-panel-easing),
    visibility 0s linear var(--vbfm-panel-transition-speed);
}

.vbfm__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: calc(var(--vbfm-close-column-width) + var(--vbfm-column-width));
  height: 100%;
  background: var(--vbfm-column-bg);
  background-size: calc(var(--vbfm-close-column-width) + var(--vbfm-column-width)) 100%;
  background-position: left top;
  background-repeat: no-repeat;
  box-shadow: var(--vbfm-shadow);
}

.vbfm--panel-right .vbfm__panel,
.vbfm--panel-left .vbfm__panel {
  top: 0;
  left: 0;
  right: auto;
  transform-origin: top left;
}

.vbfm.is-open .vbfm__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--vbfm-panel-transition-speed) var(--vbfm-panel-easing),
    transform var(--vbfm-panel-transition-speed) var(--vbfm-panel-easing),
    visibility 0s linear 0s;
}

.vbfm__viewport {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  width: fit-content;
  max-width: min(calc(92vw - var(--vbfm-close-column-width)), 1400px);
  max-height: var(--vbfm-max-height);
  margin-left: var(--vbfm-close-column-width);
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: none;
}

.vbfm__columns {
  display: flex;
  align-items: stretch;
  width: fit-content;
  min-width: 100%;
  min-height: 40vh;
}

.vbfm__source {
  display: none !important;
}

.vbfm__column {
  width: var(--vbfm-column-width);
  min-width: var(--vbfm-column-width);
  max-width: var(--vbfm-column-width);
  flex: 0 0 var(--vbfm-column-width);
  background: var(--vbfm-column-bg);
  border-right: 1px solid var(--vbfm-border-color);
  padding: var(--vbfm-column-padding-y) var(--vbfm-column-padding-x) 30px;
  display: flex;
  flex-direction: column;

  opacity: 0;
  transform: translateX(18px);
  transition:
    opacity var(--vbfm-column-transition-speed) var(--vbfm-column-easing),
    transform var(--vbfm-column-transition-speed) var(--vbfm-column-easing);
}
.vbfm__column--root {
  background: transparent !important;
}

.vbfm__column--root .vbfm__link:hover,
.vbfm__column--root .vbfm__trigger-label:hover,
.vbfm__column--root .vbfm__trigger-row:hover .vbfm__link,
.vbfm__column--root .vbfm__trigger-row:hover .vbfm__trigger-label {
  color: var(--vbfm-color-primary);
}

.vbfm__column.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.vbfm__column:last-child {
  border-right: 0;
}

.vbfm__column--root {
  padding-top: var(--vbfm-root-padding-top);
  opacity: 1;
  transform: none;
  background: transparent;
}

.vbfm__column.is-leaving {
  opacity: 0;
  transform: translateX(18px);
}

.vbfm__column-header {
  min-height: var(--vbfm-header-min-height);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  margin: 0 calc(var(--vbfm-column-padding-x) * -1) 24px;
  padding-left: var(--vbfm-column-padding-x);
  padding-right: var(--vbfm-column-padding-x);
  border-bottom: 1px solid var(--vbfm-divider-color);
  min-width: 0;
}

.vbfm__column-header button {
  background-color: transparent !important;
}

.vbfm__column--root .vbfm__column-header {
  display: none;
}

.vbfm__items {
  display: flex;
  flex-direction: column;
  gap: var(--vbfm-item-gap);
}

.vbfm__column--root .vbfm__items {
  gap: var(--vbfm-root-gap);
}

.vbfm__item {
  display: block;
}

.vbfm__link,
.vbfm__trigger-label,
.vbfm__trigger-toggle,
.vbfm__back {
  font: inherit;
}

.vbfm__link,
.vbfm__trigger-label {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  color: var(--vbfm-color-secondary);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
  text-transform: uppercase;
  transition: color var(--vbfm-transition-speed) ease;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.vbfm__trigger-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.vbfm__trigger-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  min-width: 28px;
  padding: 0;
  margin: 0;
  border: none !important;
  outline: none;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--vbfm-color-primary) !important;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity var(--vbfm-transition-speed) ease,
    color var(--vbfm-transition-speed) ease;
}

.vbfm__trigger-row:hover .vbfm__trigger-toggle,
.vbfm__trigger-row:focus-within .vbfm__trigger-toggle,
.vbfm__trigger-toggle.is-active {
  opacity: 1;
}

.vbfm__trigger-toggle:hover,
.vbfm__trigger-toggle:focus,
.vbfm__trigger-toggle:active,
.vbfm__trigger-toggle:hover .vbfm__trigger-icon,
.vbfm__trigger-toggle:focus .vbfm__trigger-icon,
.vbfm__trigger-toggle:active .vbfm__trigger-icon {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--vbfm-color-primary) !important;
}

.vbfm__trigger-icon {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  color: inherit !important;
}

.vbfm__back {
  appearance: none;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none !important;
  outline: none;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--vbfm-color-secondary);
  cursor: pointer;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 500;
  transition: color var(--vbfm-transition-speed) ease;
}

.vbfm__back:hover,
.vbfm__back:focus,
.vbfm__back:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--vbfm-color-primary) !important;
}

.vbfm__back:hover .vbfm__title,
.vbfm__back:focus .vbfm__title,
.vbfm__back:active .vbfm__title,
.vbfm__back:hover .vbfm__back-icon,
.vbfm__back:focus .vbfm__back-icon,
.vbfm__back:active .vbfm__back-icon {
  color: var(--vbfm-color-primary) !important;
  background: transparent !important;
  background-color: transparent !important;
}

.vbfm__back-icon {
  font-size: 24px;
  line-height: 1;
  color: inherit !important;
}

.vbfm__title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit !important;
  background: transparent !important;
  font-size: 17px;
  line-height: 1.2;
  font-weight: inherit;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.vbfm__link:hover,
.vbfm__trigger-label:hover {
  color: var(--vbfm-color-primary);
}

.vbfm__link.is-current,
.vbfm__trigger-label.is-current {
  color: var(--vbfm-color-primary);
  font-weight: 700;
}


.vbfm__trigger-toggle.is-active {
  color: var(--vbfm-color-primary) !important;
}

.vbfm__column--root .vbfm__link,
.vbfm__column--root .vbfm__trigger-label,
.vbfm__column--root .vbfm__link.is-muted,
.vbfm__column--root .vbfm__trigger-label.is-muted {
  color: var(--vbfm-color-secondary);
  font-weight: 500;
}

.vbfm__column--root .vbfm__link.is-current,
.vbfm__column--root .vbfm__trigger-label.is-current {
  color: var(--vbfm-color-primary);
  font-weight: 700;
}


.vbfm-notice {
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #222;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .vbfm__panel,
  .vbfm__column,
  .vbfm__link,
  .vbfm__trigger-label,
  .vbfm__trigger-toggle,
  .vbfm__back,
  .vbfm__toggle-icon::before,
  .vbfm__toggle-icon::after,
  .vbfm__toggle-icon span,
  .vbfm__toggle-icon-line {
    transition: none;
  }
}

@media (max-width: 1024px) {
  .vbfm {
    --vbfm-close-column-width: 78px;
    --vbfm-column-width: 300px;
  }

  .vbfm.is-open .vbfm__toggle {
    left: 17px;
  }
}

@media (max-width: 767px) {
  .vbfm {
    --vbfm-close-column-width: 68px;
    --vbfm-column-width: 86vw;
    --vbfm-max-height: min(100vh, 900px);
  }

  .vbfm.is-open .vbfm__toggle {
    top: 12px;
    left: 12px;
    right: auto;
  }

  .vbfm__panel,
  .vbfm--panel-right .vbfm__panel,
  .vbfm--panel-left .vbfm__panel {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    min-width: calc(var(--vbfm-close-column-width) + var(--vbfm-column-width));
    transform-origin: top left;
    transform: translateY(-6px) scale(0.992);
  }

  .vbfm.is-open .vbfm__panel {
    transform: translateY(0) scale(1);
  }

  .vbfm__viewport {
    max-width: calc(100vw - var(--vbfm-close-column-width));
    margin-left: var(--vbfm-close-column-width);
  }

  .vbfm__link,
  .vbfm__trigger-label {
    font-size: 17px;
  }
}

@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .vbfm__trigger-toggle {
    opacity: 0 !important;
    pointer-events: none;
  }

  .vbfm__trigger-row:hover .vbfm__trigger-toggle,
  .vbfm__trigger-row:focus-within .vbfm__trigger-toggle {
    opacity: 0 !important;
  }

  .vbfm__trigger-toggle.is-active {
    opacity: 1 !important;
  }
}