/* ==========================================================================
   Blütenbande · BB3 Navigation (Oktober 2026)
   Hauptmenü im Stil von linear.app, Farben und Größen aus dem BB3-System.
   - Desktop: Level 1 als Pillen mit Hover-Fläche, Mega-Menü „Anbau“
     (Divi-Canvas „Mega-Menü Anbau“, eingebunden per Canvas Portal im Header)
   - Mobil: Vollbild-Menü (Divi-Canvas „Mobile Menu“) mit Gruppenlabels
     und großen Links
   Gehört zu: js/bb3-nav.js · Tokens: bb3-komponenten.css (:root)
   ========================================================================== */

:root {
	--bb-nav-fs: calc(var(--bb3-fs-label, clamp(.75rem, .73rem + .1vw, .844rem)) + .15625rem); /* Label-Größe + 2,5px */
	--bb-nav-ease: cubic-bezier(.25, .46, .45, .94);
	--bb-nav-hover: color-mix(in srgb, var(--bb3-text, #302d2c) 8%, transparent);
	--bb-nav-hover-soft: color-mix(in srgb, var(--bb3-text, #302d2c) 5%, transparent);
	--bb-nav-line: color-mix(in srgb, var(--bb3-text, #302d2c) 10%, transparent);
}

/* --------------------------------------------------------------------------
   Desktop · Level 1
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
	.et-l--header .et_pb_menu .et-menu {
		display: flex;
		align-items: center;
		gap: 2px;
	}

	.et-l--header .et_pb_menu .et-menu > li {
		padding: 0 !important;
		margin: 0 !important;
	}

	.et-l--header .et_pb_menu .et-menu > li > a {
		display: inline-flex !important;
		align-items: center;
		height: 2rem;
		padding: 0 .75rem !important;
		border-radius: var(--bb3-r-rund, 999px);
		font-size: var(--bb-nav-fs) !important;
		line-height: 1.5 !important;
		color: var(--bb3-muted, #6b645c) !important;
		background: transparent;
		opacity: 1 !important;
		transition: color .1s var(--bb-nav-ease), background-color .1s var(--bb-nav-ease);
	}

	.et-l--header .et_pb_menu .et-menu > li > a:hover,
	.et-l--header .et_pb_menu .et-menu > li > a:focus-visible,
	.et-l--header .et_pb_menu .et-menu > li.bb-mega-open > a {
		color: var(--bb3-schwarz, #000) !important;
		background: var(--bb-nav-hover);
	}

	/* aktuelle Seite bleibt erkennbar, ohne Fläche */
	.et-l--header .et_pb_menu .et-menu > li.current-menu-item > a,
	.et-l--header .et_pb_menu .et-menu > li.current-menu-ancestor > a,
	.et-l--header .et_pb_menu .et-menu > li.current-page-ancestor > a {
		color: var(--bb3-schwarz, #000) !important;
	}

	.et-l--header .et_pb_menu .et-menu > li > a:focus-visible {
		outline: 2px solid var(--bb3-gruen, #669e32);
		outline-offset: 2px;
	}

	/* Mega-Menü ersetzt das Divi-Dropdown, sobald JS läuft (ohne JS bleibt es) */
	.bb-js .et-l--header .et_pb_menu .bb-mega-trigger > .sub-menu {
		display: none !important;
	}
	.bb-js .et-l--header .et_pb_menu .bb-mega-trigger > a::after {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   Desktop · Mega-Menü (Panel)
   -------------------------------------------------------------------------- */
.bb-mega-portal {
	/* nimmt im Header keinen Platz ein */
	position: static !important;
	width: 0 !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 0 !important;
}

.bb-mega-portal > .et-l--header {
	display: contents;
}

.et_pb_section.bb-mega {
	position: fixed !important;
	top: var(--bb-mega-top, 100px);
	left: var(--bb-mega-left, 50%);
	z-index: 100000;
	width: min(53.75rem, calc(100vw - 2rem)) !important;
	max-width: none !important;
	margin: 0 !important;
	padding: .5rem .625rem .625rem .5rem !important;
	font-family: inherit;
	font-size: var(--bb-nav-fs);
	line-height: 1.5;
	color: var(--bb3-text, #302d2c);
	background: color-mix(in srgb, var(--bb3-creme, #fbf7f0) 94%, transparent) !important;
	-webkit-backdrop-filter: blur(32px);
	backdrop-filter: blur(32px);
	border: 1px solid var(--bb-nav-line);
	border-radius: .875rem;
	box-shadow: 0 8px 32px color-mix(in srgb, var(--bb3-text, #302d2c) 14%, transparent);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px) scale(.985);
	transform-origin: top center;
	pointer-events: none;
	transition:
		opacity .18s cubic-bezier(.455, .03, .515, .955),
		transform .18s cubic-bezier(.455, .03, .515, .955),
		visibility 0s linear .18s;
}

.et_pb_section.bb-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition:
		opacity .18s cubic-bezier(.455, .03, .515, .955),
		transform .18s cubic-bezier(.455, .03, .515, .955),
		visibility 0s;
}

@media (max-width: 980px) {
	.et_pb_section.bb-mega {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.et_pb_section.bb-mega,
	.et_pb_section.bb-mega.is-open {
		transition: none;
		transform: none;
	}
}

/* Raster: drei Spalten auf heller Innenfläche */
.bb-mega .et_pb_row.bb-mega__grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 1.5rem;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: .75rem !important;
	background: var(--bb-nav-hover-soft);
	border-radius: .375rem;
	box-shadow: inset 0 0 0 1px var(--bb-nav-hover-soft);
}

.bb-mega .et_pb_row.bb-mega__foot {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bb-mega .et_pb_column {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

.bb-mega .et_pb_text,
.bb-mega .et_pb_text_inner {
	margin: 0 !important;
	padding: 0 !important;
	font-size: var(--bb-nav-fs) !important;
	line-height: 1.5 !important;
}

.bb-mega ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.bb-mega li {
	margin: 0 !important;
	padding: 0 !important;
}

.bb-mega li::before,
.bb-mega li::marker {
	content: none !important;
}

.bb-mega .bb-mega__list {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/* Level 2: Titel + Beschreibung */
.bb-mega a.bb-mega__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: .875rem 1.5rem .875rem 1rem;
	border-radius: .375rem;
	text-decoration: none;
	transition: background-color .12s var(--bb-nav-ease), color .12s var(--bb-nav-ease);
}

.bb-mega .bb-mega__title {
	font-size: var(--bb-nav-fs);
	font-weight: 500;
	line-height: 1.5;
	color: var(--bb3-text, #302d2c);
}

.bb-mega .bb-mega__desc {
	font-size: var(--bb-nav-fs);
	font-weight: 400;
	line-height: 1.5;
	color: var(--bb3-muted, #6b645c);
	transition: color .25s;
}

.bb-mega a.bb-mega__item:hover,
.bb-mega a.bb-mega__item:focus-visible {
	background: var(--bb-nav-hover-soft);
}

.bb-mega a.bb-mega__item:hover .bb-mega__title,
.bb-mega a.bb-mega__item:focus-visible .bb-mega__title {
	color: var(--bb3-schwarz, #000);
}

.bb-mega a.bb-mega__item:hover .bb-mega__desc,
.bb-mega a.bb-mega__item:focus-visible .bb-mega__desc {
	color: var(--bb3-text, #302d2c);
}

/* Level 3: schlichte Linkliste */
.bb-mega .bb-mega__label {
	margin: 0 !important;
	padding: .625rem 1rem .25rem !important;
	font-size: var(--bb-nav-fs);
	font-weight: 500;
	color: var(--bb3-muted, #6b645c);
}

.bb-mega .bb-mega__links a {
	display: block;
	padding: .625rem 1.5rem .625rem 1rem;
	border-radius: .375rem;
	font-size: var(--bb-nav-fs);
	font-weight: 400;
	line-height: 1.5;
	color: var(--bb3-text, #302d2c);
	text-decoration: none;
	transition: background-color .12s var(--bb-nav-ease), color .12s var(--bb-nav-ease);
}

.bb-mega .bb-mega__links a:hover,
.bb-mega .bb-mega__links a:focus-visible {
	background: var(--bb-nav-hover-soft);
	color: var(--bb3-schwarz, #000);
}

/* Fußzeile im Panel */
.bb-mega .bb-mega__note p {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 !important;
	padding: .75rem 1rem .25rem !important;
	font-size: var(--bb-nav-fs);
	line-height: 1.5;
}

.bb-mega .bb-mega__note-label {
	font-weight: 500;
	color: var(--bb3-text, #302d2c);
}

.bb-mega .bb-mega__note-text {
	color: var(--bb3-muted, #6b645c);
}

.bb-mega a.bb-mega__note-link {
	margin-left: auto;
	padding: .25rem .5rem;
	border-radius: var(--bb3-r-rund, 999px);
	color: var(--bb3-muted, #6b645c);
	text-decoration: none;
	transition: color .1s var(--bb-nav-ease), background-color .1s var(--bb-nav-ease);
}

.bb-mega a.bb-mega__note-link:hover,
.bb-mega a.bb-mega__note-link:focus-visible {
	color: var(--bb3-schwarz, #000);
	background: var(--bb-nav-hover);
}

.bb-mega a:focus-visible {
	outline: 2px solid var(--bb3-gruen, #669e32);
	outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Mobil · Vollbild-Menü (Canvas „Mobile Menu“)
   -------------------------------------------------------------------------- */
.et_pb_section.bb-mnav {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.bb-mnav .et_pb_row.bb-mnav__bar,
.bb-mnav .et_pb_row.bb-mnav__body {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	background: none !important;
	border-radius: 0 !important;
}

.bb-mnav .et_pb_row.bb-mnav__bar {
	padding: 1rem 1.5rem !important;
	border-bottom: 1px solid var(--bb-nav-line);
}

.bb-mnav .et_pb_row.bb-mnav__body {
	padding: 2.5rem 1.5rem 2rem !important;
}

.bb-mnav .et_pb_text,
.bb-mnav .et_pb_text_inner {
	margin: 0 !important;
	padding: 0 !important;
}

.bb-mnav .et_pb_text.bb-mnav__group + .et_pb_text.bb-mnav__group {
	margin-top: 3rem !important;
}

.bb-mnav .bb-mnav__label {
	margin: 0 0 .75rem !important;
	padding: 0 !important;
	font-size: var(--bb3-fs-klein, .875rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -.013em;
	color: var(--bb3-muted, #6b645c);
}

.bb-mnav ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.bb-mnav li {
	margin: 0 !important;
	padding: 0 !important;
}

.bb-mnav li::before,
.bb-mnav li::marker {
	content: none !important;
}

.bb-mnav .bb-mnav__list > li > a {
	display: block;
	padding: .3rem 0;
	font-size: var(--bb3-fs-h3, clamp(1.333rem, 1.25rem + .25vw, 1.5rem));
	font-weight: 500;
	line-height: 1.33;
	letter-spacing: -.012em;
	color: var(--bb3-text, #302d2c);
	text-decoration: none;
	transition: color .1s var(--bb-nav-ease);
}

.bb-mnav ul.bb-mnav__sub {
	margin: .125rem 0 .5rem !important;
	padding-left: 1rem !important;
	border-left: 1px solid var(--bb-nav-line);
}

.bb-mnav .bb-mnav__sub a {
	display: block;
	padding: .3rem 0;
	font-size: var(--bb3-fs-text, 1rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--bb3-muted, #6b645c);
	text-decoration: none;
	transition: color .1s var(--bb-nav-ease);
}

.bb-mnav .bb-mnav__list a:hover,
.bb-mnav .bb-mnav__list a:focus-visible {
	color: var(--bb3-schwarz, #000);
}

.bb-mnav .bb-mnav__list a[aria-current="page"] {
	color: var(--bb3-schwarz, #000);
	text-decoration: underline;
	text-decoration-color: var(--bb3-gruen, #669e32);
	text-decoration-thickness: 2px;
	text-underline-offset: .25em;
}

.bb-mnav a:focus-visible {
	outline: 2px solid var(--bb3-gruen, #669e32);
	outline-offset: 2px;
	border-radius: 2px;
}

.bb-mnav .bb-mnav__cta {
	margin-top: 3rem !important;
}

/* --------------------------------------------------------------------------
   Divi-Textvorgabe für Links (Größe, Unterstreichung) im Panel und im
   mobilen Menü neutralisieren
   -------------------------------------------------------------------------- */
.et_pb_section.bb-mega .et_pb_text_inner a,
.et_pb_section.bb-mnav .et_pb_text_inner a {
	text-decoration: none !important;
	letter-spacing: normal !important;
}

.et_pb_section.bb-mega .et_pb_text_inner a {
	font-size: var(--bb-nav-fs) !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
}

.et_pb_section.bb-mega .bb-mega__links a {
	color: var(--bb3-text, #302d2c) !important;
}

.et_pb_section.bb-mega .bb-mega__links a:hover,
.et_pb_section.bb-mega .bb-mega__links a:focus-visible {
	color: var(--bb3-schwarz, #000) !important;
}

.et_pb_section.bb-mega a.bb-mega__note-link {
	color: var(--bb3-muted, #6b645c) !important;
}

.et_pb_section.bb-mega a.bb-mega__note-link:hover,
.et_pb_section.bb-mega a.bb-mega__note-link:focus-visible {
	color: var(--bb3-schwarz, #000) !important;
}

.et_pb_section.bb-mnav .bb-mnav__list > li > a {
	font-size: var(--bb3-fs-h3, clamp(1.333rem, 1.25rem + .25vw, 1.5rem)) !important;
	font-weight: 500 !important;
	line-height: 1.33 !important;
	color: var(--bb3-text, #302d2c) !important;
}

.et_pb_section.bb-mnav .bb-mnav__sub a {
	font-size: var(--bb3-fs-text, 1rem) !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var(--bb3-muted, #6b645c) !important;
}

.et_pb_section.bb-mnav .bb-mnav__list a:hover,
.et_pb_section.bb-mnav .bb-mnav__list a:focus-visible,
.et_pb_section.bb-mnav .bb-mnav__list a[aria-current="page"] {
	color: var(--bb3-schwarz, #000) !important;
}

.et_pb_section.bb-mnav .bb-mnav__list a[aria-current="page"] {
	text-decoration: underline !important;
	text-decoration-color: var(--bb3-gruen, #669e32) !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: .25em !important;
}

/* Level 1: Abstände wachsen mit der Breite, ab 1200px eine Zeile */
@media (min-width: 981px) {
	.et-l--header .et_pb_menu .et-menu > li > a {
		padding: 0 clamp(.5rem, -.5rem + 1.4vw, .75rem) !important;
		white-space: nowrap;
	}
	.et-l--header .et_pb_menu .et-menu {
		gap: 0;
	}
}

@media (min-width: 1200px) {
	.et-l--header .et_pb_menu .et-menu {
		flex-wrap: nowrap !important;
	}
}

/* Portal aus dem Flex-Fluss nehmen (sonst zählt der Spaltenabstand doppelt) */
.bb-mega-portal {
	position: absolute !important;
	top: 0;
	left: 0;
	height: 0 !important;
	overflow: visible !important;
}

@media (min-width: 981px) {
	.et-l--header .et_pb_button {
		white-space: nowrap;
	}
}

/* Mobil: Menü füllt den Bildschirm und scrollt in sich */
.et_pb_section.bb-mnav {
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
}

.bb-mnav .et_pb_row.bb-mnav__bar {
	background: var(--bb3-sand, #ece4d6) !important;
	flex: 0 0 auto;
}

.bb-mnav .bb-mnav__close {
	cursor: pointer;
	line-height: 1;
}

.bb-mnav .et_pb_button_module_wrapper,
.bb-mnav .et_pb_button {
	margin-top: 0;
}

/* Mobil: über dem Sticky-Header liegen, Gruppenabstände wie Linear (48px) */
.et_pb_section.bb-mnav {
	z-index: 100001 !important;
}

.bb-mnav .bb-mnav__body > .et_pb_column {
	row-gap: 0 !important;
	gap: 0 !important;
}

.bb-mnav .et_pb_text.bb-mnav__group + .et_pb_text.bb-mnav__group,
.bb-mnav .bb-mnav__cta {
	margin-top: 2.5rem !important;
}

/* Mobil mit JS: Menü beginnt unter dem Header, eigene Kopfzeile entfällt,
   das Burger-Icon im Header wird zum Kreuz (js/bb3-nav.js) */
.bb-mnav-ready .et_pb_section.bb-mnav {
	top: var(--bb-mnav-top, 0px) !important;
	height: calc(100vh - var(--bb-mnav-top, 0px));
	height: calc(100dvh - var(--bb-mnav-top, 0px));
	border-top: 1px solid var(--bb-nav-line);
	animation: none !important;
	transform: none !important;
	opacity: 1 !important;
}

.bb-mnav-ready .bb-mnav .et_pb_row.bb-mnav__bar {
	display: none !important;
}

.bb-mnav-ready .et_pb_section.bb-mnav .et_pb_row.bb-mnav__body {
	padding-top: 2.25rem !important;
}

.bb-mnav-open,
.bb-mnav-open body {
	overflow: hidden;
}

.et-l--header .et-interaction-trigger-sbx7wnja5z:focus-visible {
	outline: 2px solid var(--bb3-gruen, #669e32);
	outline-offset: 4px;
	border-radius: 4px;
}

.bb-mnav-ready .et_pb_section.bb-mnav {
	min-height: 0 !important;
	max-height: calc(100vh - var(--bb-mnav-top, 0px));
	max-height: calc(100dvh - var(--bb-mnav-top, 0px));
}

/* Sprungmarken (z. B. Mitgliedsbeiträge auf der Startseite) nicht als aktuelle Seite zeigen */
@media (min-width: 981px) {
	.et-l--header .et_pb_menu .et-menu > li.menu-item-object-custom.current-menu-item > a[href*="#"]:not(:hover):not(:focus-visible) {
		color: var(--bb3-muted, #6b645c) !important;
	}
}