/* ==========================================================================
   V-TIME.de – Menü Content Komponente
   ========================================================================== */

/* ==========================================================================
   Header
   Logo mittig + Menü-Button rechts, steht im normalen Fluss und nimmt
   seinen Platz ein (liegt nicht über dem Seiteninhalt).

   Geöffnet liegt er ÜBER dem Overlay (z-index 1003 gegen dessen 1002),
   damit Logo und Close-Button sichtbar bleiben; geschlossen bleibt er
   unter der mitlaufenden Adresszeile (1001).
   ========================================================================== */

/* Header-Maße am gemeinsamen Wrapper, damit auch das Panel sie lesen kann
   (Innenabstand oben = Header-Höhe, sonst verdeckt der Header die ersten
   Menüpunkte). */
.main-menu-root {
	/* --- Container: Einrückung des Inhalts ---------------------------------- */
	--wm-max-width: 100%;
	--wm-inset-x: clamp(32px, 3.3vw, 64px);
	/* Vorlage: Logo 42px unter der Adresszeile, 52px Abstand nach unten */
	--wm-inset-top: clamp(24px, 2.19vw, 42px);
	--wm-inset-bottom: clamp(24px, 2.71vw, 52px);

	/* --- Logo & Menü-Button (jeweils HÖHEN) --------------------------------- */
	/* Höhe des sichtbaren Logos (Datei ohne transparenten Rand) */
	--wm-logo-height: clamp(110px, 12.34vw, 237px);
	--wm-trigger-size: clamp(22px, 1.8vw, 34px);

	--wm-header-height: calc(var(--wm-inset-top) + var(--wm-logo-height) + var(--wm-inset-bottom));

	/* --- Menü (Vorlage: 35pt, Zeilenabstand 60pt, alle Ebenen) ------------- */
	--wm-menu-size: clamp(18px, 1.823vw, 35px);
	/* Abstand Adresszeile -> Menü-Button (Versalien oben bündig mit dem Logo) */
	--wm-trigger-top: var(--wm-inset-top);
}

/* Mitlaufender Kopfbereich (JS setzt data-sticky-header und die Höhe der
   Adresszeile): Header-Wrapper geben ihre Kinder an #wrapper durch, damit
   die Adresszeile über die ganze Seite oben kleben kann; der Menü-Button
   ist fixiert und bleibt darunter stehen. */
#header[data-sticky-header],
#header[data-sticky-header] > .inside {
	display: contents;
}

#header[data-sticky-header] .top-bar {
	position: sticky;
	top: 0;
	z-index: 1001;
}

#header[data-sticky-header] .main-menu__trigger {
	position: fixed;
	z-index: 1000;
	top: calc(var(--top-bar-offset, 0px) + var(--wm-trigger-top));
	right: var(--wm-inset-x);
}

.main-menu__header {
	/* --- Farben ------------------------------------------------------------ */
	--wm-header-color: var(--color-primary);
	--wm-header-color-open: var(--color-primary);
	--wm-header-bg: var(--color-tertiary);

	/* relative statt static: sonst greift der z-index gegen das Overlay nicht */
	position: relative;
	z-index: 999;
	color: var(--wm-header-color);
	background: var(--wm-header-bg);
}

/* Offen: Overlay scheint durch den Header, Logo tritt zurück (Vorlage) */
.main-menu__header.is-open {
	z-index: 1003;
	color: var(--wm-header-color-open);
	background: transparent;
	/* Header liegt über dem Panel und würde die oberen Menüpunkte
	   verdecken: Klicks durchlassen, nur der Button bleibt bedienbar */
	pointer-events: none;
}

.main-menu__header.is-open .main-menu__trigger {
	pointer-events: auto;
}

.main-menu__logo {
	transition: opacity 300ms ease;
}

.main-menu__header.is-open .main-menu__logo {
	opacity: 0.15;
}

/* Dreispaltiges Grid mit gleich breiten Außenspalten: das Logo steht
   dadurch exakt mittig, unabhängig von der Breite der Aktionen rechts. */
.main-menu__header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	box-sizing: border-box;
	max-width: var(--wm-max-width);
	margin-inline: auto;
	padding: var(--wm-inset-top) var(--wm-inset-x) var(--wm-inset-bottom);
}

.main-menu__header-inner > .main-menu__logo {
	grid-column: 2;
}

.main-menu__header-actions {
	grid-column: 3;
	justify-self: end;
	/* Vorlage: Menü-Button oben bündig mit dem Logo, nicht mittig */
	align-self: start;
	display: flex;
	align-items: center;
	gap: var(--wm-breadcrumb-gap, 16px);
}

/* --------------------------------------------------------------------------
   Breadcrumb links neben dem Menü-Button (optional)
   -------------------------------------------------------------------------- */
.main-menu__breadcrumb {
	--wm-breadcrumb-color: var(--color-primary);

	color: var(--wm-breadcrumb-color);
	font-weight: var(--font-weight-txt-bold);
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
	transition: opacity 200ms ease, visibility 0s linear 0s;
}

.main-menu__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-menu__breadcrumb-item + .main-menu__breadcrumb-item::before {
	content: "/";
	margin: 0 0.4em;
}

.main-menu__breadcrumb a,
.main-menu__breadcrumb span {
	color: inherit;
	text-decoration: none;
}

.main-menu__breadcrumb a:hover,
.main-menu__breadcrumb a:focus-visible {
	text-decoration: underline;
}

/* Bei geöffnetem Menü läge der Breadcrumb auf dem hellen Panel. */
.main-menu__header.is-open .main-menu__breadcrumb {
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms ease, visibility 0s linear 200ms;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.main-menu__logo {
	display: block;
	width: auto;
	height: var(--wm-logo-height);
	color: inherit;
	line-height: 0;
	text-decoration: none;
}

/* Bild-Logos kommen in einem <figure> - ohne feste Höhe greift
   height:100% am <img> nicht und das Bild ragt aus dem Header. */
.main-menu__logo figure {
	height: 100%;
	margin: 0;
}

.main-menu__logo svg,
.main-menu__logo img {
	display: block;
	height: 100%;
	width: auto;
}

/* Falls die SVGs einfarbig ausgeliefert werden (fill="currentColor"),
   färbt diese Regel sie über --wm-header-color ein. Bei mehrfarbigen SVGs entfernen. */
.main-menu__logo svg [fill="currentColor"],
.main-menu__trigger-icon svg [fill="currentColor"] {
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   Menü-Button
   -------------------------------------------------------------------------- */
.main-menu__trigger {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: var(--wm-trigger-size);
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	/* <button> erbt die Schrift nicht (sonst Systemschrift) */
	font-family: inherit;
	cursor: pointer;
}

.main-menu__trigger-icon {
	display: block;
	height: 100%;
	width: auto;
	line-height: 0;
}

.main-menu__trigger-icon svg {
	display: block;
	height: 100%;
	width: auto;
}

/* Beschriftung "Menü"/"Schließen" (kommt mit dem Icon-HTML aus dem Modul) */
.main-menu__trigger-icon {
	display: flex;
	align-items: center;
	gap: 0.7em;
	font-size: var(--font-size-menu);
}

.main-menu__trigger-label {
	font-weight: var(--font-weight-menu);
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Vorlage: "SCHLIESSEN ×" regular in Menügröße, Laufweite 100, Kreuz
   (sichtbar ca. 0,55em) mit Abstand dahinter */
.main-menu__trigger-icon--close {
	flex-direction: row-reverse;
	gap: 0.54em;
	font-size: var(--wm-menu-size);
}

.main-menu__trigger-icon--close .main-menu__trigger-label {
	font-weight: var(--font-weight-txt);
}

.main-menu__trigger-icon--close svg {
	height: 0.6em;
}

/* Desktop: "Menü" als Text statt Burger */
@media (min-width: 901px) {
	.main-menu-root {
		--wm-trigger-top: min(1.875vw, 36px);
	}

	.main-menu__trigger-icon--open svg {
		display: none;
	}

	/* Vorlage: "MENÜ" Semibold in Menügröße (35pt), Laufweite 100 */
	.main-menu__trigger-icon--open {
		font-size: var(--wm-menu-size);
	}
}

/* Tablet/Mobil: Burger ohne Text */
@media (max-width: 900px) {
	.main-menu__trigger-icon--open .main-menu__trigger-label {
		display: none;
	}

}

.main-menu__trigger-icon--close { display: none; }

.main-menu__header.is-open .main-menu__trigger-icon--open  { display: none; }
.main-menu__header.is-open .main-menu__trigger-icon--close { display: flex; }

.main-menu__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
}

/* ==========================================================================
   Main Menu
   Overlay-Hauptmenü, fährt von rechts ein

   Breakpoints: Mobil 0–599px · Tablet 600–900px · Desktop 901px+

   Liegt über der Adresszeile (1001), aber unter dem geöffneten Header
   (1003), damit Logo und Close-Button auf dem Panel sichtbar bleiben.
   ========================================================================== */

   .main-menu {
	/* --- Farben ---------------------------------------------------------- */
	/* Vorlage: Weiß 90 % über der ganzen Seite inkl. Adresszeile */
	--wm-bg: color-mix(in srgb, var(--color-white) 90%, transparent);
	--wm-color: var(--color-primary);
	/* Vorlage: Mouseover Türkis */
	--wm-color-active: var(--color-accent);

	/* --- Panel: halbtransparentes Vollbild-Overlay ----------------------- */
	--wm-width: 100vw;
	--wm-z: 1002;
	--wm-duration: 600ms;
	--wm-ease: cubic-bezier(0.65, 0, 0.35, 1);

	/* --- Innenabstände ---------------------------------------------------- */
	--wm-padding-x: 2.84vw;
	--wm-padding-top: 11.15vw;
	--wm-padding-bottom: 3rem;

	/* --- Ebene 1 ---------------------------------------------------------- */
	/* Vorlage: 35pt, Zeilenabstand 60pt, Laufweite 100 - alle Ebenen */
	--wm-level1-size: var(--wm-menu-size);
	--wm-level1-weight: var(--font-weight-menu);
	--wm-level1-gap: 0;
	--wm-level1-spacing: 0.1em;
	--wm-line-height: 1.71;

	/* --- Ebene 2+ --------------------------------------------------------- */
	--wm-level2-size: var(--wm-level1-size);
	--wm-level2-weight: var(--font-weight-txt);
	--wm-level2-gap: 0;
	--wm-level2-indent: 0;
	--wm-submenu-padding: 0;

	/* --- Dropdown --------------------------------------------------------- */
	--wm-chevron-size: 2.6em;
	--wm-chevron-gap: 0.6rem;
	--wm-sub-duration: 420ms;
	--wm-sub-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* --- Icon-Leiste ------------------------------------------------------ */
	--wm-icon-size: 2.25rem;
	--wm-icon-gap: 1rem;
	--wm-icons-offset-right: 0rem;

	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--wm-width);
	max-width: 100%;
	z-index: var(--wm-z);
	box-sizing: border-box;
	background: var(--wm-bg);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	color: var(--wm-color);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--wm-duration) var(--wm-ease),
		visibility 0s linear var(--wm-duration);
}

/* Wird per JS entfernt – verhindert ein Aufblitzen vor dem Laden */
.main-menu[hidden] {
	display: none;
}

.main-menu.is-open {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--wm-duration) var(--wm-ease),
		visibility 0s linear 0s;
}

.main-menu__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	min-height: 100%;
	box-sizing: border-box;
	padding: var(--wm-padding-top) var(--wm-padding-x) var(--wm-padding-bottom);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.main-menu__nav {
	flex: 0 0 auto;
}

.main-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-menu__list--level-1 > .main-menu__item + .main-menu__item {
	margin-top: var(--wm-level1-gap);
}

.main-menu__row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wm-chevron-gap);
}

.main-menu__link {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	transition: color 200ms ease;
}

.main-menu__link--level-1 {
	font-size: var(--wm-level1-size);
	font-weight: var(--wm-level1-weight);
	letter-spacing: var(--wm-level1-spacing);
	text-transform: uppercase;
	line-height: var(--wm-line-height);
}

.main-menu__link:hover,
.main-menu__link:focus-visible {
	color: var(--wm-color-active);
}

/* Aktive Seite und aktiver Zweig */
.main-menu__item.is-active > .main-menu__row > .main-menu__link,
.main-menu__item.is-trail > .main-menu__row > .main-menu__link {
	color: var(--wm-color-active);
}

.main-menu__item.is-trail > .main-menu__row > .main-menu__toggle {
	color: var(--wm-color-active);
}

/* --------------------------------------------------------------------------
   Dropdown – Höhe wird über grid-template-rows animiert, dadurch braucht es
   keinen festen max-height-Wert und die Animation bleibt bei jeder
   Inhaltsmenge flüssig.
   -------------------------------------------------------------------------- */
/* Vorlage: Unterpunkte stehen immer offen darunter, ohne Aufklapp-Pfeil */
.main-menu__toggle {
	display: none !important;
}

.main-menu__submenu,
.main-menu__item > .main-menu__submenu {
	grid-template-rows: 1fr;
}

.main-menu__toggle {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.main-menu__chevron {
	display: block;
	width: var(--wm-chevron-size);
	height: var(--wm-chevron-size);
	transition: transform var(--wm-sub-duration) var(--wm-sub-ease);
}

.main-menu__item.is-expanded > .main-menu__row > .main-menu__toggle .main-menu__chevron {
	transform: rotate(180deg);
}

.main-menu__submenu {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--wm-sub-duration) var(--wm-sub-ease);
}

.main-menu__item.is-expanded > .main-menu__submenu {
	grid-template-rows: 1fr;
}

.main-menu__submenu-inner {
	overflow: hidden;
	min-height: 0;
}

.main-menu__list--level-2 {
	padding-top: var(--wm-submenu-padding);
	padding-left: var(--wm-level2-indent);
}

.main-menu__list--level-2 > .main-menu__item + .main-menu__item,
.main-menu__list--level-3 > .main-menu__item + .main-menu__item,
.main-menu__list--level-4 > .main-menu__item + .main-menu__item {
	margin-top: var(--wm-level2-gap);
}

.main-menu__link--level-2,
.main-menu__link--level-3,
.main-menu__link--level-4 {
	font-size: var(--wm-level2-size);
	font-weight: var(--wm-level2-weight);
	letter-spacing: 0.1em;
	line-height: var(--wm-line-height);
	text-transform: none;
}

/* Zusatzseiten (Impressum, Datenschutz) mit Abstand unter der Navigation */
.main-menu__extra {
	margin: calc(var(--wm-level1-size) * 3.5) 0 0;
	padding: 0;
	list-style: none;
}

.main-menu__extra-link {
	color: inherit;
	font-size: var(--wm-level2-size);
	font-weight: var(--font-weight-txt);
	letter-spacing: 0.1em;
	line-height: var(--wm-line-height);
	text-decoration: none;
	transition: color 200ms ease;
}

.main-menu__extra-link:hover,
.main-menu__extra-link:focus-visible,
.main-menu__extra-link[aria-current] {
	color: var(--wm-color-active);
}

.main-menu__list--level-3,
.main-menu__list--level-4 {
	padding-top: var(--wm-submenu-padding);
	padding-left: var(--wm-level2-indent);
}

/* --------------------------------------------------------------------------
   Icon-Leiste
   -------------------------------------------------------------------------- */
.main-menu__icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wm-icon-gap);
	margin-right: var(--wm-icons-offset-right);
}

.main-menu__icon {
	display: block;
	height: var(--wm-icon-size);
	width: auto;
	color: inherit;
	line-height: 0;
	text-decoration: none;
	transition: opacity 200ms ease;
}

.main-menu__icon:hover,
.main-menu__icon:focus-visible {
	opacity: 0.75;
}

.main-menu__icon svg {
	display: block;
	height: 100%;
	width: auto;
}

.menu-icon-override .st1 {
    fill:var(--color-white) !important;
}

.menu-icon-override .st3 {
    fill:var(--color-secondary) !important;
}

.menu-icon-override .cart0 {
    fill:var(--color-secondary) !important;
}

.main-menu__icon .st1, .main-menu__icon .st4  {
    clip-path: none !important;
}

.main-menu__icon:hover .st1 {
    fill:var(--color-primary) !important;
}

.main-menu__icon:hover .st3 {
    fill:var(--color-white) !important;
}

.main-menu__icon:hover .st3 {
    fill:var(--color-white) !important;
}

.main-menu__icon:hover .cart0 {
    fill:var(--color-white) !important;
}

.main-menu__icon:hover .g-circ {
    fill:var(--color-primary) !important;
}





/* --------------------------------------------------------------------------
   Fokus
   -------------------------------------------------------------------------- */
.main-menu__link:focus-visible,
.main-menu__toggle:focus-visible,
.main-menu__icon:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Scroll-Sperre, solange das Menü offen ist */
body.main-menu-is-open {
	overflow: hidden;
}

/* ==========================================================================
   Ansicht: Tablet (600px – 900px)
   ========================================================================== */
@media (min-width: 600px) and (max-width: 900px) {
	.main-menu {
		--wm-padding-x: var(--wm-inset-x);
		--wm-padding-top: 16.6vw;
		--wm-icon-size: 2rem;
	}

	.main-menu-root {
		--wm-inset-x: 32px;
		--wm-inset-top: 30px;
		--wm-inset-bottom: 30px;
		--wm-logo-height: 120px;
		--wm-trigger-top: 28px;
		--wm-trigger-size: 1.75rem;
	}
}

/* ==========================================================================
   Ansicht: Mobil (0px – 599px)
   ========================================================================== */
@media (max-width: 599px) {
	.main-menu__breadcrumb {
		display: none;
	}

	/* "SCHLIESSEN ×" rechtsbündig mit den Menüpunkten statt mit dem Burger */
	.main-menu__trigger-icon--close {
		gap: 0.4em;
		margin-right: 1.6vw;
	}

	.main-menu {
		--wm-padding-x: 9vw;
		/* Vorlage: erste Zeile 132pt unter "SCHLIESSEN" */
		--wm-padding-top: 33.2vw;
		--wm-padding-bottom: 2rem;
		--wm-icon-size: 1.75rem;
		--wm-duration: 450ms;
	}

	.main-menu__icons {
		justify-content: flex-end;
		margin-top: 2rem;
	}

	.main-menu-root {
		/* Vorlage mobil: 35pt auf 900pt Breite */
		--wm-menu-size: min(3.89vw, 18px);
		--wm-inset-x: 8vw;
		/* Vorlage mobil: Logo 220pt hoch, 53pt/58pt Abstand (900pt breit) */
		--wm-inset-top: 5.9vw;
		--wm-inset-bottom: 6.4vw;
		--wm-logo-height: 24.4vw;
		--wm-trigger-top: 7vw;
		--wm-trigger-size: 1.5rem;
	}
}

/* ==========================================================================
   Reduzierte Bewegung
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.main-menu,
	.main-menu.is-open {
		transition: none;
	}

	.main-menu__submenu,
	.main-menu__chevron {
		transition: none;
	}
}