/**
 * Modul M42 – Referenzkarte
 *
 * Zwei Darstellungen (Feld m42_darstellung, Klasse .m42_kachelfassung bzw.
 * .m42_liste). Alles bis zur Trennlinie ist in beiden gleich.
 *
 * --- Kachelfassung, Entwurf 25:751 (Startseite) ---
 * Masse im container (1514 bei 1920px Ansicht, Rand 203),
 * y-Werte ab Modulanfang:
 *   Titel        x 0,   y 0,   Breite 409 (zwei Zeilen)
 *   Text         x 767, y 28,  Breite 440
 *   Schaltflaeche x 767, y 119, 238 x 48
 *   Trennlinie   y 229, ueber die ganze Containerbreite
 *   Zaehler      y 251
 *   Karte        vollbreit, 778 hoch
 *   Kachel       x 0, 98 unter der Kartenoberkante, 366 x 556
 *
 * Abweichung vom Entwurf: dort ueberlappt der Zaehler die Karte (die ist an der
 * Stelle leer). Hier steht er davor im Fluss — sonst koennte er nach dem
 * Verschieben der Karte auf einer Beschriftung liegen. Das Modul wird dadurch
 * rund 40px hoeher als im Entwurf.
 *
 * --- Listenfassung, Entwurf 58:513 (Referenzen) ---
 *   Kopf und Trennlinie wie oben
 *   Karte        vollbreit, 706 hoch, beginnt AUF der Trennlinie (y 229)
 *   Zaehler      y 892 — also unten auf der Karte, 43 ueber den Kacheln
 *   Kacheln      y 935, drei Spalten zu 491, Abstand 20 waagerecht / 21 senkrecht
 *
 * Die senkrechte Topline kommt aus der Wrapper-Klasse .ari_topline_seitlich.
 */

.m42_karte {
	position: relative;
	background-color: #FFFFFF;
	overflow: hidden;
	--m42_linie: rgba(27, 27, 26, .3);
	--m42_kachel_linie: #3A3A39;
	--m42_karte_hoehe: 778px;
	/* Der Strich der Topline beginnt genau auf Hoehe des Titelanfangs
	   (nachgemessen im Entwurf: Strich 0..30, Schrift ab 44). */
	--topline_oben: 0px;
}

/* --- Kopfzeile --------------------------------------------------------- */

.m42_karte .m42_kopf {
	display: grid;
	grid-template-columns: minmax(0, 767fr) minmax(0, 747fr);
	align-items: start;
}

.m42_karte .m42_titel_spalte { grid-column: 1; }
.m42_karte .m42_text_spalte  { grid-column: 2; }

.m42_karte .m42_text,
.m42_karte .m42_text * {
	font-size: 1rem;
	line-height: 20px;
}

.m42_karte .m42_text {
	margin-top: 28px;
	max-width: 440px;
}

.m42_karte .m42_text p:not(:last-child) {
	margin-bottom: 20px;
}

.m42_karte .m42_text_spalte .mM_links {
	margin-top: 31px;
}

/* Trennlinie und Zaehler.
   Die Linie ist ein eigenes Element und kein Rand am Zaehler: in der
   Listenfassung wandert der Zaehler an den unteren Rand der Karte, die Linie
   bleibt aber oben. Ihr Abstand haengt am Kopf, damit er auch stimmt, wenn der
   Titel mehr Zeilen bekommt. */
.m42_karte .m42_trenner {
	margin-top: 62px;
	height: 1px;
	background-color: var(--m42_linie);
}

.m42_karte .m42_zaehler {
	margin: 20px 0 0;
	font-size: 1rem;
	line-height: 20px;
}

.m42_karte .m42_zaehler_zahl {
	font-weight: 600;
}

.m42_karte .m42_zaehler_wort {
	color: rgba(27, 27, 26, .5);
}

/* --- Karte ------------------------------------------------------------- */

.m42_karte .m42_buehne {
	position: relative;
	margin-top: 22px;
}

/* Die senkrechte Topline muss ueber die Buehne.
   In der Listenfassung beginnt die Karte direkt auf der Trennlinie (Entwurf
   58:513) — der Platz darueber ist 195px, die Topline misst 199. Die letzten
   Bildpunkte des ersten Buchstaben lagen damit hinter dem weissen Schleier
   der Karte und der Buchstabe sah abgeschnitten aus.

   Verdeckt hat sie nicht die Karte (z 0), sondern der Schleier (z 1): die
   Buehne ist KEIN eigener Stapelkontext (`position: relative` ohne z-index),
   ihre Ebenen konkurrieren also direkt mit der Topline aus
   `.ari_topline_seitlich`, die ebenfalls auf 1 steht — und bei Gleichstand
   entscheidet die Reihenfolge im Quelltext, in der die Buehne spaeter kommt.

   Darum 6, ueber allen Ebenen der Buehne (Karte 0, Schleier 1, Marker 2,
   Kachelebene 3, Zaehler 5). Sichtbar ueberlappt sie damit nichts: der
   Schleier ist auf den obersten 3 % der Kartenflaeche voll deckend weiss und
   die Sektion ist ebenfalls weiss — der Buchstabe steht also so oder so auf
   Weiss. Die Buehne zu isolieren waere der andere Weg, verschoebe aber die
   Reihenfolge gegenueber allem, was NACH ihr in der Sektion steht. */
.m42_karte .mM_title_container > [class$="_untertitel_container"] {
	z-index: 6;
}

.m42_karte .m42_flaeche {
	position: relative;
	height: var(--m42_karte_hoehe);
}

/* z-index 0 macht die Karte zum eigenen Stapelkontext. Ohne das schoebe sich
   Googles Bedienleiste (z-index 1000002) ueber Schleier und Marker. */
.m42_karte .m42_flaeche .wpgmza_map {
	z-index: 0;
}

/* Der weisse Schleier. Nachgemessen im Entwurf ueber den oertlichen Kontrast
   der Kartenzeichnung: von links vollflaechig weiss bis x 250 (13 %), ab
   x 1050 (55 %) gar nicht mehr; von oben weiss bis 60px in die Karte hinein
   (8 %), ab 210px (27 %) gar nicht mehr. */
.m42_karte .m42_schleier {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(90deg, #FFFFFF 0, #FFFFFF 13%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(180deg, #FFFFFF 0, #FFFFFF 8%, rgba(255, 255, 255, 0) 27%);
}

/* Marker liegen ueber dem Schleier. Die Ebene selbst faengt nichts ab, damit
   die Karte weiter verschiebbar bleibt. */
.m42_karte .m42_marker_ebene {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}

/* Ruhend eine schwarze Scheibe von 15px wie im Entwurf. Der gewaehlte Marker
   ist dort 30px mit 22px Scheibe — neben den kleinen wirkt das zu wuchtig,
   deshalb hier 24px mit 18px Scheibe. Das Verhaeltnis von Scheibe zu Ring
   bleibt wie im Entwurf (0.73), nur das Ganze ist eine Stufe kleiner. */
.m42_karte .m42_marker {
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #1B1B1A;
	cursor: pointer;
	pointer-events: auto;
	opacity: 0;
	transition: opacity .2s;
	z-index: 1;
}

/* Erst zeigen, wenn die Karte sie verortet hat — sonst saessen sie kurz alle
   in der linken oberen Ecke. */
.m42_karte .m42_marker.is_verortet {
	opacity: 1;
}

/* Der gewaehlte Marker gehoert nach vorn: liegen zwei Referenzen dicht
   beieinander (Landshut), verdeckte ihn sonst der schwarze Nachbar zur
   Haelfte und er wirkte als klobiger Klumpen statt als Scheibe mit Ring. */
.m42_karte .m42_marker.is_aktiv {
	width: 24px;
	height: 24px;
	background-color: transparent;
	z-index: 2;
}

.m42_karte .m42_marker.is_aktiv::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid var(--primarbutton_background_color);
	border-radius: 50%;
}

.m42_karte .m42_marker.is_aktiv::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background-color: var(--primarbutton_background_color);
}

/* Das Shortcode setzt float und Hoehe inline. Beides muss weg:
   - der Float schiebt jede spaeter folgende Box mit eigenem
     Formatierungskontext zur Seite. Unter 992px steht die Kachel im Fluss und
     hat overflow: hidden — sie waere dadurch auf Breite null gequetscht.
   - die feste Hoehe schlaegt sonst unsere kleinere auf dem Telefon. */
.m42_karte .m42_flaeche .wpgmza_map {
	float: none !important;
	height: var(--m42_karte_hoehe) !important;
}

/* Das Shortcode gibt einen leeren Sprunganker VOR dem Kartencontainer aus.
   Leer, aber inline — dadurch entsteht eine Zeilenbox und die Karte sitzt um
   deren Hoehe tiefer als ihre Ebene. */
.m42_karte .m42_flaeche a[name] {
	display: block;
	height: 0;
}

/* Die Ebene liegt ueber der Karte, faengt aber keine Klicks ab — sonst waeren
   die Marker unter der Kachelbreite nicht mehr erreichbar. */
.m42_karte .m42_kachel_ebene {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	pointer-events: none;
}

/* --- Kachel ------------------------------------------------------------ */

.m42_karte .m42_kachel {
	position: absolute;
	top: 98px;
	left: 0;
	width: 366px;
	max-width: calc(100% - 30px);
	border-radius: 5px;
	background-color: #1B1B1A;
	overflow: hidden;
	pointer-events: auto;
}

/* Das Child-project.css setzt ein blankes `* { color: var(--font_color) }`.
   Dadurch bekommt JEDES Element eine eigene Farbe und erbt nicht — auf der
   dunklen Kachel waere der Text sonst dunkel auf dunkel. */
.m42_karte .m42_kachel,
.m42_karte .m42_kachel * {
	color: #FFFFFF;
}

.m42_karte .m42_kachel_bild {
	position: relative;
	height: 212px;
	background-color: #262625;
}

.m42_karte .m42_kachel_bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.m42_karte .m42_kachel_inhalt {
	padding: 0 34px 31px;
}

.m42_karte .m42_kachel_titel {
	margin: 0;
	padding-top: 27px;
	font-family: var(--font_extd);
	/* 800 ist "Extd Black" — 900 waere "Extd Ultra". */
	font-weight: 800;
	font-size: 1.2941rem;
	line-height: 30px;
	text-transform: uppercase;
}

.m42_karte .m42_kachel_text {
	margin: 13px 0 0;
	max-width: 298px;
	font-size: 1rem;
	line-height: 20px;
	color: rgba(255, 255, 255, .5);
}

.m42_karte .m42_kachel_text:empty {
	display: none;
}

.m42_karte .m42_kachel_daten {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 12px 0 0;
}

/* padding-right und keine Spaltenluecke: die Trennlinie ist der border-top der
   EINZELNEN Zelle, eine Luecke risse sie in zwei Stuecke. Der Innenabstand
   liegt innerhalb des Rahmenkastens, die Linie bleibt also durchgehend.
   Noetig, seit die Kachel auf schmalen Fenstern weniger Polster hat: „Luftung,
   Klima" fuellte die linke Spalte ganz aus und stiess an die Jahreszahl. */
.m42_karte .m42_kachel_wert {
	padding: 15px 14px 13px 0;
	border-top: 1px solid var(--m42_kachel_linie);
}

/* Nicht gepflegte Angaben fallen weg, statt als Beschriftung ohne Wert
   dazustehen. Geprueft wird der Inhalt und nicht in PHP ausgelassen: die
   Kachelfassung auf der Startseite befuellt dieselben Knoten per JS neu
   (m42_karte.js, waehlen()) — die Zeile muss also wieder auftauchen, sobald
   der naechste Eintrag einen Wert hat. Gleiches Vorgehen wie beim leeren
   Kacheltext weiter oben. */
.m42_karte .m42_kachel_wert:has(dd:empty) {
	display: none;
}

/* Volumen steht allein in der zweiten Zeile. */
.m42_karte .m42_kachel_wert_breit {
	grid-column: 1 / -1;
}

.m42_karte .m42_kachel_wert dt,
.m42_karte .m42_kachel_wert dd {
	margin: 0;
	font-size: 1rem;
	line-height: 20px;
}

.m42_karte .m42_kachel_wert dt {
	color: rgba(255, 255, 255, .5);
	font-weight: inherit;
}

/* --- Link in der Kachel ------------------------------------------------ */

.m42_karte .m42_kachel_link {
	display: flex;
	align-items: center;
	gap: 11px;
	padding-top: 12px;
	border-top: 1px solid var(--m42_kachel_linie);
	font-size: .8824rem;
	line-height: 20px;
	text-decoration: none;
	transition: color .3s;
}

/* Derselbe Pfeil wie in den Schaltflaechen, nur kleiner (15.5 x 10 im
   Entwurf). Als Maske, damit die Farbe aus der Schrift kommt. */
.m42_karte .m42_kachel_link::before {
	content: '';
	flex: none;
	width: 15.5px;
	height: 10px;
	background-color: currentColor;
	/* Eigene Angabe noetig: `currentColor` folgt zwar der geerbten Farbe,
	   `background-color` wird aber ohne diese Zeile hart umgeschaltet — der
	   Pfeil sprang, waehrend die Schrift daneben weich wechselte. */
	transition: background-color .3s;
	-webkit-mask: var(--m42_pfeil) center / 15.5px 10px no-repeat;
	mask: var(--m42_pfeil) center / 15.5px 10px no-repeat;
	--m42_pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15'%3E%3Cpath d='M21.6939 6.80249L14.788 0.288565C14.591 0.10276 14.3281 0 14.0488 0C13.7695 0 13.5072 0.102163 13.3096 0.288565C13.1126 0.47437 13.0037 0.722308 13.0037 0.985781C13.0037 1.24925 13.1126 1.49659 13.3096 1.683L18.4344 6.51691H2.09022V1.58741C2.09022 1.04373 1.6215 0.601625 1.04511 0.601625C0.468715 0.601625 0 1.04373 0 1.58741V7.5003C0 8.04397 0.468715 8.48608 1.04511 8.48608C1.06664 8.48608 1.08691 8.48548 1.11035 8.48369H18.4351L13.3102 13.3176C13.1133 13.5034 13.0043 13.7513 13.0043 14.0148C13.0043 14.2783 13.1133 14.5256 13.3102 14.712C13.5142 14.9044 13.7815 15 14.0494 15C14.3173 15 14.5846 14.9038 14.7886 14.712L14.9279 14.58L21.6945 8.19751C22.1018 7.81336 22.1018 7.18784 21.6945 6.80368L21.6939 6.80249Z'/%3E%3C/svg%3E");
}

.m42_karte .m42_kachel_link:hover,
.m42_karte .m42_kachel_link:focus-visible {
	color: var(--primarlink_font_color);
}

/* Ohne eigene Projektseite gehoert der Link weg. Die Hilfsklasse des Parent
   allein reicht dafuer nicht: `.mM_d_none` ist eine Klasse, die Regel darueber
   sind zwei — das `display: flex` gewinnt und der Link blieb sichtbar (mit
   Ziel `#`). */
.m42_karte .m42_kachel_link.mM_d_none {
	display: none;
}

/* --- Auswahl fuer Hilfsmittel ------------------------------------------ */

/* Die Marker liegen auf der Karte und sind mit der Tastatur nicht erreichbar.
   Diese Liste macht dasselbe, bleibt aber unsichtbar bis sie Fokus bekommt —
   und sie ist der einzige Weg, solange die Karte nicht freigegeben ist. */
.m42_karte .m42_wahl {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	pointer-events: auto;
}

.m42_karte .m42_wahl:focus-within {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 20px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	border-radius: 5px;
	background-color: #1B1B1A;
	/* Sie haengt jetzt an .m42_buehne und nicht mehr in der Kachelebene —
	   also muss sie selbst ueber Karte (0), Schleier (1), Marker (2) und
	   Kachelebene (3) kommen. */
	z-index: 5;
}

.m42_karte .m42_wahl_titel,
.m42_karte .m42_wahl_knopf {
	color: #FFFFFF;
	font-size: 1rem;
	line-height: 24px;
}

.m42_karte .m42_wahl_titel { margin: 0 0 8px; font-weight: 600; }
.m42_karte .m42_wahl_liste { margin: 0; padding: 0; list-style: none; }

.m42_karte .m42_wahl_knopf {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	text-decoration: underline;
}

.m42_karte .m42_wahl_knopf[aria-pressed="true"] {
	color: var(--primarlink_font_color);
}


/* --- Listenfassung ------------------------------------------------------ */

/* Die Karte beginnt hier direkt auf der Trennlinie; der Zaehler steht nicht
   davor, sondern unten auf der Karte.

   Sie ist hoeher als das, was man von ihr sieht: die letzten 72px liegen
   hinter den Kacheln. Beides steht so im Entwurf — die Kartenflaeche ist dort
   778 hoch, die Kacheln beginnen aber schon nach 706. Der Nutzen ist
   praktisch: Googles Herkunftszeile und die Zoomknoepfe haengen an der
   UNTERKANTE der Karte, und die liegt damit in dem Bereich, den der Schleier
   ganz zugedeckt hat. */
.m42_liste {
	--m42_karte_hoehe: 778px;
	--m42_unterschlupf: 72px;
}

.m42_liste .m42_buehne {
	margin-top: 0;
}

/* Ohne Kachel auf der Karte gibt es links nichts freizuhalten — der Schleier
   blendet hier oben und unten aus statt links und oben.

   Die vier ersten Halte sind gegen das Kontrastprofil des Entwurfs eingepasst
   (mittlere Abweichung 0.081); dort waren es 3 % / 26 % / 58 % / 80 % einer
   706 hohen Flaeche — auf die 778 dieser Karte umgerechnet dieselben
   Bildpunkte.

   Der letzte Halt ist neu und nicht aus dem Entwurf: ab dort ist der Schleier
   VOLL deckend, damit die Karte hinter den Kacheln verschwindet. Als fester
   Abstand zur Unterkante und nicht in Prozent — was zugedeckt werden muss,
   sind Googles Leisten, und die sind immer gleich hoch, egal wie hoch die
   Karte ist. */
.m42_liste .m42_schleier {
	background-image: linear-gradient(180deg,
		#FFFFFF 0,
		#FFFFFF 3%,
		rgba(255, 255, 255, 0) 24%,
		rgba(255, 255, 255, 0) 53%,
		rgba(255, 255, 255, .65) 73%,
		#FFFFFF calc(100% - 88px),
		#FFFFFF 100%);
}

/* Die Markerebene endet dort, wo die sichtbare Karte endet. Marker liegen
   ueber dem Schleier — einer im zugedeckten Teil wuerde sonst zwischen den
   Kacheln auf weissem Grund stehen. */
.m42_liste .m42_marker_ebene {
	bottom: var(--m42_unterschlupf);
}

/* Zaehler und Raster ruecken um 43px in die Karte hinein — dort ist sie durch
   den Schleier ohnehin schon weiss. Eigener Stapelplatz, sonst laege die Karte
   darueber. */
.m42_liste .m42_unten {
	position: relative;
	z-index: 3;
	/* 43 in die sichtbare Karte hinein, dazu der Teil, der ohnehin hinter den
	   Kacheln liegt. */
	margin-top: calc(-43px - var(--m42_unterschlupf));
}

/* Der Abstand des Zaehlers zur Trennlinie gilt nur in der Kachelfassung —
   hier haengt er an der Unterkante der Karte. */
.m42_liste .m42_zaehler {
	margin-top: 0;
}

.m42_liste .m42_raster,
.m42_weitere .m42_raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* 3 x 491 + 20 + 21 = 1514, die Containerbreite des Entwurfs. */
	gap: 21px 20px;
	/* Ohne das waere jede Zeile nur so hoch wie ihre eigene laengste Kachel
	   und die Zeilen saehen unterschiedlich aus. Im Entwurf sind alle
	   Kacheln gleich hoch. */
	grid-auto-rows: 1fr;
	margin-top: 23px;
}

.m42_liste .m42_raster_kachel,
.m42_weitere .m42_raster_kachel {
	position: static;
	width: auto;
	max-width: none;
	display: flex;
	flex-direction: column;
	transition: opacity .3s;
}

/* Die Kacheln einer Zeile sind unterschiedlich lang beschriftet, im Entwurf
   liegen ihre Trennstriche aber auf einer Linie. Deshalb waechst der Inhalt
   mit und der Datenblock haengt sich an den unteren Rand. */
.m42_liste .m42_kachel_inhalt,
.m42_weitere .m42_kachel_inhalt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.m42_liste .m42_kachel_text,
.m42_weitere .m42_kachel_text {
	max-width: none;
	/* Mindestabstand zum ersten Trennstrich, sonst klebt der kuerzeste Text
	   in der Zeile daran. */
	margin-bottom: 12px;
}

.m42_liste .m42_kachel_daten,
.m42_weitere .m42_kachel_daten {
	margin-top: auto;
}

/* --- Auswahl in der Listenfassung --------------------------------------- */

/* Von Haus aus ist nichts gewaehlt: alle Marker schwarz, alle Kacheln voll
   deckend. Erst ein Klick auf einen Marker holt eine Kachel nach vorn und
   nimmt den uebrigen die Deckkraft. */
.m42_liste.is_gewaehlt .m42_raster_kachel {
	opacity: .35;
}

.m42_liste .m42_raster_kachel.is_gewaehlt {
	order: -1;
	opacity: 1;
}

/* Waehrend des Umsortierens laeuft jede Kachel von ihrem alten Platz zum
   neuen (FLIP). Der Ausgleichssprung selbst darf nicht mitlaufen — das
   schaltet das JS ueber diese Klasse. */
.m42_liste .m42_raster_kachel.is_springt {
	transition: none;
}

.m42_liste .m42_raster_kachel.is_wandert {
	transition: opacity .3s, transform .4s cubic-bezier(.4, 0, .2, 1);
}

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

	.m42_liste .m42_raster_kachel,
	.m42_liste .m42_raster_kachel.is_wandert {
		transition: none;
	}
}

/* --- Kleinere Stufen ---------------------------------------------------- */

@media screen and (max-width: 1399px) {
	.m42_karte .m42_kopf {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media screen and (max-width: 991px) {
	.m42_karte .m42_kopf {
		grid-template-columns: minmax(0, 1fr);
	}

	.m42_karte .m42_titel_spalte { grid-column: 1; grid-row: 1; }
	.m42_karte .m42_text_spalte  { grid-column: 1; grid-row: 2; margin-top: 24px; }

	.m42_karte .m42_text { margin-top: 0; max-width: none; }

	/* Die Kachel liegt nicht mehr auf der Karte, sondern darunter — auf einem
	   Telefon deckt sie sonst die halbe Karte ab. */
	.m42_karte {
		--m42_karte_hoehe: 420px;
	}

	.m42_kachelfassung .m42_kachel_ebene {
		position: static;
		pointer-events: auto;
	}

	/* Nur die eine Kachel der Kachelfassung — die Kacheln im Raster stehen
	   ohnehin im Fluss und duerfen keine feste Hoechstbreite bekommen. */
	.m42_kachelfassung .m42_kachel {
		position: static;
		width: auto;
		max-width: 420px;
		margin: 24px auto 0;
	}
}

@media screen and (max-width: 1199px) {

	.m42_liste .m42_raster,
	.m42_weitere .m42_raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 991px) {

	/* Die Karte wird flacher, damit auf dem Telefon nicht die halbe Seite
	   Karte ist: 420 sichtbar, der Unterschlupf bleibt. Der Zaehler rutscht
	   aus der Karte heraus, sie reicht aber weiter hinter die Kacheln —
	   sonst staende Googles Leiste wieder frei. */
	.m42_liste {
		--m42_karte_hoehe: 492px;
	}

	.m42_liste .m42_unten {
		margin-top: calc(24px - var(--m42_unterschlupf));
	}

	.m42_liste .m42_raster {
		margin-top: 20px;
	}
}

@media screen and (max-width: 767px) {

	.m42_liste .m42_raster,
	.m42_weitere .m42_raster {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Einzelfassung ------------------------------------------------------
 *
 * Entwurf 58:1224 (Referenz-Unterseite): Kopf mittig, darunter die Trennlinie
 * und die Karte mit dem einen Ort. Kein Zaehler, keine Kacheln.
 *
 * Masse bei 1920: Titel oben, Text 28px darunter (Breite 523), Trennlinie
 * 56px unter dem Text, Karte direkt an der Linie, 566 hoch.
 */

.m42_einzel {
	--m42_karte_hoehe: 566px;
	--m42_unterschlupf: 72px;
}

/* Googles Zoomknoepfe und die Herkunftszeile haengen an der UNTERKANTE der
   Karte. In der Listenfassung liegt die hinter den Kacheln — hier gibt es
   keine, also wird die Karte hoeher gemacht als das Fenster, das man von ihr
   sieht, und mittig darin verschoben: oben und unten faellt je die halbe
   Zugabe weg, die Leisten damit auch.

   Die Karte MITTIG zu versetzen und nicht nur unten abzuschneiden ist
   noetig, weil der Marker im Mittelpunkt der Karte sitzt — der Entwurf zeigt
   ihn in der Mitte der sichtbaren Flaeche (58:1143). Die Markerebene wandert
   mit, sonst rechnet das JS gegen ein anderes Fenster als das der Karte. */
.m42_einzel .m42_flaeche {
	overflow: hidden;
}

.m42_einzel .m42_flaeche .wpgmza_map,
.m42_einzel .m42_flaeche .m42_marker_ebene {
	top: calc(var(--m42_unterschlupf) / -2);
	bottom: auto;
	height: calc(var(--m42_karte_hoehe) + var(--m42_unterschlupf)) !important;
}

.m42_einzel .m42_flaeche .wpgmza_map {
	position: relative;
}

/* Die Zugabe deckt die Herkunftszeile ganz unten zu, nicht aber die
   Zoomknoepfe — die setzt Google mit Abstand ueber die Kante (nachgemessen
   endeten sie 69px darueber und ragten damit ins Bild). Sie sind reine
   Bedienung und keine Attribution, also gehen sie hier aus; auf einer
   Detailseite soll die Karte ohnehin still stehen. Die Herkunftszeile bleibt
   im Markup und wird nur verdeckt — wie in der Listenfassung. */
.m42_einzel .m42_flaeche .gm-bundled-control,
.m42_einzel .m42_flaeche .gm-bundled-control-on-bottom {
	display: none !important;
}

/* Aus zwei Spalten wird eine mittige. Das Raster bleibt bestehen, damit die
   Injektion des Parents (Titel in die Titelspalte) unveraendert greift. */
.m42_einzel .m42_kopf {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
}

.m42_einzel .m42_titel_spalte,
.m42_einzel .m42_text_spalte {
	grid-column: 1;
}

/* Hier stehen Titel und Text UNTEREINANDER — anders als in den beiden anderen
   Fassungen, wo sie nebeneinander sitzen. Deshalb schlaegt der globale
   `margin-bottom: 22px` der h2 (project.css) hier durch und kaeme zu den 28px
   des Textes hinzu: nachgemessen 50 statt 28. */
.m42_einzel .m42_titel_spalte > *,
.m42_einzel .m42_titel_spalte > * > * {
	margin-bottom: 0;
}

.m42_einzel .m42_text {
	max-width: 523px;
	margin-left: auto;
	margin-right: auto;
}

/* Der Abstand ueber der Linie ist hier kleiner als in den beiden anderen
   Fassungen (56 statt 62), und die Karte beginnt direkt an der Linie. */
.m42_einzel .m42_trenner {
	margin-top: 56px;
}

.m42_einzel .m42_buehne {
	margin-top: 0;
}

/* Kein Verlauf von links. Der stammt aus der Kachelfassung, wo er die Flaeche
   unter der Kachel aufhellt — hier liegt dort nichts, und die Karte wirkte
   nur an einer Seite angeschnitten. Der weiche Beginn unter der Trennlinie
   bleibt.

   Dazu der Ausklang nach UNTEN: im Entwurf verblassen die Ortsnamen zum Fuss
   der Karte hin, bis dort nur noch Weiss steht — nachgemessen am oertlichen
   Kontrast der Kartenzeichnung (58:1224) beginnt die Aufhellung rund 200px
   ueber der Unterkante, also bei 36 % der 566px hohen Flaeche, und ist die
   letzten ~34px (6 %) vollstaendig weiss. Ohne ihn endete die Karte mit einer
   sichtbaren Kante. Der zweite Verlauf laeuft mit `0deg` von unten nach oben
   und ueberschneidet den oberen (0–27 %) nicht. */
.m42_einzel .m42_schleier {
	background-image:
		linear-gradient(180deg, #FFFFFF 0, #FFFFFF 8%, rgba(255, 255, 255, 0) 27%),
		linear-gradient(0deg, #FFFFFF 0, #FFFFFF 6%, rgba(255, 255, 255, 0) 36%);
}

/* Der Marker steht in der Mitte und ist nichts zum Anklicken — die Fassung
   kennt keine Auswahl. Er traegt trotzdem `is_aktiv`: der Entwurf zeigt
   denselben roten Ring, nur groesser (58:1143 — 30px Ring, 21.818px Kern,
   also 4.09px Einzug statt der 3px bei 24px). */
.m42_einzel .m42_marker {
	cursor: default;
}

.m42_einzel .m42_marker.is_aktiv {
	width: 30px;
	height: 30px;
}

.m42_einzel .m42_marker.is_aktiv::after {
	inset: 4.09px;
}

@media screen and (max-width: 991px) {
	.m42_einzel {
		--m42_karte_hoehe: 420px;
	}

	.m42_einzel .m42_trenner {
		margin-top: 40px;
	}
}

@media screen and (max-width: 575px) {
	.m42_einzel {
		--m42_karte_hoehe: 320px;
	}
}

/* --- Weitere-Fassung ----------------------------------------------------
 *
 * Entwurf 62:350 (Referenz-Unterseite, unten): der Titel, darunter drei
 * Kacheln in einer Reihe. Keine Karte, keine Trennlinie, kein Zaehler.
 *
 * Die Kachel ist dieselbe wie in der Listenfassung. Deren Regeln haengen an
 * `.m42_liste` — statt sie hier zu spiegeln, sind ihre LAYOUT-Selektoren
 * weiter oben um `.m42_weitere` erweitert (Raster, Kachel, Inhalt, Text,
 * Datenblock und die beiden Rasterstufen). Die Auswahl-Regeln bleiben aussen
 * vor: hier gibt es nichts zu waehlen. An der Uebersichtsseite aendert eine
 * Selektor-Erweiterung nichts.
 *
 * Masse bei 1920: Kacheln 49px unter dem Titel, 3 x 491 mit 21px Luecke.
 */

/* Der einzige Masswert, der von der Listenfassung abweicht: dort stehen die
   Kacheln 23px unter der Karte, hier 49px unter dem Titel. */
.m42_weitere .m42_raster {
	margin-top: 49px;
}

/* Die ganze Kachel fuehrt zur Detailseite, nicht nur die Zeile „Projekt im
   Detail". Ueber das ausgestreckte Pseudoelement des vorhandenen Links und
   nicht ueber ein zweites <a> um die Kachel: so bleibt es EIN Link im
   Tab-Lauf und es entstehen keine verschachtelten Anker.

   Referenzen ohne eigene Projektseite haben keinen Link (`mM_d_none`, siehe
   `$e['url']` im PHP) — dort bleibt die Kachel folgerichtig stumm, eine
   Verlinkung fuehrte auf den 404 aus `inc/referenz.php`. */
/* `top: auto` gehoert zwingend dazu: die Grundregel `.m42_karte .m42_kachel`
   ist `position: absolute; top: 98px` — in der Kachelfassung liegt die Kachel
   dort auf der Karte. Die Listenfassung stellt auf `static`, womit `top`
   wirkungslos ist. Sobald hier wieder positioniert wird, greift die alte
   Angabe erneut und schiebt die Kacheln 98px nach unten. */
.m42_weitere .m42_raster_kachel {
	position: relative;
	top: auto;
}

.m42_weitere .m42_kachel_link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Damit die Flaeche sich auch anfuehlt wie ein Link: der Zeiger ueber der
   ganzen Kachel, und der Pfeil faerbt sich mit, egal wo man steht. */
.m42_weitere .m42_raster_kachel:has(.m42_kachel_link:not(.mM_d_none)) {
	cursor: pointer;
}

.m42_weitere .m42_raster_kachel:hover .m42_kachel_link {
	color: var(--primarlink_font_color);
}

/* Der Titel steht allein: kein Text daneben, also auch keine zweite Spalte. */
.m42_weitere .m42_kopf {
	grid-template-columns: minmax(0, 1fr);
}

/* h2 bringt global 22px Abstand nach unten mit — der Abstand zu den Kacheln
   steht am Raster. */
.m42_weitere .m42_titel_spalte > *,
.m42_weitere .m42_titel_spalte > * > * {
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {
	.m42_weitere .m42_raster {
		margin-top: 36px;
	}
}

/* --- Kachelfassung auf schmalen Fenstern --------------------------------
 *
 * Der Entwurf hat fuer dieses Modul keinen Mobilrahmen. Die Werte hier sind
 * gesetzt, nicht gemessen.
 */

@media screen and (max-width: 991px) {

	/* Der Weissverlauf von LINKS hat genau einen Zweck: auf dem Schreibtisch
	   liegt die Kachel auf der Karte und braucht dort einen ruhigen Grund. Ab
	   hier steht sie unter der Karte — der Verlauf bleicht dann nur noch die
	   halbe Flaeche aus. Der von oben bleibt, er loest die Kante zum Zaehler
	   auf.

	   Dazu kommt hier einer von UNTEN: auf dem Schreibtisch liegt die Kachel
	   auf der Kartenunterkante und deckt sie ab, gestapelt steht die Karte
	   als Band mit zwei harten Kanten quer durch die Seite. 15 % sind auf dem
	   380px-Band 57px — nur der Rand, damit die Marker frei bleiben (der
	   Markerhaufen sitzt mittig). Prozent und nicht px, damit es mit der
	   Bandhoehe wandert.

	   Die Verlaeufe ueberlagern sich nicht: der obere ist ab 27 % ganz
	   durchsichtig, der untere erst ab 85 % ueberhaupt vorhanden — sonst
	   waere die Mitte heller als beide Enden. */
	.m42_kachelfassung .m42_schleier {
		background-image:
			linear-gradient(180deg, #FFFFFF 0, #FFFFFF 8%, rgba(255, 255, 255, 0) 27%),
			linear-gradient(0deg, #FFFFFF 0, rgba(255, 255, 255, 0) 15%);
	}

	/* Abstand unter der Kachel.

	   Auf dem Schreibtisch liegt die Kachel absolut auf der Karte — die
	   Sektion endet dort mit der Kartenunterkante, und die Zeile steht
	   deshalb bewusst auf `innerer_abstand_nur_oben`. Gestapelt steht die
	   Kachel im Fluss und ist damit das letzte Element: ihre Unterkante war
	   gemessen die Sektionsunterkante (0px), und weil das naechste Modul
	   (m27) dieselbe dunkle Flaeche hat wie die Kachel, liefen beide
	   ineinander.

	   Nur wenn die Zeile nicht selbst schon einen unteren Abstand hat —
	   sonst stuenden zwei uebereinander. Element plus zwei Klassen
	   ueberstimmen den Attribut-Selektor des Themes, der hier
	   `padding-bottom: 0` setzt. */
	section.m42_karte.m42_kachelfassung:not([data-innerer-abstand*="unten"]) {
		padding-bottom: var(--modul_abstand);
	}

	/* Googles Zoomtasten verdeckt auf dem Schreibtisch die aufliegende Kachel.
	   Hier verdeckt sie nichts mehr, und auf einem Telefon zoomt man ohnehin
	   mit zwei Fingern. Nur die Tasten — die Herkunftszeile bleibt stehen. */
	.m42_kachelfassung .m42_flaeche .gm-bundled-control,
	.m42_kachelfassung .m42_flaeche .gm-bundled-control-on-bottom {
		display: none !important;
	}
}

@media screen and (max-width: 575px) {
	.m42_kachelfassung {
		--m42_karte_hoehe: 380px;
	}

	.m42_kachelfassung .m42_kachel_inhalt {
		padding: 0 24px 26px;
	}

	.m42_kachelfassung .m42_kachel_titel {
		padding-top: 22px;
	}
}

@media screen and (max-width: 430px) {

	/* Die Kartenhoehe bleibt hier bei den 380px von oben. 340 waren
	   nachgemessen zu wenig: der Markerhaufen ist hoeher als breit, also
	   bestimmt die HOEHE die Zoomstufe — bei 340 abzueglich Rand blieben ihm
	   224px und Google zeichnete auf der Stufe keinen einzigen Ortsnamen mehr.
	   Die Karte sah dann aus wie eine leere graue Flaeche. */

	.m42_kachelfassung .m42_kachel_bild {
		height: 180px;
	}
}