/* WPBMS Frontend Styles */
:root {
  --wpbms-main-width: 80vw;
  --wpbms-sub-width: 80vw;
  --wpbms-sub-min: 160px; /* minimale Breite des Subpanels zur Sicherheit */
  /* Faktor, um die Sub-Breite pro Pixel unter 2340px zu reduzieren (kontinuierliche Verschiebung nach rechts) */
  --wpbms-sub-shift-factor: 0.25; /* px Reduktion je 1px unter 2340px */
  --wpbms-overlap-offset: 0px; /* zusätzlicher fixer Versatz nach rechts (nur <1900px aktiv) */
  --wpbms-bg: #111111;
  --wpbms-text: #ffffff;
  --wpbms-duration: 300ms;
  --wpbms-easing: ease;
  --wpbms-root-font-size: 16px;
  --wpbms-root-font-weight: 400;
  /* Wie viel vom Haupt-Level rechts sichtbar bleibt, wenn ein Untermenü reinfährt */
  --wpbms-overlap: 0px; /* große Screens: bündig rechts */
  /* Fallbacks für Haupt-/Sub-Panelfarben */
  --wpbms-bg-main: var(--wpbms-bg);
  --wpbms-bg-sub: var(--wpbms-bg);
}
/*
  HINWEIS ZU VARIABLEN
  -------------------------------------------------------------
  - Das Hauptmenü (Root) ist immer deckend und nutzt --wpbms-bg-main.
  - Das Untermenü (Sub) ist halbtransparent und nutzt standardmäßig
    --wpbms-bg-sub. Wenn JS eine pro-Item-Farbe berechnet, hat
    --wpbms-current-sub-bg Vorrang.
  - Die tatsächliche Alpha kommt aus JS (getSubAlpha) über die
    Variablen --wpbms-sub-alpha (Desktop) bzw. --wpbms-sub-alpha-mobile (Mobil)
    oder wird aus RGBA-Variablen gelesen. Niemals Mobile-Alpha auf Desktop
    verwenden (und umgekehrt) – siehe docs/ki-assistenten-anleitung.md.
*/

/* Ab <1900px: Overlap wächst stark mit kleiner werdender Breite, aber Sub bleibt mind. --wpbms-sub-min breit */
@media (max-width: 1899px) {
  :root {
    /* sehr stark: ~220px je 100px unter 1900px, gedeckelt durch Viewport minus Minimalbreite */
    --wpbms-overlap: clamp(0px, calc((1900px - 100vw) * 2.2), calc(100vw - var(--wpbms-sub-min)));
    /* ab hier zusätzlich fix 200px weiter nach rechts */
    --wpbms-overlap-offset: 200px;
  }
}

/* Zusätzliche Verstärkung unter 1536px */
@media (max-width: 1535px) {
  :root {
    --wpbms-overlap: clamp(0px, calc((1900px - 100vw) * 2.8), calc(100vw - var(--wpbms-sub-min)));
  }
}

/* Zusätzliche Verstärkung unter 1280px */
@media (max-width: 1279px) {
  :root {
    --wpbms-overlap: clamp(0px, calc((1900px - 100vw) * 3.6), calc(100vw - var(--wpbms-sub-min)));
  }
}

/* Zusätzliche Verstärkung unter 1024px */
@media (max-width: 1023px) {
  :root {
    --wpbms-overlap: clamp(0px, calc((1900px - 100vw) * 4.4), calc(100vw - var(--wpbms-sub-min)));
  }
}

/* Zusätzliche Verstärkung unter 782px (WP-Adminbar-Breakpoint) */
@media (max-width: 782px) {
  :root {
    --wpbms-overlap: clamp(0px, calc((1900px - 100vw) * 5.2), calc(100vw - var(--wpbms-sub-min)));
  }
}

/* Zusätzliche Verstärkung unter 640px */
@media (max-width: 639px) {
  :root {
    --wpbms-overlap: clamp(0px, calc((1900px - 100vw) * 6.0), calc(100vw - var(--wpbms-sub-min)));
  }
}

.wpbms-root { position: relative; --wpbms-z: 2147483000; --wpbms-logo-nudge-y: -50px; color: var(--wpbms-text); }
.wpbms-root, .wpbms-root * { box-sizing: border-box; }
/* Neutralisiere globale Button-Styles innerhalb des Widgets */
.wpbms-root button:not(.wp-element-button):not(.button):not(.wp-block-button__link):not(.btn) { box-shadow: none !important; outline: none; border: 0; background: none; }
.wpbms-root a, .wpbms-root .wpbms-link { box-shadow: none !important; border: 0 !important; border-bottom: 0 !important; text-decoration: none !important; background-image: none !important; }
/* Pseudo-Element-basierte Unterstreichungen von Themes neutralisieren */
.wpbms-root a::before, .wpbms-root a::after { content: none !important; display: none !important; }
/* Härtere Absicherung gegen Theme-Underlines */
.wpbms-root a,
.wpbms-root a:link,
.wpbms-root a:visited,
.wpbms-root a:hover,
.wpbms-root a:focus,
.wpbms-root a:active { text-decoration: none !important; text-decoration-color: transparent !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; background-image: none !important; }
.wpbms-search-toggle, .wpbms-close { color: #fff !important; opacity: 1; }

/* Steuerleiste für Burger + Suche */
.wpbms-controls { position: fixed; z-index: calc(var(--wpbms-z, 2147483000) + 20) !important; top: calc(var(--wpbms-adminbar-h, 0px) + 96px); right: 0; display: flex; align-items: center; gap: 1rem; pointer-events: auto; }
.wpbms-controls { flex-direction: row; justify-content: flex-start; }
.wpbms-burger { order: 0; }
.wpbms-search-toggle { order: 1; }
.wpbms-burger, .wpbms-search-toggle { position: static; background: transparent !important; border: 0; cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; line-height: 1; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.wpbms-burger:hover, .wpbms-burger:focus,
.wpbms-search-toggle:hover, .wpbms-search-toggle:focus { box-shadow: 0 3px 10px rgba(0,0,0,.26); }

@media (min-width: 783px) {
  .wpbms-controls {
    right: calc(max(0px, (100vw - var(--e-global-container-width, 1200px)) / 2) + 16px);
  }
}

@media (max-width: 782px) {
  .wpbms-controls { right: 0; top: calc(var(--wpbms-adminbar-h, 0px) + 12px); }
}
.wpbms-top-search { position: fixed; z-index: calc(var(--wpbms-z, 2147483000) + 2); top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: .6rem; background: rgba(255,255,255,.12); color: #fff; padding: .9rem 1rem; border-radius: 12px; box-shadow: none !important; align-items: center; width: min(90vw, 560px); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255,255,255,.25); }
.wpbms-top-search[hidden] { display: none !important; visibility: hidden !important; }
.wpbms-root [hidden] { display: none !important; visibility: hidden !important; }
.wpbms-top-search input[type="search"] { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff; padding: .6rem .8rem; border-radius: 8px; min-width: 260px; flex: 1; box-shadow: none !important; outline: none; }
.wpbms-top-search input[type="search"]::placeholder { color: rgba(255,255,255,.75); }
.wpbms-top-search input[type="search"]:focus { border-color: rgba(255,255,255,.5); }
.wpbms-top-search button:not(.wp-element-button):not(.button):not(.wp-block-button__link):not(.btn) { background: rgba(11,87,208,.9); color: #fff; border: 0; padding: .6rem .9rem; border-radius: 8px; cursor: pointer; backdrop-filter: saturate(140%); -webkit-backdrop-filter: saturate(140%); }
.wpbms-top-search button:not(.wp-element-button):not(.button):not(.wp-block-button__link):not(.btn):hover,
.wpbms-top-search button:not(.wp-element-button):not(.button):not(.wp-block-button__link):not(.btn):focus { background: rgba(11,87,208,1); }
.wpbms-top-search .wpbms-suggestions { position: absolute; top: calc(100% + .35rem); left: 0; right: 0; background: rgba(17,17,17,.72); color: #fff; width: 100%; border-radius: 10px; box-shadow: none !important; max-height: 50vh; overflow: auto; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255,255,255,.2); }

/* Icon-Größe der Lupe an Burger angleichen und sauber zentrieren */
.wpbms-search-toggle .wpbms-icon-search { width: 30px; height: 22px; display: block; }
.wpbms-top-search .wpbms-suggestions a { display: block; padding: .5rem .75rem; border-bottom: 0; }

.wpbms-search-toggle .wpbms-icon-search,
.wpbms-burger-box { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }

.wpbms-burger-box { width: 30px; height: 22px; display: inline-block; position: relative; }
.wpbms-burger-inner, .wpbms-burger-inner::before, .wpbms-burger-inner::after {
  width: 30px; height: 2px; background: currentColor; position: absolute; left: 0; transition: transform var(--wpbms-duration) var(--wpbms-easing), opacity var(--wpbms-duration) var(--wpbms-easing);
}
.wpbms-burger-inner { top: 50%; transform: translateY(-50%); }
.wpbms-burger-inner::before { content: ""; top: -8px; }
.wpbms-burger-inner::after { content: ""; top: 8px; }

/* Entferne dunklen Hintergrund vom Burger in allen Zuständen */
.wpbms-root:not(.wpbms-open) .wpbms-burger,
.wpbms-root.wpbms-open .wpbms-burger { padding: 0; }
.wpbms-burger:hover, .wpbms-burger:focus { background: transparent !important; box-shadow: 0 2px 6px rgba(0,0,0,.28) !important; }
.wpbms-search-toggle:hover, .wpbms-search-toggle:focus { background: transparent !important; box-shadow: 0 2px 6px rgba(0,0,0,.28) !important; }
.wpbms-burger .wpbms-burger-box { display: block; }

.wpbms-overlay { position: fixed; inset: 0; background: transparent !important; opacity: 0 !important; visibility: hidden !important; display: none !important; pointer-events: none !important; z-index: calc(var(--wpbms-z, 2147483000) - 1); }

.wpbms-panel { position: fixed; inset: 0; left: 0; right: 0; width: auto; height: 100vh; background: transparent; color: var(--wpbms-text); transform: translateX(100%); transition: transform var(--wpbms-duration) var(--wpbms-easing) !important; z-index: var(--wpbms-z); font-size: var(--wpbms-root-font-size); font-weight: var(--wpbms-root-font-weight); overflow: hidden; overflow-x: hidden; }
.wpbms-panel.open { transform: translateX(0); }
.wpbms-panel .wpbms-panel-inner { position: relative; height: 100%; overflow: visible; }

/* Logo über dem Menü, fixiert relativ zum Viewport (innerhalb der Panel-Logik) */
.wpbms-logo { position: fixed; left: calc(100vw - var(--wpbms-main-width) + var(--wpbms-root-offset-left, 16px) + var(--wpbms-logo-offset-left, 0px)); top: calc(var(--wpbms-adminbar-h, 0px) + var(--wpbms-root-offset-top, 0px) + var(--wpbms-logo-gap-top, 0px) + var(--wpbms-logo-nudge-y, 0px)); width: auto; margin: 0; z-index: 2147483646; pointer-events: none; }
.wpbms-root:not(.wpbms-open) .wpbms-logo { display: none !important; }
.wpbms-logo img { width: var(--wpbms-logo-w, 0px); height: auto; display: block; pointer-events: auto; }
.wpbms-logo:empty { display: none !important; }

/* Panel-interner Close-Button ausblenden, da der Burger als Close dient */
.wpbms-close { display: none !important; }

.wpbms-search { display: flex; gap: .5rem; padding: 1rem; border-bottom: 0; }
.wpbms-search input[type="search"] { flex:1; background: rgba(255,255,255,.1); color: var(--wpbms-text); border: 0; padding: .5rem .75rem; border-radius: 4px; }
.wpbms-search button { background: rgba(255,255,255,.2); color: var(--wpbms-text); border: 0; padding: .5rem .75rem; border-radius: 4px; cursor:pointer; }
.wpbms-suggestions { position: absolute; background: #fff; color: #000; width: calc(var(--wpbms-main-width) - 2rem); max-width: calc(100% - 2rem); margin-left: 1rem; margin-top: 3rem; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.2); max-height: 50vh; overflow: auto; }
.wpbms-suggestions a { display: block; padding: .5rem .75rem; border-bottom: 0; }

.wpbms-nav { position: absolute; inset: 0; display: grid; grid-template-columns: 100%; grid-template-rows: auto 1fr; overflow: visible; }
.wpbms-level { position: absolute; inset: 0; list-style: none; margin: 0; padding: var(--wpbms-root-offset-top, 6px) 0 var(--wpbms-root-offset-bottom, 1rem) var(--wpbms-root-offset-left, 16px); width: auto; transform: translateX(0); transition: transform var(--wpbms-duration) var(--wpbms-easing) !important; overflow: auto; overflow-x: hidden; background: transparent; }
.wpbms-level[data-level="root"] { position: fixed !important; inset: 0 0 0 auto !important; left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: var(--wpbms-main-width, 50vw) !important; max-width: none !important; z-index: 2147483000; background: var(--wpbms-bg-main) !important; padding: calc(var(--wpbms-root-offset-top, 6px) + var(--wpbms-adminbar-h, 0px) + var(--wpbms-logo-gap-top, 0px) + var(--wpbms-logo-h, 0px) + var(--wpbms-logo-gap-bottom, 0px)) 0 var(--wpbms-root-offset-bottom, 1rem) var(--wpbms-root-offset-left, 16px) !important; }
/* Sublevel-ULs innerhalb des Root-Menüs unsichtbar, aber layout-relevant lassen (für saubere Transition) */
.wpbms-root .wpbms-nav > .wpbms-level[data-level="root"] > li > ul.wpbms-level:not(.is-open):not(.is-closing) { visibility: hidden !important; pointer-events: none !important; }
/*
  SUB-PANEL (Untermenü)
  -------------------------------------------------------------
  - Positioniert fixed rechts, fährt von rechts ein.
  - Breite: 100vw minus (Overlap + Overlap-Offset). Overlap bestimmt, wie
    viel Root links sichtbar bleibt.
  - Hintergrund: var(--wpbms-current-sub-bg, var(--wpbms-bg-sub)).
    JS setzt --wpbms-current-sub-bg als RGBA mit richtiger Alpha
    (Desktop vs. Mobil). Dadurch bleibt die Transparenz zuverlässig,
    selbst wenn --wpbms-bg-sub nur eine Hex-Farbe ist.
*/
.wpbms-level[data-level^="level-"] { position: fixed !important; inset: 0 0 0 auto !important; left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important; /* Desktop-Breite: wenn vorhanden, strikt --wpbms-sub-width nutzen; unter 2340px dynamisch reduzieren */ width: calc(
    var(--wpbms-sub-width, calc(100vw - (var(--wpbms-overlap, 0px) + var(--wpbms-overlap-offset, 0px))))
    - calc(max(0px, (2340px - 100vw)) * var(--wpbms-sub-shift-factor, 0.25))
  ) !important; min-width: var(--wpbms-sub-min, 160px) !important; max-width: 100vw !important; background: var(--wpbms-current-sub-bg, var(--wpbms-bg-sub)) !important; box-shadow: none; border-left: none; will-change: transform; z-index: 2147483001; transform: translateX(100%); transition: transform var(--wpbms-duration) var(--wpbms-easing) !important; padding: calc(var(--wpbms-sub-offset-top, 6px) + var(--wpbms-adminbar-h, 0px) + var(--wpbms-logo-gap-top, 0px) + var(--wpbms-logo-h, 0px) + var(--wpbms-logo-gap-bottom, 0px)) 0 var(--wpbms-sub-offset-bottom, 1rem) var(--wpbms-sub-offset-left, 16px) !important; visibility: hidden !important; pointer-events: none !important; }
.wpbms-root .wpbms-level[data-level^="level-"] { transition: transform var(--wpbms-duration) var(--wpbms-easing) !important; }
/* Noch höhere Spezifität gegen Theme-Overrides */
.wpbms-root .wpbms-level[data-level="root"] { background: var(--wpbms-bg-main) !important; }
.wpbms-root .wpbms-level[data-level^="level-"] { background: var(--wpbms-current-sub-bg, var(--wpbms-bg-sub)) !important; }
.wpbms-level[data-level^="level-"].is-open { transform: translateX(0); visibility: visible !important; pointer-events: auto !important; }
/* Rückwärts-Animation: sichtbar bleiben bis Transition-Ende */
.wpbms-level[data-level^="level-"].is-closing { transform: translateX(100%); visibility: visible !important; pointer-events: none !important; }

.wpbms-item { margin: 0; }
.wpbms-link-wrap { display: flex; align-items: center; gap: .75rem; padding: var(--wpbms-item-space-y, .5rem) 1rem; }
/* Sub-Level noch etwas enger */
.wpbms-level[data-level^="level-"] .wpbms-link-wrap { padding: 6px 1rem; }
/* Root-Level ebenfalls enger */
.wpbms-level[data-level="root"] .wpbms-link-wrap { padding: 6px 1rem; }
.wpbms-colorbox { width: 8px; height: 24px; flex: 0 0 8px; background: rgba(255,255,255,.5); border-radius: 0; }
/* Colorbox im Submenü ausblenden */
.wpbms-level[data-level^="level-"] .wpbms-colorbox { display: none !important; }
/* Root: KEIN Platzhalter. Nur .has-colorbox zeigt die Colorbox */
.wpbms-level[data-level="root"] > .wpbms-item > .wpbms-link-wrap > .wpbms-colorbox { display: none !important; visibility: hidden; }
.wpbms-level[data-level="root"] > .wpbms-item.has-colorbox > .wpbms-link-wrap > .wpbms-colorbox { display: block !important; visibility: visible; }
.wpbms-link { appearance: none; background: none; border: none; color: inherit; text-decoration: none !important; font: inherit; cursor: pointer; }
.wpbms-link:hover, .wpbms-link:focus, .wpbms-link:active { text-decoration: none !important; }

/* Submenu Typography (zentral) */
.wpbms-level[data-level^="level-"] .wpbms-link { font-size: var(--wpbms-sub-font-size, var(--wpbms-root-font-size)); font-weight: var(--wpbms-sub-font-weight, var(--wpbms-root-font-weight)); color: var(--wpbms-sub-text, var(--wpbms-text)); }

/* Standardfarben für die Colorboxen im Root-Level (Reihenfolge wie Beispielbild) */
.wpbms-level[data-level="root"] > .wpbms-item:nth-of-type(1)  > .wpbms-link-wrap > .wpbms-colorbox,
.wpbms-level[data-level="root"] > .wpbms-item:nth-of-type(2)  > .wpbms-link-wrap > .wpbms-colorbox,
.wpbms-level[data-level="root"] > .wpbms-item:nth-of-type(3)  > .wpbms-link-wrap > .wpbms-colorbox,
.wpbms-level[data-level="root"] > .wpbms-item:nth-of-type(4)  > .wpbms-link-wrap > .wpbms-colorbox { background: #8aa7d6; }
.wpbms-level[data-level="root"] > .wpbms-item:nth-of-type(5)  > .wpbms-link-wrap > .wpbms-colorbox { background: #f0b400; }
.wpbms-level[data-level="root"] > .wpbms-item:nth-of-type(6)  > .wpbms-link-wrap > .wpbms-colorbox { background: #e573a7; }
.wpbms-level[data-level="root"] > .wpbms-item:nth-of-type(7)  > .wpbms-link-wrap > .wpbms-colorbox { background: #6dbb5a; }
.wpbms-level[data-level="root"] > .wpbms-item:nth-of-type(8)  > .wpbms-link-wrap > .wpbms-colorbox { background: #e2603a; }
.wpbms-level[data-level="root"] > .wpbms-item:nth-of-type(9)  > .wpbms-link-wrap > .wpbms-colorbox { background: #1fbed1; }

/* Aktiver Hauptmenüpunkt: Colorbox unsichtbar, Platz bleibt erhalten */
.wpbms-level[data-level="root"] > .wpbms-item.is-active > .wpbms-link-wrap > .wpbms-colorbox { visibility: hidden !important; }
.wpbms-level[data-level="root"] > .wpbms-item.is-active > .wpbms-link-wrap > .wpbms-link { font-weight: 700; }

/* Root-Leaf-Items (ohne Unterpunkte): immer leichter (300), egal ob aktiv oder nicht) */
.wpbms-level[data-level="root"] > .wpbms-item:not(.has-colorbox) > .wpbms-link-wrap > .wpbms-link { font-weight: 300 !important; }
.wpbms-level[data-level="root"] > .wpbms-item:not(.has-colorbox).is-active > .wpbms-link-wrap > .wpbms-link { font-weight: 300 !important; }

/* Root-Leaf-Items: Schriftgröße erhöhen (Standard: 1.4 × Root-Größe) */
.wpbms-level[data-level="root"] > .wpbms-item:not(.has-colorbox) > .wpbms-link-wrap {
  font-size: var(--wpbms-root-leaf-font-size, calc(var(--wpbms-root-font-size) * 1.4)) !important;
}
.wpbms-level[data-level="root"] > .wpbms-item:not(.has-colorbox) > .wpbms-link-wrap > .wpbms-link {
  font-size: var(--wpbms-root-leaf-font-size, calc(var(--wpbms-root-font-size) * 1.4)) !important;
}

/* Erzwinge weiße Schrift im Menü (gegen Theme-Overrides) */
.wpbms-root a,
.wpbms-root .wpbms-link,
.wpbms-root .wpbms-back-btn,
.wpbms-root button:not(.wp-element-button):not(.button):not(.wp-block-button__link):not(.btn) { color: var(--wpbms-text) !important; }

/* Per-Item-Schriftfarbe respektieren, wenn inline auf dem Wrapper gesetzt */
.wpbms-level[data-level="root"] > .wpbms-item > .wpbms-link-wrap[style*="color:"] > .wpbms-link {
  color: inherit !important;
}

/* Hauptmenü-Items mit Colorbox: alle Buchstaben groß */
.wpbms-level[data-level="root"] .wpbms-item.has-colorbox .wpbms-link { text-transform: uppercase; }

/* Aktives Hauptmenü-Item: Fett, Farbe nur bei Hover/Focus auf Kastenfarbe */
.wpbms-level[data-level="root"] .wpbms-item.is-active .wpbms-link { font-weight: 700; }
.wpbms-level[data-level="root"] .wpbms-item.is-active > .wpbms-link-wrap:hover > .wpbms-link,
.wpbms-level[data-level="root"] .wpbms-item.is-active > .wpbms-link-wrap:focus-within > .wpbms-link { color: var(--wpbms-active-color, var(--wpbms-text)) !important; }

/* Untermenüs: nicht in Großbuchstaben, zentrale Sub-Typografie verwenden */
.wpbms-level[data-level^="level-"] { color: var(--wpbms-sub-text, var(--wpbms-text)) !important; }
.wpbms-root .wpbms-level[data-level^="level-"] { text-transform: none !important; }
.wpbms-level[data-level^="level-"] .wpbms-link,
.wpbms-level[data-level^="level-"] .wpbms-link:link,
.wpbms-level[data-level^="level-"] .wpbms-link:visited {
  text-transform: none !important;
  font-size: var(--wpbms-sub-font-size, var(--wpbms-root-font-size));
  font-weight: var(--wpbms-sub-font-weight, 400) !important;
  color: var(--wpbms-sub-text, var(--wpbms-text)) !important;
  opacity: 1 !important;
}
/* Noch höhere Spezifität gegen Theme-Regeln */
.wpbms-root .wpbms-level[data-level^="level-"] li > .wpbms-link-wrap > a.wpbms-link,
.wpbms-root .wpbms-level[data-level^="level-"] li > .wpbms-link-wrap > button.wpbms-link { text-transform: none !important; font-weight: var(--wpbms-sub-font-weight, 400) !important; font-size: var(--wpbms-sub-font-size, var(--wpbms-root-font-size)) !important; }
/* Erhöhe Spezifität nochmals und vererbe Farbe an Kinder */
.wpbms-root .wpbms-level[data-level^="level-"] a.wpbms-link,
.wpbms-root .wpbms-level[data-level^="level-"] a.wpbms-link:link,
.wpbms-root .wpbms-level[data-level^="level-"] a.wpbms-link:visited { color: var(--wpbms-sub-text, #ffffff) !important; }
.wpbms-root .wpbms-level[data-level^="level-"] * { color: inherit; text-transform: none !important; font-weight: inherit; }

/* Ultimative Absicherung gegen Unterstreichungen aller Art innerhalb des Widgets */
.wpbms-root .wpbms-level[data-level] li > a.wpbms-link,
.wpbms-root .wpbms-level[data-level] li > a.wpbms-link:hover,
.wpbms-root .wpbms-level[data-level] li > a.wpbms-link:focus,
.wpbms-root .wpbms-level[data-level] li > a.wpbms-link:active,
.wpbms-root .wpbms-level[data-level="root"] li > a.wpbms-link,
.wpbms-root .wpbms-level[data-level^="level-"] li > a.wpbms-link { text-decoration: none !important; text-decoration-line: none !important; text-decoration-color: transparent !important; text-decoration-style: solid !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; background-image: none !important; }

/* Container-ebene – verhindere vererbte Dekorationen */
.wpbms-root .wpbms-link-wrap,
.wpbms-root .wpbms-link-wrap:hover,
.wpbms-root .wpbms-link-wrap:focus,
.wpbms-root .wpbms-link-wrap * { text-decoration: none !important; }

.wpbms-back { margin-bottom: .25rem; }
/* Back-Button: gleiche Größe, Typografie und Innenabstände wie Sublevel-Menüpunkte */
.wpbms-back-btn {
  background: none;
  border: none;
  color: var(--wpbms-text);
  font: inherit;
  cursor: pointer;
  padding: 6px 1rem; /* wie .wpbms-level[data-level^="level-"] .wpbms-link-wrap */
  display: flex; /* volle Breite nutzen */
  align-items: center;
  gap: .35rem;
  width: 100%;
  font-size: var(--wpbms-sub-font-size, var(--wpbms-root-font-size));
  font-weight: var(--wpbms-sub-font-weight, var(--wpbms-root-font-weight));
  line-height: 1.4;
}
.wpbms-back-btn .wpbms-back-icon::before { content: "<"; font-weight: 400; display: inline-block; width: 1em; text-align: center; line-height: 1; }

/* Open state */
.wpbms-open .wpbms-overlay, .wpbms-search-open .wpbms-overlay { background: transparent !important; opacity: 1 !important; visibility: visible !important; display: block !important; pointer-events: auto !important; }
.wpbms-open .wpbms-burger-inner { transform: rotate(45deg); }
.wpbms-open .wpbms-burger-inner::before { transform: translateY(8px) rotate(90deg); }
.wpbms-open .wpbms-burger-inner::after { opacity: 0; }

/* Colorbox mode: only active/hover shows color */
[data-colorbox-mode="active"] .wpbms-colorbox { background: transparent !important; border: 0; }
[data-colorbox-mode="active"] .wpbms-item.is-active > .wpbms-link-wrap .wpbms-colorbox,
[data-colorbox-mode="active"] .wpbms-item > .wpbms-link-wrap:hover .wpbms-colorbox,
[data-colorbox-mode="active"] .wpbms-item > .wpbms-link-wrap:focus-within .wpbms-colorbox { background: currentColor !important; border-color: transparent; }

/* Scroll lock: Seite ohne Body-Fixierung sperren, um Header-Verschiebungen zu vermeiden */
body.wpbms-lock { overflow: hidden; overflow-x: hidden; touch-action: none; }
html.wpbms-lock { overflow: hidden; }

/* Entfernt: Keine globalen Overrides für Elementor-Sticky während Menü offen ist, um Header-Verschiebungen zu vermeiden */

/* Responsive tweaks */
@media (min-width: 783px) {
  .wpbms-controls { gap: 1rem; }
  .wpbms-top-search { top: 50% !important; left: 50% !important; right: auto !important; transform: translate(-50%, -50%) !important; }
}

/* Adminbar-Höhe als Variable (Desktop ~32px, Mobile ~46px) */
body.admin-bar { --wpbms-adminbar-h: 32px; }
@media (max-width: 782px) { body.admin-bar { --wpbms-adminbar-h: 46px; } }

/* Mobile: 100% Breite/Deckkraft per mobilen Variablen erzwingen (mit Fallbacks) */
@media (max-width: 782px) {
  /*
    MOBILE-HINWEIS
    -----------------------------------------------------------
    - Mobile nutzt eigene Hintergrund-/Alpha-Variablen
      (--wpbms-bg-sub-mobile, --wpbms-sub-alpha-mobile).
    - Keine Selbstreferenzen: hier werden mobile Variablen direkt
      durchgereicht, damit Computed Styles klar sind.
    - JS liest auf Mobil ausschließlich die mobilen Alpha-/RGBA-
      Variablen, auf Desktop ausschließlich die Desktop-Variablen.
  */
  /* Hintergründe mobil direkt überschreiben, ohne Variablen-Selbstreferenz */
  .wpbms-level[data-level="root"] { background: var(--wpbms-bg-main-mobile, var(--wpbms-bg-main)) !important; }
  .wpbms-root .wpbms-level[data-level="root"] { background: var(--wpbms-bg-main-mobile, var(--wpbms-bg-main)) !important; }
  .wpbms-level[data-level^="level-"] { background: var(--wpbms-current-sub-bg, var(--wpbms-bg-sub-mobile, var(--wpbms-bg-sub))) !important; }
  .wpbms-root .wpbms-level[data-level^="level-"] { background: var(--wpbms-current-sub-bg, var(--wpbms-bg-sub-mobile, var(--wpbms-bg-sub))) !important; }
  /* Mobile: Suchfeld oben, volle Breite nah an den Rändern, ohne Überstand */
  .wpbms-top-search {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    max-width: calc(100vw - 24px) !important;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: .5rem;
    padding: .65rem .75rem;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
  }
  .wpbms-top-search input[type="search"] {
    min-width: 0; /* verhindert Overflow in Grid/Flex */
    height: 44px;
    min-height: 44px;
    border-radius: 8px;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
  }
  /* Größe des Buttons angleichen ohne Theme-Farben zu überschreiben */
  .wpbms-top-search .wp-element-button,
  .wpbms-top-search .button,
  .wpbms-top-search .wp-block-button__link,
  .wpbms-top-search .btn {
    min-height: 44px;
    padding: .6rem .9rem;
    border-radius: 8px;
    margin: 0 !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    min-width: 64px;
  }
  .wpbms-top-search button:not(.wp-element-button):not(.button):not(.wp-block-button__link):not(.btn) {
    min-height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    min-width: 64px;
  }
  /* Typografie (mobil) direkt anwenden (ohne selbstreferenzierende Variablen) */
  .wpbms-panel { font-size: var(--wpbms-root-font-size-mobile, var(--wpbms-root-font-size)) !important; }
  .wpbms-level[data-level^="level-"] .wpbms-link {
    font-size: var(--wpbms-sub-font-size-mobile, var(--wpbms-sub-font-size, var(--wpbms-root-font-size-mobile, var(--wpbms-root-font-size)))) !important;
  }
  /* Mobile: gleiche (hohe) Spezifität wie Desktop-Regel, damit Mobile gewinnt */
  .wpbms-root .wpbms-level[data-level^="level-"] li > .wpbms-link-wrap > a.wpbms-link,
  .wpbms-root .wpbms-level[data-level^="level-"] li > .wpbms-link-wrap > button.wpbms-link {
    font-size: var(--wpbms-sub-font-size-mobile, var(--wpbms-sub-font-size, var(--wpbms-root-font-size-mobile, var(--wpbms-root-font-size)))) !important;
  }
  /* Per-Item Inline-Styles (font-size auf .wpbms-link-wrap) im Mobilfall übersteuern */
  .wpbms-level[data-level="root"] .wpbms-link-wrap {
    font-size: var(--wpbms-root-font-size-mobile, var(--wpbms-root-font-size)) !important;
  }
  .wpbms-level[data-level^="level-"] .wpbms-link-wrap {
    font-size: var(--wpbms-sub-font-size-mobile, var(--wpbms-sub-font-size, var(--wpbms-root-font-size-mobile, var(--wpbms-root-font-size)))) !important;
  }
  /* Offsets (mobil) direkt auf Panels anwenden */
  .wpbms-level[data-level="root"] {
    padding: calc(var(--wpbms-root-offset-top-mobile, var(--wpbms-root-offset-top, 6px)) + var(--wpbms-adminbar-h, 0px) + var(--wpbms-logo-gap-top-mobile, var(--wpbms-logo-gap-top, 0px)) + var(--wpbms-logo-h-mobile, var(--wpbms-logo-h, 0px)) + var(--wpbms-logo-gap-bottom-mobile, var(--wpbms-logo-gap-bottom, 0px))) 0 var(--wpbms-root-offset-bottom, 1rem) var(--wpbms-root-offset-left-mobile, var(--wpbms-root-offset-left, 16px)) !important;
  }
  .wpbms-level[data-level^="level-"] {
    padding: calc(var(--wpbms-sub-offset-top-mobile, var(--wpbms-sub-offset-top, 6px)) + var(--wpbms-adminbar-h, 0px) + var(--wpbms-logo-gap-top-mobile, var(--wpbms-logo-gap-top, 0px)) + var(--wpbms-logo-h-mobile, var(--wpbms-logo-h, 0px)) + var(--wpbms-logo-gap-bottom-mobile, var(--wpbms-logo-gap-bottom, 0px))) 0 var(--wpbms-sub-offset-bottom, 1rem) var(--wpbms-sub-offset-left-mobile, var(--wpbms-sub-offset-left, 16px)) !important;
  }
  /* Logo: mobil linke Position relativ zur mobilen Panelbreite */
  .wpbms-logo { left: calc(100vw - var(--wpbms-main-width-mobile, var(--wpbms-main-width)) + var(--wpbms-root-offset-left-mobile, var(--wpbms-root-offset-left, 16px)) + var(--wpbms-logo-offset-left-mobile, var(--wpbms-logo-offset-left, 0px))); width: auto; top: calc(var(--wpbms-adminbar-h, 0px) + var(--wpbms-root-offset-top-mobile, var(--wpbms-root-offset-top, 0px)) + var(--wpbms-logo-gap-top-mobile, var(--wpbms-logo-gap-top, 0px)) + var(--wpbms-logo-nudge-y, 0px)); }
  /* Logo-Breite (mobil) */
  .wpbms-logo img { width: var(--wpbms-logo-w-mobile, var(--wpbms-logo-w, 0px)); }
  /* Logo height */
  .wpbms-logo { height: var(--wpbms-logo-h-mobile, var(--wpbms-logo-h, 40px)); }
  /* Panels: setze die effektive Breite direkt nach mobilen Variablen */
  .wpbms-level[data-level="root"] { width: var(--wpbms-main-width-mobile, var(--wpbms-main-width)) !important; }
  .wpbms-level[data-level^="level-"] { width: var(--wpbms-sub-width-mobile, var(--wpbms-sub-width, var(--wpbms-main-width))) !important; }
  /* Controls folgen der Shortcode-Position (keine zusätzlichen Offsets nötig) */
  /* Adminbar-Kompensation erfolgt jetzt über --wpbms-adminbar-h direkt in den Padding-Werten */
}

/* === Mobile Quickbar: 4 Buttons am unteren Rand des Slideout-Panels === */
.wpbms-quickbar {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 8px 12px;
  /* Safari-/Browser-Toolbar + iPhone Home-Indikator: 109px Basis + safe-area-inset-bottom */
  padding-bottom: calc(109px + env(safe-area-inset-bottom, 0px));
  background: transparent !important;
  border-top: 0 !important;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: var(--wpbms-main-width-mobile, var(--wpbms-main-width, 100vw));
  z-index: 2147483002;
  pointer-events: auto;
}

.wpbms-quickbar-btn {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--wpbms-text, #fff) !important;
  padding: 10px 4px;
  border-radius: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  line-height: 1.2;
  transition: background .15s ease;
}

.wpbms-quickbar-btn:hover,
.wpbms-quickbar-btn:focus {
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Quickbar nur im geöffneten Zustand sichtbar */
.wpbms-root:not(.wpbms-open) .wpbms-quickbar {
  display: none !important;
}

/* Quickbar nur auf Mobile (≤782px) */
@media (min-width: 783px) {
  .wpbms-quickbar {
    display: none !important;
  }
}

/* Mobile: Menü-Inhalt scrollt oberhalb der Quickbar, Hintergrund bleibt unten bündig */
@media (max-width: 782px) {
  .wpbms-nav {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Der Root-Level behält bottom:0, damit die blaue Hintergrundfläche nicht abschneidet.
     Der scrollbare Inhalt endet durch padding-bottom oberhalb der Quickbar (150px + safe-area). */
  .wpbms-level[data-level="root"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
}