/* Stationskarte auf /bus/ - Kartenbox, Einwilligungsfeld, Liste. */

.kt-stationen { margin-top: 1.5rem; }

/* Platzhalter, solange die Karte nicht geladen ist. */
.kt-osm-consent {
	border: 1px solid var(--wp--preset--color--border, #d7e0ef);
	border-radius: 12px;
	background: var(--wp--preset--color--surface, #f2f6fb);
	padding: 1.5rem;
	text-align: center;
}
.kt-osm-consent p { margin: 0 0 0.75rem; }
.kt-osm-consent p:last-child { margin-bottom: 0; }
.kt-osm-consent__title { font-size: 1.1rem; }
.kt-osm-consent__hint { font-size: 0.95rem; }

.kt-osm-map {
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 320px;
	border: 1px solid var(--wp--preset--color--border, #d7e0ef);
	border-radius: 12px;
	/* Leaflet zeichnet eigene Ebenen; ohne das Abschneiden stehen die
	   Kacheln an den Ecken ueber dem Rahmen. */
	overflow: hidden;
	/* Unter dem Header bleiben: Leaflet setzt intern hohe z-index-Werte. */
	z-index: 0;
	isolation: isolate;
}
.kt-osm-map .leaflet-container { font: inherit; }

/* Hinweis zur Bedienung - erscheint kurz, wenn jemand ohne Zusatztaste
   ueber der Karte scrollt bzw. mit einem Finger wischt. */
.kt-osm-hinweis {
	position: absolute;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	text-align: center;
	font-size: 1.05rem;
	font-weight: 600;
	color: #fff;
	background: rgba(0, 20, 40, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	pointer-events: none;
}
.kt-osm-hinweis-an .kt-osm-hinweis { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
	.kt-osm-hinweis { transition: none; }
}

/* Kartenbild zurueckgenommen, damit die blauen Marker hervortreten. Der
   Filter liegt auf der Kachel-Ebene, nicht auf den einzelnen Kacheln -
   sonst zeichnen sich die Kachelraender ab. */
.kt-osm-map .leaflet-tile-pane {
	filter: saturate(0.25) contrast(0.9) brightness(1.08);
}

/* Eigener Marker: das divIcon von Leaflet haette sonst weissen Kasten
   und Rahmen. */
.kt-osm-marker { background: none; border: 0; }
.kt-osm-marker svg { display: block; filter: drop-shadow(0 2px 3px rgba(0, 20, 40, 0.35)); }

/* Sprechblase in der Anmutung der Seite. */
.kt-osm-map .leaflet-popup-content-wrapper {
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0, 20, 40, 0.18);
}
.kt-osm-map .leaflet-popup-content { margin: 0.75rem 1rem; line-height: 1.5; }
.kt-osm-popup__title a {
	color: var(--wp--preset--color--primary, #002f5f);
	font-size: 1.02rem;
}
.kt-osm-map .leaflet-control-attribution { font-size: 0.7rem; }

/* Liste unter der Karte. */
.kt-stationen__liste { margin-top: 2rem; }
.kt-stationen__liste .kt-list__place {
	margin: 0.15rem 0 0;
	font-size: 0.95rem;
	color: #2e3d55;
}
/* Fuehrt zur Routenplanung bei Google Maps - ein normaler Link nach
   draussen, nichts wird eingebettet. */
.kt-stationen__route {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.3rem 0.75rem;
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--wp--preset--color--primary, #002f5f);
	border: 1px solid var(--wp--preset--color--primary, #002f5f);
	border-radius: 6px;
}
.kt-stationen__route:hover,
.kt-stationen__route:focus {
	background: var(--wp--preset--color--primary, #002f5f);
	color: #fff;
}
.kt-osm-popup__route {
	display: inline-block;
	margin-top: 0.35rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--primary, #002f5f);
}

@media (max-width: 600px) {
	.kt-osm-map { aspect-ratio: 4 / 3; }
	.kt-osm-consent { padding: 1.25rem 1rem; }
}