/* ═══════════════════════════════════════════════════════════
   Karte: Vorschaubild, Punkt und die geladene Karte darueber.
   Gilt fuer die Karte in der Kontakt-Box, im Anfrageformular und
   im Baustein Lage. Der Kasten selbst gehoert dem Baustein, hier
   steht nur, was in ihm liegt.
   ═══════════════════════════════════════════════════════════ */

.karte-vorschau,
.karte-leinwand {
	position: absolute;
	inset: 0;
}
.karte-vorschau img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Der Punkt fuer das Haus, im Vorschaubild und auf der Karte
   derselbe. */
.karte-punkt {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: 50%;
	background: var(--dk);
	box-shadow: 0 0 0 3px var(--we);
}
.leaflet-marker-icon.karte-punkt {
	position: absolute;
	left: 0;
	top: 0;
}

/* Die Nennung, die die Lizenz verlangt. Auf der geladenen Karte
   schreibt Leaflet sie selbst. */
.karte-quelle {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 2px var(--s1);
	font-size: var(--t-winzig);
	line-height: 1.4;
	color: var(--tx);
	background: rgba(244, 244, 242, .86);
}
.karte-quelle a { color: inherit; }

/* Die Karte liegt ueber dem Vorschaubild und wird erst sichtbar,
   wenn ihre Kacheln da sind. Die Sperre wird dann unsichtbar, bleibt
   aber stehen: der Kasten behaelt seine Hoehe, nichts springt, und
   die Mitte der Karte bleibt beim Haus. */
.karte-leinwand {
	z-index: 1;
	opacity: 0;
	transition: opacity .4s var(--e);
	background: transparent;
	font: inherit;
}
[data-karte="da"] .karte-leinwand { opacity: 1; }
[data-karte="da"] [data-kr="sperre"] { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
	.karte-leinwand { transition: none; }
}