/* =====================================================================
   Vösendorf Navigation
   Desktop: Maße/Animation 1:1 vom bisherigen JetMenu übernommen.
   ===================================================================== */

.voe-nav,
.voe-mm,
.voe-mm-portal {
	--voe-primary: var(--e-global-color-primary, #0D5C69);
	--voe-secondary: var(--e-global-color-secondary, #00A096);
	--voe-dark: var(--e-global-color-accent, #06292D);
	--voe-line-soft: var(--e-global-color-e611f4f, #C4CFD4);
	--voe-bg-soft: var(--e-global-color-c6cdabb, #F7FBFC);
	--voe-font: var(--e-global-typography-primary-font-family, "TT Fors"), "Helvetica Neue", Arial, sans-serif;
	--voe-ease: cubic-bezier(.48, .01, .5, .99); /* JetMenu */
	font-family: var(--voe-font);
}

.voe-nav *, .voe-nav *::before, .voe-nav *::after,
.voe-mm *, .voe-mm *::before, .voe-mm *::after,
.voe-mm-portal *, .voe-mm-portal *::before, .voe-mm-portal *::after { box-sizing: border-box; }

.voe-nav ul, .voe-mm-portal ul { list-style: none; margin: 0; padding: 0; }
.voe-nav li, .voe-mm-portal li { margin: 0; padding: 0; }
.voe-nav a, .voe-mm-portal a { text-decoration: none !important; box-shadow: none !important; }
.voe-mm button, .voe-mm-portal button {
	font: inherit; letter-spacing: inherit; text-transform: none; text-align: left;
	background: none; border: 0; border-radius: 0; box-shadow: none;
	margin: 0; padding: 0; min-height: 0; color: inherit;
	cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.voe-nav :focus-visible, .voe-mm :focus-visible, .voe-mm-portal :focus-visible {
	outline: 2px solid var(--voe-secondary) !important;
	outline-offset: 3px;
}
.voe-i { display: block; flex: none; }

/* =====================================================================
   DESKTOP – Leiste
   ===================================================================== */

.voe-nav { position: relative; }

.voe-nav__bar {
	position: relative;          /* Bezug für das Mega-Panel */
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.voe-nav__top { position: static; padding-right: 30px !important; }

.voe-nav__toplink {
	display: flex !important;
	align-items: center;
	padding: 0 0 10px !important;
	color: var(--voe-dark) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	white-space: nowrap;
}
.voe-nav__toplink .voe-i--down {
	width: 15px;
	height: 8px;
	margin-left: 10px;
	color: var(--voe-secondary);
}

/* =====================================================================
   DESKTOP – Mega-Panel (Animation „Move Down“ wie JetMenu)
   ===================================================================== */

.voe-nav__mega {
	position: absolute;
	z-index: 999;
	top: 80%;
	left: 0;
	width: 1149px;
	max-width: calc(100vw - 152px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: top .3s var(--voe-ease), opacity .3s var(--voe-ease), visibility 1s linear;
}
.voe-nav__top.is-open > .voe-nav__mega {
	top: 100%;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.voe-nav__section {
	margin: 15px -60px 0;
	padding: 60px 80px;
	background: #fff;
	box-shadow: 0 5px 10px -5px rgba(153, 155, 168, .25);
}

.voe-nav__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
}
.voe-nav__col { min-width: 0; padding-right: 30px; }

/* Spaltenüberschrift: 24px, Abstand 25px */
.voe-nav__heading {
	display: block !important;
	min-height: 24px;
	margin: 0 0 25px !important;
	padding: 0 !important;
	color: var(--voe-primary) !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
}
.voe-nav__heading--empty { height: 24px; }

/* Links: Zeilen 48px, Linie 1px Petrol, Pfeil 14px */
.voe-nav__links > li:first-child > .voe-nav__link { border-top: 1px solid var(--voe-primary); }
.voe-nav__link {
	display: flex !important;
	align-items: center;
	gap: 5px;
	min-height: 47px;
	padding: 11px 0 !important;
	border-bottom: 1px solid var(--voe-primary);
	color: var(--voe-primary) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 14px !important;
}
.voe-nav__link > span { flex: 0 1 auto; }
.voe-nav__link .voe-i--arrow {
	width: 14px;
	height: 10px;
	color: var(--voe-secondary);
}

/* Kasten rechts */
.voe-nav__col--box { padding-right: 0; }
.voe-nav__box {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0 -14px 0 15px;
	padding: 25px 0 0;
	border: 1px solid var(--voe-primary);
}
.voe-nav__box-links { padding: 0 25px !important; }
.voe-nav__box-link {
	display: flex !important;
	align-items: center;
	padding: 15px 0 0 !important;
	color: var(--voe-primary) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 19px !important;
}
.voe-nav__box-link .voe-i--right {
	width: 15px;
	height: 15px;
	padding: 0 3px;
	margin-right: 10px;
	color: var(--voe-primary);
}
.voe-nav__box-foot {
	display: block !important;
	margin-top: auto;
	padding: 12px 0 13px 25px !important;
	border-top: 1px solid var(--voe-primary);
	color: var(--voe-primary) !important;
	font-size: 14px !important;
	line-height: 14px !important;
}
.voe-nav__box > .voe-nav__box-links { flex: 1 0 auto; padding-bottom: 40px !important; }

/* =====================================================================
   MOBIL – Toggle
   ===================================================================== */

.voe-mm { display: inline-block; }

.voe-mm__toggle {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	padding: 10px 2px !important;
	background: none !important;
	border: 0 !important;
	color: var(--voe-dark) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer;
}
.voe-mm__burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 26px;
	height: 16px;
}
.voe-mm__burger span {
	display: block;
	height: 1.5px;
	background: var(--voe-secondary);
	border-radius: 1px;
}

/* =====================================================================
   MOBIL – Panel (per JS direkt im <body>)
   ===================================================================== */

.voe-mm-portal { --voe-slide: cubic-bezier(.22, .61, .36, 1); }

.voe-mm__overlay {
	position: fixed;
	inset: var(--voe-top, 0px) 0 0 0;
	z-index: 99998;
	background: rgba(6, 41, 45, .45);
	opacity: 0;
	transition: opacity .3s var(--voe-slide);
}
.voe-mm__panel {
	position: fixed;
	top: var(--voe-top, 0px);
	bottom: 0;
	left: 0;
	z-index: 99999;
	width: min(88vw, 400px);
	display: flex;
	flex-direction: column;
	background: #fff;
	transform: translateX(-100%);
	transition: transform .38s var(--voe-slide);
	overscroll-behavior: contain;
}
.is-open > .voe-mm__overlay { opacity: 1; }
.is-open > .voe-mm__panel { transform: none; box-shadow: 0 0 40px rgba(6, 41, 45, .18); }
.voe-mm__overlay[hidden], .voe-mm__panel[hidden] { display: none; }

.voe-mm__stripe {
	flex: 0 0 4px;
	background: linear-gradient(90deg,
		#0D5C69 0 12.5%, #0E72B5 12.5% 25%, #39A9DC 25% 37.5%, #00A096 37.5% 50%,
		#97BF0D 50% 62.5%, #DEDC00 62.5% 75%, #F8B334 75% 87.5%, #93117D 87.5% 100%);
}

.voe-mm__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
}
.voe-mm__brand { display: block; color: var(--voe-primary) !important; }
.voe-mm__brand img { display: block; width: 112px; height: auto; }
.voe-mm__close {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -12px !important;
	color: var(--voe-dark) !important;
}
.voe-mm__close .voe-i { width: 18px; height: 18px; }

/* Ebenen */
.voe-mm__views { position: relative; flex: 1 1 auto; overflow: hidden; }
.voe-mm__view {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 20px 32px;
	background: #fff;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform .32s var(--voe-slide), visibility 0s linear .32s;
}
.voe-mm__view.is-active { visibility: visible; transform: none; transition: transform .32s var(--voe-slide), visibility 0s; }
.voe-mm__view[data-view="root"] { transform: translateX(-24%); }
.voe-mm__view[data-view="root"].is-active { transform: none; }

/* Zeilen – eine ruhige Listenform für alles */
.voe-mm__list { border-top: 1px solid var(--voe-line-soft); }
.voe-mm__row {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 50px;
	padding: 13px 0 !important;
	border-bottom: 1px solid var(--voe-line-soft) !important;
	color: var(--voe-dark) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
}
.voe-mm__row .voe-i--right { width: 7px; height: 12px; color: var(--voe-secondary); }
.voe-mm__row .voe-i--arrow { width: 14px; height: 10px; color: var(--voe-secondary); }
.voe-mm__row[aria-current="page"] { color: var(--voe-secondary) !important; }

/* Ebene 0: etwas größer */
.voe-mm__list--root { margin-top: 8px; }
.voe-mm__row--root {
	min-height: 60px;
	font-size: 19px !important;
	color: var(--voe-primary) !important;
}
.voe-mm__list--root .is-active > .voe-mm__row--root { color: var(--voe-secondary) !important; }

/* Ebene 1: Kopfzeile mit Zurück + Titel (bleibt beim Scrollen stehen) */
.voe-mm__subhead {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 -20px;
	padding: 8px 20px 8px 8px;
	background: #fff;
	border-bottom: 1px solid var(--voe-primary);
}
.voe-mm__back {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--voe-secondary) !important;
}
.voe-mm__back .voe-i { width: 9px; height: 16px; }
.voe-mm__subtitle {
	color: var(--voe-primary);
	font-size: 19px;
	line-height: 1.2;
}
.voe-mm__subhead + .voe-mm__list { border-top: 0; }
.voe-mm__row--overview { color: var(--voe-secondary) !important; }

.voe-mm__group { margin-top: 28px; }
.voe-mm__group:not(:has(.voe-mm__label)),
.voe-mm__group--plain { margin-top: 0; }
.voe-mm__group--plain > .voe-mm__list { border-top: 0; }
.voe-mm__label {
	margin: 0 0 8px !important;
	color: var(--voe-secondary);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .1em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Fuß mit Pill-Button wie im Header */
.voe-mm__foot {
	flex: none;
	padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--voe-line-soft);
}
.voe-mm__cta {
	display: inline-block !important;
	padding: 3px 12px 3px 10px !important;
	border-radius: 20px;
	background: var(--voe-primary);
	color: #fff !important;
	font-size: 14px !important;
	line-height: 22px !important;
}

html.voe-mm-locked, html.voe-mm-locked body { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
	.voe-nav__mega, .voe-mm__panel, .voe-mm__overlay, .voe-mm__view { transition: none !important; }
}

/* =====================================================================
   Theme-Overrides: Hello Elementor färbt button:hover/:focus pink (#c36)
   ===================================================================== */
.voe-mm button,
.voe-mm button:hover,
.voe-mm button:focus,
.voe-mm button:active,
.voe-mm-portal button,
.voe-mm-portal button:hover,
.voe-mm-portal button:focus,
.voe-mm-portal button:active,
.voe-mm-portal [type="button"]:hover,
.voe-mm-portal [type="button"]:focus {
	background: transparent !important;
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.voe-mm-portal .voe-mm__row--root,
.voe-mm-portal .voe-mm__row--root:hover,
.voe-mm-portal .voe-mm__row--root:focus { color: var(--voe-primary) !important; border-bottom: 1px solid var(--voe-line-soft) !important; }
.voe-mm-portal .voe-mm__list--root .is-active > .voe-mm__row--root { color: var(--voe-secondary) !important; }
.voe-mm-portal .voe-mm__close,
.voe-mm-portal .voe-mm__close:hover,
.voe-mm-portal .voe-mm__close:focus { color: var(--voe-dark) !important; }
.voe-mm-portal .voe-mm__back,
.voe-mm-portal .voe-mm__back:hover,
.voe-mm-portal .voe-mm__back:focus { color: var(--voe-secondary) !important; }
.voe-mm .voe-mm__toggle:hover,
.voe-mm .voe-mm__toggle:focus { color: var(--voe-dark) !important; }

/* Fokusrahmen nur bei Tastaturbedienung, nicht nach Tipp/Klick */
.voe-mm button:focus:not(:focus-visible),
.voe-mm-portal button:focus:not(:focus-visible),
.voe-mm-portal a:focus:not(:focus-visible) { outline: none !important; }

/* Dezentes Tipp-Feedback */
.voe-mm-portal .voe-mm__row:active { background: var(--voe-bg-soft) !important; }

.voe-mm__panel:focus { outline: none !important; }

/* =====================================================================
   Theme-Reset (Hello Elementor reset.css/style.css) neutralisieren.
   Unser CSS lädt im <head> VOR dem Theme, daher höhere Gewichtung + !important.
   ===================================================================== */
.voe-mm-portal button,
.voe-mm button {
	width: auto;
	white-space: normal !important;
	user-select: auto !important;
	text-align: left !important;
	font-family: var(--voe-font) !important;
	border-radius: 0 !important;
	transition: none;
}
.voe-mm-portal .voe-mm__row { width: 100% !important; display: flex !important; justify-content: space-between !important; }
.voe-mm-portal .voe-mm__close,
.voe-mm-portal .voe-mm__back { width: 44px !important; height: 44px !important; display: inline-flex !important; justify-content: center !important; padding: 0 !important; }
.voe-mm .voe-mm__toggle { width: auto !important; display: inline-flex !important; padding: 10px 2px !important; border: 0 !important; }