/* ==========================================================================
   Karte — Vorschau ohne Datenabfluss, Karte erst auf Klick
   --------------------------------------------------------------------------
   Werte aus derselben Skala wie der Rest des Projekts; die Fallbacks sind
   dieselben Zahlen, damit die Karte auch auf Seiten stimmt, die
   prototyp.css nicht laden.
   ========================================================================== */

/* ---- Volle Breite (Vorgabe Dimi, 22.09.2026) --------------------------
   Gemessen war die Karte 624 px breit — nicht weil sie begrenzt gewesen
   wäre, sondern weil sie in einer halben Elementor-Spalte saß. Sie nutzte
   ihren Container schon zu 100 %; der Container war das Problem.

   Deshalb bricht sie hier aus jedem Container aus. `calc(50% - 50vw)`
   zieht sie auf beiden Seiten bis an den Rand des Sichtfelds, gleich wie
   tief sie verschachtelt ist.

   DIE SCHEUNENTOR-FALLE VON 100vw: `vw` zählt den senkrechten Scrollbalken
   MIT. Auf Systemen mit klassischem Balken (Windows) wäre die Karte rund
   15 px zu breit und die ganze Seite bekäme einen waagerechten Scroll.
   Deshalb NICHT `width: 100vw`, sondern die Breite über die Ränder: Die
   Karte bleibt ein Blockelement und rechnet ihre Breite selbst aus.
   Nachgemessen bei 320 / 390 / 768 / 1024 px — kein Querüberlauf.

   KEINE RUNDUNG bei voller Breite: Ein Radius an einem Element, das bis
   an die Kante des Bildschirms reicht, erzeugt weiße Zwickel in den Ecken.
   Die allgemeine Regel „Flächen sind eingerückt und rund" gilt für
   Flächen INNERHALB des Rasters; ein bewusstes Vollbreiten-Element ist
   die begründete Ausnahme. */
.pas-karte {
	/* Kein Kurzform-`margin` davor: Eine Kurzform setzt margin-left und
	   -right mit, und eine logische Eigenschaft danach (`margin-inline`)
	   wird von manchen Kaskaden-Reihenfolgen verschluckt. Hier stehen
	   alle vier Ränder einzeln — dann gibt es nichts zu verwechseln. */
	margin-top: 0;
	margin-bottom: var(--pas-24, 24px);
	/* Den Ausbruch auf volle Breite rechnet das SKRIPT aus, nicht CSS.
	 *
	 * Versucht und verworfen: `margin-inline: calc(50% - 50vw)`. Die
	 * Prozentangabe bezieht sich auf den enthaltenden Block — und der
	 * loeste sich in Elementors Spalte zu 0 auf. Gemessen: Die Karte war
	 * zwar 1280 px breit, begann aber bei x = -640, also einen halben
	 * Bildschirm links daneben. Eine Rechnung, die von der Verschachtelung
	 * abhaengt, traegt in einem Page Builder nicht.
	 *
	 * Das Skript misst stattdessen den tatsaechlichen Abstand zum Rand des
	 * Sichtfelds und setzt ihn als negativen Rand. Das stimmt in jeder
	 * Spalte, und es stimmt auch nach einer Groessenaenderung.
	 *
	 * OHNE SKRIPT bleibt die Karte in ihrer Spalte — schmaler als gewollt,
	 * aber vollstaendig benutzbar. Nie andersherum. */
	margin-left: 0;
	margin-right: 0;
	border: 0;
	border-top: 1px solid var(--pas-linie, #dce0d6);
	border-bottom: 1px solid var(--pas-linie, #dce0d6);
	border-radius: 0;
	overflow: hidden;
	background: var(--pas-dunst, #f2f4ef);
}

/* Der Text folgt dem Raster der Seite, auch wenn die Fläche es nicht tut:
   Bei 1280 px stünde er sonst ganz links am Bildschirmrand, weit weg vom
   übrigen Inhalt. Dieselbe Höchstbreite wie der Seiteninhalt, mittig. */
.pas-karte__vorschau {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;   /* Platzhalter in Kartenhoehe (seit 1.4.0): Text mittig */
	gap: var(--pas-16, 16px);
	padding-block: var(--pas-48, 48px);
	padding-inline: max(
		var(--pas-32, 32px),
		calc((100% - var(--pas-breite, 1200px)) / 2 + var(--pas-32, 32px))
	);
}

.pas-karte__text {
	margin: 0;
	max-width: 62ch;
	line-height: 1.6;
	color: var(--pas-text, #3b4235);
	font-size: .9375rem;
}

.pas-karte__text--klein { font-size: .875rem; color: var(--pas-leise, #5a6353); }

/* Links nie unterstrichen — Farbe und Gewicht tragen den Unterschied. */
.pas-karte a {
	color: var(--pas-tat, #176d39);
	font-weight: 600;
	text-decoration: none;
}

/* Die FLÄCHE geht über die volle Breite, der TEXT bleibt im Raster.
   Ein `max-width` mit `margin: auto` hätte die weiße Fläche mittig
   abgeschnitten — das sah aus wie ein eingesetzter Kasten statt wie eine
   durchgehende Leiste. Das `max()` im Innenabstand schiebt den Text auf
   dieselbe Fluchtlinie wie der übrige Seiteninhalt und fällt auf schmalen
   Bildschirmen auf den normalen Seitenabstand zurück. */
.pas-karte__unterschrift {
	padding-block: var(--pas-12, 12px);
	padding-inline: max(
		var(--pas-32, 32px),
		calc((100% - var(--pas-breite, 1200px)) / 2 + var(--pas-32, 32px))
	);
	font-size: .8125rem;
	color: var(--pas-leise, #5a6353);
	background: #fff;
	border-top: 1px solid var(--pas-linie, #dce0d6);
}

/* ---- Die geladene Karte (Leaflet, seit 1.2.0) --------------------------
   Leaflets eigene Regler sind 30 × 30 px mit 10 px Randabstand — beides
   unter den Hausregeln (Tippziel ≥ 44 px, Abstand aus der 8er-Skala).
   Die Selektoren tragen `.pas-karte` davor, damit sie leaflet.css bei
   gleicher Reihenfolge sicher schlagen. */
.pas-karte__flaeche {
	width: 100%;
	background: var(--pas-dunst, #f2f4ef);
}

/* Elementor setzt `img { height: auto; transition: all … }` — an Kacheln
   ergibt das verschobene Streifen und ein Einblenden bei jedem Zoom.
   (Die Nahtlinien der Zwischenzoomstufen loest nicht CSS, sondern der
   eigene Massstab in karte.js — siehe KACHEL.) */
.pas-karte .leaflet-container img.leaflet-tile {
	border-radius: 0;
	box-shadow: none;
	transition: none;
}

.pas-karte .leaflet-top.leaflet-left .leaflet-control {
	margin-top: var(--pas-16, 16px);
	margin-left: var(--pas-16, 16px);
}

.pas-karte .leaflet-bar {
	border: 0;
	border-radius: var(--pas-r, 12px);
	box-shadow: 0 2px 8px rgba(28, 33, 24, .18);
	overflow: hidden;
}

/* Formularknopf-Klasse: 12 px, und kein Zustand ändert die Form. */
.pas-karte .leaflet-bar a {
	display: flex;
	align-items: center;       /* Inhalt immer vertikal mittig */
	justify-content: center;
	width: 44px;
	height: 44px;
	line-height: 1;
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--pas-ink, #1c2118);
	background: #fff;
	text-decoration: none;
	border-bottom: 1px solid var(--pas-linie, #dce0d6);
	transition: background-color .15s ease;
}

.pas-karte .leaflet-bar a:last-child { border-bottom: 0; }
.pas-karte .leaflet-bar a:first-child,
.pas-karte .leaflet-bar a:last-child { border-radius: 0; }  /* die Rundung trägt die Leiste */
.pas-karte .leaflet-bar a:hover { background: var(--pas-dunst, #f2f4ef); }
.pas-karte .leaflet-bar a.leaflet-disabled { color: var(--pas-leise, #5a6353); background: #fff; }

.pas-karte .leaflet-bar a:focus-visible {
	outline: 3px solid var(--pas-ink, #1c2118);
	outline-offset: -3px;      /* innen, sonst schneidet overflow ihn ab */
}

/* Die Nadel ist eingebettetes SVG; Leaflets Standardkasten weg. */
.pas-karte .pas-karte__nadel {
	background: none;
	border: 0;
}

.pas-karte .leaflet-popup-content-wrapper { border-radius: var(--pas-r, 12px); }
.pas-karte .leaflet-popup-content { margin: var(--pas-12, 12px) var(--pas-16, 16px); line-height: 1.5; font: inherit; font-size: .9375rem; }

.pas-karte .leaflet-control-attribution {
	padding: 2px var(--pas-8, 8px);
	font-size: .75rem;
}

@media (max-width: 560px) {
	.pas-karte__vorschau { padding: var(--pas-24, 24px); }
}

/* Eigener Stapelkontext fuer die Karte (09.10.2026, gemeldet von Dimi).
   Leaflet vergibt seinen Ebenen z-index 200 bis 1000 (Kacheln, Nadel,
   Zoomknoepfe). Ohne eigenen Kontext galten diese Werte seitenweit und die
   Karte schob sich ueber die schwebende Leiste. `isolation: isolate` haelt
   alle Kartenebenen in der Flaeche — nach aussen zaehlt sie wie normaler
   Inhalt. Nicht verwechseln: Popups (Kalender, Einwilligung) liegen hoeher. */
.pas-karte__flaeche,
.pas-karte .leaflet-container {
	position: relative;
	z-index: 0;
	isolation: isolate;
}