/*
 * Радар «Einsatzgebiet» — шорткод [taxi_aki_radar] (inc/radar.php) у блоці #einsatzgebiet.
 * Чому в темі, а не в Elementor (як хедер, D-010): промінь, синхронні «спалахи» міст і політ
 * до аеропорту стандартними віджетами не зібрати. Кольори — глобальні Primary / Secondary.
 *
 * Стани: без класів — статична схема (без JS); .ta-radar--bereit — JS є, чекаємо на екран;
 * .ist-an — поява й рух; .ist-pause — радар поза екраном; .ist-fokus — підсвічене місто.
 */
.ta-radar {
	--gelb: var(--e-global-color-secondary, #FEB707);
	--dunkel: var(--e-global-color-primary, #111820);
	--hell: #fff;
	--start: 1.4s; /* коли закінчується поява й запускається промінь */

	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%; /* квадрат */
	overflow: hidden;
	border-radius: 10px;
	background: radial-gradient(circle at 50% 50%, #1b2430 0, var(--dunkel) 70%);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(254, 183, 7, .12);
	font-family: inherit;
	color: var(--hell);
	isolation: isolate;
	user-select: none;
}

.ta-radar svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ---------- основа: сітка, кільця, маршрути ---------- */
.ta-radar .netz { stroke: rgba(224, 224, 224, .07); stroke-width: 1; }
.ta-radar .achse { stroke: rgba(254, 183, 7, .12); stroke-width: 1; stroke-dasharray: 2 6; }
.ta-radar .ring { fill: none; stroke: var(--gelb); stroke-opacity: .32; stroke-width: 2; stroke-dasharray: 6 10; }
.ta-radar .ring-fein { stroke-opacity: .12; stroke-dasharray: none; stroke-width: 1; }
.ta-radar .ring-rand { stroke-opacity: .6; stroke-width: 3; stroke-dasharray: 2 8; }
.ta-radar .ring-km rect { fill: var(--dunkel); }
.ta-radar .ring-km text { fill: var(--gelb); font-size: 19px; font-weight: 700; text-anchor: middle; }
.ta-radar .route { stroke: var(--hell); stroke-opacity: .13; stroke-width: 2; transition: stroke .3s, stroke-opacity .3s, stroke-width .3s; }
.ta-radar .route.ist-fokus { stroke: var(--gelb); stroke-opacity: 1; stroke-width: 3; stroke-dasharray: 10 8; stroke-dashoffset: 0; animation: ta-radar-fahrt 0.8s linear infinite; }

/* ---------- промінь ---------- */
.ta-radar-strahl {
	position: absolute;
	inset: calc(50% - 46.3%); /* коло 25 км: 25/27 від половини */
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0 290deg, rgba(254, 183, 7, .04) 300deg, rgba(254, 183, 7, .28) 358deg, rgba(254, 183, 7, .55) 360deg);
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
}
.ta-radar-strahl::after { /* передній край */
	content: "";
	position: absolute;
	left: calc(50% - 1px);
	top: 0;
	width: 2px;
	height: 50%;
	background: linear-gradient(to top, rgba(254, 183, 7, .15), var(--gelb));
	box-shadow: 0 0 12px 2px rgba(254, 183, 7, .6);
}

/* ---------- міста ---------- */
.ta-radar .ort { cursor: pointer; outline: none; }
.ta-radar .ort .treffer { fill: transparent; }
.ta-radar .ort .punkt { fill: var(--hell); transition: fill .25s; }
.ta-radar .ort .hof { fill: var(--hell); fill-opacity: .12; }
.ta-radar .ort .welle { fill: none; stroke: var(--gelb); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ta-radar .ort text { fill: var(--hell); font-size: 25px; font-weight: 600; transition: fill .25s; paint-order: stroke; stroke: var(--dunkel); stroke-width: 6px; stroke-linejoin: round; }
.ta-radar .ort.gross text { font-size: 32px; font-weight: 800; }
.ta-radar .ort.ist-fokus .punkt,
.ta-radar .ort:focus-visible .punkt { fill: var(--gelb); }
.ta-radar .ort.ist-fokus text,
.ta-radar .ort:focus-visible text { fill: var(--gelb); }
.ta-radar .ort.ist-fokus .welle { animation: ta-radar-welle 1.2s ease-out infinite !important; }

/* ---------- аеропорт і політ ---------- */
.ta-radar .flugbahn { fill: none; stroke: var(--gelb); stroke-opacity: .85; stroke-width: 3; stroke-dasharray: 5 9; }
.ta-radar .flieger { fill: var(--gelb); filter: drop-shadow(0 0 8px rgba(254, 183, 7, .9)); }
.ta-radar .flughafen circle { fill: var(--gelb); }
.ta-radar .flughafen path { fill: var(--dunkel); }
.ta-radar .flughafen text { fill: var(--gelb); font-size: 21px; font-weight: 700; paint-order: stroke; stroke: var(--dunkel); stroke-width: 6px; }

/* ---------- центр ---------- */
.ta-radar .kern { stroke: var(--gelb); stroke-width: 4; }
.ta-radar .puls { fill: none; stroke: var(--gelb); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ta-radar .schild { fill: var(--gelb); }
.ta-radar .schild-text { fill: var(--dunkel); font-size: 30px; font-weight: 800; text-anchor: middle; }

/* ---------- HUD ---------- */
.ta-radar-hud { position: absolute; inset: 0; pointer-events: none; font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; }
.ta-radar-hud > div { position: absolute; display: flex; flex-direction: column; gap: 3px; }
.ta-radar-hud b { font-weight: 700; color: var(--gelb); }
.ta-radar-hud span { font-weight: 600; color: var(--hell); }
.ta-radar-hud small { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .55); letter-spacing: .1em; }
.hud-oben-links { top: 22px; left: 26px; }
.hud-oben-rechts { top: 22px; right: 26px; text-align: right; align-items: flex-end; }
.hud-unten-links { bottom: 22px; left: 26px; }
.hud-unten-rechts { bottom: 22px; right: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.ta-radar-hud .live { display: inline-flex; align-items: center; gap: 8px; }
.ta-radar-hud .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gelb); box-shadow: 0 0 0 0 rgba(254, 183, 7, .7); animation: ta-radar-live 1.6s ease-out infinite; }
.ta-radar-hud .massstab { display: block; width: calc(5 / 54 * 100cqw); min-width: 40px; height: 6px; border: 2px solid rgba(255, 255, 255, .55); border-top: 0; }
.ta-radar { container-type: inline-size; }
.ta-radar-hud .ecke { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(254, 183, 7, .7); }
.ta-radar-hud .e1 { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.ta-radar-hud .e2 { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.ta-radar-hud .e3 { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.ta-radar-hud .e4 { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* підказка міста */
.ta-radar-info {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--gelb);
	color: var(--dunkel);
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	opacity: 0;
	transform: translate(-50%, calc(-100% - 18px)) scale(.9);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
	z-index: 3;
}
.ta-radar-info b { font-weight: 800; font-size: 16px; }
.ta-radar-info.ist-an { opacity: 1; transform: translate(-50%, calc(-100% - 18px)) scale(1); }

/* ---------- поява й рух (лише з JS) ---------- */
.ta-radar--bereit .ring,
.ta-radar--bereit .ring-km { opacity: 0; transform: scale(.6); transform-box: view-box; transform-origin: 50% 50%; }
.ta-radar--bereit .route { stroke-dasharray: var(--l) var(--l); stroke-dashoffset: var(--l); }
.ta-radar--bereit .ort,
.ta-radar--bereit .flughafen,
.ta-radar--bereit .flugbahn,
.ta-radar--bereit .flieger,
.ta-radar--bereit .ta-radar-hud { opacity: 0; }
.ta-radar--bereit .mitte { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }

.ta-radar.ist-an .ring,
.ta-radar.ist-an .ring-km { animation: ta-radar-ring .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 90ms) forwards; }
.ta-radar.ist-an .route:not(.ist-fokus) { animation: ta-radar-linie .8s ease-out calc(.5s + var(--i) * 50ms) forwards; }
.ta-radar.ist-an .ort { animation: ta-radar-auf .5s ease-out calc(.7s + var(--i) * 60ms) forwards; }
.ta-radar.ist-an .ort .welle { animation: ta-radar-ping var(--umlauf) linear calc(var(--start) + var(--p)) infinite; }
.ta-radar.ist-an .ort .punkt { animation: ta-radar-blitz var(--umlauf) linear calc(var(--start) + var(--p)) infinite; }
.ta-radar.ist-an .mitte { animation: ta-radar-mitte .7s cubic-bezier(.3, 1.5, .5, 1) .15s forwards; }
.ta-radar.ist-an .puls { animation: ta-radar-puls 2.4s ease-out 1s infinite; }
.ta-radar.ist-an .puls.p2 { animation-delay: 2.2s; }
.ta-radar.ist-an .flughafen,
.ta-radar.ist-an .flugbahn,
.ta-radar.ist-an .flieger { animation: ta-radar-auf .6s ease-out 1.1s forwards; }
.ta-radar.ist-an .flugbahn { animation: ta-radar-auf .6s ease-out 1.1s forwards, ta-radar-fahrt 1.2s linear 1.1s infinite; }
.ta-radar.ist-an .ta-radar-hud { animation: ta-radar-auf .6s ease-out .9s forwards; }
.ta-radar.ist-an .ta-radar-strahl { animation: ta-radar-auf .6s ease-out var(--start) forwards, ta-radar-dreh var(--umlauf) linear var(--start) infinite; }

.ta-radar.ist-pause *,
.ta-radar.ist-pause *::before,
.ta-radar.ist-pause *::after { animation-play-state: paused !important; }

@keyframes ta-radar-ring { to { opacity: 1; transform: scale(1); } }
@keyframes ta-radar-linie { to { stroke-dashoffset: 0; } }
@keyframes ta-radar-auf { to { opacity: 1; } }
@keyframes ta-radar-mitte { to { opacity: 1; transform: scale(1); } }
@keyframes ta-radar-dreh { to { transform: rotate(360deg); } }
@keyframes ta-radar-fahrt { to { stroke-dashoffset: -26; } }
@keyframes ta-radar-ping {
	0% { opacity: .95; transform: scale(1); }
	22% { opacity: 0; transform: scale(4.2); }
	100% { opacity: 0; transform: scale(4.2); }
}
@keyframes ta-radar-blitz {
	0% { fill: var(--gelb); }
	18% { fill: var(--hell); }
	100% { fill: var(--hell); }
}
@keyframes ta-radar-welle {
	0% { opacity: .9; transform: scale(1); }
	100% { opacity: 0; transform: scale(3.6); }
}
@keyframes ta-radar-puls {
	0% { opacity: .8; transform: scale(1); }
	100% { opacity: 0; transform: scale(3.4); }
}
@keyframes ta-radar-live {
	0% { box-shadow: 0 0 0 0 rgba(254, 183, 7, .7); }
	100% { box-shadow: 0 0 0 10px rgba(254, 183, 7, 0); }
}

/*
 * Планшет і телефон: радар — другий рядок сітки блоку з автовисотою, а відсоткова висота
 * (padding %, aspect-ratio) у такому рядку дає 0 — радар обрізало. Явна висота = ширина
 * колонки: екран мінус бокові відступи секції (30 + 30 px, Site Settings).
 */
@media (max-width: 1199px) {
	.ta-radar { width: min(100%, 680px); height: min(calc(100vw - 60px), 680px); padding-bottom: 0; margin-inline: auto; } /* на iPad не на весь екран */
}

/* телефон: дрібніший HUD */
@media (max-width: 767px) {
	.ta-radar-hud { font-size: 10px; }
	.ta-radar-hud small { font-size: 9px; }
	.hud-oben-links, .hud-oben-rechts { top: 16px; }
	.hud-oben-links, .hud-unten-links { left: 18px; }
	.hud-oben-rechts, .hud-unten-rechts { right: 18px; }
	.hud-unten-links, .hud-unten-rechts { bottom: 16px; }
	.hud-oben-links small, .hud-oben-rechts small, .hud-unten-rechts { display: none; }
	.ta-radar-hud .ecke { width: 14px; height: 14px; }
	.ta-radar-info { font-size: 12px; padding: 8px 12px; }
	.ta-radar-info b { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.ta-radar *,
	.ta-radar *::before,
	.ta-radar *::after { animation: none !important; transition: none !important; }
	.ta-radar-strahl { display: none; }
	.ta-radar .flieger { display: none; }
}

/* чипи міст у блоці (Elementor-заголовки) — реагують на наведення, як точки на радарі */
.ta-chip { cursor: pointer; transition: transform .2s; }
.ta-chip:hover,
.ta-chip.ta-chip-aktiv { transform: translateY(-2px); }
.ta-chip.ta-chip-aktiv .elementor-heading-title { color: var(--e-global-color-primary, #111820); }
.ta-chip.ta-chip-aktiv { background-color: var(--e-global-color-secondary, #FEB707) !important; border-color: var(--e-global-color-secondary, #FEB707) !important; }