/* Colours, font sizes and radii come from the Elementor global variables of the site. */

/*
 * Overlay geometry, read by zentren-karte.js. Distances from the pin tip to the overlay edge, arrow included:
 * above = raised icon (4px lift + 36px × 1.15 scale) + 8px air, below = rest of the 44px hit area + 8px air.
 * The arrow keeps 20px from the overlay corners so it never meets the border radius.
 */
.tzk {
	--tzk-overlay-gap-above: 52px;
	--tzk-overlay-gap-below: 18px;
	--tzk-arrow-inset: 20px;

	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 16px;
	align-items: start;
	font-family: var(--font-base);
	color: var(--text);
}

.tzk ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tzk p {
	margin: 0;
}

/* Hello Elementor gives every button a pink border, padding and a pink hover background. */
.tzk button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	white-space: normal;
	cursor: pointer;
}

.tzk button:hover,
.tzk button:focus {
	background: none;
	color: inherit;
}

.tzk-icon {
	display: block;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Map */

/* At most the viewBox width (598px, scale of the mockup) and not higher than the visible area below the sticky
   header and admin bar, so the whole map stays in view. 0.7475 = 598 / 800, the aspect ratio of the viewBox.
   The 320px floor keeps pins and overlay usable on short screens such as phones in landscape. */
.tzk-map {
	position: relative;
	width: min(
		100%,
		598px,
		max(320px, (100svh - var(--wp-admin--admin-bar--height, 0px) - var(--header-height) - 48px) * 0.7475)
	);
	margin-inline: auto;
}

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

/* The state fills sit in germany.svg as exact mockup values; they are deliberately not palette variables. */
.tzk-state {
	stroke: var(--weiss);
	stroke-width: 2;
	stroke-linejoin: round;
}

.tzk-pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* The icon tip sits 34px below the top edge of the 44px button: 2px offset + 36px icon × 17.8 / 20 (tip in the viewBox). */
.tzk .tzk-pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	translate: -50% -34px;
	display: flex;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding-top: 2px;
	border-radius: var(--radius-sm);
	pointer-events: auto;
}

/* Only the icon moves. Moving the button would shift its hit area away from a resting pointer and make it flicker. */
.tzk-pin .tzk-icon {
	width: 36px;
	height: 36px;
	stroke: var(--gfl-gruen);
	stroke-width: 1.85;
	transform-origin: 50% 32px;
	transition: transform 250ms ease-out;
}

.tzk-pin .tzk-icon-dot {
	fill: none;
}

.tzk .tzk-pin.is-highlighted,
.tzk .tzk-pin.is-active {
	z-index: 1;
}

.tzk-pin.is-highlighted .tzk-icon {
	transform: translateY(-4px) scale(1.15);
}

.tzk-pin.is-active .tzk-icon-body {
	fill: var(--gfl-gruen);
}

.tzk-pin.is-active .tzk-icon-dot {
	fill: var(--weiss);
	stroke: var(--weiss);
}

/* Overlay with the selected centre (tablet and mobile only). zentren-karte.js places it above or below the pin
   via left/top and points the arrow at the pin via --tzk-arrow-x. */

.tzk-overlay:not([hidden]) {
	position: absolute;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: min(100%, 320px);
	padding: 16px 56px 16px 16px;
	border: 1px solid var(--gfl-gruen);
	border-radius: var(--radius-md);
	background-color: var(--weiss);
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height) + 16px);
}

.tzk-overlay::after {
	content: "";
	position: absolute;
	left: var(--tzk-arrow-x, 50%);
	width: 12px;
	height: 12px;
	border: solid var(--gfl-gruen);
	background-color: var(--weiss);
	translate: -50% 0;
	rotate: 45deg;
}

.tzk-overlay[data-placement="above"]::after {
	bottom: -7px;
	border-width: 0 1px 1px 0;
}

.tzk-overlay[data-placement="below"]::after {
	top: -7px;
	border-width: 1px 0 0 1px;
}

.tzk-overlay .tzk-link {
	margin-top: 4px;
}

/* The name only receives the focus so that screen readers announce the overlay; it is not operable. */
html .tzk-overlay .tzk-name:focus-visible {
	outline: none;
}

.tzk .tzk-close {
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
}

.tzk-close .tzk-icon {
	width: 20px;
	height: 20px;
	stroke: var(--dunkelgruen);
	stroke-width: 1.7;
}

.tzk .tzk-toggle {
	display: none;
}

/* List */

.tzk-panel {
	padding: 24px;
	border: 1px solid var(--bg-gruen-01);
	border-radius: var(--radius-lg);
	background-color: var(--hellgrau);
}

.tzk .tzk-panel-title {
	margin: 0 0 12px;
	color: var(--dunkelgruen);
	font-family: var(--font-base);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: 27px;
}

.tzk-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tzk-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--bg-gruen-01);
	border-radius: var(--radius-md);
	background-color: var(--weiss);
	scroll-margin-top: calc(var(--header-height) + 16px);
	transition:
		background-color 150ms ease-out,
		border-color 150ms ease-out;
}

.tzk .tzk-select {
	display: flex;
	gap: 15px;
	align-items: center;
	width: 100%;
	border-radius: var(--radius-sm);
}

.tzk-tile {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-tile);
	background-color: var(--bg-gruen-02);
	transition: background-color 150ms ease-out;
}

.tzk-tile .tzk-icon {
	width: 20px;
	height: 20px;
	stroke: var(--gfl-gruen);
	stroke-width: 1.7;
}

.tzk-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tzk-name {
	color: var(--dunkelgruen);
	font-size: var(--fs-body);
	line-height: 20px;
}

.tzk-department {
	color: var(--text);
	font-size: var(--fs-body-small);
	line-height: var(--lh-body-small);
}

/* 59px = icon tile (44px) + gap (15px): the link starts flush with the name. */
.tzk-item .tzk-link {
	align-self: flex-start;
	margin-left: 59px;
}

.tzk .tzk-link {
	color: var(--gfl-gruen);
	font-size: var(--fs-body-small);
	line-height: var(--lh-body-small);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition:
		color 200ms ease-out,
		text-underline-offset 200ms ease-out;
}

.tzk a.tzk-link:hover {
	color: var(--dunkelgruen);
	text-underline-offset: 4px;
}

.tzk-item.is-highlighted {
	border-color: var(--gfl-gruen);
	background-color: var(--bg-gruen-02);
}

.tzk-item.is-highlighted .tzk-tile {
	background-color: var(--weiss);
}

.tzk-item.is-active {
	border-color: var(--gfl-gruen);
	background-color: var(--bg-gruen-01);
}

.tzk-item.is-active .tzk-tile {
	background-color: var(--gfl-gruen);
}

.tzk-item.is-active .tzk-tile .tzk-icon {
	stroke: var(--weiss);
}

/* Tablet and mobile (Elementor breakpoint "tablet"): map first, list on demand */

@media (max-width: 1024px) {
	.tzk {
		grid-template-columns: minmax(0, 1fr);
	}

	.tzk .tzk-toggle:not([hidden]) {
		display: block;
		min-height: 44px;
		margin: 8px auto 0;
		padding-inline: 8px;
		border-radius: var(--radius-sm);
		color: var(--gfl-gruen);
		font-size: var(--fs-body);
		font-weight: 500;
		text-align: center;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.tzk.is-enhanced:not(.is-list-open) .tzk-panel {
		display: none;
	}
}

@media (max-width: 767px) {
	.tzk-panel {
		padding: 16px;
	}
}

@media (min-width: 1025px) {
	/* The list is taller than the map; the map stays in view while the list scrolls past. */
	.tzk-map-area {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-height) + 24px);
	}

	.tzk-overlay:not([hidden]) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tzk-pin .tzk-icon,
	.tzk-item,
	.tzk-tile,
	.tzk .tzk-link {
		transition: none;
	}

	.tzk-pin.is-highlighted .tzk-icon {
		transform: none;
	}

	/* Without motion a white body marks the highlight; the green body stays reserved for the selection. */
	.tzk-pin.is-highlighted:not(.is-active) .tzk-icon-body {
		fill: var(--weiss);
	}
}