/*
 * Хедер «Taxameter» — шорткод [taxi_aki_header] у шаблоні Theme Builder «Header – Taxameter».
 * Чому в темі, а не в Elementor (виняток з D-008, див. D-010): знак по літерах, меню, що при
 * прокрутці збирається в лічильник шляху, і стискання панелі стандартними віджетами не зібрати.
 * Кольори й сітка — ті самі, що в Site Settings: Secondary, Primary, Content Width 1320 (планшет 1024), відступ 30.
 */
@property --ta-k { syntax: "<number>"; inherits: true; initial-value: 0; }

.ta-header-platz {
	--ta-h0: 104px;
	height: var(--ta-h0);
}

.ta-header {
	--ta-gelb: var(--e-global-color-secondary, #FEB707);
	--ta-dunkel: var(--e-global-color-primary, #111820);
	--ta-seite: 30px;
	--ta-breite: 1320px;
	--ta-k: 0;             /* 0 — верх сторінки, 1 — стиснута смуга; ставить header.js */
	--ta-h0: 104px;
	--ta-h1: 64px;
	--ta-cap0: 72px;       /* висота літер знака */
	--ta-cap1: 48px;
	--ta-mitte0: 68px;     /* середина рядка меню: угорі — по середині літер знака */
	--ta-mitte1: 28px;     /* у смузі — на рівні верху літер, як було */
	--ta-luft: 36px;       /* від знака до рядка */
	--ta-cell: 8px;        /* клітинка лічильника */
	--ta-radius: 28px;
	--ta-cap: calc(var(--ta-cap0) - (var(--ta-cap0) - var(--ta-cap1)) * var(--ta-k));
	--ta-mitte: calc(var(--ta-mitte0) - (var(--ta-mitte0) - var(--ta-mitte1)) * var(--ta-k));

	position: fixed;
	z-index: 100;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	height: var(--ta-h0);
	pointer-events: none;
	color: var(--ta-gelb);
	font-family: "Montserrat", sans-serif;
	transition: z-index 0s .5s;   /* після закриття меню — коли панель уже згорнулась */
}

/* Якорі не ховаються під стиснутою смугою */
html:has(.ta-header) {
	scroll-padding-top: 84px;
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.ta-header) { scroll-behavior: smooth; }
}

.ta-header .ta-panel {
	position: relative;
	overflow: hidden;
	pointer-events: auto;
	height: calc(var(--ta-h0) - (var(--ta-h0) - var(--ta-h1)) * var(--ta-k));
	background: var(--ta-dunkel);
	border-radius: 0 0 var(--ta-radius) var(--ta-radius);
	box-shadow: 0 calc(10px * var(--ta-k)) calc(30px * var(--ta-k)) -12px rgb(0 0 0 / .45);
	transition: box-shadow .3s;
}

/* Фон — на всю ширину екрана, вміст — на сітці сайту.
   Без round() з відсотками: Safari вважає таке значення недійсним і скидає margin у 0, а width — в auto */
.ta-header .ta-innen {
	position: relative;
	height: 100%;
	width: calc(100% - 2 * var(--ta-seite));
	max-width: var(--ta-breite);
	margin: 0 auto;
}

/* Знак: літери стоять на нижньому краї панелі */
.ta-header .ta-logo {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	height: var(--ta-cap);
	width: calc(var(--ta-cap) * 2.9625);
	color: inherit;
}

.ta-header .ta-logo svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
	overflow: hidden;
}

.ta-header a:focus-visible,
.ta-header button:focus-visible {
	outline: 2px solid var(--ta-gelb);
	outline-offset: 6px;
	border-radius: 2px;
}

/* Літери виїжджають з-під нижнього краю, «AKI» опускається згори */
.ta-header .ta-logo .g {
	transition: transform .8s cubic-bezier(.2, .9, .25, 1);
	transition-delay: calc(var(--i) * 70ms);
}

.ta-header.ist-unten .ta-logo .g { transform: translateY(205px); }
.ta-header.ist-unten .ta-logo .aki { transform: translateY(-205px); }

/* Рядок праворуч від знака: меню / лічильник · телефон · бургер. Опускається й піднімається з --ta-k */
.ta-header .ta-zeile {
	position: absolute;
	top: calc(var(--ta-mitte) - 1.5 * var(--ta-cell));
	left: calc(var(--ta-cap) * 2.9625 + var(--ta-luft));
	right: 0;
	height: calc(3 * var(--ta-cell));
	display: flex;
	align-items: center;
	gap: 28px;
}

.ta-header .ta-spur {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 100%;
}

/* ── Меню (десктоп). Пункт = запис лічильника «01 Leistungen», лише розгорнутий.
      При прокрутці пункти по черзі, від правого, з'їжджаються до місця назви розділу й гаснуть:
      --q — власна фаза пункту 0…1, --dx — відстань до правого краю (ставить header.js) ── */
.ta-header .ta-nav {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: clamp(22px, 2.3vw, 38px);
}

.ta-header .ta-nav a {
	--q: clamp(0, var(--ta-k) * 2.2 - (var(--n) - 1 - var(--i)) * .13, 1);
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-weight: 700;
	font-size: 13px;
	line-height: 24px;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	color: rgb(255 255 255 / .82);
	opacity: calc(1 - var(--q) * 1.35);
	transform: translateX(calc(var(--dx, 0px) * var(--q))) scale(calc(1 - var(--q) * .3));
	transform-origin: right center;
	transition: color .25s;
}

.ta-header .ta-nav b {
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--ta-gelb);
	font-variant-numeric: tabular-nums;
}

/* Підкреслення — два ряди шашечок, що розбігаються зліва */
.ta-header .ta-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	height: 4px;
	background: repeating-conic-gradient(var(--ta-gelb) 0 25%, transparent 0 50%) left top / 4px 4px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s cubic-bezier(.2, .9, .25, 1);
}

.ta-header .ta-nav a:hover,
.ta-header .ta-nav a:focus-visible { color: #fff; }

.ta-header .ta-nav a:hover::after,
.ta-header .ta-nav a:focus-visible::after,
.ta-header .ta-nav a.ist-aktiv::after { transform: scaleX(1); }

.ta-header.ist-kompakt .ta-nav { pointer-events: none; }
.ta-header.ist-zu .ta-nav { visibility: hidden; }

/* ── Лічильник у стиснутому стані: шлях по сторінці · номер і назва розділу ── */
.ta-header .ta-meter {
	--m: clamp(0, (var(--ta-k) - .5) * 2.5, 1);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 28px;
	opacity: calc((var(--ta-k) - .55) * 2.3);
	visibility: hidden;
}

.ta-header.ist-kompakt .ta-meter { visibility: visible; }

/* шлях розгортається від назви розділу вліво — туди, звідки зібрались пункти */
.ta-header .ta-weg {
	flex: 1;
	min-width: 0;
	height: 100%;
	clip-path: inset(0 0 0 calc((1 - var(--m)) * 100%));
}

.ta-header .ta-weg i {
	display: block;
	position: relative;
	height: 100%;
	width: 100%;
	color: color-mix(in srgb, var(--ta-gelb) 22%, transparent);
	background: repeating-conic-gradient(currentColor 0 25%, transparent 0 50%) left top / calc(2 * var(--ta-cell)) calc(2 * var(--ta-cell));
}

@supports (width: round(down, 1px, 2px)) {
	.ta-header .ta-weg i { width: round(down, 100%, calc(2 * var(--ta-cell))); }
}

.ta-header .ta-weg i::after {
	content: "";
	position: absolute;
	inset: 0;
	color: var(--ta-gelb);
	background: inherit;
	clip-path: inset(0 calc(100% - var(--ta-fill, 0px)) 0 0);
}

.ta-header .ta-ort {
	flex: none;
	position: relative;
	overflow: hidden;
	height: 24px;
	min-width: 148px;
	font-weight: 700;
	font-size: 12px;
	line-height: 24px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}

.ta-header .ta-ort:empty { display: none; }
.ta-header .ta-ort span { display: block; white-space: nowrap; }

.ta-header .ta-ort b {
	color: var(--ta-gelb);
	font-weight: 800;
	margin-right: .7em;
	font-variant-numeric: tabular-nums;
}

.ta-header .ta-tel {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 17px;
	line-height: 24px;
	color: var(--ta-gelb);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	transition: color .25s;
}

.ta-header .ta-tel svg { width: 16px; height: 16px; fill: currentColor; }
.ta-header .ta-tel:hover { color: #fff; }

/* ── Бургер (планшет і телефон). Селектор з button — сильніший за кнопки Kit (.elementor-kit-9 button) ── */
.ta-header button.ta-burger,
.ta-header button.ta-burger:hover,
.ta-header button.ta-burger:focus {
	flex: none;
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	margin: -10px 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ta-gelb);
	cursor: pointer;
	transform: scale(calc(1 - var(--ta-k) * .2));
	transform-origin: right center;
}

.ta-header .ta-burger i {
	position: absolute;
	right: 0;
	top: 50%;
	width: 24px;
	height: 3px;
	margin-top: -1.5px;
	background: currentColor;
	transition: transform .4s cubic-bezier(.2, .9, .25, 1), width .3s, opacity .2s;
}

.ta-header .ta-burger i:nth-child(1) { transform: translateY(-8px); }
.ta-header .ta-burger i:nth-child(2) { width: 15px; }
.ta-header .ta-burger i:nth-child(3) { transform: translateY(8px); }

.ta-header .ta-burger:hover i:nth-child(2) { width: 24px; }

.ta-header.ist-offen .ta-burger i:nth-child(1) { transform: rotate(45deg); }
.ta-header.ist-offen .ta-burger i:nth-child(2) { width: 0; opacity: 0; }
.ta-header.ist-offen .ta-burger i:nth-child(3) { transform: rotate(-45deg); }

/* ── Меню за бургером: чорна панель хедера «витягується» донизу ── */
.ta-header .ta-menue {
	position: fixed;
	z-index: -1;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: calc(var(--ta-h0) - (var(--ta-h0) - var(--ta-h1)) * var(--ta-k) + 12px) max(var(--ta-seite), (100% - var(--ta-breite)) / 2) 28px;
	background: var(--ta-dunkel);
	border-radius: 0 0 var(--ta-radius) var(--ta-radius);
	pointer-events: auto;
	visibility: hidden;
	clip-path: inset(0 0 100% 0 round 0 0 var(--ta-radius) var(--ta-radius));
	transition: clip-path .5s cubic-bezier(.2, .9, .25, 1), visibility 0s .5s;
}

.ta-header.ist-offen .ta-menue {
	visibility: visible;
	clip-path: inset(0 0 0 0 round 0 0 var(--ta-radius) var(--ta-radius));
	transition-delay: 0s;
}

.ta-header.ist-offen .ta-panel { box-shadow: none; }

/* відкрите меню — над панеллю «Kontaktleiste» внизу екрана (Footer, Elementor) */
.ta-header.ist-offen { z-index: 10000; transition-delay: 0s; }

.ta-header .ta-menue-nav { display: flex; flex-direction: column; }

.ta-header .ta-menue-nav a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid rgb(255 255 255 / .1);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .25, 1), color .25s;
}

.ta-header.ist-offen .ta-menue-nav a {
	opacity: 1;
	transform: none;
	transition-delay: calc(.1s + var(--i) * 45ms), calc(.1s + var(--i) * 45ms), 0s;
}

.ta-header .ta-menue-nav b {
	min-width: 1.7em;
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--ta-gelb);
	font-variant-numeric: tabular-nums;
}

.ta-header .ta-menue-nav a:focus-visible { outline-offset: -2px; }

.ta-header .ta-menue-nav a:hover,
.ta-header .ta-menue-nav a.ist-aktiv { color: var(--ta-gelb); }

/* поточний розділ — квадрат шашечок праворуч */
.ta-header .ta-menue-nav a.ist-aktiv::after {
	content: "";
	width: 12px;
	height: 12px;
	margin-left: auto;
	align-self: center;
	background: repeating-conic-gradient(var(--ta-gelb) 0 25%, transparent 0 50%) left top / 6px 6px;
}

.ta-header .ta-menue-kontakt {
	display: flex;
	gap: 10px;
	margin-top: 24px;
	opacity: 0;
	transition: opacity .35s;
}

.ta-header.ist-offen .ta-menue-kontakt { opacity: 1; transition-delay: .35s; }

.ta-header .ta-menue-kontakt a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 22px;
	border: 1px solid var(--ta-gelb);
	border-radius: 100px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ta-header .ta-menue-anruf { flex: 1; background: var(--ta-gelb); color: var(--ta-dunkel); }
.ta-header .ta-menue-anruf svg { width: 16px; height: 16px; fill: currentColor; }
.ta-header .ta-menue-wa { color: #fff; border-color: rgb(255 255 255 / .5) !important; }

.ta-header .ta-menue-ort {
	margin: 20px 0 0;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgb(255 255 255 / .45);
}

.ta-header .ta-schleier {
	position: fixed;
	z-index: -2;
	inset: 0;
	background: rgb(17 24 32 / .55);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s, visibility 0s .4s;
}

.ta-header.ist-offen .ta-schleier {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

html.ta-menue-auf { overflow: hidden; }

/* 1199px — межа планшета Elementor: меню в рядку не вміщається, лише бургер */
@media (max-width: 1199px) {
	.ta-header { --ta-breite: 1024px; }   /* Content Width планшета в Site Settings */
	.ta-header .ta-nav { display: none; }
	.ta-header button.ta-burger,
	.ta-header button.ta-burger:hover,
	.ta-header button.ta-burger:focus { display: block; }
	.ta-header .ta-zeile { gap: 22px; }
}

@media (max-width: 1024px) {
	.ta-header .ta-ort { min-width: 0; }
	.ta-header .ta-meter { gap: 20px; }
}

/* 767px — мобільна межа Elementor: рядок і бургер по середині висоти панелі, телефон — у панелі внизу */
@media (max-width: 767px) {
	.ta-header-platz { --ta-h0: 75px; }

	.ta-header {
		--ta-h0: 75px;
		--ta-h1: 54px;
		--ta-cap0: 53px;
		--ta-cap1: 38px;
		--ta-mitte0: 37.5px;
		--ta-mitte1: 27px;
		--ta-luft: 20px;
		--ta-cell: 6px;
		--ta-radius: 20px;
	}

	.ta-header .ta-ort,
	.ta-header .ta-tel { display: none; }
	.ta-header .ta-zeile { gap: 16px; }
	.ta-header .ta-menue-nav a { font-size: 22px; padding: 13px 0; }
	/* кнопки одна під одною на всю ширину — як у Hero */
	.ta-header .ta-menue-kontakt { flex-direction: column; }
}


@media (prefers-reduced-motion: reduce) {
	.ta-header .ta-logo .g,
	.ta-header .ta-menue,
	.ta-header .ta-menue-nav a,
	.ta-header .ta-menue-kontakt,
	.ta-header .ta-schleier,
	.ta-header .ta-burger i { transition: none; }
}