/**
 * Alles, was echte Animation/Transition ist UND sich nicht sauber
 * über Standard-Tailwind-Utilities (transition-*, motion-reduce:,
 * focus-visible:, Arbitrary-Variants) direkt im Markup ausdrücken
 * lässt, steht bewusst hier als handgeschriebenes CSS — vor allem
 * die gestaffelten transition-delays der Menü-Inhalte (jedes Element
 * braucht einen eigenen Wert, abhängig von seiner Position) und
 * eine Regel auf Elementors eigener Logo-Markup, die wir nicht mit
 * Klassen versehen können.
 *
 * Burger-Rotation, Overlay-Fade und der Fokus-Ring sitzen dagegen
 * direkt als Tailwind-Utility-Klassen (inkl. Arbitrary-Variants wie
 * [body.menu-is-open_&]:...) in template-parts/menu-trigger.php,
 * template-parts/menu-overlay.php und inc/menus.php.
 */

/* --- Elementor-Logo im Header: Farbwechsel bei offenem Menü ---
   Zielt auf Elementors eigene generierte Logo-Markup (nicht unser
   Template) — kann deshalb nicht als Utility-Klasse im PHP stehen.
   30.10.2026: Klasse statt Element-ID (.elementor-element-6094a0e) –
   Elementor vergibt beim Import neue IDs, die Regel griff nicht mehr. */
/* Transition bewusst an der BASIS-Regel, nicht nur am offenen Zustand:
   stand sie nur unter body.menu-is-open, sprang das Logo beim
   SCHLIESSEN ohne Übergang von Weiß zurück auf Rot (sichtbares
   Blitzen). Dauer + Kurve identisch zum Overlay-Fade (duration-300,
   cubic-bezier(0.4, 0, 0.2, 1)), damit Logo, Burger, Header-Fläche
   und Overlay als EIN Übergang wirken. */
.koenig-logo-shrink img {
	transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.menu-is-open .koenig-logo-shrink img {
	filter: brightness(0) invert(1);
}
/* Burger-Farbwechsel (Rot → Weiß) auf dieselbe Kurve wie das Overlay. */
#menu-trigger {
	transition-duration: 0.3s;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------------
   Gestaffeltes Einblenden der Menü-Inhalte
   ------------------------------------------------------------------
   Nicht mehr blockweise (früher: eine Gruppe = ein Fade), sondern pro
   Element — Überschrift, jeder einzelne Link, Adressblöcke. Dadurch
   läuft beim Öffnen eine durchgehende Welle von oben nach unten durch
   das Menü, statt dass drei größere Blöcke nacheinander aufpoppen.

   Alle Verzögerungen rechnen ausschließlich mit den Variablen unten.
   Wer das Tempo ändern will, ändert genau EINEN Wert und die ganze
   Staffelung bleibt automatisch im Takt — es müssen keine Einzelwerte
   nachgezogen werden.

   Kurve: cubic-bezier(0.22, 1, 0.36, 1) ist ein weiches Ausklingen
   (schneller Start, langes sanftes Auslaufen). Zusammen mit der etwas
   längeren Dauer wirkt das Einblenden "getragen" statt hektisch —
   deutlich ruhiger als das frühere lineare 0.3s-ease.
*/
#menu-overlay {
	/* Takt: Der Gruppen-Versatz ist bewusst GRÖSSER als eine typische
	   Gruppe lang ist (150ms vs. 4 Links à 30ms = 120ms) — dadurch ist
	   die nächste Überschrift erst dran, wenn die Links darüber durch
	   sind, und die Welle läuft sauber von oben nach unten statt sich
	   zu überholen. */
	--koenig-anim-step: 30ms; /* Abstand zwischen zwei Elementen einer Gruppe */
	--koenig-anim-group: 150ms; /* Zusätzlicher Versatz je weiterer Gruppe */
	--koenig-anim-duration: 500ms;
	--koenig-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--koenig-anim-shift: 14px; /* Weg, den die Elemente von unten kommen */
	--koenig-anim-column: 0ms; /* Startpunkt der jeweiligen Spalte, s. u. */
}

/**
 * Ausgangszustand — und zugleich der Zustand, in den beim SCHLIESSEN
 * zurückanimiert wird (CSS nimmt beim Rückweg die Werte aus genau
 * diesem Block). Deshalb hier bewusst OHNE Delay und mit kürzerer
 * Dauer: beim Schließen soll alles zügig und gemeinsam verschwinden.
 * Die Staffelung rückwärts abzuspielen würde sich zäh anfühlen, weil
 * man auf das Verschwinden wartet, bevor die Seite wieder da ist.
 */
.menu-overlay__group > h3,
.menu-overlay__list > li,
.menu-overlay__addresses {
	opacity: 0;
	transform: translateY(var(--koenig-anim-shift));
	transition: opacity 200ms ease, transform 200ms ease;
	transition-delay: 0s;
}

/* Offen: weiche Kurve + längere Dauer. Die Delays kommen aus den
   Regeln darunter, damit hier nur einmal steht, WIE animiert wird. */
body.menu-is-open .menu-overlay__group > h3,
body.menu-is-open .menu-overlay__list > li,
body.menu-is-open .menu-overlay__addresses {
	opacity: 1;
	transform: translateY(0);
	transition-duration: var(--koenig-anim-duration);
	transition-timing-function: var(--koenig-anim-ease);
}

/**
 * Startpunkt der rechten Spalte.
 *
 * Ab "md" stehen linke und rechte Spalte NEBENEINANDER — beide starten
 * deshalb bei 0, damit "Kaufen" und "König Immobilien" (im Design auf
 * einer Höhe) auch gleichzeitig einblenden. Auf Mobile steht die rechte
 * Spalte dagegen UNTER den drei linken Gruppen, also reiht sie sich
 * hinter ihnen ein (3 Gruppen Versatz) — sonst würde die Welle unten
 * wieder von vorne anfangen.
 */
.menu-overlay__col-right {
	--koenig-anim-column: calc(3 * var(--koenig-anim-group));
}
@media (min-width: 768px) {
	.menu-overlay__col-right {
		--koenig-anim-column: 0ms;
	}
}

/* Versatz je Gruppe innerhalb einer Spalte. Custom Properties vererben
   sich, die Kinder (h3/li) rechnen unten einfach damit weiter. */
.menu-overlay__group {
	--koenig-anim-offset: var(--koenig-anim-column);
}
.menu-overlay__group:nth-child(2) {
	--koenig-anim-offset: calc(var(--koenig-anim-column) + var(--koenig-anim-group));
}
.menu-overlay__group:nth-child(3) {
	--koenig-anim-offset: calc(var(--koenig-anim-column) + 2 * var(--koenig-anim-group));
}

/* Überschrift zuerst, danach die Links im Grundtakt. */
body.menu-is-open .menu-overlay__group > h3 {
	transition-delay: var(--koenig-anim-offset);
}
body.menu-is-open .menu-overlay__list > li:nth-child(1) {
	transition-delay: calc(var(--koenig-anim-offset) + 1 * var(--koenig-anim-step));
}
body.menu-is-open .menu-overlay__list > li:nth-child(2) {
	transition-delay: calc(var(--koenig-anim-offset) + 2 * var(--koenig-anim-step));
}
body.menu-is-open .menu-overlay__list > li:nth-child(3) {
	transition-delay: calc(var(--koenig-anim-offset) + 3 * var(--koenig-anim-step));
}
body.menu-is-open .menu-overlay__list > li:nth-child(4) {
	transition-delay: calc(var(--koenig-anim-offset) + 4 * var(--koenig-anim-step));
}
body.menu-is-open .menu-overlay__list > li:nth-child(5) {
	transition-delay: calc(var(--koenig-anim-offset) + 5 * var(--koenig-anim-step));
}
body.menu-is-open .menu-overlay__list > li:nth-child(6) {
	transition-delay: calc(var(--koenig-anim-offset) + 6 * var(--koenig-anim-step));
}
body.menu-is-open .menu-overlay__list > li:nth-child(7) {
	transition-delay: calc(var(--koenig-anim-offset) + 7 * var(--koenig-anim-step));
}
/* Deckel ab dem 8. Link: Menüs sind im Backend frei pflegbar — ohne
   diese Regel würde eine sehr lange Liste immer weiter nach hinten
   staffeln und die letzten Einträge erst nach Sekunden erscheinen. */
body.menu-is-open .menu-overlay__list > li:nth-child(n + 8) {
	transition-delay: calc(var(--koenig-anim-offset) + 8 * var(--koenig-anim-step));
}

/* Adressblöcke ganz zum Schluss der jeweiligen Spalte. */
body.menu-is-open .menu-overlay__addresses {
	transition-delay: calc(var(--koenig-anim-column) + var(--koenig-anim-group) + 2 * var(--koenig-anim-step));
}

/* --- Pfeil-Icon: leichte Verschiebung beim Hover/Fokus --- */
.menu-overlay__list a .menu-overlay__arrow {
	transition: transform 0.2s ease;
}
.menu-overlay__list a:hover .menu-overlay__arrow,
.menu-overlay__list a:focus-visible .menu-overlay__arrow {
	transform: translateX(3px);
}

/* --- Reduzierte Bewegung respektieren ---
   Burger-Linien und Overlay-Fade nutzen motion-reduce:-Utilities
   direkt im Markup (siehe oben) — hier bleibt nur, was weiterhin
   echtes handgeschriebenes CSS ist. Wichtig sind neben der Dauer auch
   die Delays: eine Staffelung ohne Bewegung wäre sonst ein Flackern
   von Elementen, die einzeln nacheinander erscheinen. */
@media (prefers-reduced-motion: reduce) {
	.menu-overlay__group > h3,
	.menu-overlay__list > li,
	.menu-overlay__addresses,
	.menu-overlay__list a .menu-overlay__arrow {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
	.menu-overlay__group > h3,
	.menu-overlay__list > li,
	.menu-overlay__addresses {
		transform: none !important;
	}
}

/* ------------------------------------------------------------------
   Scrollbereich des Menüs (06.10.2026)
   ------------------------------------------------------------------
   1. Weiche Kante oben und unten: Scrollte man im Menü, wurde die erste
      Überschrift ("KAUFEN") an der Header-Unterkante hart abgeschnitten
      - halbe Buchstaben. Jetzt läuft der Inhalt dort über 24px weich
      aus (Maske). 24px = Innenabstand oben (pt-6), im Ruhezustand
      bleibt also nichts verdeckt.
   2. Scrollleiste: Die graue Standard-Leiste des Browsers stand als
      heller Balken auf dem dunklen Grund. Jetzt schmal, halbtransparent
      weiß, ohne Schiene.
   ------------------------------------------------------------------ */
.menu-overlay__scroll {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
.menu-overlay__scroll::-webkit-scrollbar {
	width: 6px;
}
.menu-overlay__scroll::-webkit-scrollbar-track {
	background: transparent;
}
.menu-overlay__scroll::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.35);
	border-radius: 3px;
}

/* ------------------------------------------------------------------
   Adressbloecke im Menue (07.10.2026, exakt nach Figma 608:31359)
   ------------------------------------------------------------------
   Inhalt kommt aus dem Elementor-Template "menu-adressbloecke"; Elementor
   setzt eigene Schriften/Abstaende, deshalb hier mit !important.
   Ueberschrift: Mada Regular 18px, 4 % Laufweite, Versalien.
   Text:         Mada Light 16px, Zeilenhoehe 1,6 ("p klein").
   Abstand Ueberschrift -> Text 13px (691 -> 727 im Entwurf).
   Ab 1024px stehen die zwei Bloecke bei 711,46 und 1086,28px (von 1512)
   - die rechte Spalte des Menues beginnt bei 711,46 und ist 707,54px
   breit (bis Ende der 1182px), der zweite Block startet bei 52,97 %.
*/
.menu-overlay__addresses .elementor-widget {
	margin: 0 !important;
}
.menu-overlay__addresses .elementor-heading-title {
	margin: 0 !important;
	font-family: var(--font-body) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: normal !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
}
.menu-overlay__addresses [class*="elementor-widget-text"],
.menu-overlay__addresses [class*="elementor-widget-text"] :is(p, a, span) {
	font-family: var(--font-body) !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: 1.6 !important;
	letter-spacing: 0 !important;
}
.menu-overlay__addresses [class*="elementor-widget-text"] p {
	margin: 0 !important;
}
/* Elementor-Container sind teils "boxed" (Inhalt in .e-con-inner),
   teils "full" - deshalb immer das Element, das die Widgets bzw. die
   zwei Spalten-Container DIREKT enthaelt. */
.menu-overlay__addresses :is(.e-con, .e-con-inner):has(> .elementor-widget) {
	display: flex !important;
	flex-direction: column !important;
	gap: 13px !important;
	padding: 0 !important;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
	.menu-overlay__addresses :is(.e-con, .e-con-inner):has(> .e-con) {
		display: grid !important;
		grid-template-columns: 52.97% 1fr !important;
		gap: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: none !important;
	}
	.menu-overlay__addresses :is(.e-con, .e-con-inner):has(> .e-con) > .e-con {
		width: auto !important;
		max-width: none !important;
		padding-right: 24px !important;
	}
	/* Aeussere Container/Rahmen ohne eigene Abstaende, sonst sitzen die
	   Bloecke nicht bei 711,46 / 1086,28px. */
	.menu-overlay__addresses .e-con {
		--padding-top: 0px !important;
		--padding-bottom: 0px !important;
		--padding-left: 0px !important;
		--padding-right: 0px !important;
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: none !important;
	}
	.menu-overlay__addresses .e-con-inner {
		padding: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}
}