/* Globale Basis für den ZAM Lageplan.
   Instanzspezifisches steht in css.twig des Elements — hier liegt nur,
   was unabhängig von den Panel-Einstellungen gilt. */

.zam-lp {
	--zam-shopping: #D64A2E;
	--zam-office: #2E6BAE;
	--zam-wohnen: #4E9A5B;
	--zam-ink: #131718;
	--zam-duration: 520ms;
	--zam-easing: cubic-bezier(.22, .61, .36, 1);
}

.zam-lp *,
.zam-lp *::before,
.zam-lp *::after {
	box-sizing: border-box;
}

.zam-lp__data {
	display: none !important;
}

/* Interaktive Flächen sollen sich auch wie solche anfühlen. */
.zam-lp [data-store] {
	outline: none;
}

.zam-lp [data-store]:not(.zam-store--linked) {
	pointer-events: none;
}

.zam-lp .zam-store--linked {
	cursor: pointer;
}

/* Die Beschriftungen liegen über den Ladenflächen und haben deshalb
   bisher jeden Klick und jeden Hover abgefangen: wer auf „Smyths Toys"
   zeigte, traf den Schriftzug, nicht den Laden.

   Beschriftungen ohne zugeordneten Laden (Wegweiser, „Anlieferung“)
   reichen den Zeiger jetzt an die Fläche darunter durch. Dasselbe gilt
   für die dunklen Flächen zwischen Erd- und Obergeschoss — reine
   Dekoration, die niemand anklicken können muss. */
.zam-lp__layer text,
.zam-lp__layer tspan,
.zam-lp__layer .zam-lvl-gap {
	pointer-events: none;
}

/* Beschriftungen MIT zugeordnetem Laden nehmen den Zeiger dagegen selbst
   an. Das ist wichtig für die Namen, die über den Rand ihrer Fläche
   hinausragen: dort läge unter dem Schriftzug der Nachbarladen, und ein
   falscher Treffer wäre schlimmer als gar keiner. */
.zam-lp__layer text.zam-store--linked {
	pointer-events: auto;
	cursor: pointer;
}

/* Fläche und Beschriftung gehören zusammen — sie leuchten gemeinsam auf,
   egal worüber der Zeiger steht. */
.zam-lp [data-store].is-hovered {
	opacity: var(--zam-store-hover-op, 68%);
}

/* Der ausgewählte Laden — der, dessen Karte offen ist — behält die
   Hervorhebung, auch wenn der Zeiger längst woanders steht. Sonst weiss man
   beim Lesen der Karte nicht mehr, welche Fläche dazugehört.

   Eigene Deckkraft, damit sich Auswahl und Hover unterscheiden lassen:
   Steht der Zeiger über einem ANDEREN Laden, tragen beide ihre Klasse, und
   die Hover-Regel gewinnt (sie steht weiter unten). */
.zam-lp [data-store].is-selected {
	opacity: var(--zam-store-active-op, 68%);
}

.zam-lp [data-store].is-selected.is-hovered {
	opacity: var(--zam-store-hover-op, 68%);
}

.zam-lp .zam-store--linked:focus-visible {
	outline: 2px solid var(--zam-ink);
	outline-offset: 3px;
}

/* Der Layer-Stapel darf niemals Klicks auf unsichtbare Ebenen durchlassen. */
.zam-lp__layer[aria-hidden="true"] {
	pointer-events: none;
}

.zam-lp__layer.is-visible {
	pointer-events: auto;
}

/* Solange JS nicht geladen ist, zeigt der Plan wenigstens den Hintergrund
   statt einer leeren Fläche. */
.zam-lp:not([data-state]) .zam-lp__layer--base {
	opacity: 1;
	visibility: visible;
}

@media print {
	.zam-lp__controls,
	.zam-lp__back,
	.zam-lp__panel {
		display: none !important;
	}
}