/* Block 45 - Referenzkarte */

.block-45-referenzkarte {
	--b45-accent: var(--blue1);
	--b45-accent-ink: var(--white);
	--b45-active: var(--red1);
	--b45-ink: var(--black);
	--b45-land: #E8EBEE;
	--b45-land-line: var(--grey2);
	--b45-line: var(--grey6);
	--b45-muted: var(--grey1);
	--b45-panel: var(--grey9);

	/* Hoehe der Karte, einspaltig. Die Karte wird darueber auch in der Breite
	   begrenzt (siehe .b45-map-wrap), damit das Seitenverhaeltnis der viewBox
	   aufgeht und das SVG nicht mit Rand links und rechts steht. Auf schmalen
	   Viewports greift die Breite des Containers zuerst, der Wert wirkt dort
	   also nur als Obergrenze. Zweispaltig gilt --b45-stage-h. */
	--b45-map-h: 56rem;

	/* Vom JS gesetzt: Gegenskalierung der Pins, damit sie unabhaengig von
	   Zoomstufe und Kartenbreite immer gleich gross auf dem Schirm liegen.
	   Siehe .b45-pin-inner und applyPinScale() im JS. Der Vorgabewert 1 gilt
	   ohne JavaScript - dort steht der Pin in seiner viewBox-Groesse. */
	--b45-pin-scale: 1;
}

/* Nur der Akzent folgt dem Farbschema der Seite. --b45-active und --b45-land
   bleiben fest, weil sie Bedeutung tragen (Auswahl, Landflaeche) und nicht
   Dekoration sind. */
body.standardLayout .block-45-referenzkarte { --b45-accent: var(--blue1); }
body.greyLayout     .block-45-referenzkarte { --b45-accent: var(--grey8); }
body.blueLayout     .block-45-referenzkarte { --b45-accent: var(--blue1); }
body.blue2Layout    .block-45-referenzkarte { --b45-accent: var(--blue2); }
body.blackLayout    .block-45-referenzkarte { --b45-accent: var(--black); }
body.greenLayout    .block-45-referenzkarte { --b45-accent: var(--green1); }

/* Muss vor den Layout-Regeln stehen: mehrere Elemente im Block sind mit dem
   hidden-Attribut ausgeliefert und werden erst vom JS eingeschaltet. Eine
   eigene display-Regel (etwa display:flex auf .b45-zoom) schlaegt sonst das
   [hidden] des Browsers und die Elemente sind ohne JS sichtbar, obwohl sie
   dann wirkungslos sind. */
.block-45-referenzkarte [hidden] {
	display: none !important;
}

/* --- Kopf ---------------------------------------------------------------- */

.block-45-referenzkarte .b45-textblock {
	margin-bottom: 3rem;
}

.block-45-referenzkarte .b45-heading {
	margin: 0 0 1.5rem;
}

.block-45-referenzkarte .b45-intro {
	margin: 0;
	max-width: 62rem;
}

/* --- Filter -------------------------------------------------------------- */

.block-45-referenzkarte .b45-controls {
	align-items: center;
	border-bottom: 1px solid var(--b45-line);
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem 2.4rem;
	margin-bottom: 2.4rem;
	padding-bottom: 1.6rem;
}

.block-45-referenzkarte .b45-branche-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.block-45-referenzkarte .b45-branche-btn {
	align-items: center;
	background: var(--white);
	border: 1px solid var(--b45-muted);
	color: var(--b45-ink);
	cursor: pointer;
	display: inline-flex;
	font-size: 1.5rem;
	gap: 0.7rem;
	line-height: 1.2;
	padding: 0.7rem 1.2rem;
	text-transform: uppercase;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.block-45-referenzkarte .b45-branche-icon {
	color: var(--b45-accent);
	flex: 0 0 auto;
	height: 2rem;
	transition: color .2s ease;
	width: 2rem;
}

.block-45-referenzkarte .b45-branche-btn:hover,
.block-45-referenzkarte .b45-branche-btn:focus-visible {
	background: var(--b45-panel);
	border-color: var(--b45-accent);
}

.block-45-referenzkarte .b45-branche-btn.is-active {
	background: var(--b45-accent);
	border-color: var(--b45-accent);
	color: var(--white);
}

.block-45-referenzkarte .b45-branche-btn.is-active .b45-branche-icon {
	color: var(--white);
}

.block-45-referenzkarte .b45-theke-filter {
	align-items: center;
	display: flex;
	gap: 0.8rem;
	margin: 0;
}

.block-45-referenzkarte .b45-theke-filter label {
	font-size: 1.5rem;
	margin: 0;
	text-transform: uppercase;
}

.block-45-referenzkarte .b45-theke-filter select {
	background: var(--white);
	border: 1px solid var(--b45-muted);
	color: var(--b45-ink);
	font-size: 1.5rem;
	max-width: 24rem;
	padding: 0.6rem 1rem;
}

.block-45-referenzkarte .b45-count {
	color: var(--b45-muted);
	font-size: 1.5rem;
	margin: 0;
	margin-left: auto;
}

/* --- Layout -------------------------------------------------------------- */

.block-45-referenzkarte .b45-layout {
	display: grid;
	gap: 3rem;
}

.block-45-referenzkarte .b45-map-wrap {
	margin: 0 auto;
	max-width: calc(var(--b45-map-h) * 640 / 850);
	position: relative;
	width: 100%;
}

.block-45-referenzkarte .b45-map {
	display: block;
	height: auto;
	touch-action: pan-y pinch-zoom;
	width: 100%;
}

/* Landflaeche. Bewusst path UND polygon: die Quellkarte enthaelt beides, und
   Block 41 faerbt nur path um - dort behalten 140 Polygone ihr dunkleres
   Ausgangsgrau. !important ist noetig, weil die Formen aus dem
   Illustrator-Export Praesentationsattribute tragen. */
.block-45-referenzkarte .b45-map-base path,
.block-45-referenzkarte .b45-map-base polygon {
	fill: var(--b45-land) !important;
	stroke: var(--b45-land-line) !important;
	stroke-width: 1 !important;
	vector-effect: non-scaling-stroke;
}

/* --- Pins ---------------------------------------------------------------- */

.block-45-referenzkarte .b45-pin {
	cursor: pointer;
}

/* Gegenskalierung: die Pins liegen in der gezoomten Gruppe, damit sie der
   Karte folgen, sollen aber immer dieselbe Groesse auf dem Schirm haben - ueber
   Zoomstufen und Kartenbreiten hinweg. Den Faktor rechnet das JS.
   Block 41 verzichtet darauf, dort wachsen Punkte und Labels bis zum
   Achtfachen mit.
   transform-origin ist bei SVG-Elementen der lokale Nullpunkt, und die Formen
   im Pin sind um genau diesen Punkt zentriert. */
.block-45-referenzkarte .b45-pin-inner,
.block-45-referenzkarte .b45-cluster-inner {
	transform: scale(var(--b45-pin-scale));
}

.block-45-referenzkarte .b45-pin-hit {
	fill: transparent;
}

.block-45-referenzkarte .b45-pin-shape {
	fill: var(--b45-accent);
	stroke: var(--white);
	stroke-width: 2;
	transition: fill .2s ease;
}

.block-45-referenzkarte .b45-pin-icon {
	color: var(--b45-accent-ink);
	pointer-events: none;
}

.block-45-referenzkarte .b45-pin:hover .b45-pin-shape {
	fill: var(--b45-active);
}

.block-45-referenzkarte .b45-pin.is-active .b45-pin-shape {
	fill: var(--b45-active);
	stroke-width: 3;
}

/* Vom JS gesetzt, solange der Zeiger oder der Tastaturfokus auf dem
   zugehoerigen Listeneintrag liegt. */
.block-45-referenzkarte .b45-pin.is-hover .b45-pin-shape {
	fill: var(--b45-active);
	stroke-width: 3;
}

/* Eigener Fokusring als Kreis: outline wird auf SVG-Elementen nicht
   verlaesslich gezeichnet. Block 41 setzt hier outline:none und laesst
   Tastaturnutzer damit ohne jede Rueckmeldung. */
.block-45-referenzkarte .b45-pin:focus {
	outline: none;
}

.block-45-referenzkarte .b45-pin:focus-visible .b45-pin-shape {
	stroke: var(--b45-ink);
	stroke-width: 4;
}

/* --- Cluster ------------------------------------------------------------- */

.block-45-referenzkarte .b45-cluster {
	cursor: pointer;
}

.block-45-referenzkarte .b45-cluster-shape {
	fill: var(--b45-muted);
	stroke: var(--white);
	stroke-width: 2;
	transition: fill .2s ease;
}

/* Gruppe unter dem Zeiger oder mit einem hervorgehobenen Listeneintrag. */
.block-45-referenzkarte .b45-cluster:hover .b45-cluster-shape,
.block-45-referenzkarte .b45-cluster.is-hover .b45-cluster-shape {
	fill: var(--b45-accent);
}

/* Gruppe, in der die geoeffnete Referenz steckt. */
.block-45-referenzkarte .b45-cluster.is-active .b45-cluster-shape {
	fill: var(--b45-active);
}

.block-45-referenzkarte .b45-cluster-count {
	fill: var(--white);
	font-weight: 700;
	text-anchor: middle;
}

.block-45-referenzkarte .b45-cluster:focus {
	outline: none;
}

.block-45-referenzkarte .b45-cluster:focus-visible .b45-cluster-shape {
	stroke: var(--b45-ink);
	stroke-width: 4;
}

/* Aufgefaecherte Gruppe: Linien sternfoermig vom Gruppenort zu den Pins,
   der Ort selbst als kleiner Punkt. Liegt unter den Pins. */
.block-45-referenzkarte .b45-spider-line {
	stroke: var(--b45-muted);
	stroke-linecap: round;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.block-45-referenzkarte .b45-spider-center {
	fill: var(--b45-accent);
	stroke: var(--white);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

/* Waehrend eine Gruppe offen ist, treten alle anderen Pins und Gruppen
   zurueck - sonst ist nicht zu erkennen, welche Pins zum Stern gehoeren,
   wo er ueber Nachbarn reicht. */
.block-45-referenzkarte .b45-pin,
.block-45-referenzkarte .b45-cluster {
	transition: opacity .2s ease;
}

.block-45-referenzkarte .b45-map.is-spidered .b45-pin:not(.is-spider),
.block-45-referenzkarte .b45-map.is-spidered .b45-cluster {
	opacity: .3;
}

/* --- Zoom-Knoepfe -------------------------------------------------------- */

.block-45-referenzkarte .b45-zoom {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	position: absolute;
	right: 1rem;
	top: 1rem;
}

.block-45-referenzkarte .b45-zoom button {
	background: var(--white);
	border: 1px solid var(--b45-muted);
	color: var(--b45-ink);
	cursor: pointer;
	font-size: 1.8rem;
	height: 3.6rem;
	line-height: 1;
	width: 3.6rem;
}

.block-45-referenzkarte .b45-zoom button:hover,
.block-45-referenzkarte .b45-zoom button:focus-visible {
	background: var(--b45-panel);
	border-color: var(--b45-accent);
}

/* Sobald gepannt werden kann, soll der Zeiger es zeigen - bei Zoomstufe 1
   gibt es nichts zu verschieben. */
.block-45-referenzkarte .b45-map.is-zoomed {
	cursor: grab;
}

/* --- Koordinatenhilfe ---------------------------------------------------- */

/* Nur vorhanden, wenn die Seite mit ?b45-coords=1 aufgerufen wird. Dient dem
   Pflegen der X/Y-Werte, siehe Feldbeschreibung des Repeaters. */
.block-45-referenzkarte .b45-coords-readout {
	background: var(--b45-ink);
	color: var(--white);
	font-family: monospace;
	font-size: 1.4rem;
	left: 1rem;
	margin: 0;
	padding: 0.5rem 1rem;
	position: absolute;
	top: 1rem;
}

/* --- Liste --------------------------------------------------------------- */

.block-45-referenzkarte .b45-list {
	display: grid;
	gap: 0.2rem;
	list-style: none;
	margin: 0 0 2.4rem;
	padding: 0;
}

/* Im aufgewerteten Zustand wechseln sich Liste und Artikel im Panel ab. */
.block-45-referenzkarte.is-enhanced .b45-list {
	margin-bottom: 0;
}

.block-45-referenzkarte.is-enhanced.is-detail-open .b45-list {
	display: none;
}

.block-45-referenzkarte .b45-list-link {
	align-items: center;
	border: 1px solid transparent;
	color: var(--b45-ink);
	display: flex;
	gap: 0.8rem;
	padding: 0.5rem 0.8rem;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}

/* Weiss und nicht die Panelfarbe: die Liste steht im Panel. is-hover setzt
   das JS, solange der Zeiger auf dem zugehoerigen Pin oder dessen Gruppe
   liegt. */
.block-45-referenzkarte .b45-list-link:hover,
.block-45-referenzkarte .b45-list-link:focus-visible,
.block-45-referenzkarte .b45-list-item.is-hover .b45-list-link {
	background: var(--white);
	border-color: var(--b45-line);
}

.block-45-referenzkarte .b45-list-icon {
	color: var(--b45-accent);
	flex: 0 0 auto;
	height: 1.8rem;
	width: 1.8rem;
}

/* Einzeilig mit Auslassungspunkten: im schmalen Panel brechen lange Titel
   sonst um und die Zeilen werden unterschiedlich hoch, was die Liste unruhig
   macht.
   min-width 0 ist noetig, damit das Flex-Kind ueberhaupt schrumpfen darf.
   Der vollstaendige Name steht im title-Attribut des Links, im Pin und im
   Detailpanel. */
.block-45-referenzkarte .b45-list-title {
	font-size: 1.5rem;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.block-45-referenzkarte .b45-list-ort {
	color: var(--b45-muted);
	flex: 0 0 auto;
	font-size: 1.4rem;
	margin-left: auto;
	padding-left: 1rem;
}

.block-45-referenzkarte .b45-list-item.is-active .b45-list-link {
	background: var(--white);
	border-color: var(--b45-accent);
}

/* Zweispaltig, sobald das Panel breit genug ist (Desktop, rund 670 px
   Panel bei 1440er Fenster). Bezug ist wie beim Detail-Kopf die Panelbreite
   und nicht das Fenster - die haengt an der Kartenhoehe. Der Ort rutscht
   dabei unter den Namen: nebeneinander wuerden in der halben Breite beide
   gekuerzt, etwa "Metzgerei Winterhalter" neben "Haslach im Kinzigtal". */
@container (min-width: 52rem) {

	.block-45-referenzkarte .b45-list {
		column-gap: 0.8rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.block-45-referenzkarte .b45-list-item {
		line-height: 1.25;
	}

	.block-45-referenzkarte .b45-list-link {
		column-gap: 0.8rem;
		display: grid;
		grid-template-columns: 1.6rem minmax(0, 1fr);
		line-height: 1.25;
		padding: 0.4rem 0.6rem;
		/* Das gap der Grundregel wirkte im Grid auch zwischen Name und Ort. */
		row-gap: 0.1rem;
	}

	.block-45-referenzkarte .b45-list-icon {
		height: 1.6rem;
		width: 1.6rem;
	}

	.block-45-referenzkarte .b45-list-icon {
		grid-row: span 2;
	}

	/* Die Zeilenhoehe des Themes (rund 1,7) machte jede Zeile mit Ort
	   darunter knapp 60 px hoch. */
	.block-45-referenzkarte .b45-list-title {
		font-size: 1.4rem;
		line-height: 1.25;
	}

	.block-45-referenzkarte .b45-list-ort {
		font-size: 1.2rem;
		line-height: 1.25;
		margin-left: 0;
		overflow: hidden;
		padding-left: 0;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Referenz ohne Ort: Icon nicht ueber zwei leere Zeilen strecken. */
	.block-45-referenzkarte .b45-list-title:last-child {
		grid-row: span 2;
	}
}

/* --- Panel (Liste oder Artikel) ------------------------------------------ */

.block-45-referenzkarte .b45-detail-col {
	background: var(--b45-panel);
	position: relative;
}

.block-45-referenzkarte .b45-panel-scroll {
	padding: 1.6rem;
}

.block-45-referenzkarte .b45-detail-hint,
.block-45-referenzkarte .b45-noresults {
	color: var(--b45-muted);
	font-size: 1.6rem;
	margin: 0;
}

.block-45-referenzkarte .b45-detail-hint {
	margin-bottom: 1.2rem;
}

/* Ohne JS gibt es kein Filtern und damit auch keinen leeren Treffer. */
.block-45-referenzkarte .b45-noresults {
	display: none;
}

.block-45-referenzkarte.is-empty .b45-noresults {
	display: block;
}

/* Erscheint nur mit JS in der Detailansicht. Weisse Flaeche, weil er
   zweispaltig beim Scrollen stehen bleibt und dann ueber dem Inhalt liegt. */
.block-45-referenzkarte .b45-detail-back {
	align-items: center;
	background: var(--white);
	border: 1px solid var(--b45-line);
	color: var(--b45-ink);
	cursor: pointer;
	display: flex;
	font-size: 1.4rem;
	gap: 0.7rem;
	height: 3.6rem;
	width: max-content;
	margin: 0 0 1.6rem;
	padding: 0 1.4rem 0 1.2rem;
	position: relative;
	text-transform: uppercase;
	transition: color .2s ease;
	z-index: 2;
}

.block-45-referenzkarte .b45-detail-back::before {
	content: '\2190';
	font-size: 1.6rem;
	line-height: 1;
	transition: transform .2s ease;
}

.block-45-referenzkarte .b45-detail-back:hover,
.block-45-referenzkarte .b45-detail-back:focus-visible {
	color: var(--b45-accent);
}

.block-45-referenzkarte .b45-detail-back:hover::before {
	transform: translateX(-3px);
}

.block-45-referenzkarte .b45-detail-item {
	border-top: 1px solid var(--b45-line);
	padding-top: 2.4rem;
}

.block-45-referenzkarte .b45-detail-item:first-child {
	border-top: 0;
	padding-top: 0;
}

.block-45-referenzkarte .b45-detail-item + .b45-detail-item {
	margin-top: 2.4rem;
}

/* Kopf des Artikels: Bild, Ort, Titel, Button. Schmal untereinander mit dem
   Bild als flachem Streifen, damit es das Panel nicht fuellt; ab genug
   Panelbreite nebeneinander (siehe Container Query). Bezug ist die Breite
   des Panels und nicht die des Fensters - die haengt an der Kartenhoehe. */
.block-45-referenzkarte .b45-detail-col {
	container-type: inline-size;
}

.block-45-referenzkarte .b45-detail-head {
	display: grid;
	gap: 1.6rem;
	margin-bottom: 2.4rem;
}

.block-45-referenzkarte .b45-detail-figure {
	aspect-ratio: 5 / 2;
	display: block;
	overflow: hidden;
}

.block-45-referenzkarte .b45-detail-figure img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
	width: 100%;
}

.block-45-referenzkarte .b45-detail-head-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Button an den unteren Rand der Textspalte, buendig mit dem Bild. */
.block-45-referenzkarte .b45-detail-cta {
	align-self: flex-start;
	margin-top: auto;
}

@container (min-width: 48rem) {

	.block-45-referenzkarte .b45-detail-head {
		gap: 2.4rem;
		grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	}

	.block-45-referenzkarte .b45-detail-figure {
		aspect-ratio: 4 / 3;
	}
}

.block-45-referenzkarte .b45-detail-figure:hover img {
	transform: scale(1.03);
}

.block-45-referenzkarte .b45-detail-meta {
	align-items: center;
	color: var(--b45-muted);
	display: flex;
	font-size: 1.5rem;
	gap: 0.8rem;
	margin: 0 0 0.6rem;
	text-transform: uppercase;
}

.block-45-referenzkarte .b45-detail-icon {
	color: var(--b45-accent);
	flex: 0 0 auto;
	height: 1.8rem;
	width: 1.8rem;
}

/* Etwas kleiner als das globale h3: in der Textspalte neben dem Bild bricht
   ein Name wie "Wiener Feinbaecker Heberer" sonst auf drei Zeilen. */
.block-45-referenzkarte .b45-detail-title {
	font-size: 2.4rem;
	line-height: 1.2;
	margin: 0 0 1.6rem;
	overflow-wrap: break-word;
}

/* Zeilen mit Trennlinien statt loser Zweispalter: ruhiger, und lange Werte
   wie die Thekenliste bleiben ihrer Bezeichnung klar zugeordnet. */
.block-45-referenzkarte .b45-detail-eigenschaften {
	border-top: 1px solid var(--b45-line);
	display: grid;
	gap: 0 2rem;
	grid-template-columns: minmax(10rem, auto) 1fr;
	margin: 0 0 2.4rem;
}

.block-45-referenzkarte .b45-detail-eig {
	display: contents;
}

.block-45-referenzkarte .b45-detail-eigenschaften dt,
.block-45-referenzkarte .b45-detail-eigenschaften dd {
	border-bottom: 1px solid var(--b45-line);
	font-size: 1.5rem;
	line-height: 1.45;
	margin: 0;
	padding: 1rem 0;
}

.block-45-referenzkarte .b45-detail-eigenschaften dt {
	color: var(--b45-muted);
	font-weight: 400;
}

/* Links auf Produktseiten aus dem Eigenschaften-Wert der Referenz-Seite. */
.block-45-referenzkarte .b45-detail-eigenschaften dd a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.block-45-referenzkarte .b45-detail-eigenschaften dd a:hover,
.block-45-referenzkarte .b45-detail-eigenschaften dd a:focus-visible {
	color: var(--b45-accent);
}

.block-45-referenzkarte .b45-detail-theken-label {
	color: var(--b45-muted);
	font-size: 1.5rem;
	margin: 0 0 0.4rem;
	text-transform: uppercase;
}

.block-45-referenzkarte .b45-detail-theken {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.block-45-referenzkarte .b45-detail-theken li {
	background: var(--white);
	border: 1px solid var(--b45-line);
	font-size: 1.4rem;
	padding: 0.3rem 0.8rem;
}

/* --- Zustaende mit JS ---------------------------------------------------- */

.block-45-referenzkarte .is-filtered-out,
.block-45-referenzkarte .is-clustered {
	display: none;
}

/* Im aufgewerteten Zustand zeigt die Detailspalte nur den gewaehlten Artikel.
   Ohne .is-enhanced stehen alle Artikel untereinander und sind vollstaendig
   lesbar - das ist der Zustand ohne JavaScript. */
.block-45-referenzkarte.is-enhanced .b45-detail-item {
	display: none;
}

.block-45-referenzkarte.is-enhanced .b45-detail-item.is-active {
	border-top: 0;
	display: block;
	margin-top: 0;
	padding-top: 0;
}

/* --- Detailansicht ------------------------------------------------------- */

/* Der Artikel bekommt den Fokus nur, damit Screenreader ihn vorlesen - er
   ist kein Bedienelement. Ein Rahmen um die ganze Ansicht samt randlosem
   Bild wirkte wie ein Darstellungsfehler. Die Bedienelemente darin behalten
   ihren Fokusring. */
.block-45-referenzkarte .b45-detail-item:focus {
	outline: none;
}

.block-45-referenzkarte.is-enhanced.is-empty .b45-detail-hint {
	display: none;
}

/* --- Zweispaltig --------------------------------------------------------- */

@media (min-width: 992px) {

	/* Karte und Panel als eine Buehne, die ganz ins Fenster passt: Filter,
	   Karte, Liste und Details sind gleichzeitig im Blick. Frueher folgte
	   die Kartenhoehe der halben Containerbreite - bei 1170 px Container
	   rund 750 px Karte plus Liste darunter, also nie alles auf einmal.

	   Abgezogen wird die Filterleiste samt Abstaenden (zweizeilig rund
	   12,5rem) und etwas Luft. Ein Laptop mit 900 px Bildschirmhoehe hat
	   abzueglich Browserleisten nur rund 800 px Fenster, die Karte wird
	   dort also rund 640 px hoch. Untergrenze, damit die Karte auf flachen
	   Fenstern nicht unbrauchbar klein wird; Obergrenze 68rem (rund
	   510 x 680 px), weil sie darueber dem Panel nur Breite nimmt, ohne
	   dass die Pins lesbarer wuerden. svh, wo vorhanden, damit
	   eingeblendete Browserleisten nicht mitzaehlen. */
	.block-45-referenzkarte {
		--b45-stage-h: clamp(46rem, calc(100vh - 16rem), 68rem);
		--b45-stage-h: clamp(46rem, calc(100svh - 16rem), 68rem);
	}

	/* Die Kartenspalte ist genau so breit, wie die Buehnenhoehe es beim
	   Seitenverhaeltnis der viewBox verlangt. Das Panel nimmt den Rest,
	   mindestens 36rem fuer Titel plus Ort in der Liste. */
	.block-45-referenzkarte .b45-layout {
		gap: 2.4rem;
		grid-template-columns:
			minmax(0, calc(var(--b45-stage-h) * 640 / 850))
			minmax(36rem, 1fr);
	}

	.block-45-referenzkarte .b45-map-wrap {
		margin: 0;
		max-width: 100%;
	}

	/* Mit JS bestimmt allein die Karte die Zeilenhoehe: der Scroller liegt
	   absolut im Panel und fuellt es aus. Damit endet das Panel genau mit
	   der Karte, egal wie lang Liste oder Artikel sind. Ohne JS stehen
	   Liste und alle Artikel im Fluss und laufen mit der Seite. Das JS liest
	   position:absolute ab, um zu wissen, dass das Panel neben der Karte
	   steht (panelBesideMap). */
	.block-45-referenzkarte.is-enhanced .b45-panel-scroll {
		inset: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		position: absolute;
	}

	/* Bleibt beim Scrollen langer Artikel im Panel stehen. Nur zweispaltig:
	   einspaltig waere der Bezug das Fenster, und dort schiebt sich beim
	   Hochscrollen der Sticky-Header darueber. */
	/* top 0 und nicht mehr: Chromium rechnet den Abstand ab der Innenkante
	   des Scrollers, also nach dessen 2rem Padding. Mit einem zusaetzlichen
	   Wert rutschte der Button schon im Ruhezustand nach unten auf das Bild. */
	.block-45-referenzkarte.is-enhanced .b45-detail-back {
		position: sticky;
		top: 0;
	}
}

/* --- Editor-Vorschau ----------------------------------------------------- */

.block-45-referenzkarte.is-preview .b45-preview-shell {
	display: flex;
	gap: 2rem;
}

.block-45-referenzkarte.is-preview .b45-preview-map {
	background: var(--b45-land);
	flex: 1 1 auto;
	min-height: 22rem;
	position: relative;
}

.block-45-referenzkarte.is-preview .b45-preview-pin {
	background: var(--b45-accent);
	border: 2px solid var(--white);
	border-radius: 50%;
	height: 2.2rem;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 2.2rem;
}

.block-45-referenzkarte.is-preview .b45-preview-panel {
	background: var(--b45-panel);
	display: flex;
	flex: 0 0 14rem;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
}

.block-45-referenzkarte.is-preview .b45-preview-bar {
	background: var(--b45-line);
	height: 1.2rem;
}

/* --- Reduzierte Bewegung ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.block-45-referenzkarte .b45-branche-btn,
	.block-45-referenzkarte .b45-branche-icon,
	.block-45-referenzkarte .b45-list-link,
	.block-45-referenzkarte .b45-pin,
	.block-45-referenzkarte .b45-cluster,
	.block-45-referenzkarte .b45-pin-shape,
	.block-45-referenzkarte .b45-cluster-shape,
	.block-45-referenzkarte .b45-detail-back,
	.block-45-referenzkarte .b45-detail-back::before,
	.block-45-referenzkarte .b45-detail-figure img {
		transition: none;
	}

	.block-45-referenzkarte .b45-detail-figure:hover img,
	.block-45-referenzkarte .b45-detail-back:hover::before {
		transform: none;
	}
}