/* ═══ Baustein Lage ═════════════════════════════════════════
   Vorbild: 03_Design/final/idee-start.html

   Drei Kacheln nebeneinander: Anschrift, die Angaben rundherum als
   Haarlinienliste, die Karte hinter der Einwilligung. Kein Foto:
   die Fotos stehen in den Baendern darueber.

   Die Karte laedt erst nach Zustimmung, davor liegt dort ein
   gezeichnetes Raster. Vorher wird kein Byte zu einem fremden
   Server geschickt, siehe assets/js/karte.js.
   ═══════════════════════════════════════════════════════════ */


.lage__g {
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 2px;
	align-items: stretch;
}

/* Anschrift und Rundherum sind die Textkachel aus basis.css
   (.platte): Kicker, Wert oder Liste, Weg. */


/* ── Die Karte ──────────────────────────────────────────── */
.lage__karte {
	position: relative;
	background: var(--dk);
	color: var(--pa);
	display: flex;
	align-items: flex-end;
	padding: var(--s4);
	min-height: 18rem;
	overflow: hidden;
}
/* Ein gezeichnetes Raster, kein Kachelbild: ein Bild von
   OpenStreetMap waere genau die Uebertragung, die hier vermieden
   werden soll. */
.lage__karte::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .18;
	background:
		repeating-linear-gradient(0deg, transparent 0 39px, rgba(244, 244, 242, .5) 39px 40px),
		repeating-linear-gradient(90deg, transparent 0 39px, rgba(244, 244, 242, .5) 39px 40px);
}
.lage__sperre {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	gap: var(--s4);
}
.lage__sperre p {
	font-size: .8125rem;
	color: rgba(244, 244, 242, .7);
	max-width: 30ch;
}
.lage__karte .kn {
	background: var(--pa);
	color: var(--tx);
	flex: 0 0 auto;
}
/* Ist die Karte geladen, fuellt sie die Kachel. */
.lage__karte iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 61.25rem) {
	.lage__g {
		grid-template-columns: 1fr;
		gap: 0;
	}
	/* Das Kartenfeld nimmt am Handy die Hoehe seines Textes. Mit
	   einer festen Hoehe stand zwischen der Liste darueber und ihm
	   ein Abstand von 83 Pixeln, den es auf der Skala nicht gibt. */
	.lage__karte {
		min-height: 0;
		align-items: flex-start;
		padding: var(--s4) var(--s5) var(--s5);
	}
	.lage__sperre {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s3);
	}
}