/*
 * Better Menus — Frontend Styles v0.3.5
 */

/* ── Reset ─────────────────────────────────────────────────────────── */

.bm-nav, .bm-nav *, .bm-nav *::before, .bm-nav *::after { box-sizing: border-box; }
.bm-nav ul { list-style: none; margin: 0; padding: 0; }
.bm-nav a  { text-decoration: none; color: inherit; }

/* ── Nav — immer im Vordergrund ────────────────────────────────────── */

.bm-nav {
    position: relative;
    z-index: var(--bm-nav-z, 100);
}

.bm-nav__list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    position: relative;
    /* Stacking context der ganzen Nav-Bar */
    z-index: var(--bm-nav-z, 100);
}

.bm-nav__item {
    position: relative;
    /* KEIN z-index hier — sonst entsteht ein eigener Stacking Context
       und das Dropdown bleibt darin gefangen */
}

.bm-nav[data-trigger="hover"] .bm-has-dropdown:hover,
.bm-has-dropdown.bm-open {
    /* Auch hier kein z-index auf dem <li> */
}

.bm-nav__link {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    /* Links liegen über dem Dropdown-Inhalt */
    z-index: calc(var(--bm-nav-z, 100) + 1);
}

/* Pfeil */
.bm-nav__arrow {
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.bm-has-dropdown.bm-open > .bm-nav__link .bm-nav__arrow,
.bm-nav[data-trigger="hover"] .bm-has-dropdown:hover > .bm-nav__link .bm-nav__arrow {
    transform: rotate(180deg);
}

/* ── Hover-Gap Bridge ──────────────────────────────────────────────── */

.bm-has-dropdown {
    position: relative;
}
.bm-has-dropdown::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--bm-hover-bridge, 24px);
    transform: translateY(100%);
    background: transparent;
    pointer-events: auto;
    /* Unter den Nav-Links, über dem Dropdown */
    z-index: 1;
}

/* ── Dropdown — Basis ──────────────────────────────────────────────── */

.bm-dropdown {
    position: absolute;
    top: 100%;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: var(--bm-transition, opacity 0.18s ease, visibility 0.18s);
    /* Unter der Nav-Bar (--bm-nav-z), über dem Seiteninhalt */
    z-index: calc(var(--bm-nav-z, 100) - 1);
}

/* Hover öffnen */
.bm-nav[data-trigger="hover"] .bm-has-dropdown:hover > .bm-dropdown {
    opacity: 1; pointer-events: auto; visibility: visible;
}
/* Click öffnen */
.bm-has-dropdown.bm-open > .bm-dropdown {
    opacity: 1; pointer-events: auto; visibility: visible;
}

/* ── Boxed ─────────────────────────────────────────────────────────── */

.bm-dropdown--boxed {
    left: 0;
    min-width: 180px;
    /* max-width per Bricks control: boxedMaxWidth */
}

/* ── Full Width (Nav-Breite) ───────────────────────────────────────── */
/*
 * JS setzt: left = navRect.left - itemRect.left, width = navRect.width
 * Bricks dropdownOffset control zielt auf .bm-dropdown--boxed, .bm-dropdown--full
 */
.bm-dropdown--full {
    left: 0;       /* Fallback bis JS läuft */
    width: 300px;  /* Fallback sichtbar */
}

/* ── Stretch (100vw) ───────────────────────────────────────────────── */
/*
 * position:fixed → immer relativ zum Viewport.
 * left:0; width:100vw → Bildschirmbreite, Kante zu Kante.
 *
 * top wird AUSSCHLIESSLICH vom JS gesetzt (navRect.bottom).
 * Das Bricks dropdownOffset-Control gilt NICHT für Stretch —
 * es würde mit dem JS-Wert kollidieren.
 * Für Stretch-Abstand: Padding im Dropdown selbst nutzen.
 */
.bm-dropdown--stretch {
    position: fixed;
    left: 0;
    width: 100vw;
    /* top: via JS — kein CSS-Wert hier */
}

/* ── Inner (Inhalt-Container) ──────────────────────────────────────── */

.bm-dropdown__inner {
    position: relative;
    z-index: 1;
}

/*
 * --boxed: Inhalt an X-Achse der Nav ausgerichtet.
 * JS setzt margin-left = navRect.left (absoluter Abstand vom Viewport).
 * So starten die Items bündig mit der Nav-linken-Kante.
 * Breite = navRect.width (damit der Inhalt nicht über die Nav hinausgeht).
 */
.bm-dropdown__inner--boxed {
    /* Basis — JS überschreibt margin-left + width */
    padding-left: var(--bm-inner-padding, 0px);
    padding-right: var(--bm-inner-padding, 0px);
}

/* ── Layout ────────────────────────────────────────────────────────── */

.bm-layout-list { display: flex; flex-direction: column; }
.bm-layout-grid { display: grid; gap: var(--bm-dropdown-gap, 16px); }

.bm-layout-grid.bm-cols-1  { grid-template-columns: repeat(1,  minmax(0,1fr)); }
.bm-layout-grid.bm-cols-2  { grid-template-columns: repeat(2,  minmax(0,1fr)); }
.bm-layout-grid.bm-cols-3  { grid-template-columns: repeat(3,  minmax(0,1fr)); }
.bm-layout-grid.bm-cols-4  { grid-template-columns: repeat(4,  minmax(0,1fr)); }
.bm-layout-grid.bm-cols-5  { grid-template-columns: repeat(5,  minmax(0,1fr)); }
.bm-layout-grid.bm-cols-6  { grid-template-columns: repeat(6,  minmax(0,1fr)); }
.bm-layout-grid.bm-cols-7  { grid-template-columns: repeat(7,  minmax(0,1fr)); }
.bm-layout-grid.bm-cols-8  { grid-template-columns: repeat(8,  minmax(0,1fr)); }
.bm-layout-grid.bm-cols-9  { grid-template-columns: repeat(9,  minmax(0,1fr)); }
.bm-layout-grid.bm-cols-10 { grid-template-columns: repeat(10, minmax(0,1fr)); }
.bm-layout-grid.bm-cols-11 { grid-template-columns: repeat(11, minmax(0,1fr)); }
.bm-layout-grid.bm-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
.bm-layout-grid.bm-rows-1  { grid-template-rows: repeat(1, auto); }
.bm-layout-grid.bm-rows-2  { grid-template-rows: repeat(2, auto); }
.bm-layout-grid.bm-rows-3  { grid-template-rows: repeat(3, auto); }
.bm-layout-grid.bm-rows-4  { grid-template-rows: repeat(4, auto); }
.bm-layout-grid.bm-rows-5  { grid-template-rows: repeat(5, auto); }
.bm-layout-grid.bm-rows-6  { grid-template-rows: repeat(6, auto); }

.bm-dropdown__item.current > .bm-dropdown__link { font-weight: 600; }

/* ── Vertikal / Akkordion ───────────────────────────────────────────── */

/* Nav-Liste vertikal */
.bm-nav__list--vertical {
    flex-direction: column;
    align-items: stretch;
}

.bm-nav__list--vertical .bm-nav__item {
    width: 100%;
}

.bm-nav__list--vertical .bm-nav__link {
    width: 100%;
    justify-content: space-between;
}

/* Pfeil zeigt nach rechts im vertikalen Modus */
.bm-nav__list--vertical .bm-nav__arrow {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    border-right: none;
    width: 0; height: 0;
    transition: transform 0.2s;
}
.bm-nav__list--vertical .bm-has-dropdown.bm-open > .bm-nav__link .bm-nav__arrow,
.bm-nav[data-trigger="hover"] .bm-nav__list--vertical .bm-has-dropdown:hover > .bm-nav__link .bm-nav__arrow {
    transform: rotate(90deg);
}

/* Sub-Items darunter (eingerückt) */
.bm-dropdown--accordion-below {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    /* Padding auf 0 wenn geschlossen — sonst nimmt es Platz ein */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: max-height 0.25s ease;
    z-index: auto;
}
.bm-nav[data-trigger="hover"] .bm-has-dropdown:hover > .bm-dropdown--accordion-below,
.bm-has-dropdown.bm-open > .bm-dropdown--accordion-below {
    pointer-events: auto;
    max-height: 800px;
    /* Padding wieder freigeben wenn offen — Bricks-Wert greift */
    padding-top: revert !important;
    padding-bottom: revert !important;
}
.bm-dropdown--accordion-below .bm-dropdown__inner {
    /* Kein Standard-Padding — steuerbar via Bricks Control "Akkordion Einrückung" */
}

/* Sub-Items rechts daneben */
.bm-dropdown--accordion-right {
    position: absolute;
    left: 100%;
    top: 0;
}

/* ── Active States ─────────────────────────────────────────────────── */
/*
 * Bricks-steuerbar via Selektoren:
 *   .bm-nav__item.bm-current > .bm-nav__link      → aktiver Top-Level-Link
 *   .bm-nav__item.bm-current-ancestor > .bm-nav__link → Ancestor des aktiven Items
 *   .bm-dropdown__item.bm-current > .bm-dropdown__link → aktiver Sub-Item-Link
 *   .bm-loop-item.bm-current > .bm-dropdown__link  → aktiver Loop-Item-Link
 */

/* ── Parent-Link im Dropdown (show_children) ───────────────────────── */
.bm-dropdown__parent-link {
    /* Visuell vom Rest abhebbar z.B. mit font-weight */
}

/* ── Child Loop-Items (verschachtelt im Parent-li) ──────────────────── */
.bm-loop-children {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: var(--bm-child-indent, 1em);
}
.bm-loop-children .bm-dropdown__link {
    display: block;
}

/* ── Flat Liste ────────────────────────────────────────────────────── */
.bm-nav__list--flat {
    flex-direction: column;
    align-items: stretch;
}
.bm-nav__list--flat .bm-nav__item {
    width: 100%;
}
.bm-nav__flat-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Multistep ─────────────────────────────────────────────────────── */

.bm-multistep {
    overflow: hidden;
    position: relative;
    /* Animationsdauer steuerbar per CSS-Variable */
    --bm-multistep-duration: 300;
}

.bm-multistep__viewport {
    position: relative;
    /* Höhe passt sich dem aktiven Panel an */
}

.bm-multistep__panel {
    min-width: 100%;
    display: none;
}

.bm-multistep__panel--active {
    display: block;
}

/* Back Button */
.bm-multistep__back {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    padding: 0;
    width: 100%;
    text-align: left;
}

/* Item + Arrow */
.bm-multistep__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bm-multistep__link {
    flex: 1;
}

.bm-multistep__arrow {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Inline Children im Multistep-Panel */
.bm-multistep__item--child {
    padding-left: var(--bm-child-indent, 1em);
}