/*
 * Bennows Advanced Menu
 *
 * Zwei Regeln durchziehen diese Datei:
 *
 * 1. Alle Vorgaben stehen in :where(), haben also Spezifität 0. Dadurch gewinnt
 *    jede von Elementor erzeugte .elementor-element-xyz-Regel automatisch, und
 *    es kommt kein einziges !important vor.
 *
 *    AUSNAHME — die Knopf-Ebene. Auf einer echten Installation gemessen:
 *
 *      body.fremd-a.fremd-b button:not(.pale)   →  0,3,2   (fremdes Plugin)
 *      :where(.bnws-menu__toggle)               →  0,0,0   (unsere Vorgabe)
 *
 *    Fast jede Seite formatiert `button`. Mit Spezifität 0 werden unsere vier
 *    Knöpfe (Auslöser, Aufklappen, Schliessen, Zurück) deshalb zu Seitenknöpfen
 *    umgemalt — gemessen als grüne Kästen statt Pfeilen. Diese vier stehen
 *    darum bei **0,4,0**, geschrieben als dreifach wiederholte Klasse.
 *
 *    Warum genau 4, nicht mehr und nicht weniger:
 *      - über 0,3,2, damit fremdes button-CSS verliert;
 *      - nicht über {{WRAPPER}} .bnws-menu__x (Elementor löst {{WRAPPER}} zu
 *        drei Klassen auf, macht mit unserer eine also ebenfalls 0,4,0).
 *
 *    Zwei Arten von Eigenschaften bleiben trotzdem unten in :where():
 *      - `border`, weil eine Gruppen-Steuerung (trigger_border) es direkt als
 *        Eigenschaft schreibt und sonst überstimmt würde;
 *      - `display`, weil darüber der Modus und der Druck entscheiden
 *        (.bnws-menu[data-bnws-panel="…"] > .bnws-menu__trigger, 0,3,0).
 *    Beide fasst fremdes button-CSS gemessen ohnehin nicht an. Als Regel beim
 *    Erweitern: **was eine Gruppen-Steuerung oder eine Zustandsregel direkt als
 *    Eigenschaft setzt, bleibt in :where()**. Alles andere an den Knöpfen läuft
 *    über Custom Properties — und die kämpfen nicht um Spezifität, sondern
 *    werden vererbt. Deshalb bleiben alle Style-Controls trotz der höheren
 *    Ebene voll wirksam.
 *
 *    Bei den Links gilt das anders, und die Unterscheidung ist wichtig:
 *
 *      SCHRIFT erbt weiter (`font: inherit`, Spezifität 0). Eine Navigation
 *      soll die Schrift der Seite übernehmen; ohne fremdes CSS stünde dort
 *      Times in Schwarz.
 *
 *      FARBE UND FLÄCHE nicht. Gemessen auf einer Elementor-Seite:
 *
 *        .elementor-kit-5 a                    →  0,2,0   (Kit, jede Seite)
 *        dd,dl,dt,li,ol,ul{background:…}       →  0,0,1   (Theme-Reset)
 *        :where(.bnws-menu__link)              →  0,0,0   (unsere Vorgabe)
 *
 *      Jedes Elementor-Kit färbt `a` ein. Mit Spezifität 0 waren damit die
 *      Farbregler dieses Widgets auf **jeder** Elementor-Seite wirkungslos —
 *      man konnte die Schriftfarbe des Menüs schlicht nicht einstellen.
 *
 *    Die sieben Farb- und Flächenregeln tragen deshalb den Präfix
 *    `.bnws-menu.bnws-menu.bnws-menu` — einen **konstanten** Zuschlag von
 *    0,3,0 für alle sieben. Konstant ist der Punkt: untereinander entscheidet
 *    weiterhin allein die Reihenfolge im Dokument, genau wie vorher bei
 *    Spezifität 0. Wer eine Regel dazunimmt, muss denselben Präfix setzen,
 *    sonst fällt sie aus der Reihe.
 *
 *    Preis dieser Entscheidung, offen benannt: Ein `a { color: … }` der Seite
 *    färbt das Menü nicht mehr mit. Ohne eigene Einstellung greift stattdessen
 *    Elementors **globale Textfarbe** — das Farb-Control ist über
 *    `global => COLOR_TEXT` daran gebunden, und Elementor gibt diesen
 *    Vorgabewert immer aus. Das Menü hängt also weiterhin am Farbsystem der
 *    Seite, nur nicht mehr an deren Verweisfarbe. Für eine Navigation ist das
 *    richtig: sie ist Bedienelement, kein Fließtext — und sie bringt eigene
 *    Farbregler mit, die sonst nichts bewirken könnten.
 *
 * 2. Es gibt keine einzige Media Query mit fester Pixelzahl. Welcher Modus
 *    gilt, entscheidet das Skript anhand der echten Breakpoints des Kits und
 *    schreibt das Ergebnis in data-bnws-mode und die drei abgeleiteten
 *    Attribute. Das CSS reagiert nur darauf.
 *
 * Abstände und Positionen sind durchgehend logisch (inline/block) formuliert.
 * Rechtsläufige Sprachen brauchen deshalb keine gespiegelte zweite Fassung,
 * sondern nur die Richtungsvariable --bnws-dir am Ende der Datei.
 */

.bnws-menu {
	/* Ebenen. Bewusst niedrig gehalten: Elementors Sticky-Header liegen bei 99,
	   Pro-Popups bei 9999, die WordPress-Werkzeugleiste bei 99999. */
	--bnws-z-submenu: 100;
	--bnws-z-mega: 200;
	--bnws-z-portal: 900;
	--bnws-z-overlay: 9998;
	--bnws-z-panel: 9999;

	--bnws-dir: 1;

	--bnws-menu-duration: 220ms;
	--bnws-menu-delay: 0ms;
	--bnws-menu-easing: cubic-bezier(0.2, 0, 0.2, 1);

	--bnws-menu-justify: flex-start;
	--bnws-menu-wrap: nowrap;
	--bnws-menu-gap: 0px;
	--bnws-menu-row-gap: 0px;
	--bnws-menu-item-grow: 0;

	--bnws-menu-link-color: inherit;
	--bnws-menu-link-color-hover: var(--bnws-menu-link-color);
	--bnws-menu-link-color-active: var(--bnws-menu-link-color-hover);
	--bnws-menu-link-bg: transparent;
	--bnws-menu-link-bg-hover: var(--bnws-menu-link-bg);
	--bnws-menu-link-bg-active: var(--bnws-menu-link-bg-hover);
	--bnws-menu-link-padding-block: 0.6em;
	--bnws-menu-link-padding-inline: 0.9em;
	--bnws-menu-link-radius: 0px;

	--bnws-menu-pointer-color: currentColor;
	--bnws-menu-pointer-size: 2px;
	--bnws-menu-pointer-offset: 0px;

	--bnws-sub-bg: #fff;
	--bnws-sub-width: 220px;
	--bnws-sub-offset: 8px;
	--bnws-sub-padding: 0.4em;
	--bnws-sub-radius: 0px;
	/* Die Rundung der einzelnen Zeile, nicht die des Kastens. Sie hat einen
	   eigenen Wert, weil beide selten zusammenpassen: eine ungerundete Zeile in
	   einem stark gerundeten Kasten stößt in den Ecken an. */
	--bnws-sub-link-radius: 0px;
	--bnws-sub-link-color: inherit;
	--bnws-sub-link-color-hover: var(--bnws-sub-link-color);
	--bnws-sub-link-color-active: var(--bnws-sub-link-color-hover);
	--bnws-sub-link-bg: transparent;
	--bnws-sub-link-bg-hover: var(--bnws-sub-link-bg);
	--bnws-sub-link-bg-active: var(--bnws-sub-link-bg-hover);
	--bnws-sub-link-padding-block: 0.5em;
	--bnws-sub-link-padding-inline: 0.8em;
	--bnws-sub-divider-color: rgba(0, 0, 0, 0.1);
	--bnws-sub-divider-width: 1px;

	--bnws-arrow-color: currentColor;
	--bnws-arrow-size: 0.7em;
	--bnws-arrow-gap: 0.4em;

	--bnws-mega-offset: 0px;
	--bnws-mega-padding: 0px;
	--bnws-mega-radius: 0px;
	--bnws-mega-custom-width: 600px;
	--bnws-mega-max-height: none;
	--bnws-mega-left: 0px;
	--bnws-viewport-width: 100%;

	--bnws-trigger-size: 24px;
	--bnws-trigger-bar: 2px;
	--bnws-trigger-gap: 0.5em;
	--bnws-trigger-color: inherit;
	--bnws-trigger-color-hover: var(--bnws-trigger-color);
	--bnws-trigger-bg: transparent;
	--bnws-trigger-bg-hover: var(--bnws-trigger-bg);
	--bnws-trigger-padding: 0.4em;
	--bnws-trigger-radius: 0px;

	--bnws-panel-width: min(360px, 85vw);
	--bnws-panel-padding: 1.5em;
	--bnws-panel-item-gap: 0px;

	--bnws-close-color: inherit;
	--bnws-close-color-hover: var(--bnws-close-color);
	--bnws-close-size: 24px;

	--bnws-search-bg: transparent;
	--bnws-search-color: inherit;
	--bnws-search-placeholder-color: inherit;
	--bnws-search-icon-color: inherit;
	--bnws-search-radius: 0px;
	--bnws-search-padding-block: 0.5em;
	--bnws-search-padding-inline: 0.75em;
	--bnws-search-gap: 1em;

	--bnws-overlay-color: rgba(0, 0, 0, 0.5);
	--bnws-overlay-blur: 0px;

	/* `--bnws-admin-bar` steht hier mit Absicht NICHT.
	 *
	 * Die Höhe der Werkzeugleiste misst bnws-menu-core.js und schreibt sie an
	 * das Dokument. Von dort erbt sie bis hierher. Stünde in diesem Block ein
	 * Vorgabewert, würde er den geerbten verdecken — eine eigene Deklaration
	 * am Element schlägt jede Vererbung, unabhängig von der Spezifität. Der
	 * gemessene Wert käme nie an, und zwar lautlos.
	 *
	 * Der Ausweichwert steht deshalb an jeder Verwendungsstelle:
	 * `var(--bnws-admin-bar, 0px)`. */
}

:where(.bnws-menu) {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--bnws-trigger-gap);
}

:where(.bnws-menu ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.bnws-menu__item) {
	position: relative;
	margin: 0;
	flex-grow: var(--bnws-menu-item-grow);
}

.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__link) {
	display: flex;
	align-items: center;
	/* Bezugsrahmen für die Kennzeichnung des aktuellen Punktes.
	 *
	 * Ohne diese Zeile hängt der Unterstrich am Menüpunkt statt am Link — der
	 * nächste Vorfahre mit `position` ist `.bnws-menu__item`. In einer Leiste
	 * sind beide gleich breit, dort fällt nichts auf. Sobald der Link aber
	 * schmaler ist als sein Punkt — mittig gesetzt in einem bildfüllenden
	 * Menü etwa —, zieht sich der Strich über die ganze Zeile und liest sich
	 * wie eine Trennlinie statt wie eine Markierung.
	 *
	 * Gemessen auf einer echten Installation: Link 81 px, Strich 326 px. */
	position: relative;
	gap: var(--bnws-arrow-gap);
	box-sizing: border-box;
	inline-size: 100%;
	text-decoration: none;
	font: inherit;
	color: var(--bnws-menu-link-color);
	background: var(--bnws-menu-link-bg);
	border: 0;
	border-radius: var(--bnws-menu-link-radius);
	padding-block: var(--bnws-menu-link-padding-block);
	padding-inline: var(--bnws-menu-link-padding-inline);
	cursor: pointer;
	transition: color var(--bnws-menu-duration) var(--bnws-menu-easing),
		background-color var(--bnws-menu-duration) var(--bnws-menu-easing);
}

.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__item:hover) > .bnws-menu__link,
.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__link:hover) {
	color: var(--bnws-menu-link-color-hover);
	background: var(--bnws-menu-link-bg-hover);
}

.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__item--current) > .bnws-menu__link,
.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__item--ancestor) > .bnws-menu__link,
.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__item--spy) > .bnws-menu__link,
.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__item--spy-ancestor) > .bnws-menu__link {
	color: var(--bnws-menu-link-color-active);
	background: var(--bnws-menu-link-bg-active);
}

:where(.bnws-menu__label) {
	display: block;
}

:where(.bnws-menu__description) {
	display: block;
	font-size: 0.8em;
	opacity: 0.75;
}

/* Ohne eingestellte Farben bleibt die Kennzeichnung ein Umriss in der
   Textfarbe. Das ist immer lesbar und rät keine Markenfarbe. `currentColor` als
   Hintergrund taugt hier nicht: sobald daneben eine Schriftfarbe steht, löst
   sich currentColor gegen genau diese auf — Fläche und Text hätten dieselbe
   Farbe und es wäre nichts zu sehen. */
:where(.bnws-menu__badge) {
	display: inline-block;
	font-size: var(--bnws-badge-size, 0.7em);
	line-height: 1;
	padding: 0.3em 0.5em;
	border: 1px solid currentColor;
	border-radius: var(--bnws-badge-radius, 0.4em);
	background: var(--bnws-badge-bg, transparent);
	color: var(--bnws-badge-color, inherit);
}

:where(.bnws-menu__icon) {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

:where(.bnws-menu__icon svg) {
	inline-size: 1em;
	block-size: 1em;
}

/* Elementors Icon-Bibliothek liefert gefüllte Pfade, die eingebauten Icons
   arbeiten mit Konturen. Beides muss die Textfarbe übernehmen. */
:where(.bnws-menu__icon svg[stroke="currentColor"]) {
	fill: none;
}

/* Das Attribut hidden muss auch dann greifen, wenn eine eigene Regel display
   setzt. Die UA-Regel [hidden]{display:none} verliert gegen jede Autorenregel,
   und mit :where() geschriebene Vorgaben haben zwar Spezifität 0, stehen aber
   trotzdem darüber. */
.bnws-menu [hidden][hidden] {
	display: none;
}

/* --- Aufklapp-Knopf und Pfeil ------------------------------------------- */

/* Der Aufklapp-Knopf steht neben dem Link, nicht darüber.
 *
 * Absolut positioniert überdeckte er bei schmalen Menüpunkten den ganzen Link:
 * seine Mindestbreite von 44 px war dann breiter als der Menüpunkt selbst, und
 * der Link ließ sich nicht mehr anklicken. Genau das Trennen von „öffnen" und
 * „hingehen" wäre damit hinfällig gewesen. */
:where(.bnws-menu__item--has-children) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

:where(.bnws-menu__item--has-children) > .bnws-menu__link {
	flex: 1 1 auto;
	inline-size: auto;
}

/* Aufklappbarer Inhalt bekommt eine eigene Zeile. Im schwebenden Modus ist er
   ohnehin absolut positioniert und die Angabe wirkungslos. */
:where(.bnws-menu__item--has-children) > .bnws-menu__submenu,
:where(.bnws-menu__item--has-children) > .bnws-menu__mega {
	flex-basis: 100%;
}

/* Schwebt das Untermenü, darf der Menüpunkt nicht umbrechen.
 *
 * Das `flex-wrap: wrap` oben ist für den eingeklappten Zustand da: dort holt
 * sich das Untermenü mit `flex-basis: 100%` seine eigene Zeile. Im schwebenden
 * Modus ist das Untermenü absolut positioniert und braucht die Zeile nicht —
 * die Umbruchmöglichkeit bleibt aber bestehen und trifft dann den Falschen.
 *
 * Sobald die Leiste enger wird als ihr Inhalt, schrumpfen die Menüpunkte. Der
 * Aufklapp-Knopf kann nicht schrumpfen (44 px Mindestmaß, damit er auf einem
 * Touchscreen zu treffen ist) — also bricht er um und steht plötzlich UNTER
 * seinem Menüpunkt, losgelöst und ohne erkennbaren Bezug.
 *
 * Gemessen auf einer echten Installation: Menüpunkt 194 × 80 px, der Link auf
 * Höhe 33, der Pfeil auf Höhe 69 — ein einzelnes schwebendes Zeichen unter
 * der Leiste, das aussah wie ein Versehen. Und zwar ohne dass die Leiste
 * sichtbar überlaufen wäre; die Punkte hatten sich lautlos schmalgezogen.
 *
 * `nowrap` verlagert den Engpass dorthin, wo er hingehört: der Link wird
 * schmaler und der Text bricht um. Das sieht man sofort und behebt man mit
 * mehr Platz für die Leiste — statt einen Pfeil an einer Stelle zu suchen,
 * an der niemand ihn vermutet. */
.bnws-menu[data-bnws-submenu="dropdown"] .bnws-menu__item--has-children,
.bnws-menu[data-bnws-submenu="flyout"] .bnws-menu__item--has-children {
	flex-wrap: nowrap;
}

/* Ausnahme von Regel 1: die vier Knöpfe stehen in der KNOPF-EBENE (siehe oben).
   Ohne sie malt jede fremde button-Regel den Aufklapp-Pfeil zum Seitenknopf um. */
.bnws-menu .bnws-menu__toggle.bnws-menu__toggle.bnws-menu__toggle {
	appearance: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	color: var(--bnws-arrow-color);
	cursor: pointer;
	/* Mindestens 44 px in beide Richtungen: alles darunter ist auf einem
	   Touchscreen nicht zuverlässig zu treffen. */
	min-inline-size: 44px;
	min-block-size: 44px;
	inline-size: auto;
	block-size: auto;
}

/* `display` und `border` stehen bei 0,2,0. Der Theme-Reset von hello-elementor
   setzt beides auf jeden Knopf —

     [type="button"], [type="submit"], button {
       display: inline-block; border: 1px solid #cc3366; }   → 0,1,1

   — und schlägt damit jede :where()-Vorgabe. Gemessen auf einer
   echten Installation: der Hamburger stand am Bildschirm mitten in der
   Leiste, und um den Aufklapp-Knopf lag ein rosa Rahmen.

   0,2,0 ist die richtige Mitte: über dem Reset (0,1,1), unter den Modusregeln
   (0,3,0), die das Anzeigen steuern, und unter der Rahmen-Steuerung
   `{{WRAPPER}} .bnws-menu__trigger` (0,4,0), die weiterhin gewinnt. */
.bnws-menu .bnws-menu__toggle {
	display: inline-flex;
	border: 0;
}

/* „Abstand zum Text" (--bnws-arrow-gap) gilt auch fuer den eigenen Knopf.
 *
 * Ohne eigenen Knopf steckt der Pfeil im Link, und der `gap` am Link (oben)
 * setzt den Abstand. Mit eigenem Knopf steht er als Geschwister NEBEN dem
 * Link — dort kam die Einstellung nie an. Der sichtbare Abstand war
 * stattdessen die Summe zweier Groessen, die niemand dafuer gesetzt hat:
 *
 *     Innenabstand des Links   +   (Knopfbreite - Pfeilbreite) / 2
 *
 * Gemessen auf praxis-lebenswerk.at am 31.08.2026: 15 px + (44 - 14) / 2
 * = 30 px, waehrend --bnws-arrow-gap auf 0.3em (~5 px) stand. Die Einstellung
 * war also nicht etwa zu schwach — sie tat gar nichts.
 *
 * Die Korrektur laesst die Tastflaeche unangetastet: der Knopf bleibt
 * 44 x 44. Nur der Pfeil rueckt an dessen Anfang, und der Knopf wird um den
 * Innenabstand des Links zurueckgezogen. Damit steht der Pfeil genau
 * --bnws-arrow-gap hinter dem Text — der Rest der Tastflaeche waechst nach
 * hinten heraus, wo ohnehin nur Abstand zum naechsten Punkt ist.
 *
 * Nur in der waagrechten, nicht eingeklappten Leiste: senkrecht und im
 * eingeklappten Menue fuellt der Link die Zeile, dort gehoert der Pfeil an
 * den Zeilenrand und nicht an den Text.
 *
 * 0,5,0 — muss ueber der Knopf-Neutralisierung (0,4,0) liegen. */
.bnws-menu[data-bnws-layout="horizontal"][data-bnws-panel="inline"]
	.bnws-menu__item--has-children > .bnws-menu__toggle {
	justify-content: flex-start;
	margin-inline-start: calc(var(--bnws-arrow-gap) - var(--bnws-menu-link-padding-inline));
}

:where(.bnws-menu__arrow) {
	font-size: var(--bnws-arrow-size);
	color: var(--bnws-arrow-color);
	transition: rotate var(--bnws-menu-duration) var(--bnws-menu-easing);
}

.bnws-arrow-rotate-yes .bnws-menu__item[data-bnws-open] > .bnws-menu__toggle .bnws-menu__arrow,
.bnws-arrow-rotate-yes .bnws-menu__item[data-bnws-open] > .bnws-menu__link .bnws-menu__arrow {
	rotate: 180deg;
}

/* Ohne eigenen Aufklapp-Knopf sitzt der Pfeil im Link selbst. */
:where(.bnws-menu__link .bnws-menu__arrow) {
	margin-inline-start: auto;
}

/* --- Markierung der aktuellen Seite -------------------------------------- */

.bnws-pointer-underline .bnws-menu__link::after,
.bnws-pointer-overline .bnws-menu__link::after,
.bnws-pointer-dot .bnws-menu__link::after {
	content: "";
	position: absolute;
	inset-inline: var(--bnws-menu-link-padding-inline);
	block-size: var(--bnws-menu-pointer-size);
	background: var(--bnws-menu-pointer-color);
	opacity: 0;
	transition: opacity var(--bnws-menu-duration) var(--bnws-menu-easing);
	pointer-events: none;
}

.bnws-pointer-underline .bnws-menu__link::after {
	inset-block-end: var(--bnws-menu-pointer-offset);
}

.bnws-pointer-overline .bnws-menu__link::after {
	inset-block-start: var(--bnws-menu-pointer-offset);
}

.bnws-pointer-dot .bnws-menu__link::after {
	inset-block-end: var(--bnws-menu-pointer-offset);
	inset-inline: 50%;
	inline-size: var(--bnws-menu-pointer-size);
	block-size: var(--bnws-menu-pointer-size);
	translate: -50% 0;
	border-radius: 50%;
}

.bnws-pointer-frame .bnws-menu__link {
	box-shadow: inset 0 0 0 var(--bnws-menu-pointer-size) transparent;
	transition: box-shadow var(--bnws-menu-duration) var(--bnws-menu-easing);
}

.bnws-pointer-frame .bnws-menu__item--current > .bnws-menu__link,
.bnws-pointer-frame .bnws-menu__item--spy > .bnws-menu__link {
	box-shadow: inset 0 0 0 var(--bnws-menu-pointer-size) var(--bnws-menu-pointer-color);
}

.bnws-menu__item--current > .bnws-menu__link::after,
.bnws-menu__item--ancestor > .bnws-menu__link::after,
.bnws-menu__item--spy > .bnws-menu__link::after,
.bnws-menu__item--spy-ancestor > .bnws-menu__link::after {
	opacity: 1;
}

.bnws-pointer-hover .bnws-menu__item:hover > .bnws-menu__link::after,
.bnws-pointer-hover .bnws-menu__item:focus-within > .bnws-menu__link::after {
	opacity: 1;
}

.bnws-pointer-hover.bnws-pointer-frame .bnws-menu__item:hover > .bnws-menu__link,
.bnws-pointer-hover.bnws-pointer-frame .bnws-menu__item:focus-within > .bnws-menu__link {
	box-shadow: inset 0 0 0 var(--bnws-menu-pointer-size) var(--bnws-menu-pointer-color);
}

/* --- Auslöser ------------------------------------------------------------ */

.bnws-menu .bnws-menu__trigger.bnws-menu__trigger.bnws-menu__trigger {
	appearance: none;
	align-items: center;
	gap: var(--bnws-trigger-gap);
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	color: var(--bnws-trigger-color);
	background: var(--bnws-trigger-bg);
	box-shadow: none;
	border-radius: var(--bnws-trigger-radius);
	margin: 0;
	padding: var(--bnws-trigger-padding);
	min-inline-size: 44px;
	min-block-size: 44px;
	inline-size: auto;
	block-size: auto;
	justify-content: center;
	cursor: pointer;
	transition: color var(--bnws-menu-duration) var(--bnws-menu-easing),
		background-color var(--bnws-menu-duration) var(--bnws-menu-easing);
}

/* border bleibt in der :where()-Ebene: die Rahmen-Steuerung (trigger_border)
   schreibt border-* direkt auf {{WRAPPER}} .bnws-menu__trigger und würde sonst
   überstimmt.

   `display` steht bei 0,2,0 — genau dazwischen. Über dem Theme-Reset
   (`[type="button"], button { display: inline-block }`, 0,1,1), der die Angabe
   sonst schlägt und den Hamburger am Bildschirm stehen lässt. Und unter den
   Modusregeln (0,3,0), die ihn im eingeklappten Zustand und im Druck steuern —
   in der Knopf-Ebene (0,4,0) bliebe er für immer verborgen. */
.bnws-menu .bnws-menu__trigger {
	display: none;
	border: 0;
}

.bnws-menu .bnws-menu__trigger.bnws-menu__trigger.bnws-menu__trigger:hover {
	color: var(--bnws-trigger-color-hover);
	background: var(--bnws-trigger-bg-hover);
}

.bnws-menu[data-bnws-panel="offcanvas"] > .bnws-menu__trigger,
.bnws-menu[data-bnws-panel="fullscreen"] > .bnws-menu__trigger,
.bnws-menu[data-bnws-panel="dropdown"] > .bnws-menu__trigger {
	display: inline-flex;
}

:where(.bnws-menu__burger) {
	display: grid;
	align-content: space-between;
	inline-size: var(--bnws-trigger-size);
	block-size: calc(var(--bnws-trigger-size) * 0.75);
	flex: 0 0 auto;
}

:where(.bnws-menu__burger > span) {
	display: block;
	/* Als Rahmen statt als Hintergrundfarbe: im Windows-Kontrastmodus wird
	   background-color ersetzt, ein border-Farbwert dagegen übernommen. */
	border-block-start: var(--bnws-trigger-bar) solid currentColor;
	inline-size: 100%;
	transition: rotate var(--bnws-menu-duration) var(--bnws-menu-easing),
		translate var(--bnws-menu-duration) var(--bnws-menu-easing),
		opacity var(--bnws-menu-duration) var(--bnws-menu-easing),
		inline-size var(--bnws-menu-duration) var(--bnws-menu-easing);
}

.bnws-menu[data-bnws-open="1"] .bnws-menu__trigger[data-bnws-burger="cross"] .bnws-menu__burger > span:nth-child(1) {
	translate: 0 calc(var(--bnws-trigger-size) * 0.375 - var(--bnws-trigger-bar) / 2);
	rotate: 45deg;
}

.bnws-menu[data-bnws-open="1"] .bnws-menu__trigger[data-bnws-burger="cross"] .bnws-menu__burger > span:nth-child(2) {
	opacity: 0;
}

.bnws-menu[data-bnws-open="1"] .bnws-menu__trigger[data-bnws-burger="cross"] .bnws-menu__burger > span:nth-child(3) {
	translate: 0 calc(var(--bnws-trigger-size) * -0.375 + var(--bnws-trigger-bar) / 2);
	rotate: -45deg;
}

.bnws-menu[data-bnws-open="1"] .bnws-menu__trigger[data-bnws-burger="spin"] .bnws-menu__burger {
	rotate: 180deg;
}

.bnws-menu[data-bnws-open="1"] .bnws-menu__trigger[data-bnws-burger="squeeze"] .bnws-menu__burger > span:nth-child(1),
.bnws-menu[data-bnws-open="1"] .bnws-menu__trigger[data-bnws-burger="squeeze"] .bnws-menu__burger > span:nth-child(3) {
	inline-size: 40%;
}

.bnws-menu[data-bnws-open="1"] .bnws-menu__trigger[data-bnws-burger="arrow"] .bnws-menu__burger > span:nth-child(1),
.bnws-menu[data-bnws-open="1"] .bnws-menu__trigger[data-bnws-burger="arrow"] .bnws-menu__burger > span:nth-child(3) {
	inline-size: 55%;
}

.bnws-menu[data-bnws-open="1"] .bnws-menu__trigger[data-bnws-burger="arrow"] .bnws-menu__burger > span:nth-child(1) {
	rotate: 40deg;
}

.bnws-menu[data-bnws-open="1"] .bnws-menu__trigger[data-bnws-burger="arrow"] .bnws-menu__burger > span:nth-child(3) {
	rotate: -40deg;
}

.bnws-menu[data-bnws-open="1"] .bnws-menu__trigger[data-bnws-burger="collapse"] .bnws-menu__burger > span:nth-child(1),
.bnws-menu[data-bnws-open="1"] .bnws-menu__trigger[data-bnws-burger="collapse"] .bnws-menu__burger > span:nth-child(3) {
	translate: 0 calc(var(--bnws-trigger-size) * 0.375 - var(--bnws-trigger-bar) / 2);
	opacity: 0;
}

/* --- Panel: eingebettet -------------------------------------------------- */

:where(.bnws-menu__panel) {
	flex: 1 1 auto;
	min-inline-size: 0;
}

:where(.bnws-menu__panel-header) {
	display: none;
	align-items: center;
	gap: 0.5em;
	margin-block-end: 1em;
}

.bnws-menu .bnws-menu__close.bnws-menu__close.bnws-menu__close,
.bnws-menu .bnws-menu__back.bnws-menu__back.bnws-menu__back {
	appearance: none;
	align-items: center;
	gap: 0.4em;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	color: var(--bnws-close-color);
	background: none;
	box-shadow: none;
	border-radius: 0;
	margin: 0;
	padding: 0.4em;
	min-inline-size: 44px;
	min-block-size: 44px;
	inline-size: auto;
	block-size: auto;
	cursor: pointer;
}

/* Auch hier 0,2,0 gegen den Theme-Reset. Das hidden-Attribut steht mit
   `.bnws-menu [hidden][hidden]` bei 0,3,0 darüber — der Zurück-Knopf bleibt
   im Ruhezustand also verborgen. */
.bnws-menu .bnws-menu__close,
.bnws-menu .bnws-menu__back {
	display: inline-flex;
	border: 0;
}

.bnws-menu .bnws-menu__close.bnws-menu__close.bnws-menu__close {
	margin-inline-start: auto;
	font-size: var(--bnws-close-size);
}

.bnws-menu .bnws-menu__close.bnws-menu__close.bnws-menu__close:hover,
.bnws-menu .bnws-menu__back.bnws-menu__back.bnws-menu__back:hover {
	color: var(--bnws-close-color-hover);
}

:where(.bnws-menu__breadcrumb) {
	flex: 1 1 auto;
	min-inline-size: 0;
	font-weight: 600;
}

:where(.bnws-menu__breadcrumb:empty) {
	display: none;
}

/* `align-items: center` und nicht die Vorgabe `stretch`.
 *
 * In einer waagrechten Leiste ist ein Menüpunkt mit Aufklapp-Knopf höher als
 * einer ohne: der Knopf misst mindestens 44 px, ein Link nur seine Zeile plus
 * Innenabstand. Bei `stretch` bekommen alle Punkte die Höhe des höchsten —
 * und dann sitzt der Link je nach Bauart woanders. Punkte ohne Kinder sind
 * `display: list-item`, ihr Link steht oben; Punkte mit Kindern sind eine
 * Flex-Zeile mit `align-items: center`, ihr Link steht mittig.
 *
 * Gemessen auf einer echten Installation: drei Links auf Höhe 51, der vierte auf
 * 54. Drei Pixel, die man nicht benennen kann und trotzdem sieht — die Leiste
 * wirkte unruhig, ohne dass ein Punkt erkennbar falsch stand.
 *
 * Mit `center` bleibt jeder Punkt so hoch wie sein Inhalt und alle sitzen auf
 * derselben Mittellinie. Die senkrechte Anordnung unten setzt weiterhin
 * ausdrücklich `stretch`: dort ist die Querachse die waagrechte, und da sollen
 * die Punkte sehr wohl auf volle Breite gehen. */
:where(.bnws-menu__list--depth-0) {
	display: flex;
	align-items: center;
	justify-content: var(--bnws-menu-justify);
	flex-wrap: var(--bnws-menu-wrap);
	column-gap: var(--bnws-menu-gap);
	row-gap: var(--bnws-menu-row-gap);
}

.bnws-menu[data-bnws-layout="vertical"] .bnws-menu__list--depth-0 {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: nowrap;
	row-gap: var(--bnws-panel-item-gap);
}

/* --- Untermenüs: aufklappend --------------------------------------------- */

.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__submenu) {
	background: var(--bnws-sub-bg);
	border-radius: var(--bnws-sub-radius);
	padding: var(--bnws-sub-padding);
	color: var(--bnws-sub-link-color);
}

.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__submenu .bnws-menu__link) {
	color: var(--bnws-sub-link-color);
	background: var(--bnws-sub-link-bg);
	border-radius: var(--bnws-sub-link-radius);
	padding-block: var(--bnws-sub-link-padding-block);
	padding-inline: var(--bnws-sub-link-padding-inline);
}

.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__submenu .bnws-menu__item:hover) > .bnws-menu__link {
	color: var(--bnws-sub-link-color-hover);
	background: var(--bnws-sub-link-bg-hover);
}

.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__submenu .bnws-menu__item--current) > .bnws-menu__link,
.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__submenu .bnws-menu__item--ancestor) > .bnws-menu__link,
.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__submenu .bnws-menu__item--spy) > .bnws-menu__link,
.bnws-menu.bnws-menu.bnws-menu :where(.bnws-menu__submenu .bnws-menu__item--spy-ancestor) > .bnws-menu__link {
	color: var(--bnws-sub-link-color-active);
	background: var(--bnws-sub-link-bg-active);
}

.bnws-sub-divider-yes .bnws-menu__submenu > .bnws-menu__item + .bnws-menu__item {
	border-block-start: var(--bnws-sub-divider-width) solid var(--bnws-sub-divider-color);
}

/* Ausgangswerte der Bewegung. Sie stehen bewusst VOR der Zustandsmaschine:
   beide Regelgruppen haben dieselbe Spezifität, also entscheidet die
   Reihenfolge. Stünden sie danach, bliebe ein geöffnetes Panel dauerhaft um
   den Animationsbetrag verschoben — rund zehn Pixel zu hoch, in jedem Modus. */
.bnws-anim-fade-down .bnws-menu__submenu,
.bnws-anim-fade-down .bnws-menu__mega {
	translate: 0 -0.5em;
}

.bnws-anim-fade-up .bnws-menu__submenu,
.bnws-anim-fade-up .bnws-menu__mega {
	translate: 0 0.5em;
}

.bnws-anim-slide-down .bnws-menu__submenu,
.bnws-anim-slide-down .bnws-menu__mega {
	translate: 0 -1.5em;
}

.bnws-anim-scale .bnws-menu__submenu,
.bnws-anim-scale .bnws-menu__mega {
	scale: 0.96;
}

.bnws-anim-none .bnws-menu__submenu,
.bnws-anim-none .bnws-menu__mega {
	transition: none;
}

/* Zustandsmaschine: closed → opening → open → closing → closed.
 *
 * Geschlossen heißt display:none. Das ist wichtiger, als es aussieht: ein nur
 * auf visibility:hidden gesetztes, absolut positioniertes Untermenü zählt
 * weiterhin zur scrollbaren Fläche der Seite. Bei mehreren Ebenen, die sich
 * seitlich versetzen, entsteht daraus ein waagrechter Bildlauf über die ganze
 * Seite, ohne dass irgendetwas zu sehen wäre.
 *
 * Messbar bleibt das Panel trotzdem: gemessen wird im Zustand `opening`, und
 * der ist bereits dargestellt. Genau dafür gibt es ihn — er stellt das Panel
 * dar, lässt es aber noch unsichtbar, damit der Übergang nach `open` einen
 * Ausgangswert hat. Ohne diesen Zwischenschritt fiele die Bewegung aus.
 */
:where(.bnws-menu__submenu),
:where(.bnws-menu__mega) {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--bnws-menu-duration) var(--bnws-menu-easing) var(--bnws-menu-delay),
		translate var(--bnws-menu-duration) var(--bnws-menu-easing) var(--bnws-menu-delay),
		scale var(--bnws-menu-duration) var(--bnws-menu-easing) var(--bnws-menu-delay);
}

.bnws-menu__submenu[data-state="closed"],
.bnws-menu__mega[data-state="closed"] {
	display: none;
}

.bnws-menu__submenu[data-state="open"],
.bnws-menu__mega[data-state="open"] {
	opacity: 1;
	pointer-events: auto;
	translate: none;
	scale: none;
}

/* --- Untermenüs: schwebend (Desktop) ------------------------------------- */

.bnws-menu[data-bnws-submenu="dropdown"] .bnws-menu__submenu,
.bnws-menu[data-bnws-submenu="flyout"] .bnws-menu__submenu {
	position: absolute;
	min-inline-size: var(--bnws-sub-width);
	z-index: var(--bnws-z-submenu);
}

.bnws-menu[data-bnws-submenu="dropdown"] .bnws-menu__list--depth-0 > .bnws-menu__item > .bnws-menu__submenu {
	inset-block-start: 100%;
	inset-inline-start: 0;
	margin-block-start: var(--bnws-sub-offset);
}

/* Ab der zweiten Ebene, und im senkrechten Menü ab der ersten, klappt das
   Untermenü zur Seite auf. */
.bnws-menu[data-bnws-submenu="dropdown"] .bnws-menu__submenu .bnws-menu__submenu,
.bnws-menu[data-bnws-submenu="flyout"] .bnws-menu__submenu {
	inset-block-start: 0;
	inset-inline-start: 100%;
	margin-inline-start: var(--bnws-sub-offset);
}

/* Der Zwischenraum zwischen Menüpunkt und Untermenü bleibt für die Maus
   begehbar. Ohne diese Brücke schließt sich das Untermenü, während der Zeiger
   noch unterwegs ist — der häufigste Bedienärger in Menüs mit Abstand. */
.bnws-menu[data-bnws-submenu="dropdown"] .bnws-menu__submenu::before,
.bnws-menu[data-bnws-submenu="flyout"] .bnws-menu__submenu::before {
	content: "";
	position: absolute;
	inset-block-end: 100%;
	inset-inline: 0;
	block-size: var(--bnws-sub-offset);
}

.bnws-menu[data-bnws-submenu="dropdown"] .bnws-menu__submenu .bnws-menu__submenu::before,
.bnws-menu[data-bnws-submenu="flyout"] .bnws-menu__submenu::before {
	inset-block: 0;
	inset-block-end: auto;
	inset-inline: auto;
	inset-inline-end: 100%;
	block-size: 100%;
	inline-size: var(--bnws-sub-offset);
}

/* Kein Platz auf der einen Seite: das Skript misst und setzt dieses Attribut. */
.bnws-menu__submenu[data-bnws-flip="inline"] {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.bnws-menu__submenu .bnws-menu__submenu[data-bnws-flip="inline"] {
	inset-inline-start: auto;
	inset-inline-end: 100%;
	margin-inline: 0 var(--bnws-sub-offset);
}

/* --- Untermenüs: aufklappen an Ort und Stelle ---------------------------- */

/* Hier trägt die Höhe die Bewegung, nicht die Deckkraft — sonst blendet der
   Inhalt erst nach dem Aufklappen ein. */
.bnws-menu[data-bnws-submenu="accordion"] .bnws-menu__submenu {
	position: static;
	overflow: hidden;
	block-size: 0;
	opacity: 1;
	background: none;
	padding-block: 0;
	transition: block-size var(--bnws-menu-duration) var(--bnws-menu-easing);
}

.bnws-menu[data-bnws-submenu="accordion"] .bnws-menu__submenu[data-state="open"] {
	block-size: auto;
	overflow: visible;
}

/* --- Untermenüs: dauerhaft offen ----------------------------------------- */

/* Kein Zustand, keine Bewegung, kein Knopf — die Unterpunkte stehen einfach da.
 *
 * Der ganze Modus ist bewusst reines CSS. `data-state` bleibt auf „closed"
 * stehen und wird hier nur überstimmt; das Skript hat damit nichts zu tun.
 * Der Gewinn ist nicht Kürze, sondern der Moduswechsel: es gibt keinen
 * Zustand, der beim Umschalten nach „aufklappen" oder auf den Bildschirm
 * zurückgesetzt werden müsste. Ein Wechsel findet immer alles zu vor.
 *
 * Die Auswahl kommt auf 0,4,0 — zwei Klassen, zwei Attribute — und schlägt
 * damit sowohl `[data-state="closed"]{display:none}` (0,2,0) als auch die
 * Ausgangswerte der Bewegung in `.bnws-anim-*` (0,2,0). */
.bnws-menu[data-bnws-submenu="expanded"] .bnws-menu__submenu[data-state] {
	display: block;
	position: static;
	block-size: auto;
	overflow: visible;
	opacity: 1;
	pointer-events: auto;
	translate: none;
	scale: none;
	background: none;
	padding-block: 0;
	transition: none;
}

/* Der Aufklapp-Knopf hat nichts mehr zu bewirken. `display: none` nimmt ihn
 * auch aus der Tabulatorfolge und aus dem Zugänglichkeitsbaum — beides
 * richtig: ein Knopf, der nichts tut, gehört nicht angesagt.
 *
 * Der Pfeil im Link betrifft die Einstellungen ohne eigenen Knopf; dort steckt
 * er im Link selbst und zeigte sonst weiter auf ein Aufklappen, das es nicht
 * gibt. Das dazugehörige `aria-expanded` am Link rückt bnws-menu-mobile.js
 * gerade — ein Attribut lässt sich nicht per CSS abräumen. */
.bnws-menu[data-bnws-submenu="expanded"] .bnws-menu__toggle,
.bnws-menu[data-bnws-submenu="expanded"] .bnws-menu__link > .bnws-menu__arrow {
	display: none;
}

/* --- Untermenüs: als neue Ebene einschieben ------------------------------ */

/*
 * Das Panel wird zur Spalte: oben die Kopfzeile mit Zurück-Knopf und Pfad,
 * darunter die Fläche, auf der die Ebenen liegen.
 *
 * Vorher lagen die Ebenen mit `inset-block: 0` auf dem **ganzen** Panel —
 * also auch über der Kopfzeile. Gemessen: Kopfzeile 30–80, erster Eintrag
 * jeder Ebene ebenfalls ab 30. Auf der obersten Ebene fiel das nicht auf,
 * weil dort nur der Schließen-Knopf rechts sitzt; ab der zweiten lag der
 * erste Eintrag genau auf dem Zurück-Knopf und fing dessen Klicks ab.
 */
.bnws-menu[data-bnws-submenu="slide"] .bnws-menu__panel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.bnws-menu[data-bnws-submenu="slide"] .bnws-menu__panel-header {
	flex: 0 0 auto;
}

/*
 * Der Zurück-Knopf behält seinen Platz, auch wenn er nichts anzuzeigen hat.
 *
 * Auf der obersten Ebene gibt es kein Zurück, der Knopf trägt dort `hidden`.
 * Fiele er damit aus dem Fluss, wüchse die Kopfzeile beim ersten Einschieben
 * von ihrer Höhe ohne ihn auf die mit ihm — gemessen bei 390 px von 44 auf
 * 50 px — und alles darunter rutschte mit: Suchfeld, Ebenenfläche, jeder
 * Menüpunkt. Bei jedem Ebenenwechsel aufs Neue, hin wie zurück.
 *
 * `visibility: hidden` reserviert den Platz und nimmt den Knopf trotzdem aus
 * Tabulatorfolge und Zugänglichkeitsbaum — dieselbe Eigenschaft, die auch die
 * verlassene Ebene wegräumt. Das `hidden`-Attribut bleibt unangetastet, das
 * Skript und die übrigen Modi arbeiten unverändert damit weiter.
 *
 * Nur im Schiebe-Modus: dort wechselt man ständig die Ebene. Im
 * Aufklapp-Modus erscheint der Knopf nie, da wäre die Lücke nur Leerraum.
 */
.bnws-menu[data-bnws-submenu="slide"] .bnws-menu__panel-header .bnws-menu__back[hidden] {
	display: inline-flex;
	visibility: hidden;
}

.bnws-menu[data-bnws-submenu="slide"] .bnws-menu__item {
	position: static;
}

.bnws-menu[data-bnws-submenu="slide"] .bnws-menu__list {
	display: block;
	background: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	block-size: auto;
	translate: 0 0;
	transition: translate var(--bnws-menu-duration) var(--bnws-menu-easing);
}

/*
 * Die oberste Ebene bleibt im Fluss und nimmt den Rest der Spalte ein. Sie
 * gibt damit allen weiteren Ebenen ihre Fläche vor — `min-block-size: 0`,
 * weil ein Flex-Kind sonst nicht unter seine Inhaltshöhe schrumpft und die
 * lange Liste die Kopfzeile aus dem Panel schöbe.
 */
.bnws-menu[data-bnws-submenu="slide"] .bnws-menu__list--depth-0 {
	position: relative;
	flex: 1 1 auto;
	min-block-size: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * Alle weiteren Ebenen legen sich genau auf diese Fläche. Ohne eigenes
 * Innenmaß: das Panel bringt seines schon mit, und ein zweites je Ebene
 * rückte jede tiefere Ebene um denselben Betrag weiter ein.
 */
.bnws-menu[data-bnws-submenu="slide"] .bnws-menu__submenu {
	position: absolute;
	inset: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bnws-menu[data-bnws-submenu="slide"] .bnws-menu__list[data-bnws-slide="next"] {
	translate: calc(var(--bnws-dir) * 100%) 0;
	visibility: hidden;
}

/*
 * Die verlassene Ebene wird nur ausgeblendet — sie wird **nicht** zur Seite
 * geschoben.
 *
 * Der Grund steckt im Markup: die Ebenen sind ineinander verschachtelt
 * (`ul > li > ul`), nicht nebeneinander. Ein `translate` auf der äußeren
 * Liste macht sie zum Bezugsrahmen für alles absolut Positionierte darin —
 * die neue Ebene liegt also *in* der alten und wandert mit ihr aus dem Bild.
 * Gemessen: nach dem ersten Einschieben stand die neue Ebene bei x = -120 in
 * einem Panel, das bei x = 240 beginnt. Man sah nichts mehr.
 *
 * `visibility: hidden` erbt sich auf die eigenen Einträge, die neue Ebene
 * setzt sich mit `visibility: visible` in der Regel oben selbst wieder
 * sichtbar. Damit ist die alte Ebene weg — aus dem Bild, aus der
 * Tabulatorfolge und aus dem Zugänglichkeitsbaum — und die neue steht an
 * ihrer Stelle. Sie fährt weiterhin von der Seite herein; nur der Weggang
 * der alten wird nicht mehr eigens vorgeführt.
 */
.bnws-menu[data-bnws-submenu="slide"] .bnws-menu__list[data-bnws-slide="previous"] {
	visibility: hidden;
}

/* --- Mega-Menü ----------------------------------------------------------- */

:where(.bnws-menu__mega) {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	margin-block-start: var(--bnws-mega-offset);
	z-index: var(--bnws-z-mega);
	background: var(--bnws-sub-bg);
	border-radius: var(--bnws-mega-radius);
	max-block-size: var(--bnws-mega-max-height);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* contain: paint würde den Inhalt abschneiden — nur layout und style. */
	contain: layout style;
}

:where(.bnws-menu__mega-inner) {
	padding: var(--bnws-mega-padding);
}

.bnws-menu__mega::before {
	content: "";
	position: absolute;
	inset-block-end: 100%;
	inset-inline: 0;
	block-size: var(--bnws-mega-offset);
}

.bnws-menu__mega[data-bnws-stretch="content"] {
	inline-size: max-content;
	max-inline-size: 90vw;
}

.bnws-menu__mega[data-bnws-stretch="item"] {
	inline-size: 100%;
}

.bnws-menu__mega[data-bnws-stretch="full"] {
	inline-size: 100%;
	inset-inline-start: 0;
}

/* Die drei breiten Varianten brauchen einen gemessenen Versatz. Das Skript
   schreibt ihn als logischen Wert, damit auch bei rechtsläufiger Schrift kein
   Vorzeichen umgedreht werden muss. */
.bnws-menu[data-bnws-layout="horizontal"] .bnws-menu__mega[data-bnws-stretch="full"],
.bnws-menu__mega[data-bnws-stretch="container"],
.bnws-menu__mega[data-bnws-stretch="viewport"] {
	inset-inline-start: var(--bnws-mega-left, 0px);
	inline-size: var(--bnws-mega-span, 100%);
}

.bnws-menu__mega[data-bnws-stretch="custom"] {
	inline-size: var(--bnws-mega-custom-width);
}

/* --- Eingeklapptes Panel ------------------------------------------------- */

.bnws-menu[data-bnws-panel="offcanvas"] .bnws-menu__panel,
.bnws-menu[data-bnws-panel="fullscreen"] .bnws-menu__panel,
.bnws-menu[data-bnws-panel="dropdown"] .bnws-menu__panel {
	position: fixed;
	z-index: var(--bnws-z-panel);
	box-sizing: border-box;
	padding: var(--bnws-panel-padding);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--bnws-sub-bg);
	transition: translate var(--bnws-menu-duration) var(--bnws-menu-easing),
		opacity var(--bnws-menu-duration) var(--bnws-menu-easing);
}

.bnws-menu[data-bnws-panel="offcanvas"] .bnws-menu__panel-header,
.bnws-menu[data-bnws-panel="fullscreen"] .bnws-menu__panel-header,
.bnws-menu[data-bnws-panel="dropdown"] .bnws-menu__panel-header {
	display: flex;
}

/* --- Suchfeld ------------------------------------------------------------ *
 *
 * Das Formular steht immer im Markup, sichtbar ist es nur im eingeklappten
 * Menü. Ein per Skript ein- und ausgehängtes Formular verlöre bei jedem
 * Moduswechsel seine Eingabe, und ohne JavaScript gäbe es gar keins.
 *
 * `display: none` und nicht `visibility: hidden`: ein unsichtbares Formular
 * bliebe sonst in der Tabulatorfolge der waagerechten Leiste stehen.
 */
.bnws-menu .bnws-menu__search {
	display: none;
}

.bnws-menu[data-bnws-panel="offcanvas"] .bnws-menu__search,
.bnws-menu[data-bnws-panel="fullscreen"] .bnws-menu__search,
.bnws-menu[data-bnws-panel="dropdown"] .bnws-menu__search {
	display: flex;
	align-items: stretch;
	gap: 0.25em;
	/* Im Schiebe-Modus ist das Panel eine Flex-Spalte. Ohne das hier würde das
	   Formular mit der Ebenenfläche um den Platz streiten und zusammengedrückt. */
	flex: 0 0 auto;
	margin-block-end: var(--bnws-search-gap);
	box-sizing: border-box;
}

.bnws-menu[data-bnws-panel="offcanvas"] .bnws-menu__search--bottom,
.bnws-menu[data-bnws-panel="fullscreen"] .bnws-menu__search--bottom,
.bnws-menu[data-bnws-panel="dropdown"] .bnws-menu__search--bottom {
	margin-block: var(--bnws-search-gap) 0;
}

/* Die Beschriftung ist da und wird vorgelesen, nur nicht gezeigt. Nicht
   `display: none` und nicht `visibility: hidden` — beides nähme sie auch dem
   Screenreader. Ein Platzhaltertext ist kein Ersatz: er verschwindet beim
   Tippen und wird nicht überall angesagt. */
.bnws-menu .bnws-menu__search-label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Die Schrift bleibt bei Spezifität 0 — sonst käme die Gruppen-Steuerung
   „Typografie" nicht dagegen an. Dieselbe Regel wie bei den Menülinks. */
:where(.bnws-menu__search-field) {
	font: inherit;
}

/* Alles Übrige auf 0,4,0, wie beim Schließen-Knopf: ein Suchfeld und ein
   Absende-Knopf sind genau die Elemente, für die jedes Theme und jeder
   Baukasten eigene Vorgaben mitbringt — `input[type="search"]` und `button`
   stehen in jedem Reset. Vier Fehler dieser Familie stehen im README. */
.bnws-menu .bnws-menu__search-field.bnws-menu__search-field.bnws-menu__search-field {
	appearance: none;
	flex: 1 1 auto;
	min-inline-size: 0;
	box-sizing: border-box;
	margin: 0;
	padding: var(--bnws-search-padding-block) var(--bnws-search-padding-inline);
	color: var(--bnws-search-color);
	background: var(--bnws-search-bg);
	border-radius: var(--bnws-search-radius);
	box-shadow: none;
	block-size: auto;
	inline-size: auto;
}

.bnws-menu .bnws-menu__search-field.bnws-menu__search-field.bnws-menu__search-field::placeholder {
	color: var(--bnws-search-placeholder-color);
	/* Firefox dämpft Platzhalter von sich aus auf 0,54 — sonst stimmt die
	   eingestellte Farbe im Ergebnis nicht mit der gemessenen überein. */
	opacity: 1;
}

.bnws-menu .bnws-menu__search-submit.bnws-menu__search-submit.bnws-menu__search-submit {
	appearance: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	margin: 0;
	padding: var(--bnws-search-padding-block);
	color: var(--bnws-search-icon-color);
	background: none;
	box-shadow: none;
	border-radius: var(--bnws-search-radius);
	min-inline-size: 44px;
	min-block-size: 44px;
	inline-size: auto;
	block-size: auto;
	cursor: pointer;
}

/* Rahmen und display auf 0,2,0 — über dem Theme-Reset, aber unter den
   Gruppen-Steuerungen, damit ein eingestellter Rahmen gewinnt. */
.bnws-menu .bnws-menu__search-field {
	border: 0;
}

.bnws-menu .bnws-menu__search-submit {
	display: inline-flex;
	border: 0;
}

.bnws-menu .bnws-menu__icon--search svg {
	inline-size: 1em;
	block-size: 1em;
}

/*
 * Der Aufklapp-Knopf gehört neben den Link, nicht darunter.
 *
 * Wir geben dem Link weiter oben `inline-size: 100%` — richtig, solange der
 * Menüpunkt ein gewöhnlicher Block ist. Macht fremdes CSS ihn aber zu einem
 * `flex`-Kasten mit `flex-wrap: wrap` — und das tun Themes und Baukästen
 * regelmäßig, wir selbst tun es nirgends —, dann ist die Ausgangsbreite des
 * Links die ganze Zeile, und der 44 px breite Knopf muss umbrechen.
 *
 * Gemessen im eingeklappten Menü bei 390 px: Zeile 222 px, Link 222 px,
 * Knopf darunter. In beiden Modi, „aufklappen" wie „einschieben".
 *
 * `flex: 1 1 0` setzt die Ausgangsbreite auf null und lässt den Link den Rest
 * nehmen; `min-inline-size: 0` erlaubt ihm, unter seine Textbreite zu
 * schrumpfen. Ist der Menüpunkt kein Flex-Kasten, greift beides nicht und
 * `inline-size: 100%` gilt weiter.
 *
 * Bewusst nur im eingeklappten Menü: in der Leiste am Bildschirm bestimmt die
 * Breite des Links die Breite des Menüpunktes, und die soll sich nicht ändern.
 */
.bnws-menu[data-bnws-panel="offcanvas"] .bnws-menu__link,
.bnws-menu[data-bnws-panel="fullscreen"] .bnws-menu__link,
.bnws-menu[data-bnws-panel="dropdown"] .bnws-menu__link {
	flex: 1 1 0;
	min-inline-size: 0;
}

.bnws-menu[data-bnws-panel="offcanvas"] .bnws-menu__panel {
	inset-block: var(--bnws-admin-bar, 0px) 0;
	inline-size: var(--bnws-panel-width);
	max-inline-size: 100vw;
	/* dvh statt vh: sonst rutscht der untere Rand unter die Adressleiste. */
	block-size: calc(100vh - var(--bnws-admin-bar, 0px));
	block-size: calc(100dvh - var(--bnws-admin-bar, 0px));
}

/* Die Einfahrrichtung darf ausschließlich im ausgefahrenen Modus wirken.
   Ohne die Einschränkung auf data-bnws-panel="offcanvas" verschiebt das
   translate das Panel auch im eingebetteten Zustand um seine eigene Breite
   nach rechts — die Seite bekommt dann einen waagrechten Bildlauf. */
.bnws-menu[data-bnws-panel="offcanvas"][data-bnws-drawer-side="end"] .bnws-menu__panel {
	inset-inline-end: 0;
	inset-inline-start: auto;
	translate: calc(var(--bnws-dir) * 100%) 0;
}

.bnws-menu[data-bnws-panel="offcanvas"][data-bnws-drawer-side="start"] .bnws-menu__panel {
	inset-inline-start: 0;
	inset-inline-end: auto;
	translate: calc(var(--bnws-dir) * -100%) 0;
}

.bnws-menu[data-bnws-panel="fullscreen"] .bnws-menu__panel {
	inset: var(--bnws-admin-bar, 0px) 0 0 0;
	inline-size: 100%;
	block-size: calc(100vh - var(--bnws-admin-bar, 0px));
	block-size: calc(100dvh - var(--bnws-admin-bar, 0px));
	opacity: 0;
	scale: 0.98;
	transition: opacity var(--bnws-menu-duration) var(--bnws-menu-easing),
		scale var(--bnws-menu-duration) var(--bnws-menu-easing),
		visibility 0s linear var(--bnws-menu-duration);
}

.bnws-menu[data-bnws-panel="dropdown"] .bnws-menu__panel {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-end: 0;
	inline-size: var(--bnws-panel-width);
	block-size: auto;
	max-block-size: 80vh;
	margin-block-start: var(--bnws-sub-offset);
	opacity: 0;
	translate: 0 -0.5em;
}

.bnws-menu[data-bnws-panel="offcanvas"] .bnws-menu__panel[data-state="closed"],
.bnws-menu[data-bnws-panel="fullscreen"] .bnws-menu__panel[data-state="closed"],
.bnws-menu[data-bnws-panel="dropdown"] .bnws-menu__panel[data-state="closed"] {
	visibility: hidden;
}

.bnws-menu[data-bnws-panel="offcanvas"] .bnws-menu__panel[data-state="open"],
.bnws-menu[data-bnws-panel="offcanvas"] .bnws-menu__panel[data-state="opening"] {
	translate: 0 0;
}

.bnws-menu[data-bnws-panel="fullscreen"] .bnws-menu__panel[data-state="open"],
.bnws-menu[data-bnws-panel="fullscreen"] .bnws-menu__panel[data-state="opening"],
.bnws-menu[data-bnws-panel="dropdown"] .bnws-menu__panel[data-state="open"],
.bnws-menu[data-bnws-panel="dropdown"] .bnws-menu__panel[data-state="opening"] {
	opacity: 1;
	scale: none;
	translate: 0 0;
	visibility: visible;
	transition-delay: 0s;
}

/* --- Abdunklung ---------------------------------------------------------- */

/* Die Abdunklung endet ebenfalls unter der Werkzeugleiste. Sie über die Leiste
   zu legen würde deren Beschriftungen abdunkeln, ohne dass sie unbedienbar
   wären — ein Zustand, den niemand erwartet. */
:where(.bnws-menu__overlay) {
	position: fixed;
	inset: var(--bnws-admin-bar, 0px) 0 0 0;
	z-index: var(--bnws-z-overlay);
	background: var(--bnws-overlay-color);
	opacity: 0;
	transition: opacity var(--bnws-menu-duration) var(--bnws-menu-easing);
}

@supports (backdrop-filter: blur(1px)) {
	:where(.bnws-menu__overlay) {
		backdrop-filter: blur(var(--bnws-overlay-blur));
	}
}

.bnws-menu[data-bnws-open="1"] .bnws-menu__overlay {
	opacity: 1;
}

.bnws-menu__overlay[hidden] {
	display: none;
}

/* --- Herausgehobene Panels ----------------------------------------------- */

/* Popover-Pfad: das Panel bleibt im DOM und wandert nur in die oberste
   Zeichenebene. Kein Elementor-Selektor bricht, keine Tabulatorreihenfolge
   verschiebt sich. */
.bnws-menu__submenu:popover-open,
.bnws-menu__mega:popover-open {
	position: fixed;
	margin: 0;
	inset: auto;
	border: 0;
	padding: 0;
	overflow: visible;
}

/* Portal-Pfad: nur dort, wo die Popover-API fehlt. */
.bnws-menu-portal {
	position: fixed;
	inset: 0;
	z-index: var(--bnws-z-portal, 900);
	pointer-events: none;
}

.bnws-menu-portal > * {
	position: fixed;
	pointer-events: auto;
}

.bnws-menu__sentinel {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* --- Sichtbarer Fokus ---------------------------------------------------- */

/* outline statt box-shadow: ein Schattenring wird von einem Vorfahren mit
   overflow:hidden abgeschnitten, ein outline nicht. */
:where(.bnws-menu) :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@supports not selector(:focus-visible) {
	:where(.bnws-menu) :focus {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}
}

/* --- Ohne JavaScript ----------------------------------------------------- */

/* Solange das Skript nicht gelaufen ist, öffnen Maus und Tastatur die
   Untermenüs rein über CSS. Das Menü ist damit auch dann bedienbar, wenn ein
   Optimierer das Skript verschluckt. */
.bnws-menu:not([data-bnws-ready]) .bnws-menu__item:hover > .bnws-menu__submenu,
.bnws-menu:not([data-bnws-ready]) .bnws-menu__item:focus-within > .bnws-menu__submenu,
.bnws-menu:not([data-bnws-ready]) .bnws-menu__item:hover > .bnws-menu__mega,
.bnws-menu:not([data-bnws-ready]) .bnws-menu__item:focus-within > .bnws-menu__mega {
	display: block;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	translate: none;
	scale: none;
	block-size: auto;
}

/* --- Rechtsläufige Sprachen ---------------------------------------------- */

/* Zwei Regeln genügen, weil alles andere logisch formuliert ist:
   die Richtungsvariable für Verschiebungen und die Spiegelung des Pfeils. */
[dir="rtl"] .bnws-menu,
.bnws-menu--rtl {
	--bnws-dir: -1;
}

[dir="rtl"] .bnws-menu__icon--back,
.bnws-menu--rtl .bnws-menu__icon--back {
	scale: -1 1;
}

/* --- Bewegung reduzieren ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.bnws-menu {
		--bnws-menu-duration: 0ms;
		--bnws-menu-delay: 0ms;
	}

	.bnws-menu *,
	.bnws-menu::before,
	.bnws-menu::after {
		transition-duration: 0ms;
		animation-duration: 0ms;
	}
}

.bnws-menu[data-bnws-motion="reduce"] {
	--bnws-menu-duration: 0ms;
	--bnws-menu-delay: 0ms;
}

/* --- Windows-Kontrastmodus ----------------------------------------------- */

@media (forced-colors: active) {
	.bnws-menu__burger > span {
		border-block-start-color: ButtonText;
	}

	.bnws-menu__submenu,
	.bnws-menu__mega,
	.bnws-menu[data-bnws-panel="offcanvas"] .bnws-menu__panel,
	.bnws-menu[data-bnws-panel="fullscreen"] .bnws-menu__panel,
	.bnws-menu[data-bnws-panel="dropdown"] .bnws-menu__panel {
		border: 1px solid ButtonText;
	}
}

/* --- Ausdruck ------------------------------------------------------------ */

/* Die Selektoren tragen hier bewusst dieselbe Spezifität wie die
   Modus-Regeln weiter oben. Mit den kurzen Klassenselektoren allein bliebe im
   Ausdruck der Auslöser stehen und das Menü unsichtbar — Media Queries erhöhen
   die Spezifität nicht. */
@media print {
	.bnws-menu[data-bnws-panel] > .bnws-menu__trigger,
	.bnws-menu[data-bnws-panel] .bnws-menu__overlay,
	.bnws-menu[data-bnws-panel] .bnws-menu__panel-header {
		display: none;
	}

	.bnws-menu[data-bnws-panel] .bnws-menu__panel,
	.bnws-menu[data-bnws-panel] .bnws-menu__submenu[data-state],
	.bnws-menu[data-bnws-panel] .bnws-menu__mega[data-state] {
		display: block;
		position: static;
		visibility: visible;
		opacity: 1;
		inline-size: auto;
		block-size: auto;
		max-block-size: none;
		overflow: visible;
		translate: none;
		scale: none;
	}

	.bnws-menu[data-bnws-panel] .bnws-menu__list {
		position: static;
		translate: none;
	}
}

/* --- Nachgeladene Mega-Vorlagen ------------------------------------------ */

/* Die Hülle bekommt eine Mindesthöhe, damit das Panel nicht erst als Strich
   aufgeht und dann aufspringt, wenn der Inhalt eintrifft. */
:where(.bnws-menu__mega[data-bnws-loading]) .bnws-menu__mega-inner {
	min-block-size: 6rem;
}

.bnws-menu__mega[data-bnws-loading] .bnws-menu__mega-inner::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin-block-start: -0.75rem;
	margin-inline-start: -0.75rem;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: bnws-menu-spin 0.8s linear infinite;
}

.bnws-menu__mega[data-bnws-loading] .bnws-menu__mega-inner {
	position: relative;
}

@keyframes bnws-menu-spin {
	to { transform: rotate(360deg); }
}

/* Kommt die Vorlage nicht an, bleibt das Panel leer statt halb aufgebaut. Der
   Menüpunkt ist weiterhin ein Link — der Weg zum Inhalt ist offen. */
.bnws-menu__mega[data-bnws-failed] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.bnws-menu__mega[data-bnws-loading] .bnws-menu__mega-inner::after {
		animation: none;
	}
}

/* --- Warenkorb ------------------------------------------------------------ */

/* Für Text, der nur angesagt werden soll. Kein `display:none`: das nähme ihn
   auch dem Screenreader. */
.bnws-menu__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
	border: 0;
}

:where(.bnws-menu__cart-count) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 1.4em;
	padding-inline: 0.35em;
	border-radius: 999px;
	background: var(--bnws-cart-count-bg, currentColor);
	color: var(--bnws-cart-count-color, Canvas);
	font-size: 0.75em;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
}

:where(.bnws-menu__cart-total) {
	font-size: 0.85em;
	opacity: 0.8;
}

/* Bei erzwungenen Farben verschwindet ein Hintergrund. Ein Rahmen bleibt. */
@media (forced-colors: active) {
	.bnws-menu__cart-count {
		border: 1px solid ButtonText;
		background: ButtonFace;
		color: ButtonText;
	}
}