/*
 * inventia Bausteine — Kopf nach Stephanies Testversion (Kopf.php). Lädt nur, wo der neue Kopf gilt.
 * Werte aus der früheren Testversion (05.10.2026): Menüpunkte in normaler Schreibweise, Suche mit Beschriftung, Knopf
 * #e43a4e als Pille (Radius 100 px, Schrift 500, beim Überfahren #3a4247). Hintergrund, Logo und Farben kommen vom
 * Theme wie auf jeder Seite: oben durchsichtig mit weißem Logo und weißer Schrift, beim Scrollen weiß
 * (.et-fixed-header, ab etwa 150 px). Raphael 06.10.2026: „warum ist die auf einmal weiß? Die ist sonst auf jeder
 * Seite transparent" — bis 0.12.10 war die Leiste hier von Anfang an weiß. Die Selektoren tragen „html" vorn: Das
 * Child-Theme hat gleich starke Regeln und lädt später — ohne die Stufe gewinnt es (gemessen 06.10.2026).
 * Ab 1162 px; darunter zeigt das Child-Theme sein Handy-Menü (hc_nav.php, maxWidth 1161) und bleibt, wie es ist.
 */

.inv-kopf-anfrage {
	display: none;
}

@media (min-width: 1162px) {
	/* Reihenfolge wie die Testversion: Menü · Suche · Knopf (der Knopf hängt an et_header_top, im DOM vor der Suche). */
	/* An der Oberkante ausrichten und Suche und Knopf so weit hochziehen, dass ihre Mitte auf der Mitte des Menütexts
	   liegt (Menütext 17 px hoch, darunter 12 px Polster des Child-Themes für das Ausklappmenü). „center" und „baseline"
	   setzten beide zu tief an — die Menüpunkte sind gefloatet (gemessen 06.10.2026). */
	html body.inventia_neues_design header#main-header #et-top-navigation {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		padding-top: 62px !important;                   /* 12 px tiefer: sonst ragt der Knopf in die Telefon-Leiste darüber */
	}

	/* Beim Scrollen setzt die Website den Abstand neu (gemessen: 12 px weniger) — dieselbe Höhe auch dann. */
	html body.inventia_neues_design header#main-header.et-fixed-header #et-top-navigation {
		padding-top: 62px !important;
	}

	html body.inventia_neues_design header#main-header #et-top-navigation > nav {
		order: 1;
	}

	html body.inventia_neues_design header#main-header #et-top-navigation > #et_top_search {
		order: 2;
	}

	html body.inventia_neues_design header#main-header #et-top-navigation > .inv-kopf-anfrage {
		order: 3;
	}

	/* Schreibweise der Testversion; die Farbe (weiß oben, grau beim Scrollen) setzt das Theme. */
	html body.inventia_neues_design header#main-header #et-top-navigation ul#top-menu > li > a {
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
	}

	html body.inventia_neues_design header#main-header #et-top-navigation ul#top-menu li li a {
		color: #4f4f4f;
		text-transform: none;
	}

	/* „Reise anfragen" steht als Knopf hinter der Suche, der Menüpunkt bleibt fürs Handy-Menü. */
	html body.inventia_neues_design header#main-header #et-top-navigation ul#top-menu > li.inv-menue-anfrage {
		display: none;
	}

	/* Sprachumschalter: nur die jeweils andere Sprache (Weglot gibt ohne Dropdown-Einstellung beide aus). */
	html[lang^="de"] body.inventia_neues_design ul#top-menu > li.weglot-language.wg-de,
	html[lang^="en"] body.inventia_neues_design ul#top-menu > li.weglot-language.wg-en {
		display: none;
	}

	/* Divi: #et_top_search 18 px breit, das Symbol absolut — mit Beschriftung braucht die Suche ihre volle Breite. */
	html body.inventia_neues_design header#main-header #et_top_search {
		display: flex;
		align-items: center;
		width: auto;
		float: none;
		margin: -3px 0 0 26px !important;               /* die Website setzt 12 px oben mit Vorrang (gemessen 06.10.2026) */
	}

	html body.inventia_neues_design header#main-header #et_search_icon {
		display: inline-flex;
		align-items: center;
		position: relative;
		padding-left: 24px;
		cursor: pointer;
	}

	html body.inventia_neues_design header#main-header #et_search_icon::before {
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		margin-top: 0;
	}

	/* Die Beschriftung „Suche" in der Farbe der Lupe. Das Theme färbt nur die Lupe (::before): weiß oben, #686868 beim
	   Scrollen — „inherit" griffe auf die graue Grundfarbe zurück (gemessen 06.10.2026), deshalb beide Zustände hier. */
	html body.inventia_neues_design header#main-header #et_search_icon::after {
		content: "Suche";
		color: #fff;
		font-family: inherit;
		font-size: 16px;
		font-weight: 400;
	}

	html body.inventia_neues_design header#main-header.et-fixed-header #et_search_icon::after {
		color: #686868;
	}

	html body.inventia_neues_design header#main-header .inv-kopf-anfrage {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin: -14px 0 0 22px;
		padding: 10px 22px;
		border-radius: 100px;
		background: #e43a4e;
		color: #fff;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.35;
		text-decoration: none;
		white-space: nowrap;
	}

	html body.inventia_neues_design header#main-header .inv-kopf-anfrage:hover,
	html body.inventia_neues_design header#main-header .inv-kopf-anfrage:focus-visible {
		background: #3a4247;
		color: #fff;
	}

	html body.inventia_neues_design header#main-header .inv-kopf-anfrage:focus-visible {
		outline: 2px solid #3a4247;
		outline-offset: 2px;
	}
}

/* Schmale Desktops (1162–1359 px): Alles muss in eine Zeile neben das Logo — sonst überdeckt das Menü das Logo
   (gemessen 06.10.2026 bei 1200 px). Etwas kleiner, enger, die Suche nur als Lupe. */
@media (min-width: 1162px) and (max-width: 1359px) {
	html body.inventia_neues_design header#main-header #et-top-navigation ul#top-menu > li {
		padding-right: 14px;
	}

	html body.inventia_neues_design header#main-header #et-top-navigation ul#top-menu > li > a {
		font-size: 15px;
	}

	html body.inventia_neues_design header#main-header #et_search_icon {
		padding-left: 18px;
	}

	html body.inventia_neues_design header#main-header #et_search_icon::after {
		content: none;
	}

	html body.inventia_neues_design header#main-header #et_top_search {
		margin: 9px 0 0 6px !important;                 /* nur die Lupe ist niedriger: 12 px tiefer, sonst über dem Text */
	}

	html body.inventia_neues_design header#main-header .inv-kopf-anfrage {
		margin-left: 16px;
		padding: 10px 18px;
		font-size: 15px;
	}
}