/* Partner Map PWA — mobile-first.
 * Шапка (логотип, меню, Kontakt) и выдвижное меню — в header.css/views/header.php, общие со страницами темы.
 * Телефон: шапка → поиск (текст, «Filter», чипы) → карта → футер; список и карточка — листы снизу.
 * Десктоп (≥ 900px): шапка во всю ширину → слева боковая панель (поиск, чипы, список, карточка поверх
 * списка) и футер под ней → справа карта. Панель сворачивается в рейку с иконками (плавно).
 * Без внешних шрифтов; цвета — CSS-переменные. */

:root {
	--pm-bg: #ffffff;
	--pm-fg: #1f2937;
	--pm-muted: #64748b;
	--pm-line: #e2e8f0;
	--pm-primary: #0f766e;
	--pm-radius: 12px;
	--pm-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
	--pm-safe-t: env(safe-area-inset-top, 0px);
	--pm-safe-b: env(safe-area-inset-bottom, 0px);
	--pm-panel-w: 400px;
	--pm-rail-w: 56px;
	--pm-ease: 0.25s ease;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.pm-app {
	font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	color: var(--pm-fg);
	background: var(--pm-bg);
	-webkit-text-size-adjust: 100%;
	overscroll-behavior: none;
}
.pm-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
/* На телефоне панель — прозрачная обёртка: её дети (поиск, листы) участвуют в колонке оболочки. */
.pm-panel { display: contents; }
.pm-rail, .pm-panel__edge { display: none; }

/* ---------- Кнопки */
.pm-btn {
	font: inherit; border: 1px solid var(--pm-line); border-radius: 999px;
	padding: 9px 16px; background: #ffffff; color: var(--pm-fg); cursor: pointer; white-space: nowrap;
	text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.pm-btn:disabled { opacity: 0.6; cursor: default; }
.pm-btn--primary { background: var(--pm-primary); border-color: var(--pm-primary); color: #ffffff; font-weight: 600; }
/* .pm-sr, .pm-iconbtn, шапка и выдвижное меню — в header.css (общая шапка сайта) */

/* ---------- Поиск (как в прототипе): строка «текст с лупой + Filter»; за «Filter» — PLZ/Ort, Region, Land в столбик,
 * затем «Suchen» и «Zurücksetzen» в одну строку; ниже чипы категорий. Поля — «пилюли» на светлом фоне. */
.pm-searchbar { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: #ffffff; border-bottom: 1px solid var(--pm-line); }
.pm-searchbar__row { display: flex; gap: 8px; align-items: center; }
.pm-searchbar__field { position: relative; display: flex; min-width: 0; }
.pm-searchbar__field--text { flex: 1 1 auto; }
.pm-searchbar__icon { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--pm-muted); pointer-events: none; }
.pm-searchbar__input, .pm-searchbar__select {
	width: 100%; min-width: 0; padding: 10px 14px; border: 1px solid var(--pm-line); border-radius: 999px;
	font: inherit; background: #f8fafc; color: var(--pm-fg); -webkit-appearance: none; appearance: none;
}
.pm-searchbar__field--text .pm-searchbar__input { padding-left: 38px; }
.pm-searchbar__input:focus, .pm-searchbar__select:focus { outline: 2px solid var(--pm-primary); outline-offset: 1px; background: #ffffff; }
.pm-searchbar__input::placeholder { color: var(--pm-muted); }
.pm-searchbar__input::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; }
.pm-searchbar__select {
	padding-right: 36px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}
.pm-searchbar__toggle { flex: none; padding: 10px 14px; gap: 6px; }
.pm-searchbar__toggle svg { width: 18px; height: 18px; }
.pm-searchbar--open .pm-searchbar__toggle, .pm-searchbar__toggle.is-active { background: var(--pm-fg); color: #ffffff; border-color: var(--pm-fg); }
.pm-searchbar__more { display: none; flex-direction: column; gap: 8px; }
.pm-searchbar--open .pm-searchbar__more { display: flex; }
.pm-searchbar__actions { display: flex; gap: 8px; }
.pm-searchbar__actions .pm-btn { flex: 1 1 0; padding: 10px 14px; }

.pm-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.pm-chips:empty { display: none; }
.pm-chips::-webkit-scrollbar { display: none; }
.pm-chip {
	flex: none; display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border: 1px solid var(--pm-line); border-radius: 999px;
	background: #ffffff; font: inherit; font-size: 14px; color: var(--pm-fg); cursor: pointer;
}
.pm-chip[aria-pressed="true"] { background: var(--pm-fg); color: #ffffff; border-color: var(--pm-fg); }
.pm-chip__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* ---------- Карта и слои */
.pm-main { position: relative; flex: 1; min-height: 0; }
.pm-map { position: absolute; inset: 0; background: #e5e7eb; }
.pm-fab {
	position: absolute; left: 12px; right: 12px; bottom: calc(16px + var(--pm-safe-b));
	display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 5;
}
.pm-fab > * { pointer-events: auto; }
.pm-fab__hint { margin: 0; max-width: 360px; padding: 4px 10px; border-radius: 8px; font-size: 12px; text-align: center; color: var(--pm-fg); background: rgba(255, 255, 255, 0.92); }
.pm-btn--near { box-shadow: var(--pm-shadow); }
.pm-btn--near svg { width: 20px; height: 20px; }
.pm-user-dot { width: 16px; height: 16px; border-radius: 50%; background: #2563eb; border: 3px solid #ffffff; box-shadow: 0 0 0 2px #2563eb, 0 2px 6px rgba(0, 0, 0, 0.3); }

/* ---------- Список: лист снизу (телефон) / часть панели (десктоп) */
.pm-sheet {
	position: fixed; left: 0; right: 0; bottom: 0; max-height: 55%;
	display: flex; flex-direction: column; z-index: 6;
	background: #ffffff; border-radius: 16px 16px 0 0; box-shadow: var(--pm-shadow); padding-bottom: var(--pm-safe-b);
}
.pm-sheet[hidden] { display: none; }
.pm-sheet__handle { width: 40px; height: 4px; margin: 8px auto 4px; border-radius: 2px; background: var(--pm-line); flex: none; }
.pm-sheet__header { display: flex; align-items: center; gap: 8px; padding: 0 8px 4px 16px; flex: none; }
.pm-sheet__title { margin: 0; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-sheet__sort select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--pm-line); border-radius: 8px; background: #ffffff; color: var(--pm-fg); }
.pm-sheet__scroll { overflow: auto; -webkit-overflow-scrolling: touch; min-height: 0; padding: 0 8px 8px; }
.pm-list { list-style: none; margin: 0; padding: 0; }
.pm-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 12px; padding: 10px 8px; border-top: 1px solid var(--pm-line); cursor: pointer; border-radius: 8px; }
.pm-item:first-child { border-top: 0; }
.pm-item:hover, .pm-item:focus-visible { background: #f8fafc; outline: none; }
.pm-item[aria-current="true"] { background: #e6f4f1; }
.pm-item__name { grid-column: 1; grid-row: 1; min-width: 0; font-weight: 600; }
.pm-item__dist { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--pm-primary); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-item__meta { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--pm-muted); font-size: 13px; }
.pm-item__meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-item__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pm-empty { margin: 0; padding: 16px; color: var(--pm-muted); text-align: center; }
.pm-list__more { display: flex; width: 100%; margin: 8px 0 0; }
.pm-list__more[hidden] { display: none; }

/* ---------- Карточка партнёра: лист на 2/3 экрана (телефон), раскрывается на весь; на десктопе — поверх панели */
.pm-card {
	position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 66%;
	display: flex; flex-direction: column; overflow: auto; background: #ffffff; z-index: 8;
	border-radius: 16px 16px 0 0; box-shadow: var(--pm-shadow); transition: height 0.2s ease;
}
.pm-card--full { height: 100%; border-radius: 0; }
.pm-card[hidden] { display: none; }
.pm-card__handle { display: block; width: 100%; padding: 8px 0 2px; border: 0; background: none; cursor: pointer; flex: none; }
.pm-card__handle span { display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: 2px; background: var(--pm-line); }
.pm-card__bar { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 4px 12px 8px; background: #ffffff; border-bottom: 1px solid var(--pm-line); z-index: 1; }
.pm-card__title { margin: 0; font-size: 18px; }
.pm-card__body { padding: 14px 16px calc(18px + var(--pm-safe-b)); display: flex; flex-direction: column; gap: 14px; }
.pm-card__img { display: block; width: 100%; height: 170px; object-fit: cover; border-radius: var(--pm-radius); }

/* Категории — чипы с точкой в цвете категории, как на странице партнёра */
.pm-card__cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pm-card__cat {
	display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px;
	font-size: 13px; font-weight: 600; background: #ffffff;
	border: 1px solid color-mix(in srgb, var(--pm-cat, #0f766e) 35%, #ffffff);
}
.pm-card__cat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pm-cat, #0f766e); }
.pm-card__lead { margin: 0; color: #475569; }

/* Действия: «Anrufen» акцентная, «Mehr erfahren» — кнопка во всю ширину */
.pm-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pm-card__actions .pm-btn { padding: 8px 14px; font-size: 14px; }
.pm-card__more {
	display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0;
	padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--pm-primary) 35%, #ffffff); border-radius: 999px;
	font: inherit; font-size: 14px; font-weight: 600; color: var(--pm-primary); text-decoration: none; background: #ffffff;
}
.pm-card__more:hover { background: var(--pm-primary); border-color: var(--pm-primary); color: #ffffff; }

/* Адрес, часы, расстояние: подпись сверху, значение снизу */
.pm-card__facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 12px 14px; background: #f8fafc; border: 1px solid var(--pm-line); border-radius: var(--pm-radius); }
.pm-card__facts dt { color: var(--pm-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 10px; }
.pm-card__facts dt:first-child { margin-top: 0; }
.pm-card__facts dd { margin: 0; white-space: pre-line; }

/* Товары и услуги */
.pm-card__section { margin: 0; }
.pm-card__h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 15px; }
.pm-card__h3 svg { width: 17px; height: 17px; color: var(--pm-primary); flex: none; }
.pm-card__products { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pm-card__product {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0;
	padding: 9px 12px; border: 1px solid var(--pm-line); border-radius: 10px; background: #ffffff;
}
.pm-card__product-name { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.pm-card__product-link {
	margin-left: auto; display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--pm-primary) 35%, #ffffff);
	font-size: 12px; font-weight: 600; color: var(--pm-primary); text-decoration: none; white-space: nowrap;
}
.pm-card__product-link:hover { background: var(--pm-primary); border-color: var(--pm-primary); color: #ffffff; }

/* Merkmale и описание */
.pm-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.pm-card__tag { font-size: 12px; color: #475569; background: #f1f5f9; border-radius: 999px; padding: 3px 10px; }
.pm-card__content { margin: 0; line-height: 1.55; color: #334155; }
.pm-card__content > :first-child { margin-top: 0; }
.pm-card__content > :last-child { margin-bottom: 0; }
.pm-card__content img { max-width: 100%; height: auto; border-radius: 10px; }
.pm-card__content a { color: var(--pm-primary); }
.pm-muted { color: var(--pm-muted); }

/* ---------- Ввод города, подсказка установки, тост */
.pm-city { position: absolute; left: 12px; right: 12px; bottom: calc(16px + var(--pm-safe-b)); padding: 12px 16px; background: #ffffff; border-radius: var(--pm-radius); box-shadow: var(--pm-shadow); z-index: 7; }
.pm-city[hidden] { display: none; }
.pm-city__title { margin: 0 0 8px; font-size: 15px; }
.pm-city__form { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-city__form input { flex: 1 1 160px; padding: 8px 12px; border: 1px solid var(--pm-line); border-radius: 8px; font: inherit; }
.pm-city__note { margin: 8px 0 0; font-size: 12px; color: var(--pm-muted); }
.pm-ioshint { position: absolute; left: 12px; right: 12px; bottom: calc(16px + var(--pm-safe-b)); padding: 12px 16px; background: #ffffff; border-radius: var(--pm-radius); box-shadow: var(--pm-shadow); z-index: 9; }
.pm-ioshint[hidden] { display: none; }
.pm-ioshint p { margin: 0 0 8px; }
.pm-toast { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: 90%; padding: 8px 14px; border-radius: 8px; background: rgba(15, 23, 42, 0.92); color: #ffffff; font-size: 14px; z-index: 9; }
.pm-toast[hidden] { display: none; }

/* ---------- Футер: ссылки, атрибуция, «App installieren», список партнёров */
.pm-footer {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
	padding: 8px 12px calc(8px + var(--pm-safe-b)); font-size: 12px; color: var(--pm-muted);
	background: #ffffff; border-top: 1px solid var(--pm-line);
}
.pm-footer a { color: inherit; }
.pm-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
.pm-footer__legal li { margin: 0; }
.pm-offline { color: #b45309; font-weight: 600; }
.pm-install { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border: 1px solid var(--pm-primary); border-radius: 999px; background: #ffffff; color: var(--pm-primary); cursor: pointer; white-space: nowrap; }
.pm-install:hover { background: #f0fdfa; }
.pm-install svg { width: 18px; height: 18px; }
.pm-install[hidden] { display: none; }
.pm-install--footer { margin-left: auto; }
.pm-static { flex-basis: 100%; min-width: 0; }
.pm-static__title { display: block; color: var(--pm-muted); font-weight: 600; }
.pm-static__list { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 2px 0 0; padding: 0; list-style: none; }
.pm-static__list li { margin: 0; white-space: nowrap; }
.pm-static__meta { color: var(--pm-muted); }
.maplibregl-ctrl-attrib { font-size: 11px; }

.pm-install--drawer { align-self: flex-start; margin-top: auto; }

/* ---------- Мобильные уточнения */
@media (max-width: 600px) {
}

/* ---------- Десктоп: сетка «шапка / панель + карта / футер под панелью», панель сворачивается в рейку */
@media (min-width: 900px) {
	.pm-shell {
		display: grid;
		grid-template-columns: var(--pm-panel-w) minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr) auto;
		grid-template-areas: "top top" "side map" "foot map";
		transition: grid-template-columns var(--pm-ease);
	}
	.pm-shell--collapsed { grid-template-columns: var(--pm-rail-w) minmax(0, 1fr); }
	.pm-topbar { grid-area: top; }
	.pm-main { grid-area: map; }
	.pm-footer { grid-area: foot; border-top: 1px solid var(--pm-line); }

	.pm-panel {
		grid-area: side; display: flex; flex-direction: column; min-height: 0; min-width: 0;
		position: relative; z-index: 3; background: #ffffff; box-shadow: 4px 0 20px rgba(15, 23, 42, 0.12);
	}
	.pm-shell--collapsed .pm-panel, .pm-shell--collapsed .pm-footer { display: none; }
	.pm-rail {
		grid-area: side; display: none; flex-direction: column; align-items: center; gap: 6px;
		padding: 10px 0; position: relative; z-index: 3; background: #ffffff; box-shadow: 4px 0 20px rgba(15, 23, 42, 0.12);
	}
	.pm-shell--collapsed .pm-rail { display: flex; grid-row: 2 / 4; }
	.pm-rail__btn { width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--pm-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
	.pm-rail__btn:hover, .pm-rail__btn:focus-visible { background: #f1f5f9; color: var(--pm-fg); outline: none; }
	.pm-rail__btn svg { width: 22px; height: 22px; }
	.pm-panel__edge {
		display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: -22px; transform: translateY(-50%);
		width: 22px; height: 52px; border: 0; border-radius: 0 10px 10px 0; background: #ffffff; color: var(--pm-muted); cursor: pointer;
		box-shadow: 4px 0 12px rgba(15, 23, 42, 0.15); z-index: 5;
	}
	.pm-panel__edge:hover { color: var(--pm-fg); }
	.pm-panel__edge svg { width: 18px; height: 18px; }

	.pm-searchbar { padding: 12px 14px 8px; border-bottom: 0; flex: none; }
	.pm-chips { flex-wrap: wrap; overflow: visible; }
	/* z-index у flex-элемента создаёт контекст наложения даже при position: static — иначе список перекрывает карточку. */
	.pm-sheet {
		position: static; max-height: none; flex: 1 1 auto; min-height: 0;
		z-index: auto;
		border-radius: 0; box-shadow: none; padding-bottom: 0; border-top: 1px solid var(--pm-line);
	}
	.pm-sheet__handle, .pm-sheet__close { display: none; }
	.pm-sheet__header { padding: 8px 14px; border-bottom: 1px solid var(--pm-line); }
	.pm-sheet__scroll { flex: 1 1 auto; }
	.pm-card { position: absolute; inset: 0; height: auto; width: auto; border-radius: 0; box-shadow: none; z-index: 4; transition: none; }
	.pm-card--full { height: auto; }
	.pm-card__handle { display: none; }
	.pm-city { left: 12px; right: auto; width: 400px; }
	.pm-fab { left: auto; right: 24px; bottom: 24px; align-items: flex-end; }
	.pm-fab__hint { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
	.pm-shell, .pm-card { transition: none; }
}