/* ═══ Baustein Kontakt-Box ══════════════════════════════════
   Anschrift links, Karte rechts. Die Karte laedt erst nach
   Einwilligung, vorher steht dort der Hinweis in derselben
   Flaeche, damit sich beim Laden nichts verschiebt.
   ═══════════════════════════════════════════════════════════ */


.kontaktbox__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--r-gross);
	align-items: start;
}

.kontaktbox .lead { max-width: 46ch; }

.kontaktbox__adresse {
	font-style: normal;
	font-weight: var(--gw-normal);
	letter-spacing: -.03em;
	font-size: clamp(19px, 1.8vw, 24px);
	line-height: 1.5;
	margin-top: var(--s5);
	padding-top: var(--s4);
	border-top: 1px solid var(--ln);
}

.kontaktbox__wege { margin-top: var(--s4); }

/* Das Bild unter der Anschrift, in derselben Spalte. Neben der Karte
   waeren es zwei Flaechen nebeneinander, die dasselbe versprechen. */
.kontaktbox__bild {
	margin: var(--s5) 0 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--pa2);
}

.kontaktbox__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Karte ──────────────────────────────────────────────── */
.kontaktbox__karte {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--pa2);
	box-shadow: inset 0 0 0 1px var(--ln);
	overflow: hidden;
}
.kontaktbox__karte iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Die Skizze, die steht, solange die Karte nicht geladen ist. Sie
   liegt unter der Sperre, deshalb ist sie ruhig gehalten: sie soll
   zeigen, dass hier eine Karte kommt, und den Text nicht stoeren. */
.kontaktbox__skizze {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.kontaktbox__skizze .weg {
	fill: none;
	stroke: rgba(12, 13, 15, .17);
	stroke-width: 7;
	stroke-linecap: round;
}
.kontaktbox__skizze .weg--klein { stroke-width: 2.5; }
.kontaktbox__skizze .ache {
	fill: none;
	stroke: rgba(27, 68, 216, .22);
	stroke-width: 7;
	stroke-linecap: round;
}
.kontaktbox__skizze .flur {
	fill: rgba(12, 13, 15, .07);
}
.kontaktbox__skizze .punkt {
	fill: var(--tx);
}

/* Die Sperre bekommt einen Schleier, sonst laeuft ihr Text ueber
   die Linien der Skizze. */
.kontaktbox__sperre {
	background: linear-gradient(90deg, rgba(244, 244, 242, .94), rgba(244, 244, 242, .5));
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--s2);
	padding: clamp(24px, 3.4vw, 46px);
}
.kontaktbox__sperre p {
	color: var(--tx);
	font-size: var(--t-mittel);
	line-height: 1.7;
	max-width: 40ch;
}
.kontaktbox__sperre .meta { margin-top: 0; }
.kontaktbox__sperre .meta a {
	box-shadow: inset 0 -1px 0 var(--ln);
	transition: box-shadow .3s var(--e);
}
.kontaktbox__sperre .meta a:hover { box-shadow: inset 0 -1px 0 var(--tx); }

@media (max-width: 980px) {
	.kontaktbox__raster { grid-template-columns: 1fr; }
	.kontaktbox__karte { aspect-ratio: 3 / 2; }
}